updates

Luigi Serra
1 parent 4b412909
Showing 5 changed files with 217 additions and 31 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
controllets/data-sevc-controllet/data-sevc-controllet.html
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
controllets/items-list-controllet/item-list-controllet.html
controllets/search-panel-controllet/search-panel-controllet.html
@@ -72,11 +72,15 @@
             -moz-transform-origin: 0 0;
             -o-transform-origin: 0 0;
             -webkit-transform-origin: 0 0;
-            transform-origin: 0 0;"
+            transform-origin: 0 0;
+            max-height: 64px;
+            max-width: 64px;
         }
         #container_content{
             z-index: 1000;
+            position: relative;
+            overflow: auto;
         }
         #toolbar{
             background: #2196F3 ;
@@ -100,7 +104,7 @@
                 <paper-material elevation="3" id="window" class="window">
                    <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
                     <paper-toolbar id="toolbar">
-                        <search-panel-controllet></search-panel-controllet>
+                        <search-panel-controllet id="search_from_animated_button_container"></search-panel-controllet>
                     </paper-toolbar>
                    <div id="container_content"><content></content></div>
                 </paper-material>
@@ -108,12 +112,14 @@
         </neon-animated-pages>
         <div class="horizontal layout" style="height: 64px;">
-           <paper-fab mini icon="assessment" id="open" on-click="_onOpenClick"></paper-fab>
+           <paper-fab mini icon="{{icon}}" id="open" on-click="_onOpenClick"></paper-fab>
            <div id="selected_item"></div>
         </div>
     </template>
+    <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
+
     <script>
         Polymer({
@@ -121,7 +127,7 @@
             is: 'animated-button-container-controllet',
             listeners:{
-                'items-list-controllet_item-selected' : '_elementSelected',
+                'animated-button-container-controllet_element-selected' : '_elementSelected',
                 'search-panel-controllet_content-changed' : '_handleSearch'
             },
@@ -142,10 +148,25 @@
                     type  : String,
                     value : ""
                 },
-
+                icon:{
+                    type: String,
+                    value: "assessment"
+                },
+                iconHeight:{
+                    type: String,
+                    value: "64"
+                },
+                iconWidth:{
+                    type: String,
+                    value: "64"
+                },
                 exitAnimation  : {
                     type  : String,
                     value : ""
+                },
+                searchFunction: {
+                    type: String,
+                    notify: true
                 }
             },
@@ -153,6 +174,14 @@
                 this.$.window.style.height = this.height + "vh";
                 this.$.window.style.width  = (this.width - 0.5) + "vw";
                 this.$.close.style.left    = (this.width - 3.5) + "vw";
+
+                this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh";
+                $(this.$.container_content).perfectScrollbar();
+
+                this.$.open.style.height = this.iconHeight + "px";
+                this.$.open.style.width  = this.iconWidth  + "px";
+                this.$.open.style.setProperty('--iron-icon-height',this.iconHeight + "px");
+                this.$.open.style.setProperty('--iron-icon-width' ,this.iconWidth + "px");
             },
             _onOpenClick: function() {
@@ -172,9 +201,14 @@
                 this.$.selected_item.appendChild(e.detail.selectedElement);
             },
             _handleSearch: function(e){
-                if(this.$.container_content.children[0]._handleSearch != undefined)
-                   this.$.container_content.children[0]._handleSearch(e);
-
+                if(this.$.container_content.children[0]._handleSearch != undefined) {
+                    this.$.container_content.children[0]._handleSearch(e);
+                }else{
+                    if(this.searchFunction != undefined){
+                        this.searchFunction = new Function('e','return '+ this.searchFunction);
+                        this.searchFunction(e);
+                    }
+                }
             }
         });
@@ -723,8 +723,7 @@ Example:
                  /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
                          '\'></items-slider-controllet>';*/
                 this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50">' +
-                                                               '<items-list-controllet height="70"' +
-                                                                                     ' width="50"' +
+                                                               '<items-list-controllet' +
                                                                                      ' replace-string="-datalet"' +
                                                                                      ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
                                                                '</items-list-controllet>' +
@@ -734,8 +733,7 @@ Example:
                                                                  'selected-card=\'' + this.selectedDatalet + '\'></items-slider-controllet>';*/
                     this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50">' +
-                            '<items-list-controllet height="70"' +
-                            ' width="50"' +
+                            '<items-list-controllet' +
                             ' replace-string="-datalet"' +
                             ' selected-card=\'' + this.selectedDatalet + '\'' +
                             ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-styles/color.html">
+
+<link rel="import" href="../../bower_components/paper-material">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+
+<!--
+ `items-slider-controllet` is a carousel of cards with a title and an image. Pass to it an array of objects with name and image fields and
+ a responsive slider will be created. Every time the user click on a card an event will be generate in order to get the card clicked information to
+ the component that use the slider.
+
+Example:
+
+    <items-slider-controllet items='[{name : "myObject1", image : "pathToMyImage1"},...,{name : "myObjectN", image : "pathToMyImageN"}]' \>
+    </items-slider-controllet>
+
+
+@element items-slider-controllet
+@status beta
+@homepage index.html
+@group controllets
+-->
+
+<dom-module id="generic-cards-container-controllet">
+    <template>
+
+        <style is="custom-style">
+
+            .legend span{
+                position: relative;
+                top: 8px;
+            }
+
+            .grid{
+                margin: auto;
+                padding: 5%;
+            }
+
+            ::content .card{
+                ms-transform: scale(0.80);
+                -moz-transform: scale(0.80);
+                -o-transform: scale(0.80);
+                -webkit-transform: scale(0.80);
+                transform: scale(0.80);
+                -ms-transform-origin: 0 0;
+                -moz-transform-origin: 0 0;
+                -o-transform-origin: 0 0;
+                -webkit-transform-origin: 0 0;
+                transform-origin: 0 0;
+                height: 150px;
+                width: 150px;
+                margin: 0;
+            }
+
+        </style>
+
+        <div id="container" class="layout vertical">
+            <div class="grid">
+                <content></content>
+            </div>
+        </div>
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is : 'generic-cards-container-controllet',
+
+            /**
+             * Fired when the user selects a card from slider by clicking on it.
+             *
+             * @event generic-cards-container-controllet_card-selected
+             */
+            properties : {
+                prevSelectedCard : {
+                    type: Object,
+                    value : null
+                },
+                /**
+                 * Presected card. You can pass the card title to preselect it.
+                 */
+                selectedCard:{
+                    type: String,
+                    value: undefined
+                }
+            },
+
+            ready : function(){
+                var _this = this;
+                var cards = document.querySelectorAll('paper-card-controllet');
+                for(var i = 0; i < cards.length; i++){
+                    cards[i].addEventListener('click', function(e){
+                       _this._cardClick(e)
+                    });
+                }
+            },
+
+            _cardClick : function(e){
+
+                if(this.prevSelectedCard != null){
+                    this.prevSelectedCard.elevation = "1";
+
+                }
+                e.currentTarget.elevation = "5";
+                this.prevSelectedCard = e.currentTarget;
+
+                this.fire('generic-cards-container-controllet_card-selected', {selectedElement: e.currentTarget});
+                //this.fire('animated-button-container-controllet_element-selected', {selectedElement: ''});
+
+            },
+
+            _handleSearch: function(e){
+                if(e.detail.id == "search_from_animated_button_container") {
+                    var cards = document.querySelectorAll('.card');
+                    for (var i = 0; i < cards.length; i++) {
+                        var title = cards[i].cardTitle;
+                        var comment = cards[i].comment;
+                        var type = cards[i].cardType;
+
+                        var searchFlag = title.indexOf(e.detail.searchKey) == -1 && comment.indexOf(e.detail.searchKey) == -1 && type.indexOf(e.detail.searchKey) == -1;
+
+                        if (!searchFlag || e.detail.searchKey == "") {
+                            cards[i].style.display = "inline-block";
+                        } else {
+                            cards[i].style.display = "none";
+                        }
+                    }
+                }
+            }
+        });
+
+    </script>
+
+</dom-module>
 \ No newline at end of file
@@ -71,8 +71,8 @@ Example:
             }
             #container{
-                position: relative;
-                overflow: auto;
+                /*position: relative;
+                overflow: auto;*/
             }
             img{
@@ -131,8 +131,6 @@ Example:
         </div>
     </template>
-    <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
-
     <script>
         Polymer({
@@ -164,14 +162,6 @@ Example:
                     type: String,
                     value: undefined
                 },
-                height:{
-                    type: String,
-                    value: "30vh"
-                },
-                width:{
-                    type: String,
-                    value: "30vh"
-                },
                 replaceString:{
                     type: String,
                     vale: undefined
@@ -179,10 +169,6 @@ Example:
             },
             ready : function(){
-                this.$.container.style.height = (this.height - (22 * 0.65)) + "vh";
-                //this.$.container.style.width  = this.width + "vw";
-
-                $(this.$.container).perfectScrollbar();
                 if(this.selectedCard != undefined){
                     this.fire('items-list-controllet_item-selected', {datalet: this.selectedCard + this.replaceString});
@@ -207,8 +193,8 @@ Example:
                 e.currentTarget.elevation = "5";
                 this.prevSelectedCard = e.currentTarget;
-                this.fire('items-list-controllet_item-selected', {datalet: e.currentTarget.id + this.replaceString,
-                                                                  selectedElement: e.currentTarget.cloneNode(true)});
+                this.fire('items-list-controllet_item-selected', {datalet: e.currentTarget.id + this.replaceString});
+                this.fire('animated-button-container-controllet_element-selected', {selectedElement: e.currentTarget.cloneNode(true)});
             },
@@ -142,7 +142,7 @@ Example:
              */
             _valueChanged : function(oldvalue, newValue){
                 clearTimeout (this.timer);
-                this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey}), 500);
+                this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id : this.id}), 500);
             },
             /**
              * It returns the value in text area