SGH / COMPONENTS

Commit 31d9a4f6f25f66df35f640bc44f99adf8c2e07aa

Authored by Luigi Serra
1 parent 4b412909

updates

Inline Side-by-side
Showing 5 changed files with 217 additions and 31 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
  View file @31d9a4f
... ... @@ -72,11 +72,15 @@
72 72 -moz-transform-origin: 0 0;
73 73 -o-transform-origin: 0 0;
74 74 -webkit-transform-origin: 0 0;
75   - transform-origin: 0 0;"
  75 + transform-origin: 0 0;
  76 + max-height: 64px;
  77 + max-width: 64px;
76 78 }
77 79  
78 80 #container_content{
79 81 z-index: 1000;
  82 + position: relative;
  83 + overflow: auto;
80 84 }
81 85 #toolbar{
82 86 background: #2196F3 ;
... ... @@ -100,7 +104,7 @@
100 104 <paper-material elevation="3" id="window" class="window">
101 105 <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
102 106 <paper-toolbar id="toolbar">
103   - <search-panel-controllet></search-panel-controllet>
  107 + <search-panel-controllet id="search_from_animated_button_container"></search-panel-controllet>
104 108 </paper-toolbar>
105 109 <div id="container_content"><content></content></div>
106 110 </paper-material>
... ... @@ -108,12 +112,14 @@
108 112 </neon-animated-pages>
109 113  
110 114 <div class="horizontal layout" style="height: 64px;">
111   - <paper-fab mini icon="assessment" id="open" on-click="_onOpenClick"></paper-fab>
  115 + <paper-fab mini icon="{{icon}}" id="open" on-click="_onOpenClick"></paper-fab>
112 116 <div id="selected_item"></div>
113 117 </div>
114 118  
115 119 </template>
116 120  
  121 + <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
  122 +
117 123 <script>
118 124  
119 125 Polymer({
... ... @@ -121,7 +127,7 @@
121 127 is: 'animated-button-container-controllet',
122 128  
123 129 listeners:{
124   - 'items-list-controllet_item-selected' : '_elementSelected',
  130 + 'animated-button-container-controllet_element-selected' : '_elementSelected',
125 131 'search-panel-controllet_content-changed' : '_handleSearch'
126 132 },
127 133  
... ... @@ -142,10 +148,25 @@
142 148 type : String,
143 149 value : ""
144 150 },
145   -
  151 + icon:{
  152 + type: String,
  153 + value: "assessment"
  154 + },
  155 + iconHeight:{
  156 + type: String,
  157 + value: "64"
  158 + },
  159 + iconWidth:{
  160 + type: String,
  161 + value: "64"
  162 + },
146 163 exitAnimation : {
147 164 type : String,
148 165 value : ""
  166 + },
  167 + searchFunction: {
  168 + type: String,
  169 + notify: true
149 170 }
150 171 },
151 172  
... ... @@ -153,6 +174,14 @@
153 174 this.$.window.style.height = this.height + "vh";
154 175 this.$.window.style.width = (this.width - 0.5) + "vw";
155 176 this.$.close.style.left = (this.width - 3.5) + "vw";
  177 +
  178 + this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh";
  179 + $(this.$.container_content).perfectScrollbar();
  180 +
  181 + this.$.open.style.height = this.iconHeight + "px";
  182 + this.$.open.style.width = this.iconWidth + "px";
  183 + this.$.open.style.setProperty('--iron-icon-height',this.iconHeight + "px");
  184 + this.$.open.style.setProperty('--iron-icon-width' ,this.iconWidth + "px");
156 185 },
157 186  
158 187 _onOpenClick: function() {
... ... @@ -172,9 +201,14 @@
172 201 this.$.selected_item.appendChild(e.detail.selectedElement);
173 202 },
174 203 _handleSearch: function(e){
175   - if(this.$.container_content.children[0]._handleSearch != undefined)
176   - this.$.container_content.children[0]._handleSearch(e);
177   -
  204 + if(this.$.container_content.children[0]._handleSearch != undefined) {
  205 + this.$.container_content.children[0]._handleSearch(e);
  206 + }else{
  207 + if(this.searchFunction != undefined){
  208 + this.searchFunction = new Function('e','return '+ this.searchFunction);
  209 + this.searchFunction(e);
  210 + }
  211 + }
178 212 }
179 213  
180 214 });
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @31d9a4f
... ... @@ -723,8 +723,7 @@ Example:
723 723 /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
724 724 '\'></items-slider-controllet>';*/
725 725 this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50">' +
726   - '<items-list-controllet height="70"' +
727   - ' width="50"' +
  726 + '<items-list-controllet' +
728 727 ' replace-string="-datalet"' +
729 728 ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
730 729 '</items-list-controllet>' +
... ... @@ -734,8 +733,7 @@ Example:
734 733 'selected-card=\'' + this.selectedDatalet + '\'></items-slider-controllet>';*/
735 734  
736 735 this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50">' +
737   - '<items-list-controllet height="70"' +
738   - ' width="50"' +
  736 + '<items-list-controllet' +
739 737 ' replace-string="-datalet"' +
740 738 ' selected-card=\'' + this.selectedDatalet + '\'' +
741 739 ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
... ...
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html 0 → 100644
  View file @31d9a4f
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +
  32 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  33 +<link rel="import" href="../../bower_components/paper-styles/color.html">
  34 +
  35 +<link rel="import" href="../../bower_components/paper-material">
  36 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  37 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  38 +<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
  39 +
  40 +<!--
  41 + `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
  42 + 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
  43 + the component that use the slider.
  44 +
  45 +Example:
  46 +
  47 + <items-slider-controllet items='[{name : "myObject1", image : "pathToMyImage1"},...,{name : "myObjectN", image : "pathToMyImageN"}]' \>
  48 + </items-slider-controllet>
  49 +
  50 +
  51 +@element items-slider-controllet
  52 +@status beta
  53 +@homepage index.html
  54 +@group controllets
  55 +-->
  56 +
  57 +<dom-module id="generic-cards-container-controllet">
  58 + <template>
  59 +
  60 + <style is="custom-style">
  61 +
  62 + .legend span{
  63 + position: relative;
  64 + top: 8px;
  65 + }
  66 +
  67 + .grid{
  68 + margin: auto;
  69 + padding: 5%;
  70 + }
  71 +
  72 + ::content .card{
  73 + ms-transform: scale(0.80);
  74 + -moz-transform: scale(0.80);
  75 + -o-transform: scale(0.80);
  76 + -webkit-transform: scale(0.80);
  77 + transform: scale(0.80);
  78 + -ms-transform-origin: 0 0;
  79 + -moz-transform-origin: 0 0;
  80 + -o-transform-origin: 0 0;
  81 + -webkit-transform-origin: 0 0;
  82 + transform-origin: 0 0;
  83 + height: 150px;
  84 + width: 150px;
  85 + margin: 0;
  86 + }
  87 +
  88 + </style>
  89 +
  90 + <div id="container" class="layout vertical">
  91 + <div class="grid">
  92 + <content></content>
  93 + </div>
  94 + </div>
  95 + </template>
  96 +
  97 + <script>
  98 +
  99 + Polymer({
  100 +
  101 + is : 'generic-cards-container-controllet',
  102 +
  103 + /**
  104 + * Fired when the user selects a card from slider by clicking on it.
  105 + *
  106 + * @event generic-cards-container-controllet_card-selected
  107 + */
  108 + properties : {
  109 + prevSelectedCard : {
  110 + type: Object,
  111 + value : null
  112 + },
  113 + /**
  114 + * Presected card. You can pass the card title to preselect it.
  115 + */
  116 + selectedCard:{
  117 + type: String,
  118 + value: undefined
  119 + }
  120 + },
  121 +
  122 + ready : function(){
  123 + var _this = this;
  124 + var cards = document.querySelectorAll('paper-card-controllet');
  125 + for(var i = 0; i < cards.length; i++){
  126 + cards[i].addEventListener('click', function(e){
  127 + _this._cardClick(e)
  128 + });
  129 + }
  130 + },
  131 +
  132 + _cardClick : function(e){
  133 +
  134 + if(this.prevSelectedCard != null){
  135 + this.prevSelectedCard.elevation = "1";
  136 +
  137 + }
  138 + e.currentTarget.elevation = "5";
  139 + this.prevSelectedCard = e.currentTarget;
  140 +
  141 + this.fire('generic-cards-container-controllet_card-selected', {selectedElement: e.currentTarget});
  142 + //this.fire('animated-button-container-controllet_element-selected', {selectedElement: ''});
  143 +
  144 + },
  145 +
  146 + _handleSearch: function(e){
  147 + if(e.detail.id == "search_from_animated_button_container") {
  148 + var cards = document.querySelectorAll('.card');
  149 + for (var i = 0; i < cards.length; i++) {
  150 + var title = cards[i].cardTitle;
  151 + var comment = cards[i].comment;
  152 + var type = cards[i].cardType;
  153 +
  154 + var searchFlag = title.indexOf(e.detail.searchKey) == -1 && comment.indexOf(e.detail.searchKey) == -1 && type.indexOf(e.detail.searchKey) == -1;
  155 +
  156 + if (!searchFlag || e.detail.searchKey == "") {
  157 + cards[i].style.display = "inline-block";
  158 + } else {
  159 + cards[i].style.display = "none";
  160 + }
  161 + }
  162 + }
  163 + }
  164 + });
  165 +
  166 + </script>
  167 +
  168 +</dom-module>
0 169 \ No newline at end of file
... ...
controllets/items-list-controllet/item-list-controllet.html
  View file @31d9a4f
... ... @@ -71,8 +71,8 @@ Example:
71 71 }
72 72  
73 73 #container{
74   - position: relative;
75   - overflow: auto;
  74 + /*position: relative;
  75 + overflow: auto;*/
76 76 }
77 77  
78 78 img{
... ... @@ -131,8 +131,6 @@ Example:
131 131 </div>
132 132 </template>
133 133  
134   - <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
135   -
136 134 <script>
137 135  
138 136 Polymer({
... ... @@ -164,14 +162,6 @@ Example:
164 162 type: String,
165 163 value: undefined
166 164 },
167   - height:{
168   - type: String,
169   - value: "30vh"
170   - },
171   - width:{
172   - type: String,
173   - value: "30vh"
174   - },
175 165 replaceString:{
176 166 type: String,
177 167 vale: undefined
... ... @@ -179,10 +169,6 @@ Example:
179 169 },
180 170  
181 171 ready : function(){
182   - this.$.container.style.height = (this.height - (22 * 0.65)) + "vh";
183   - //this.$.container.style.width = this.width + "vw";
184   -
185   - $(this.$.container).perfectScrollbar();
186 172  
187 173 if(this.selectedCard != undefined){
188 174 this.fire('items-list-controllet_item-selected', {datalet: this.selectedCard + this.replaceString});
... ... @@ -207,8 +193,8 @@ Example:
207 193 e.currentTarget.elevation = "5";
208 194 this.prevSelectedCard = e.currentTarget;
209 195  
210   - this.fire('items-list-controllet_item-selected', {datalet: e.currentTarget.id + this.replaceString,
211   - selectedElement: e.currentTarget.cloneNode(true)});
  196 + this.fire('items-list-controllet_item-selected', {datalet: e.currentTarget.id + this.replaceString});
  197 + this.fire('animated-button-container-controllet_element-selected', {selectedElement: e.currentTarget.cloneNode(true)});
212 198  
213 199 },
214 200  
... ...
controllets/search-panel-controllet/search-panel-controllet.html
  View file @31d9a4f
... ... @@ -142,7 +142,7 @@ Example:
142 142 */
143 143 _valueChanged : function(oldvalue, newValue){
144 144 clearTimeout (this.timer);
145   - this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey}), 500);
  145 + this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id : this.id}), 500);
146 146 },
147 147 /**
148 148 * It returns the value in text area
... ...