<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; } .window { /*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="window" 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(""", "\"", 'g') .replace("'", '\'', 'g'); } }); </script> </dom-module>