Commit 31d9a4f6f25f66df35f640bc44f99adf8c2e07aa
1 parent
4b412909
updates
Showing
5 changed files
with
217 additions
and
31 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
@@ -72,11 +72,15 @@ | @@ -72,11 +72,15 @@ | ||
72 | -moz-transform-origin: 0 0; | 72 | -moz-transform-origin: 0 0; |
73 | -o-transform-origin: 0 0; | 73 | -o-transform-origin: 0 0; |
74 | -webkit-transform-origin: 0 0; | 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 | #container_content{ | 80 | #container_content{ |
79 | z-index: 1000; | 81 | z-index: 1000; |
82 | + position: relative; | ||
83 | + overflow: auto; | ||
80 | } | 84 | } |
81 | #toolbar{ | 85 | #toolbar{ |
82 | background: #2196F3 ; | 86 | background: #2196F3 ; |
@@ -100,7 +104,7 @@ | @@ -100,7 +104,7 @@ | ||
100 | <paper-material elevation="3" id="window" class="window"> | 104 | <paper-material elevation="3" id="window" class="window"> |
101 | <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab> | 105 | <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab> |
102 | <paper-toolbar id="toolbar"> | 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 | </paper-toolbar> | 108 | </paper-toolbar> |
105 | <div id="container_content"><content></content></div> | 109 | <div id="container_content"><content></content></div> |
106 | </paper-material> | 110 | </paper-material> |
@@ -108,12 +112,14 @@ | @@ -108,12 +112,14 @@ | ||
108 | </neon-animated-pages> | 112 | </neon-animated-pages> |
109 | 113 | ||
110 | <div class="horizontal layout" style="height: 64px;"> | 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 | <div id="selected_item"></div> | 116 | <div id="selected_item"></div> |
113 | </div> | 117 | </div> |
114 | 118 | ||
115 | </template> | 119 | </template> |
116 | 120 | ||
121 | + <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script> | ||
122 | + | ||
117 | <script> | 123 | <script> |
118 | 124 | ||
119 | Polymer({ | 125 | Polymer({ |
@@ -121,7 +127,7 @@ | @@ -121,7 +127,7 @@ | ||
121 | is: 'animated-button-container-controllet', | 127 | is: 'animated-button-container-controllet', |
122 | 128 | ||
123 | listeners:{ | 129 | listeners:{ |
124 | - 'items-list-controllet_item-selected' : '_elementSelected', | 130 | + 'animated-button-container-controllet_element-selected' : '_elementSelected', |
125 | 'search-panel-controllet_content-changed' : '_handleSearch' | 131 | 'search-panel-controllet_content-changed' : '_handleSearch' |
126 | }, | 132 | }, |
127 | 133 | ||
@@ -142,10 +148,25 @@ | @@ -142,10 +148,25 @@ | ||
142 | type : String, | 148 | type : String, |
143 | value : "" | 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 | exitAnimation : { | 163 | exitAnimation : { |
147 | type : String, | 164 | type : String, |
148 | value : "" | 165 | value : "" |
166 | + }, | ||
167 | + searchFunction: { | ||
168 | + type: String, | ||
169 | + notify: true | ||
149 | } | 170 | } |
150 | }, | 171 | }, |
151 | 172 | ||
@@ -153,6 +174,14 @@ | @@ -153,6 +174,14 @@ | ||
153 | this.$.window.style.height = this.height + "vh"; | 174 | this.$.window.style.height = this.height + "vh"; |
154 | this.$.window.style.width = (this.width - 0.5) + "vw"; | 175 | this.$.window.style.width = (this.width - 0.5) + "vw"; |
155 | this.$.close.style.left = (this.width - 3.5) + "vw"; | 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 | _onOpenClick: function() { | 187 | _onOpenClick: function() { |
@@ -172,9 +201,14 @@ | @@ -172,9 +201,14 @@ | ||
172 | this.$.selected_item.appendChild(e.detail.selectedElement); | 201 | this.$.selected_item.appendChild(e.detail.selectedElement); |
173 | }, | 202 | }, |
174 | _handleSearch: function(e){ | 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
@@ -723,8 +723,7 @@ Example: | @@ -723,8 +723,7 @@ Example: | ||
723 | /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' + | 723 | /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' + |
724 | '\'></items-slider-controllet>';*/ | 724 | '\'></items-slider-controllet>';*/ |
725 | this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50">' + | 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 | ' replace-string="-datalet"' + | 727 | ' replace-string="-datalet"' + |
729 | ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + | 728 | ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + |
730 | '</items-list-controllet>' + | 729 | '</items-list-controllet>' + |
@@ -734,8 +733,7 @@ Example: | @@ -734,8 +733,7 @@ Example: | ||
734 | 'selected-card=\'' + this.selectedDatalet + '\'></items-slider-controllet>';*/ | 733 | 'selected-card=\'' + this.selectedDatalet + '\'></items-slider-controllet>';*/ |
735 | 734 | ||
736 | this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50">' + | 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 | ' replace-string="-datalet"' + | 737 | ' replace-string="-datalet"' + |
740 | ' selected-card=\'' + this.selectedDatalet + '\'' + | 738 | ' selected-card=\'' + this.selectedDatalet + '\'' + |
741 | ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + | 739 | ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + |
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
0 โ 100644
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 | \ No newline at end of file | 169 | \ No newline at end of file |
controllets/items-list-controllet/item-list-controllet.html
@@ -71,8 +71,8 @@ Example: | @@ -71,8 +71,8 @@ Example: | ||
71 | } | 71 | } |
72 | 72 | ||
73 | #container{ | 73 | #container{ |
74 | - position: relative; | ||
75 | - overflow: auto; | 74 | + /*position: relative; |
75 | + overflow: auto;*/ | ||
76 | } | 76 | } |
77 | 77 | ||
78 | img{ | 78 | img{ |
@@ -131,8 +131,6 @@ Example: | @@ -131,8 +131,6 @@ Example: | ||
131 | </div> | 131 | </div> |
132 | </template> | 132 | </template> |
133 | 133 | ||
134 | - <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script> | ||
135 | - | ||
136 | <script> | 134 | <script> |
137 | 135 | ||
138 | Polymer({ | 136 | Polymer({ |
@@ -164,14 +162,6 @@ Example: | @@ -164,14 +162,6 @@ Example: | ||
164 | type: String, | 162 | type: String, |
165 | value: undefined | 163 | value: undefined |
166 | }, | 164 | }, |
167 | - height:{ | ||
168 | - type: String, | ||
169 | - value: "30vh" | ||
170 | - }, | ||
171 | - width:{ | ||
172 | - type: String, | ||
173 | - value: "30vh" | ||
174 | - }, | ||
175 | replaceString:{ | 165 | replaceString:{ |
176 | type: String, | 166 | type: String, |
177 | vale: undefined | 167 | vale: undefined |
@@ -179,10 +169,6 @@ Example: | @@ -179,10 +169,6 @@ Example: | ||
179 | }, | 169 | }, |
180 | 170 | ||
181 | ready : function(){ | 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 | if(this.selectedCard != undefined){ | 173 | if(this.selectedCard != undefined){ |
188 | this.fire('items-list-controllet_item-selected', {datalet: this.selectedCard + this.replaceString}); | 174 | this.fire('items-list-controllet_item-selected', {datalet: this.selectedCard + this.replaceString}); |
@@ -207,8 +193,8 @@ Example: | @@ -207,8 +193,8 @@ Example: | ||
207 | e.currentTarget.elevation = "5"; | 193 | e.currentTarget.elevation = "5"; |
208 | this.prevSelectedCard = e.currentTarget; | 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
@@ -142,7 +142,7 @@ Example: | @@ -142,7 +142,7 @@ Example: | ||
142 | */ | 142 | */ |
143 | _valueChanged : function(oldvalue, newValue){ | 143 | _valueChanged : function(oldvalue, newValue){ |
144 | clearTimeout (this.timer); | 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 | * It returns the value in text area | 148 | * It returns the value in text area |