postit-container-controllet.html 10.9 KB
<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">

<link rel="import" href="../../controllets/search-panel-controllet/search-panel-controllet.html">

<dom-module id="postit-container-controllet">

    <style>

        iron-icon.postit {
            padding: 2px;
            margin: 0px;
            color: #FFFFFF;
            height: 32px;
            width: 32px;
            background-color: #00BCD4;
        }

        .button-container {
            cursor: pointer;
            text-decoration:none;
            color:#000;
            background:#ffc;
            display:block;
            height:40px;
            width:40px;
            padding:10px;
            /* Firefox */
            -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
            /* Safari+Chrome */
            -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            /* Opera */
            box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            -o-transform:rotate(4deg);
            -webkit-transform:rotate(4deg);
            -moz-transform:rotate(4deg);
        }

        .button-container p{
            -o-transform:rotate(4deg);
            -webkit-transform:rotate(4deg);
            -moz-transform:rotate(4deg);
            font-size: 5px;
            line-height: 3px;
        }

        .button-container:hover {
            box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
            -webkit-transition: 0.2s ease-out;
            -moz-transition: 0.2s ease-out;
            -o-transition: 0.2s ease-out;
            -ms-transition: 0.2s ease-out;
            transition: 0.2s ease-out;
        }

        .postitwindow {
            /*height: 80vh;
            width: 120vh;*/
            display: none;
            width: 50%;
            height: 80%;
            position: fixed;
            top: 15%;
            left: 50%;
            margin-right: auto;
            margin-left: auto;
            z-index: 1000;
        }

        .transparent {
            position:absolute;
            top:0;
            left:0;
            width: 100%;
            height: 12%;
            background-color: rgba(0, 0, 0, 0.4);
        }

        paper-fab.close {
            position: absolute;
            height: 32px;
            width: 32px;
            margin: 8px;
            top: 0px;
            right: 0px;
            --paper-fab-background:#B6B6B6;
            /*z-index: 9999;*/
        }

        paper-fab#addPostit {
            position: absolute;
            height: 32px;
            width: 32px;
            margin: 8px;
            top: 0px;
            right: 48px;
            --paper-fab-background:#2196F3;
            /*z-index: 9999;*/
        }

        #container_content {
            position: relative;
            overflow: auto;
            height: 100%;
            background-color: transparent;
            z-index: 1000;
            margin-top : 7%;
        }

        h2,p{
            font-size:100%;
            font-weight:normal;
            word-break: break-all;
        }
        ul,li{
            list-style:none;
        }
        ul{
            overflow:hidden;
            padding:3em;
        }
        ul li a{
            text-decoration:none;
            color:#000;
            background:#ffc;
            display:block;
            height:10em;
            width:10em;
            padding:1em;
            -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
            -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            -moz-transition:-moz-transform .15s linear;
            -o-transition:-o-transform .15s linear;
            -webkit-transition:-webkit-transform .15s linear;
        }
        ul li{
            margin:10px;
            float:left;
        }
        ul li h3{
            font-size:100%;
            font-weight:bold;
        }
        ul li p{
            /*font-family:"Reenie Beanie",arial,sans-serif;*/
            font-size:60%;
        }
        ul li a{
            -webkit-transform: rotate(-6deg);
            -o-transform: rotate(-6deg);
            -moz-transform:rotate(-6deg);
        }
        ul li:nth-child(even) a{
            -o-transform:rotate(4deg);
            -webkit-transform:rotate(4deg);
            -moz-transform:rotate(4deg);
            position:relative;
            top:5px;
            background:#cfc;
        }
        ul li:nth-child(3n) a{
            -o-transform:rotate(-3deg);
            -webkit-transform:rotate(-3deg);
            -moz-transform:rotate(-3deg);
            position:relative;
            top:-5px;
            background:#ccf;
        }
        ul li:nth-child(5n) a{
            -o-transform:rotate(5deg);
            -webkit-transform:rotate(5deg);
            -moz-transform:rotate(5deg);
            position:relative;
            top:-10px;
        }
        ul li a:hover,ul li a:focus{
            box-shadow:10px 10px 7px rgba(0,0,0,.7);
            -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
            -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
            -webkit-transform: scale(1.25);
            -moz-transform: scale(1.25);
            -o-transform: scale(1.25);
            position:relative;
            z-index:5;
        }

        #addForm{
            text-decoration:none;
            color:#000;
            background:#ffc;
            display:none;
            height:20em;
            width:20em;
            padding:1em;
            -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
            -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            -moz-transition:-moz-transform .15s linear;
            -o-transition:-o-transform .15s linear;
            -webkit-transition:-webkit-transform .15s linear;
            position: absolute;
            top: 25%;
            left: 25%;
        }

        #newTitle{
            background: #E6E6E6;
            border-radius: 3px;
        }

        #newTitle:focus{
            background: transparent;
            border-radius: 3px;
            border: 2px solid #2196F3;
        }

        #newContent{
            background: #E6E6E6;
            border-radius: 3px;
        }

        #newContent:focus{
            background: transparent;
            border-radius: 3px;
            border: 2px solid #2196F3;
        }

        [contenteditable=true]:empty:before {
            content: attr(placeholder);
            display: block; /* For Firefox */
        }

    </style>

    <template>

        <div class="button-container" title$="{{tooltip}}" on-click="_onOpenClick">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>

        <paper-material id="window" class="postitwindow" elevation="0">

            <div class="transparent"></div>

            <paper-fab class="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
            <paper-fab id="addPostit" icon="add" title='Add new postit' class="dropdown-trigger" on-click="_onAddPostitClick"></paper-fab>
            <div id="container_content">
                <content>
                    <ul id="postit_container">

                        <template is="dom-repeat" items="{{data}}">
                            <li>
                                <a href="#">
                                    <h3>{{item.title}}</h3>
                                    <p>{{unescapeString(item.content)}}</p>
                                </a>
                            </li>
                        </template>
                    </ul>

                    <div id="addForm">
                        <h3 id="newTitle" contentEditable="true" onkeypress="return (this.innerText.length <= 13)" placeholder="Title"></h3>
                        <p id="newContent" contentEditable="true" onkeypress="return (this.innerText.length <= 199)" placeholder="Content"></p>
                        <paper-fab class="close" mini icon="close" on-click="_onCloseCreatePostitFormClick"></paper-fab>
                        <paper-fab id="addPostit" icon="save" title='Add new postit' class="dropdown-trigger" on-click="_onAddNewPostitFormClick" ></paper-fab>
                    </div>

                </content>
            </div>

        </paper-material>


    </template>

    <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>

    <script>

        Polymer({

            is: 'postit-container-controllet',

            properties: {
                tooltip: {
                    type: String,
                    value: ""
                },
                data : {
                    type: Array,
                    value: undefined
                },

                open : {
                    type: Boolean,
                    value: false
                }
            },

            ready: function(){
                $(this.$.container_content).perfectScrollbar();
                if(this.open == true) $(this.$.window).show();
            },

            _onOpenClick: function() {
                $(this.$.window).show();
            },

            _onCloseClick: function(){
                $(this.$.window).hide();
            },

            _onAddPostitClick: function(){
                this.$.addForm.style.display = "block";
            },

            _onCloseCreatePostitFormClick: function(){
                this.$.addForm.style.display = "none";
            },

            _onAddNewPostitFormClick: function(){
                //$(this.$.postit_container).append('<li><a href="#"><h2>' + this.$.newTitle.innerText + '</h2><p>' + this.$.newContent.innerText + '</p></a></li>');
                this.fire('postit-container-controllet_create-new-postit', {title : this.$.newTitle.innerText, content: this.$.newContent.innerText, id: this.id});
                this.$.addForm.style.display  = "none";
                this.$.newTitle.innerHTML   = "Title";
                this.$.newContent.innerHTML = "Content";

            },

            unescapeString: function(string){
                return string
                        .replace("&quot;", "\"", 'g')
                        .replace("&#039;", '\'', 'g');
            }

        });

    </script>
</dom-module>