SGH / COMPONENTS

Commit e0e4a976d80f2a0c8112e9e5d009c1bbaf86dfb6

Authored by Renato De Donato
1 parent 707a1508

data-sevc-controlled: MODIFY-view + michellaneus

Inline Side-by-side
Showing 13 changed files with 361 additions and 1034 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @e0e4a97
@@ -19,20 +19,20 @@ @@ -19,20 +19,20 @@
19 <page-slider-controllet id="slider"> 19 <page-slider-controllet id="slider">
20 20
21 <neon-animatable> 21 <neon-animatable>
22 -  
23 - <dataset-selection-controllet id="dataset_selection" datasets={{datasets}}></dataset-selection-controllet>  
24 - 22 + <template is="dom-if" if={{!modify}}>
  23 + <dataset-selection-controllet id="dataset_selection" datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></dataset-selection-controllet>
  24 + </template>
25 </neon-animatable> 25 </neon-animatable>
26 26
27 <neon-animatable> 27 <neon-animatable>
28 28
29 - <tree-view-multi-table-controllet id="tree_view_multi_table" data-url={{dataUrl}}></tree-view-multi-table-controllet> 29 + <tree-view-multi-table-controllet id="tree_view_multi_table" data-url={{dataUrl}} preselected-fields={{selectedFields}}></tree-view-multi-table-controllet>
30 30
31 </neon-animatable> 31 </neon-animatable>
32 32
33 <neon-animatable> 33 <neon-animatable>
34 34
35 - <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} fields={{fields}}></datalet-selection-controllet> 35 + <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}}></datalet-selection-controllet>
36 36
37 </neon-animatable> 37 </neon-animatable>
38 38
@@ -69,6 +69,11 @@ @@ -69,6 +69,11 @@
69 value : undefined 69 value : undefined
70 }, 70 },
71 71
  72 + suggestedDatasets : {
  73 + type : Array,
  74 + value : undefined
  75 + },
  76 +
72 dataUrl : { 77 dataUrl : {
73 type : String, 78 type : String,
74 value : undefined 79 value : undefined
@@ -77,11 +82,38 @@ @@ -77,11 +82,38 @@
77 jsonData : { 82 jsonData : {
78 type : Object, 83 type : Object,
79 value : undefined 84 value : undefined
  85 + },
  86 +
  87 + modify : {
  88 + type : Boolean,
  89 + value : false
  90 + },
  91 +
  92 + selectedDatalet : {
  93 + type : String,
  94 + value : undefined
  95 + },
  96 +
  97 + selectedFields : {
  98 + type : Array,
  99 + value : []
  100 + },
  101 +
  102 + dataletPreset : {
  103 + type : Object,
  104 + value : []
80 } 105 }
81 106
82 }, 107 },
83 108
84 ready : function(){ 109 ready : function(){
  110 + if(this.selectedDatalet){
  111 + this.modify = true;
  112 + this.$.slider.selected = 1;
  113 +// console.log(this.selectedDatalet);
  114 + this.dataUrl = this.dataletPreset["data-url"];
  115 +
  116 + }
85 }, 117 },
86 118
87 _updateSlider : function(e){ 119 _updateSlider : function(e){
@@ -90,18 +122,27 @@ @@ -90,18 +122,27 @@
90 slider.setTitle("SELECT DATASET", "Search or copy and paste the url of dataset."); 122 slider.setTitle("SELECT DATASET", "Search or copy and paste the url of dataset.");
91 slider.chevronLeft("invisible"); 123 slider.chevronLeft("invisible");
92 slider.chevronRight(false); 124 slider.chevronRight(false);
93 - this.$.dataset_selection._fireDataUrl();  
94 -// http://designpieces.com/palette/google-new-logo-2015-color-palette-hex-and-rgb/  
95 - break; 125 + if(slider.getPrevSelected() == 1)
  126 + slider.chevronRight(true);
  127 +
  128 +// this.$.dataset_selection._fireDataUrl();
  129 +// console.log(this.$.dataset_selection);
  130 + break;
96 case 1: 131 case 1:
97 - slider.setTitle("SELECT FIELDS", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");  
98 - slider.chevronLeft(true); 132 + slider.setTitle("SELECT DATA", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
  133 + if(this.modify){
  134 + slider.chevronLeft("invisible");
  135 + slider.setAvatar("2");
  136 + }
  137 + else{
  138 + slider.chevronLeft(true);
  139 + }
99 slider.chevronRight(false); 140 slider.chevronRight(false);
100 this.$.tree_view_multi_table.ready(); 141 this.$.tree_view_multi_table.ready();
101 - this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}}) 142 + this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}});
102 break; 143 break;
103 case 2: 144 case 2:
104 - slider.setTitle("SELECT DATALET", "Select a visualization, fill out inputs and labels (optional)."); 145 + slider.setTitle("SELECT VISUALIZATION", "Select a visualization, fill out inputs and labels (optional).");
105 slider.chevronLeft(true); 146 slider.chevronLeft(true);
106 slider.chevronRight("invisible"); 147 slider.chevronRight("invisible");
107 //reset when? 148 //reset when?
@@ -126,6 +167,8 @@ @@ -126,6 +167,8 @@
126 slider.chevronRight(false); 167 slider.chevronRight(false);
127 } 168 }
128 }); 169 });
  170 +
  171 + this.$.datalet_selection.reset();
129 }, 172 },
130 173
131 _allowThirdStep : function(e){ 174 _allowThirdStep : function(e){
controllets/data-sevc-controllet/data-sevc-controllet_ddr.html deleted
View file @707a150
1 -/********************************************************************************************************************************  
2 -<!--<script src="../shared_js/jquery-1.11.2.min.js"></script>-->  
3 -<!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>-->  
4 -<!--<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>-->  
5 -<!--<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">-->  
6 -/********************************************************************************************************************************  
7 -  
8 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
9 -  
10 -<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">  
11 -<link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">  
12 -<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html" />  
13 -  
14 -<dom-module id="data-sevc-controllet">  
15 -  
16 - <template>  
17 -  
18 - <page-slider-controllet id="slider">  
19 -  
20 - <neon-animatable>  
21 -  
22 - <dataset-selection-controllet id="dataset_selection" datasets={{datasets}}></dataset-selection-controllet>  
23 -  
24 - </neon-animatable>  
25 -  
26 - <neon-animatable>  
27 -  
28 - <tree-view-multi-table-controllet id="tree_view_multi_table" root-name="data" opened-path="result,records" data-url={{dataUrl}}></tree-view-multi-table-controllet>  
29 -  
30 - </neon-animatable>  
31 -  
32 - <neon-animatable>  
33 - <div class="page" style="background-color: #BBDEFB;"><p>Pagina due</p><p>Page two</p><p>P&aacute;gina dos</p></div>  
34 - </neon-animatable>  
35 -  
36 - </page-slider-controllet>  
37 -  
38 - </template>  
39 -  
40 - <script>  
41 -  
42 - Polymer({  
43 -  
44 - is : 'data-sevc-controllet',  
45 -  
46 - listeners : {  
47 - 'page-slider-controllet_selected' : '_updateSlider',  
48 - 'dataset-selection-controllet_data-url' : '_updateDataUrl'  
49 - },  
50 -  
51 - properties : {  
52 -  
53 - deepUrl : {  
54 - type : String,  
55 - value : undefined  
56 - },  
57 -  
58 - dataletsListUrl : {  
59 - type : String ,  
60 - value : undefined  
61 - },  
62 -  
63 - datasets : {  
64 - type : Array,  
65 - value : undefined  
66 - },  
67 -  
68 - dataUrl : {  
69 - type : String,  
70 - value : undefined  
71 - },  
72 -  
73 - jsonData : {  
74 - type : Object,  
75 - value : undefined  
76 - }  
77 -  
78 - },  
79 -  
80 - ready : function(){  
81 - },  
82 -  
83 - _updateSlider : function(e){  
84 - switch (e.detail.selected) {  
85 - case 0:  
86 - slider.setTitle("SELECT DATASET", "Select, copy and paste or search the url of dataset.");  
87 - slider.chevronLeft(false);  
88 - slider.chevronRight(false);  
89 - this.$.dataset_selection._fireDataUrl();  
90 - http://designpieces.com/palette/google-new-logo-2015-color-palette-hex-and-rgb/  
91 - break;  
92 - case 1:  
93 - slider.setTitle("SELECT FIELDS", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");  
94 - slider.chevronRight(false);  
95 - this.$.tree_view_multi_table.ready();  
96 - break;  
97 - case 2:  
98 - slider.setTitle("SELECT DATALET", "Sbiricuda antani siempre!");  
99 - }  
100 - },  
101 -  
102 - _updateDataUrl : function(e){  
103 - this.dataUrl = e.detail.url;  
104 -  
105 - $.ajax({  
106 - url: e.detail.url,  
107 - dataType: "json",  
108 - success: function(data){  
109 -// this.dataUrl = e.detail.url  
110 -// this.jsonData = JSON.stringify(data);  
111 - slider.chevronRight(true);  
112 - },  
113 - error: function(){  
114 -// this.jsonData = undefined;  
115 - slider.chevronRight(false);  
116 - }  
117 - });  
118 - }  
119 -  
120 - });  
121 -  
122 - </script>  
123 -  
124 -</dom-module>  
125 \ No newline at end of file 0 \ No newline at end of file
controllets/data-sevc-controllet/demo/index.html
  View file @e0e4a97
@@ -39,9 +39,12 @@ @@ -39,9 +39,12 @@
39 var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"}; 39 var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"};
40 var dataset3 = {description: "descrizione bellissima purissima levissima sbiricuda antani", name: "Derelict Sites", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"}; 40 var dataset3 = {description: "descrizione bellissima purissima levissima sbiricuda antani", name: "Derelict Sites", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"};
41 var datasets = [dataset1, dataset2, dataset3]; 41 var datasets = [dataset1, dataset2, dataset3];
  42 + var s_datasets = [dataset1, dataset3];
42 43
43 var dsc = document.getElementById('dsc'); 44 var dsc = document.getElementById('dsc');
44 dsc.setAttribute("datasets", JSON.stringify(datasets)); 45 dsc.setAttribute("datasets", JSON.stringify(datasets));
  46 +
  47 + dsc.setAttribute("suggested-datasets", JSON.stringify(s_datasets));
45 </script> 48 </script>
46 49
47 </body> 50 </body>
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @e0e4a97
@@ -23,6 +23,11 @@ @@ -23,6 +23,11 @@
23 <template> 23 <template>
24 24
25 <style is="custom-style"> 25 <style is="custom-style">
  26 + :host {
  27 + --paper-dropdown-menu-icon: {
  28 + color: #2196F3;
  29 + };
  30 + }
26 31
27 #datalet_selection_container { 32 #datalet_selection_container {
28 display: flex; 33 display: flex;
@@ -35,14 +40,16 @@ @@ -35,14 +40,16 @@
35 position: relative; 40 position: relative;
36 height: 100vh; 41 height: 100vh;
37 margin-left: 32px; 42 margin-left: 32px;
38 - width: 344px; 43 + /*width: 344px;*/
  44 + min-width: 258px;
39 } 45 }
40 46
41 #datalet_selection_labels { 47 #datalet_selection_labels {
42 position: relative; 48 position: relative;
43 height: 100vh; 49 height: 100vh;
44 margin-left: 32px; 50 margin-left: 32px;
45 - width: 344px; 51 + /*width: 344px;*/
  52 + min-width: 258px;
46 } 53 }
47 54
48 #datalet_selection_column { 55 #datalet_selection_column {
@@ -62,6 +69,7 @@ @@ -62,6 +69,7 @@
62 69
63 #datalet_selection_comment{ 70 #datalet_selection_comment{
64 width: 100%; 71 width: 100%;
  72 + /*height: 112px;*/
65 margin-bottom: 32px; 73 margin-bottom: 32px;
66 } 74 }
67 75
@@ -75,39 +83,54 @@ @@ -75,39 +83,54 @@
75 /*margin-right: 16px;*/ 83 /*margin-right: 16px;*/
76 } 84 }
77 85
78 - .input_name{  
79 - height: 16px;  
80 - padding: 16px;  
81 - /*background-color: #B6B6B6;*/ 86 + /*.input_name{*/
  87 + /*height: 16px;*/
  88 + /*padding: 16px;*/
  89 + /*/!*background-color: #B6B6B6;*!/*/
82 90
83 - background-color: #2196F3;  
84 - color: #FFFFFF;  
85 - font-weight: 700;  
86 - } 91 + /*background-color: #2196F3;*/
  92 + /*color: #FFFFFF;*/
  93 + /*font-weight: 700;*/
  94 + /*}*/
87 95
88 .input_header{ 96 .input_header{
89 - /*height: 16px;*/  
90 - padding: 16px; 97 + height: 32px;
  98 + padding-top: 16px;
  99 + /*padding: 16px;*/
91 background-color: #B6B6B6; 100 background-color: #B6B6B6;
92 text-align: center; 101 text-align: center;
93 font-weight: 700; 102 font-weight: 700;
94 } 103 }
95 104
96 .info_button { 105 .info_button {
  106 + /*background-color: red;*/
97 position: absolute; 107 position: absolute;
98 - top: 4px; 108 + top: 18px;
99 right: 0px; 109 right: 0px;
100 } 110 }
101 111
102 paper-textarea { 112 paper-textarea {
  113 + display: inline-block;
103 height: 48px; 114 height: 48px;
104 - padding: 0px 8px; 115 + /*padding: 0px 8px;*/
  116 + width: 210px;
  117 + padding-left: 8px;
  118 + padding-bottom: 8px;
105 --paper-input-container-focus-color: #2196F3; 119 --paper-input-container-focus-color: #2196F3;
106 } 120 }
107 121
  122 + #datalet_selection_comment paper-textarea {
  123 + padding-bottom: 0px;
  124 + width: calc(100% - 16px);
  125 + }
  126 +
108 paper-dropdown-menu { 127 paper-dropdown-menu {
  128 + /*display: inline-block;*/
109 height: 48px; 129 height: 48px;
110 - padding: 0px 8px; 130 + width: 210px;;
  131 + /*padding: 0px 8px;*/
  132 + padding-left: 8px;
  133 + padding-bottom: 8px;
111 --paper-input-container-focus-color: #2196F3; 134 --paper-input-container-focus-color: #2196F3;
112 } 135 }
113 136
@@ -117,9 +140,11 @@ @@ -117,9 +140,11 @@
117 } 140 }
118 141
119 paper-icon-button { 142 paper-icon-button {
120 - /*color: #2196F3;*/  
121 - color: #FFFFFF; 143 + /*display: inline-block;*/
  144 + color: #2196F3;
  145 + /*color: #FFFFFF;*/
122 --paper-icon-button-ink-color: #2196F3; 146 --paper-icon-button-ink-color: #2196F3;
  147 + margin: 0px;
123 /*padding: 0px;*/ 148 /*padding: 0px;*/
124 } 149 }
125 150
@@ -149,26 +174,29 @@ @@ -149,26 +174,29 @@
149 <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax> 174 <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
150 175
151 <div id="datalet_selection_container"> 176 <div id="datalet_selection_container">
152 - <items-vslider-controllet datalets-list-url={{dataletsListUrl}}></items-vslider-controllet> 177 + <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
153 178
154 179
155 <paper-material id="datalet_selection_inputs" elevation="5"> 180 <paper-material id="datalet_selection_inputs" elevation="5">
156 <div class="input_header">INPUTS</div> 181 <div class="input_header">INPUTS</div>
157 - <template is="dom-repeat" items="{{inputs}}" index-as="index"> 182 + <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
158 <div class="inputs"> 183 <div class="inputs">
159 - <div class="input_name">  
160 - {{item.name}}  
161 - <div class="info_button">  
162 - <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>  
163 - </div>  
164 - </div>  
165 - <paper-dropdown-menu no-label-float label={{item.name}}> 184 + <!--<div class="input_name">-->
  185 + <!--{{item.name}}-->
  186 + <!--<div class="info_button">-->
  187 + <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
  188 + <!--</div>-->
  189 + <!--</div>-->
  190 + <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
166 <paper-menu class="dropdown-content"> 191 <paper-menu class="dropdown-content">
167 - <template is="dom-repeat" items={{selectableFields}}>  
168 - <paper-item id={{index}} on-tap="_loadDatalet">{{item}}</paper-item> 192 + <template is="dom-repeat" items={{fields}}>
  193 + <paper-item id={{index}} on-tap="_addInput">{{item}}</paper-item>
169 </template> 194 </template>
170 </paper-menu> 195 </paper-menu>
171 </paper-dropdown-menu> 196 </paper-dropdown-menu>
  197 + <div class="info_button">
  198 + <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
  199 + </div>
172 </div> 200 </div>
173 </template> 201 </template>
174 </paper-material> 202 </paper-material>
@@ -177,23 +205,29 @@ @@ -177,23 +205,29 @@
177 <div class="input_header">LABELS</div> 205 <div class="input_header">LABELS</div>
178 <template is="dom-repeat" items="{{labels}}" index-as="index"> 206 <template is="dom-repeat" items="{{labels}}" index-as="index">
179 <div class="inputs"> 207 <div class="inputs">
180 - <div class="input_name">  
181 - {{item.name}}  
182 - <div class="info_button">  
183 - <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>  
184 - </div> 208 + <!--<div class="input_name">-->
  209 + <!--{{item.name}}-->
  210 + <!--<div class="info_button">-->
  211 + <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
  212 + <!--</div>-->
  213 + <!--</div>-->
  214 + <paper-textarea label={{item.name}}></paper-textarea>
  215 + <div class="info_button">
  216 + <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
185 </div> 217 </div>
186 - <paper-textarea no-label-float label={{item.name}}></paper-textarea>  
187 </div> 218 </div>
188 </template> 219 </template>
189 </paper-material> 220 </paper-material>
190 221
191 222
192 <div id="datalet_selection_column"> 223 <div id="datalet_selection_column">
193 - <paper-material id="datalet_selection_comment" elevation="5">  
194 - <div class="input_header">COMMENT</div>  
195 - <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>  
196 - </paper-material> 224 +
  225 + <template is="dom-if" if={{modify}}>
  226 + <paper-material id="datalet_selection_comment" elevation="5">
  227 + <div class="input_header">COMMENT</div>
  228 + <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
  229 + </paper-material>
  230 + </template>
197 231
198 <paper-material id="datalet_selection_datalet" elevation="5"> 232 <paper-material id="datalet_selection_datalet" elevation="5">
199 <div class="input_header">DATALET PREVIEW</div> 233 <div class="input_header">DATALET PREVIEW</div>
@@ -232,6 +266,11 @@ @@ -232,6 +266,11 @@
232 value : undefined 266 value : undefined
233 }, 267 },
234 268
  269 + preselectedDatalet : {
  270 + type : String,
  271 + value : undefined
  272 + },
  273 +
235 inputs : { 274 inputs : {
236 type : Array, 275 type : Array,
237 value : [] 276 value : []
@@ -252,20 +291,25 @@ @@ -252,20 +291,25 @@
252 value : [] 291 value : []
253 }, 292 },
254 293
255 - selectableFields : {  
256 - type : Array,  
257 - value : []  
258 - }, 294 +// selectableFields : {
  295 +// type : Array,
  296 +// value : []
  297 +// },
259 298
260 dataUrl : { 299 dataUrl : {
261 type : String, 300 type : String,
262 value : undefined 301 value : undefined
  302 + },
  303 +
  304 + modify : {
  305 + type : Boolean,
  306 + value : false
263 } 307 }
264 308
265 }, 309 },
266 310
267 listeners: { 311 listeners: {
268 - 'items-vslider-controllet_selected-datalet': '_dataletSelected' 312 + 'items-vslider-controllet_selected-datalet': '_selectDatalet'
269 // 'tree-view-controllet_selected-fields': '_updateSelectedFields' 313 // 'tree-view-controllet_selected-fields': '_updateSelectedFields'
270 }, 314 },
271 315
@@ -275,20 +319,38 @@ @@ -275,20 +319,38 @@
275 $(this.$.datalet_selection_labels).perfectScrollbar(); 319 $(this.$.datalet_selection_labels).perfectScrollbar();
276 $(this.$.datalet_selection_datalet).perfectScrollbar(); 320 $(this.$.datalet_selection_datalet).perfectScrollbar();
277 321
278 - this.selectableFields = this._copy(this.fields); 322 + if(this.preselectedDatalet){
  323 + this.modify = true;
  324 + this._preselectDatalet();
  325 + this.preselectedDatalet = undefined;
  326 + }
279 }, 327 },
280 328
281 attached : function() { 329 attached : function() {
282 this._resize(); 330 this._resize();
283 var that = this; 331 var that = this;
284 window.addEventListener("resize", function() { that._resize(); }); 332 window.addEventListener("resize", function() { that._resize(); });
  333 +
  334 +// var inputs = document.getElementsByTagName("paper-dropdown-menu");
  335 +// console.log(inputs);
  336 +// for(var i in inputs)
  337 +// console.log(i);
  338 +// for(var i=0; i < inputs.length; i++)
  339 +// console.log($(inputs[i]).children("paper-menu"));
285 }, 340 },
286 341
287 setFields : function(fields) { 342 setFields : function(fields) {
288 this.fields = fields; 343 this.fields = fields;
289 }, 344 },
290 345
291 - _dataletSelected : function(e){ 346 + reset : function() {
  347 + this.selectedDatalet = undefined;
  348 + this.inputs = [];
  349 + this.labels = [];
  350 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  351 + },
  352 +
  353 + _selectDatalet : function(e){
292 this.$.add_button.setAttribute("disabled", "true"); 354 this.$.add_button.setAttribute("disabled", "true");
293 355
294 this.selectedDatalet = e.detail.datalet; 356 this.selectedDatalet = e.detail.datalet;
@@ -304,19 +366,27 @@ @@ -304,19 +366,27 @@
304 // this.labels = []; 366 // this.labels = [];
305 // } 367 // }
306 368
307 - this.$.datalet_selection_datalet_placeholder.innerHTML = "";  
308 - this.selectedFields = [];  
309 - this.selectableFields = this._copy(this.fields); 369 +// this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  370 +// this.selectedFields = [];
  371 + },
310 372
311 -// this.async(function(){this._loadPreview();}, 1000);  
312 - this._loadPreview(); 373 + _preselectDatalet : function() {
  374 + this.$.add_button.innerText = "MODIFY DATALET";
  375 +
  376 +
  377 + this.selectedDatalet = this.preselectedDatalet;
  378 + this.selectedFields = this._copy(this.fields);
  379 +
  380 + var inputs = document.getElementsByTagName("paper-dropdown-menu");
  381 + for(var i=0; i < inputs.length; i++)
  382 + $(inputs[i]).find("paper-menu")[0].select(i);
  383 +
  384 + this._loadDatalet(this.selectedFields);
313 }, 385 },
314 386
315 _handleSelectedDatalet : function(e){ 387 _handleSelectedDatalet : function(e){
  388 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
316 389
317 -  
318 -// console.log(e.detail.response.idm.inputs);  
319 -// console.log(e.detail.response.idm.inputs.layouts.input);  
320 var inputs = e.detail.response.idm.inputs.input; 390 var inputs = e.detail.response.idm.inputs.input;
321 var labels = e.detail.response.idm.inputs.layouts.input; 391 var labels = e.detail.response.idm.inputs.layouts.input;
322 392
@@ -327,78 +397,70 @@ @@ -327,78 +397,70 @@
327 inputs = []; 397 inputs = [];
328 for(var i in this.fields) 398 for(var i in this.fields)
329 inputs.push({name: name + " " + i, description: description, selection: selection}); 399 inputs.push({name: name + " " + i, description: description, selection: selection});
330 -  
331 } 400 }
332 401
333 this.inputs = inputs; 402 this.inputs = inputs;
334 this.labels = labels; 403 this.labels = labels;
335 - },  
336 404
337 - _copy : function(o) {  
338 - var out, v, key;  
339 - out = Array.isArray(o) ? [] : {};  
340 - for (key in o) {  
341 - v = o[key];  
342 - out[key] = (typeof v === "object") ? this._copy(v) : v;  
343 - }  
344 - return out; 405 +// if(this.inputs[0].selection == "*")
  406 +// this.selectedFields = [];
  407 +// else
  408 + this.selectedFields = new Array(inputs.length);
345 }, 409 },
346 410
347 - _loadDatalet : function(e){ 411 + _addInput : function(e){
348 var selectedFields = this._copy(this.selectedFields); 412 var selectedFields = this._copy(this.selectedFields);
349 - var selectableFields = this._copy(this.selectableFields);  
350 -  
351 - if($(e.target).parents("paper-dropdown-menu")[0].selectedItem) {  
352 - var prevSelected = $(e.target).parents("paper-dropdown-menu")[0].selectedItem.innerText;  
353 - var index = this.selectedFields.indexOf(prevSelected);  
354 - selectedFields.splice(index, 1);  
355 -// selectableFields.push(prevSelected);  
356 - }  
357 413
358 - var selected = e.target.innerText;  
359 -// var index = this.selectableFields.indexOf(selected);  
360 -// selectableFields.splice(index, 1);  
361 - selectedFields.push(selected); 414 + var index = $(e.target).parents("paper-dropdown-menu")[0].id;
  415 + selectedFields[index] = e.target.innerText;
362 416
363 - this.selectedFields = selectedFields;  
364 - this.selectableFields = selectableFields; 417 + this.selectedFields = this._copy(selectedFields);
365 418
366 - console.log(this.selectedFields);  
367 - console.log(this.selectableFields); 419 + var load = true;
368 420
369 - var load = false;  
370 - if(this.selectedFields.length > 0 && this.inputs[0].selection == "*")  
371 - load = true;  
372 - else if(this.selectedFields.length == this.inputs.length)  
373 - load = true; 421 + if(this.inputs[0].selection == "*"){
  422 + var temp = [];
  423 + for (var i = 0; i < selectedFields.length; i++)
  424 + if(selectedFields[i])
  425 + temp.push(selectedFields[i]);
  426 + selectedFields = temp;
  427 + }
  428 + else {
  429 + for (var i = 0; i < selectedFields.length; i++)
  430 + if (!selectedFields[i]) {
  431 + load = false;
  432 + break;
  433 + }
  434 + }
374 435
375 if(load){ 436 if(load){
376 - var params = {'data-url' : this.dataUrl}; 437 + this._loadDatalet(selectedFields);
  438 + }
377 439
378 - var dataletParams ={  
379 - component : this.selectedDatalet+"-datalet",  
380 - params : params,  
381 - fields : this.selectedFields,  
382 - placeHolder : datalet_selection_datalet_placeholder  
383 - }; 440 +// $("#base_datalet_container").html("");
  441 +// $("#base_datalet_container").css('visibility','hidden');
  442 +// $("#base_datalet_container").css('padding','0px');
  443 +// $("#base_datalet_container").css('height','0px');
  444 +// console.log($("#base_datalet_container"));
  445 + },
384 446
385 - ComponentService.deep_url = this.deepUrl;  
386 - ComponentService.getComponent(dataletParams); 447 + _loadDatalet : function(selectedFields){
  448 + var params = {'data-url' : this.dataUrl};
387 449
388 - this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);  
389 - } 450 + var dataletParams ={
  451 + component : this.selectedDatalet+"-datalet",
  452 + params : params,
  453 + fields : selectedFields,
  454 + placeHolder : this.$.datalet_selection_datalet_placeholder
  455 + };
390 456
391 -// this.$.datalet_selection_datalet_placeholder.innerHTML = "<datatable-datalet data-url=\"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000\" fields='[\"result,records,Lat\",\"result,records,Lng\"]'>we";  
392 -// this.$.datalet_selection_datalet_placeholder.innerHTML = "<"+this.selectedDatalet+"-datalet data-url=\""+this.dataUrl+"\" fields='"+JSON.stringify(this.fields)+"'></"+this.selectedDatalet+">"; 457 + ComponentService.deep_url = this.deepUrl;
  458 + ComponentService.getComponent(dataletParams);
393 459
394 -// $("#base_datalet_container").html("");  
395 - $("#base_datalet_container").css('visibility','hidden');  
396 - $("#base_datalet_container").css('padding','0px');  
397 - $("#base_datalet_container").css('height','0px');  
398 -// console.log($("#base_datalet_container")); 460 + this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
399 }, 461 },
400 462
401 - _addDatalet : function(){console.log("we"); 463 + _addDatalet : function(){
402 464
403 var data = { 465 var data = {
404 dataUrl : this.dataUrl, 466 dataUrl : this.dataUrl,
@@ -414,6 +476,16 @@ @@ -414,6 +476,16 @@
414 476
415 }, 477 },
416 478
  479 + _copy : function(o) {
  480 + var out, v, key;
  481 + out = Array.isArray(o) ? new Array(o.length) : {};
  482 + for (key in o) {
  483 + v = o[key];
  484 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  485 + }
  486 + return out;
  487 + },
  488 +
417 _resize : function(){ 489 _resize : function(){
418 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; 490 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
419 h = h - 64 - 8; //height with page scroller 491 h = h - 64 - 8; //height with page scroller
@@ -422,7 +494,10 @@ @@ -422,7 +494,10 @@
422 494
423 $("#datalet_selection_inputs").height(h); 495 $("#datalet_selection_inputs").height(h);
424 $("#datalet_selection_labels").height(h); 496 $("#datalet_selection_labels").height(h);
425 - $("#datalet_selection_datalet").height(h-132); 497 + if(this.modify)
  498 + $("#datalet_selection_datalet").height(h-128);
  499 + else
  500 + $("#datalet_selection_datalet").height(h);
426 } 501 }
427 502
428 }); 503 });
controllets/dataset-selection-controllet/dataset-selection-controllet.html
  View file @e0e4a97
@@ -33,6 +33,12 @@ @@ -33,6 +33,12 @@
33 <template> 33 <template>
34 34
35 <style is="custom-style"> 35 <style is="custom-style">
  36 + :host {
  37 + --paper-dropdown-menu-icon: {
  38 + color: #2196F3;
  39 + };
  40 + }
  41 +
36 paper-tabs { 42 paper-tabs {
37 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; 43 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
38 font-size: 16px; 44 font-size: 16px;
@@ -56,11 +62,16 @@ @@ -56,11 +62,16 @@
56 color: #B6B6B6; 62 color: #B6B6B6;
57 } 63 }
58 64
59 - /*paper-dropdown-menu {*/  
60 - /*width: 45%;*/  
61 - /*margin-bottom: 32px;*/  
62 - /*--paper-input-container-focus-color: #2196F3;*/  
63 - /*}*/ 65 + paper-dropdown-menu {
  66 + /*display: block;*/
  67 + width: 45%;
  68 + margin-bottom: 32px;
  69 + --paper-input-container-focus-color: #2196F3;
  70 + }
  71 +
  72 + paper-dropdown-menu paper-item {
  73 + white-space: nowrap;
  74 + }
64 75
65 paper-input-search { 76 paper-input-search {
66 width: 45%; 77 width: 45%;
@@ -77,10 +88,21 @@ @@ -77,10 +88,21 @@
77 color: #FFFFFF; 88 color: #FFFFFF;
78 } 89 }
79 90
80 - paper-menu{  
81 - /*visibility: visible ! important;*/ 91 + .ddl_container {
  92 + position: relative;
82 } 93 }
83 94
  95 + .info_button {
  96 + /*background-color: red;*/
  97 + position: absolute;
  98 + top: 18px;
  99 + left: 45%;
  100 + }
  101 +
  102 + /*paper-menu{*/
  103 + /*/!*visibility: visible ! important;*!/*/
  104 + /*}*/
  105 +
84 /*paper-item[focused] {*/ 106 /*paper-item[focused] {*/
85 /*background: #FFFFFF;*/ 107 /*background: #FFFFFF;*/
86 /*}*/ 108 /*}*/
@@ -129,7 +151,7 @@ @@ -129,7 +151,7 @@
129 <paper-material id="material_container" elevation="5"> 151 <paper-material id="material_container" elevation="5">
130 152
131 <paper-tabs selected="{{selected}}" on-tap="_loadTreeMap"> 153 <paper-tabs selected="{{selected}}" on-tap="_loadTreeMap">
132 - <paper-tab noink>SELECT DATA SOURCE</paper-tab> 154 + <paper-tab noink>LIST VIEW</paper-tab>
133 <paper-tab noink>TREE MAP VIEW</paper-tab> 155 <paper-tab noink>TREE MAP VIEW</paper-tab>
134 <paper-tab noink disabled>MOST POPULAR</paper-tab> 156 <paper-tab noink disabled>MOST POPULAR</paper-tab>
135 </paper-tabs> 157 </paper-tabs>
@@ -139,20 +161,42 @@ @@ -139,20 +161,42 @@
139 <neon-animatable> 161 <neon-animatable>
140 162
141 <div id="div_selection"> 163 <div id="div_selection">
  164 + <div class="ddl_container">
  165 + <paper-input-search id="input_search" label="Available datasets">
  166 + <paper-menu class="dropdown-content">
  167 + <template is="dom-repeat" items={{filteredDatasets}} as="dataset">
  168 + <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>
  169 + <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>-->
  170 + </template>
  171 + </paper-menu>
  172 + </paper-input-search>
  173 +
  174 + <div class="info_button">
  175 + <paper-icon-button id="info_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
  176 + </div>
  177 + </div>
  178 +
  179 + <template is="dom-if" if={{_isSuggested()}}>
  180 + <div class="ddl_container">
  181 + <paper-dropdown-menu label="Suggested datasets">
  182 + <paper-menu class="dropdown-content">
  183 + <template is="dom-repeat" items={{suggestedDatasets}} as="dataset">
  184 + <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>
  185 + <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>-->
  186 + </template>
  187 + </paper-menu>
  188 + </paper-dropdown-menu>
  189 +
  190 + <div class="info_button">
  191 + <paper-icon-button id="info_s_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
  192 + </div>
  193 + </div>
  194 +
  195 + </template>
142 196
143 - <paper-input-search label="Available datasets">  
144 - <paper-menu class="dropdown-content">  
145 - <template is="dom-repeat" items={{filteredDatasets}} as="dataset">  
146 - <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>  
147 - <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>-->  
148 - </template>  
149 - </paper-menu>  
150 - </paper-input-search>  
151 -  
152 - <paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>  
153 - <!--aggiustami anche dialog...-->  
154 <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea> 197 <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea>
155 198
  199 + <!--aggiustami anche dialog...-->
156 <paper-dialog id="dialog_info"> 200 <paper-dialog id="dialog_info">
157 <h2 id="dialog_name"></h2> 201 <h2 id="dialog_name"></h2>
158 <p id="dialog_description"></p> 202 <p id="dialog_description"></p>
@@ -163,11 +207,13 @@ @@ -163,11 +207,13 @@
163 207
164 <neon-animatable> 208 <neon-animatable>
165 <div id="div_datasetexplorer"> 209 <div id="div_datasetexplorer">
166 - <datasetexplorer-datalet class="datasetexplorer" data-url="/oxwall_x.y.z/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet> 210 + <datasetexplorer-datalet class="datasetexplorer" data-url="/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>
  211 + <!--<datasetexplorer-datalet class="datasetexplorer" data-url="/oxwall_x.y.z/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>-->
167 </div> 212 </div>
168 </neon-animatable> 213 </neon-animatable>
169 214
170 <neon-animatable> 215 <neon-animatable>
  216 + <!--popular-->
171 </neon-animatable> 217 </neon-animatable>
172 218
173 </neon-animated-pages> 219 </neon-animated-pages>
@@ -199,6 +245,11 @@ @@ -199,6 +245,11 @@
199 value : [] 245 value : []
200 }, 246 },
201 247
  248 + suggestedDatasets : {
  249 + type : Array,
  250 + value : undefined
  251 + },
  252 +
202 dataUrl : { 253 dataUrl : {
203 type : String, 254 type : String,
204 value : undefined, 255 value : undefined,
@@ -224,6 +275,12 @@ @@ -224,6 +275,12 @@
224 this.filteredDatasets = this.datasets; 275 this.filteredDatasets = this.datasets;
225 }, 276 },
226 277
  278 + _isSuggested : function(){
  279 + if(this.suggestedDatasets)
  280 + return true;
  281 + return false;
  282 + },
  283 +
227 _filterDatasets : function(e){ 284 _filterDatasets : function(e){
228 var filter = e.detail.inputValue; 285 var filter = e.detail.inputValue;
229 var filteredDatasets = []; 286 var filteredDatasets = [];
@@ -236,8 +293,8 @@ @@ -236,8 +293,8 @@
236 }, 293 },
237 294
238 _loadTreeMap : function(){ 295 _loadTreeMap : function(){
239 - if(this.selected == 0 && this.$.div_datasetexplorer.innerHTML == "")  
240 - this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet class=\"datasetexplorer\" data-url=\"/oxwall_x.y.z/openwall/api/datasetTree\" fields='[\"result,provider_name\",\"result,organization_name\",\"result,package_name\",\"result,resource_name\",\"result,url\",\"result,w\"]'></datasetexplorer-datalet>"; 296 +// if(this.selected == 0 && this.$.div_datasetexplorer.innerHTML == "")
  297 +// this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet class=\"datasetexplorer\" data-url=\"/oxwall_x.y.z/openwall/api/datasetTree\" fields='[\"result,provider_name\",\"result,organization_name\",\"result,package_name\",\"result,resource_name\",\"result,url\",\"result,w\"]'></datasetexplorer-datalet>";
241 }, 298 },
242 299
243 _selectDataUrl_treeMap : function(e){ 300 _selectDataUrl_treeMap : function(e){
@@ -258,15 +315,16 @@ @@ -258,15 +315,16 @@
258 _selectDataUrl : function(e){ 315 _selectDataUrl : function(e){
259 var dataset = this.filteredDatasets[parseInt(e.target.id)] 316 var dataset = this.filteredDatasets[parseInt(e.target.id)]
260 317
  318 +// this.$.input_search.value = "";
261 this.dataUrl = dataset.url; 319 this.dataUrl = dataset.url;
262 320
263 - if(dataset.description != ""){  
264 - this.$.info_button.removeAttribute("disabled");  
265 - this.$.dialog_name.innerHTML = dataset.name;  
266 - this.$.dialog_description.innerHTML = dataset.description;  
267 - }  
268 - else  
269 - this.$.info_button.setAttribute("disabled", "true"); 321 +// if(dataset.description != ""){
  322 +// this.$.info_button.removeAttribute("disabled");
  323 +// this.$.dialog_name.innerHTML = dataset.name;
  324 +// this.$.dialog_description.innerHTML = dataset.description;
  325 +// }
  326 +// else
  327 +// this.$.info_button.setAttribute("disabled", "true");
270 }, 328 },
271 329
272 _showInfo : function(){ 330 _showInfo : function(){
controllets/dataset-selection-controllet/paper-input-search.html
  View file @e0e4a97
@@ -321,13 +321,13 @@ respectively. @@ -321,13 +321,13 @@ respectively.
321 } 321 }
322 }, 322 },
323 323
324 - _fireInputValue: function() {console.log(this.inputValue); 324 + _fireInputValue: function() {//console.log(this.inputValue);
325 if(this.fireInputValue) {//change NO DDL 325 if(this.fireInputValue) {//change NO DDL
326 this.fire('paper-input-search_input-value', {inputValue: this.inputValue}); 326 this.fire('paper-input-search_input-value', {inputValue: this.inputValue});
327 if(this.contentElement.selectedItem){ 327 if(this.contentElement.selectedItem){
328 // this._setSelectedItem(null); 328 // this._setSelectedItem(null);
329 this.contentElement.select(-1); 329 this.contentElement.select(-1);
330 - console.log("deselected"); 330 +// console.log("deselected");
331 } 331 }
332 } 332 }
333 333
controllets/items-vslider-controllet/items-vslider-controllet.html
  View file @e0e4a97
@@ -108,7 +108,7 @@ @@ -108,7 +108,7 @@
108 108
109 <paper-material id="items_vslider_container" elevation="5"> 109 <paper-material id="items_vslider_container" elevation="5">
110 110
111 - <paper-input id="items_vslider_search" value={{filter}} no-label-float label="search datalet"> 111 + <paper-input id="items_vslider_search" value={{filter}} no-label-float label="search">
112 <iron-icon class="search" icon="search" prefix></iron-icon> 112 <iron-icon class="search" icon="search" prefix></iron-icon>
113 <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear"></paper-icon-button> 113 <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear"></paper-icon-button>
114 </paper-input> 114 </paper-input>
@@ -152,6 +152,11 @@ @@ -152,6 +152,11 @@
152 value : undefined 152 value : undefined
153 }, 153 },
154 154
  155 + preselectedDatalet : {
  156 + type : String,
  157 + value : undefined
  158 + },
  159 +
155 datalets : { 160 datalets : {
156 type : Array, 161 type : Array,
157 value : [] 162 value : []
@@ -182,6 +187,11 @@ @@ -182,6 +187,11 @@
182 // this._resize(); 187 // this._resize();
183 // var that = this; 188 // var that = this;
184 // window.addEventListener("resize", function() { that._resize(); }); 189 // window.addEventListener("resize", function() { that._resize(); });
  190 +
  191 + if(this.preselectedDatalet){
  192 + this._preselectDatalet();
  193 + this.preselectedDatalet = undefined;
  194 + }
185 }, 195 },
186 196
187 _clearInput : function() { 197 _clearInput : function() {
@@ -238,7 +248,7 @@ @@ -238,7 +248,7 @@
238 dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", ""); 248 dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", "");
239 } 249 }
240 250
241 - if(e.currentTarget.id != this.selectedDatalet){ 251 + if (e.currentTarget.id != this.selectedDatalet) {
242 e.currentTarget.elevation = "5"; 252 e.currentTarget.elevation = "5";
243 e.currentTarget.getElementsByClassName("legend")[0].className = e.currentTarget.getElementsByClassName("legend")[0].className + " selected"; 253 e.currentTarget.getElementsByClassName("legend")[0].className = e.currentTarget.getElementsByClassName("legend")[0].className + " selected";
244 this.selectedDatalet = e.currentTarget.id; 254 this.selectedDatalet = e.currentTarget.id;
@@ -249,6 +259,14 @@ @@ -249,6 +259,14 @@
249 this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet}); 259 this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
250 }, 260 },
251 261
  262 + _preselectDatalet : function(){
  263 + var dataletCard = document.getElementById(this.preselectedDatalet);
  264 + dataletCard.elevation = "5";
  265 + dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className + " selected";
  266 + this.selectedDatalet = this.preselectedDatalet;
  267 +
  268 + this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
  269 + },
252 270
253 _getImageUrl : function(index){ 271 _getImageUrl : function(index){
254 return this.datalets[index].imageUrl; 272 return this.datalets[index].imageUrl;
controllets/items-vslider-controllet/items-vslider-controllet2.html deleted
View file @707a150
1 -<link rel="import" href="../../bower_components/polymer/polymer.html" />  
2 -  
3 -<!--<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">-->  
4 -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">  
5 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
6 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
7 -  
8 -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">  
9 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">  
10 -<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">  
11 -  
12 -<link rel="import" href="../../bower_components/paper-material">  
13 -  
14 -<dom-module id="items-vslider-controllet">  
15 -  
16 - <template>  
17 -  
18 - <style is="custom-style">  
19 - paper-icon-button{  
20 - color: #00BCD4;  
21 - height: 48px;  
22 - width: 48px;  
23 - --paper-icon-button-ink-color: #00BCD4;  
24 - }  
25 -  
26 - paper-icon-button:hover{  
27 - }  
28 -  
29 - .header{  
30 - width: 100%;  
31 - /*padding-bottom: 8px;*/  
32 - /*border-bottom: 2px solid #B6B6B6;*/  
33 - }  
34 -  
35 - .chevron-left{  
36 - float: left;  
37 - margin-top: 8px;  
38 - }  
39 -  
40 - .chevron-right{  
41 - float: right;  
42 - margin-top: 8px;  
43 - }  
44 -  
45 - .box{  
46 - overflow: auto;  
47 - }  
48 -  
49 - .avatar {  
50 - display: inline-block;  
51 - height: 64px;  
52 - width: 64px;  
53 - border-radius: 50%;  
54 - background: #2196F3;  
55 - color: #FFFFFF;  
56 - line-height: 64px;  
57 - font-size: 32px;  
58 - vertical-align: middle;  
59 - text-align: center;  
60 - }  
61 -  
62 - .text {  
63 - display: inline-block;  
64 - height: 64px;  
65 - vertical-align: middle;  
66 - padding-left: 20px;  
67 - }  
68 -  
69 - .title {  
70 - font-size: 32px;  
71 - color: #2196F3;  
72 - }  
73 -  
74 - .subtitle {  
75 - font-size: 16px;  
76 - color: #727272;  
77 - }  
78 - </style>  
79 -  
80 - <iron-ajax  
81 - auto  
82 - handle-as="json"  
83 - url={{dataletsListUrl}}  
84 - on-response="getDatalets">  
85 - </iron-ajax>  
86 -  
87 - <div class="header">  
88 - <paper-icon-button class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>  
89 - <paper-icon-button class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>  
90 -  
91 - <div class="box">  
92 - <div class="avatar">[[avatar]]</div>  
93 - <div class="text">  
94 - <div class="title">[[title]]</div>  
95 - <div class="subtitle">[[subtitle]]</div>  
96 - </div>  
97 - </div>  
98 - </div>  
99 -  
100 - <paper-material id="material_tree_view" elevation="5">  
101 -  
102 - <neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">  
103 - <!--<neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish" selected="[[selected]]" entry-animation="slide-from-bottom-animation" exit-animation="slide-down-animation">-->  
104 -  
105 - <template is="dom-repeat" items="{{pages}}" as="page">  
106 -  
107 - <neon-animatable>  
108 -  
109 - <template is="dom-repeat" items="{{dataletsPerPage}}" as="index">  
110 -  
111 - <!--<span> {{item.name}}</span>-->  
112 - <!--<img src={{getdatalets.image}}>-->  
113 - <img src={{_getImage(page,index)}}>  
114 -  
115 - </template>  
116 - </neon-animatable>  
117 -  
118 - <!--<neon-animated-pages id="neon_animated_pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">-->  
119 - <!--<template is="dom-repeat" items="{{pages}}" as="page">-->  
120 - <!--<neon-animatable>-->  
121 - <!--<template is="dom-repeat" items="{{dataletsPerPage}}" as="index">-->  
122 - <!--<paper-material elevation="1" class='content-card'>-->  
123 - <!--<div class="legend"><span>sbiricuda siempre!</span></div>-->  
124 - <!--<div class="card-content-image">-->  
125 - <!--<img src="{{_getImageUrl(page,index)}}">-->  
126 - <!--</div>-->  
127 - <!--</paper-material>-->  
128 - <!--</template>-->  
129 - <!--</neon-animatable>-->  
130 - <!--</template>-->  
131 - <!--</neon-animated-pages>-->  
132 -  
133 - </template>  
134 -  
135 - </neon-animated-pages>  
136 -  
137 - </paper-material>  
138 -  
139 - </template>  
140 -  
141 - <script>  
142 -  
143 - Polymer({  
144 -  
145 - is : 'items-vslider-controllet',  
146 -  
147 - properties : {  
148 -  
149 - entryAnimation : {  
150 - type : String,  
151 - value : ""  
152 - },  
153 -  
154 - exitAnimation : {  
155 - type : String,  
156 - value : ""  
157 - },  
158 -  
159 - selected : {  
160 - type : Number,  
161 - value : 0  
162 - },  
163 -  
164 - title : {  
165 - type : String,  
166 - value : ""  
167 - },  
168 -  
169 - subtitle : {  
170 - type : String,  
171 - value : ""  
172 - },  
173 -  
174 - avatar : {  
175 - type : String,  
176 - value : "1"  
177 - },  
178 -  
179 - datalets : {  
180 - type : Array,  
181 - value : []  
182 - },  
183 -  
184 - pages : {  
185 - type : Array,  
186 - value : []  
187 - },  
188 -  
189 - dataletsPerPage : {  
190 - type : Array,  
191 - value : []  
192 - }  
193 -  
194 -  
195 - //dataletsListUrl or datalets as input  
196 - },  
197 -  
198 - getDatalets : function(e){//imageUrllllllllllllllllllllllllllllllllllllllll  
199 - datalets = new Array();  
200 - for(var i=0; i < e.detail.response.length; i++){  
201 - var datalet = { name : e.detail.response[i].name, image : e.detail.response[i].url + e.detail.response[i].name + ".png" };  
202 - datalets.push(datalet);  
203 - }  
204 - this.datalets = datalets;  
205 -  
206 - console.log(this.datalets);  
207 - this.pages = [0,1,2];  
208 - this.dataletsPerPage = [0,1,2];  
209 -  
210 - },  
211 -  
212 -// getName : function(name){  
213 -// return name;  
214 -// },  
215 -//  
216 - _getImage : function(page, index){  
217 - console.log(this.datalets[3*page+index].image);  
218 - return this.datalets[3*page+index].image;  
219 - },  
220 -  
221 - _resize : function(){//da cambiare rispetto al div container!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
222 - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;  
223 - h = h - 64; //height with page scroller  
224 - $("#material_tree_view").height(h);  
225 - },  
226 -  
227 - attached : function() {  
228 -// this.fire('items-vslider-controllet_selected', {selected : this.selected});  
229 - this._resize();  
230 - },  
231 -  
232 - setTitle : function(title, subtitle) {  
233 - this.title = title;  
234 - this.subtitle = subtitle;  
235 - },  
236 -  
237 - setAvatar : function(innerText) {  
238 - this.avatar = innerText;  
239 - },  
240 -  
241 - chevronLeft : function(flag) {  
242 - var buttons = document.getElementsByTagName("paper-icon-button");  
243 - if(flag)  
244 - buttons[0].removeAttribute("disabled");  
245 - else  
246 - buttons[0].setAttribute("disabled", "true");  
247 - },  
248 -  
249 - chevronRight : function(flag) {  
250 - var buttons = document.getElementsByTagName("paper-icon-button");  
251 - if(flag)  
252 - buttons[1].removeAttribute("disabled");  
253 - else  
254 - buttons[1].setAttribute("disabled", "true");  
255 - },  
256 -  
257 - _onPrevClick : function() {  
258 - var buttons = document.getElementsByTagName("paper-icon-button");  
259 - buttons[0].setAttribute("disabled", "true");  
260 - buttons[1].setAttribute("disabled", "true");  
261 -  
262 -// this.entryAnimation = 'slide-from-left-animation';  
263 -// this.exitAnimation = 'slide-right-animation';  
264 -  
265 - this.entryAnimation = '';  
266 - this.exitAnimation = 'slide-up-animation';  
267 -  
268 - this.selected = this.selected === 0 ? (this.pages.length-1) : (this.selected - 1);  
269 - },  
270 -  
271 - _onNextClick : function() {  
272 - var buttons = document.getElementsByTagName("paper-icon-button");  
273 - buttons[0].setAttribute("disabled", "true");  
274 - buttons[1].setAttribute("disabled", "true");  
275 -  
276 -// this.entryAnimation = 'slide-from-right-animation';  
277 -// this.exitAnimation = 'slide-left-animation';  
278 -  
279 - this.entryAnimation = 'slide-down-animation';  
280 - this.exitAnimation = '';  
281 -  
282 - this.selected = this.selected === (this.pages.length-1) ? 0 : (this.selected + 1);  
283 - },  
284 -  
285 - _onNeonAnimationFinish: function() {  
286 - var buttons = document.getElementsByTagName("paper-icon-button");  
287 - buttons[0].removeAttribute("disabled");  
288 - buttons[1].removeAttribute("disabled");  
289 -  
290 - this.avatar = this.selected+1;  
291 -  
292 - this.fire('page-slider-controllet_selected', {selected : this.selected});  
293 - }  
294 -  
295 - });  
296 -  
297 - </script>  
298 -  
299 -</dom-module>  
300 \ No newline at end of file 0 \ No newline at end of file
controllets/items-vslider-controllet/items-vslider-controllet3.html deleted
View file @707a150
1 -<link rel="import" href="../../bower_components/polymer/polymer.html" />  
2 -  
3 -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">  
4 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
5 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
6 -  
7 -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">  
8 -<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">  
9 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">  
10 -  
11 -<link rel="import" href="../../bower_components/paper-material">  
12 -  
13 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
14 -  
15 -<!--<link rel="import" href="../paper-input.html">-->  
16 -<!--<link rel="import" href="../paper-input-container.html">-->  
17 -<!--<link rel="import" href="../paper-input-error.html">-->  
18 -<!--<link rel="import" href="../paper-input-char-counter.html">-->  
19 -<!--<link rel="import" href="../paper-textarea.html">-->  
20 -<!--<link rel="import" href="../../iron-input/iron-input.html">-->  
21 -<!--<link rel="import" href="../../iron-icon/iron-icon.html">-->  
22 -<!--<link rel="import" href="../../iron-icons/iron-icons.html">-->  
23 -<!--<link rel="import" href="../../paper-icon-button/paper-icon-button.html">-->  
24 -  
25 -  
26 -<dom-module id="items-vslider-controllet">  
27 -  
28 - <template>  
29 -  
30 - <style is="custom-style">  
31 - #material_items_vslider{  
32 - display: flex;  
33 - flex-direction: column;  
34 - width: 172px;  
35 - background-color: #E0E0E0;  
36 - }  
37 -  
38 - paper-icon-button{  
39 - color: #FFFFFF;  
40 - /*color: #2196F3;*/  
41 - height: 48px;  
42 - width: 48px;  
43 - padding: 0px;  
44 - margin: 0px;  
45 - --paper-icon-button-ink-color: white;  
46 - /*--paper-icon-button-ink-color: #2196F3;*/  
47 -  
48 - /*margin-left: 63px;*/  
49 - }  
50 -  
51 - paper-icon-button:hover{  
52 - }  
53 -  
54 - .arrow-up{  
55 - background-color: #2196F3;  
56 - /*float: left;*/  
57 - /*margin-top: 8px;*/  
58 - padding-left: 63px;  
59 - }  
60 -  
61 - .arrow-down{  
62 - background-color: #2196F3;  
63 - /*float: right;*/  
64 - /*margin-top: 8px;*/  
65 - padding-left: 63px;  
66 - }  
67 -  
68 - neon-animatable {  
69 - position: relative;  
70 - color: white;  
71 - /*width: 248px;*/  
72 - /*height: 100%;*/  
73 - height: auto;/*???*/  
74 - /*background-color: red;*/  
75 - overflow: hidden;  
76 - }  
77 -  
78 - #div_datalets_container {  
79 - position: relative;  
80 - /*color: white;*/  
81 - /*width: 248px;*/  
82 - /*height: 100%;*/  
83 - /*height: auto;/!*???*!/*/  
84 - /*background-color: red;*/  
85 - /*overflow: hidden;*/  
86 - }  
87 -  
88 - .content-card{  
89 - position: relative;  
90 - /*float: left;*/  
91 - margin : 16px;  
92 - /*width: 80px;*/  
93 - /*height: 72px;*/  
94 - background: #fff;  
95 - padding: 8px;  
96 -  
97 - height: 124px;  
98 - width: 124px;  
99 -  
100 - cursor: pointer;  
101 - }  
102 -  
103 - img{  
104 - height: 100%;  
105 - width: 100%;  
106 - }  
107 -  
108 - .legend {  
109 - position: absolute;  
110 - /*background: rgba(0,0,0,0.8);*/  
111 - background: #9E9E9E;/*#9e9e9e;*/  
112 - color: #FFFFFF;  
113 - /*height: 32px;*/  
114 - /*padding-left: 8px;*/  
115 - /*padding: 0px 8px 0px 8px;*/  
116 - padding: 8px;  
117 - left: 0;  
118 - bottom: 16px;  
119 - z-index: 1;  
120 - opacity: 0.87;  
121 - width: 124px;  
122 - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;  
123 - font-size: 16px;  
124 - }  
125 -  
126 - .legend.selected {  
127 - font-weight: 700;  
128 - background-color: #2196F3;  
129 - opacity: 1;  
130 - }  
131 -  
132 - .legend span{  
133 - /*position: relative;*/  
134 - /*top: 8px;*/  
135 - }  
136 -  
137 - .div_search{  
138 - /*height: 64px;*/  
139 - height: 48px;  
140 - padding: 0px 8px;  
141 - background-color: #B6B6B6;  
142 - --paper-input-container-focus-color: #2196F3;  
143 - }  
144 -  
145 - .search{  
146 - color: #FFFFFF  
147 - /*height: 32px;*/  
148 - }  
149 -  
150 - .clear {  
151 - color: #2196F3;  
152 - --paper-icon-button-ink-color: #2196F3;  
153 - width: 16px; /* 15px + 2*4px for padding */  
154 - height: 16px;  
155 - /*padding: 0px 4px;*/  
156 - margin-bottom: 3px;  
157 - }  
158 -  
159 -  
160 -  
161 - </style>  
162 -  
163 - <iron-ajax auto handle-as="json" url={{dataletsListUrl}} on-response="_getDatalets"></iron-ajax>  
164 -  
165 - <paper-material id="material_items_vslider" elevation="5">  
166 -  
167 - <!--<div class="div_search">-->  
168 - <!--<paper-icon-button class="search" icon="icons:search"></paper-icon-button>-->  
169 -  
170 - <paper-input id="div_search" value={{filter}} class="div_search" no-label-float label="search datalet" id="input_search">  
171 - <iron-icon class="search" icon="search" prefix></iron-icon>  
172 - <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" ></paper-icon-button><!--tabindex="0"-->  
173 - </paper-input>  
174 -  
175 - <!--</div>-->  
176 -  
177 -  
178 -  
179 - <div class="arrow-up"><paper-icon-button on-click="_onPrevClick" icon="hardware:keyboard-arrow-up"></paper-icon-button></div>  
180 -  
181 - <div id="div_datalets_container" class="flex">  
182 - <template is="dom-repeat" items="{{filteredDatalets}}">  
183 - <paper-material id={{item.imageName}} elevation="1" class='content-card' on-click="_selectDatalet">  
184 - <div class="legend">{{item.imageName}}</div>  
185 - <div class="card-content-image">  
186 - <img src={{item.imageUrl}}>  
187 - </div>  
188 - </paper-material>  
189 - </template>  
190 - </div>  
191 -  
192 - <div class="arrow-down"><paper-icon-button on-click="_onNextClick" icon="hardware:keyboard-arrow-down"></paper-icon-button></div>  
193 -  
194 - </paper-material>  
195 -  
196 - </template>  
197 -  
198 - <script>  
199 -  
200 - Polymer({  
201 -  
202 - is : 'items-vslider-controllet',  
203 -  
204 - properties : {  
205 -  
206 -// entryAnimation : {  
207 -// type : String,  
208 -// value : ""  
209 -// },  
210 -//  
211 -// exitAnimation : {  
212 -// type : String,  
213 -// value : ""  
214 -// },  
215 -  
216 - selectedDatalet : {  
217 - type : String,  
218 - value : undefined  
219 - },  
220 -  
221 -// prevSelectedCard : {  
222 -// type : Object,  
223 -// value : undefined  
224 -// },  
225 -  
226 - datalets : {  
227 - type : Array,  
228 - value : []  
229 - },  
230 -  
231 - filteredDatalets : {  
232 - type : Array,  
233 - value : []  
234 - },  
235 -  
236 - pages : {  
237 - type : Array,  
238 - value : []  
239 - },  
240 -  
241 - dataletsPerPage : {  
242 - type : Array,  
243 - value : []  
244 - },  
245 -  
246 - filter : {  
247 - type : String,  
248 - value : "",  
249 - observer : '_filterDatalets'  
250 - }  
251 - },  
252 -  
253 - listeners: {  
254 - 'dom-change': '_onDomChange'  
255 - },  
256 -  
257 - ready : function() {  
258 - $(this.$.div_datalets_container).perfectScrollbar();  
259 -  
260 - this._resize();  
261 - var that = this;  
262 - window.addEventListener("resize", function() { that._resize(); });  
263 - },  
264 -  
265 - _clearInput : function() {  
266 - this.$.div_search.value = "";  
267 - ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
268 - ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
269 - ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
270 - ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
271 - },  
272 -// attached : function() {  
273 -// this._resize();  
274 -// var that = this;  
275 -// window.addEventListener("resize", function() { that._resize(); });  
276 -// },  
277 -  
278 - _getDatalets : function(e){  
279 - var datalets = new Array();  
280 - for(var i=0; i < e.detail.response.length; i++){  
281 - var datalet = { imageName : e.detail.response[i].name.replace("-datalet", ""), imageUrl : e.detail.response[i].url + e.detail.response[i].name + ".png" };  
282 - datalets.push(datalet);  
283 -// datalets.push(datalet);  
284 - }  
285 -  
286 - {{}}  
287 - this.pages = [0,1,2];  
288 - this.dataletsPerPage = [0,1,2];  
289 -  
290 - this.datalets = datalets;  
291 - this.filteredDatalets = datalets;  
292 -  
293 -// console.log(this.datalets);  
294 - },  
295 -  
296 - _filterDatalets : function(){//console.log(this.filter);  
297 - var datalets = new Array();  
298 - for(var i=0; i < this.datalets.length; i++){  
299 - var datalet = this.datalets[i];  
300 -// console.log(datalet.imageName.indexOf(this.filter));  
301 -// console.log(datalet.imageName);  
302 - if(datalet.imageName.indexOf(this.filter) != -1){  
303 - datalets.push(datalet);  
304 -// console.log("we");  
305 - }  
306 -  
307 - }  
308 -  
309 -// console.log(datalets);  
310 - this.filteredDatalets = datalets;  
311 -  
312 -  
313 -  
314 - ///////////////  
315 -//  
316 -// console.log(this.selectedDatalet);  
317 -// if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet)) != null ){  
318 -//  
319 -// var datalet = document.getElementById(this.selectedDatalet);  
320 -// console.log(datalet);  
321 -// datalet.elevation = "5";  
322 -// datalet.childNodes[2].className = datalet.childNodes[2].className + " selected";  
323 -// }  
324 -  
325 - //////////////  
326 -  
327 -  
328 - $("#div_datalets_container").animate({ scrollTop: 0}, 0);  
329 -  
330 - },  
331 -  
332 - _onDomChange : function() {  
333 - console.log("dom changed");  
334 - console.log(this.filteredDatalets);  
335 -  
336 - if(this.selectedDatalet != undefined ){  
337 -// console.log(this.selectedDatalet);  
338 -// var datalets = document.getElementsByClassName("content-card");  
339 -// var datalets = document.getElementsByTagName("paper-material");  
340 -  
341 - for(var i=0; i < this.filteredDatalets.length; i++){  
342 - var datalet = this.filteredDatalets[i];  
343 -// console.log(datalet.imageName);  
344 - datalet = document.getElementById(datalet.imageName);//dataletCarDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD  
345 - console.log(datalet);  
346 - datalet.elevation = "1";  
347 - datalet.childNodes[2].className = datalet.childNodes[2].className.replace("selected", "");  
348 - }  
349 -//  
350 - if(document.getElementById(this.selectedDatalet) != null ){  
351 -  
352 - var datalet = document.getElementById(this.selectedDatalet);  
353 - console.log(datalet);  
354 - datalet.elevation = "5";  
355 - datalet.childNodes[2].className = datalet.childNodes[2].className + " selected";  
356 - }  
357 -  
358 - }  
359 - },  
360 -  
361 - _selectDatalet : function(e){  
362 -// var dataletId = e.currentTarget.id;  
363 -// console.log(dataletId)  
364 -  
365 - if(this.selectedDatalet != undefined){  
366 - var datalet = document.getElementById(this.selectedDatalet);  
367 - datalet.elevation = "1";  
368 - datalet.childNodes[2].className = datalet.childNodes[2].className.replace("selected", "");  
369 - }  
370 -  
371 - e.currentTarget.elevation = "5";  
372 - e.currentTarget.childNodes[2].className = e.currentTarget.childNodes[2].className + " selected";  
373 -  
374 - console.log("weeeeeeeeeeeeeeeeee");  
375 - this.selectedDatalet = e.currentTarget.id;  
376 - },  
377 -  
378 -// _onCardClick : function(e){//prevSelectedCard-->selectedCard, no selected!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
379 -//  
380 -//// console.log(e.currentTarget);  
381 -//  
382 -//  
383 -// //controlla sul search......................................................................  
384 -//  
385 -//// dai ID alle card e modifica funzione!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
386 -//// disabilita pulsante top o bottom e multiclick  
387 -// if(this.prevSelectedCard != undefined){  
388 -// this.prevSelectedCard.elevation = "1";  
389 -// this.prevSelectedCard.childNodes[2].className = this.prevSelectedCard.childNodes[2].className.replace("selected", "");  
390 -// }  
391 -//  
392 -//  
393 -// e.currentTarget.elevation = "5";  
394 -// e.currentTarget.childNodes[2].className = e.currentTarget.childNodes[2].className + " selected";  
395 -//  
396 -// var b = document.getElementById("barchart");  
397 -//  
398 -//// b.elevation = "5";  
399 -//// b.childNodes[2].className = e.currentTarget.childNodes[2].className + " selected";  
400 -//  
401 -// this.prevSelectedCard = e.currentTarget;  
402 -//  
403 -//// this.fire('items-slider-controllet_item-selected', {datalet: e.currentTarget.id + "-datalet"});  
404 -//  
405 -// },  
406 -  
407 -// _getImageUrl : function(page, index){  
408 -// return this.datalets[3*page+index].imageUrl;  
409 -// },  
410 -  
411 - _getImageUrl : function(index){  
412 - return this.datalets[index].imageUrl;  
413 - },  
414 -  
415 - _onPrevClick : function() {  
416 -  
417 - var container = $("#div_datalets_container");  
418 - var h = container.height();  
419 - var dataletPerPage = parseInt(h/156);  
420 - var scroll = $("#div_datalets_container").scrollTop()-156*dataletPerPage;  
421 - var diff = scroll % 156;  
422 -// scroll += 156-diff;  
423 - scroll -= diff;  
424 - $("#div_datalets_container").animate({ scrollTop: scroll}, 300);  
425 -  
426 -  
427 -// var scroll = $("#div_datalets_container").scrollTop()-156*3;  
428 -// console.log(scroll);  
429 -  
430 -// console.log(scroll);  
431 - },  
432 -  
433 - _onNextClick : function() {  
434 - var container = $("#div_datalets_container");  
435 - var h = container.height();  
436 - var dataletPerPage = parseInt(h/156);  
437 - var scroll = $("#div_datalets_container").scrollTop()+156*dataletPerPage;  
438 - var diff = scroll % 156;  
439 - scroll -= diff;  
440 - $("#div_datalets_container").animate({ scrollTop: scroll}, 300);  
441 -  
442 -// var scroll = $("#div_datalets_container").scrollTop()+156*3;  
443 -//// console.log(scroll);  
444 -// $("#div_datalets_container").animate({ scrollTop: scroll}, 300);  
445 -//// console.log(scroll);  
446 - },  
447 -  
448 - _resize : function(){console.log("we");  
449 - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;  
450 - h = h - 64 - 8; //height with page scroller  
451 - $("#material_items_vslider").height(h);  
452 - }  
453 -  
454 - });  
455 -  
456 - </script>  
457 -  
458 -</dom-module>  
459 \ No newline at end of file 0 \ No newline at end of file
controllets/multi-table-controllet/multi-table-controllet.html
  View file @e0e4a97
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> 7 <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
8 <link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> 8 <link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
9 9
10 -<link rel="import" href="../../datalets/dynamic-datatable-datalet/datatable-datalet.html" /> 10 +<link rel="import" href="../../datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html" />
11 11
12 <dom-module id="multi-table-controllet"> 12 <dom-module id="multi-table-controllet">
13 13
controllets/page-slider-controllet/page-slider-controllet.html
  View file @e0e4a97
@@ -123,6 +123,11 @@ @@ -123,6 +123,11 @@
123 value : 0 123 value : 0
124 }, 124 },
125 125
  126 + prevSelected : {
  127 + type : Number,
  128 + value : 0
  129 + },
  130 +
126 pages : { 131 pages : {
127 type : Number, 132 type : Number,
128 value : document.querySelectorAll('neon-animatable').length 133 value : document.querySelectorAll('neon-animatable').length
@@ -190,6 +195,10 @@ @@ -190,6 +195,10 @@
190 buttons[1].setAttribute("disabled", "true"); 195 buttons[1].setAttribute("disabled", "true");
191 }, 196 },
192 197
  198 + getPrevSelected : function() {
  199 + return this.prevSelected;
  200 + },
  201 +
193 _onPrevClick : function() { 202 _onPrevClick : function() {
194 var buttons = document.getElementsByTagName("paper-icon-button"); 203 var buttons = document.getElementsByTagName("paper-icon-button");
195 buttons[0].setAttribute("disabled", "true"); 204 buttons[0].setAttribute("disabled", "true");
@@ -198,6 +207,7 @@ @@ -198,6 +207,7 @@
198 this.entryAnimation = 'slide-from-left-animation'; 207 this.entryAnimation = 'slide-from-left-animation';
199 this.exitAnimation = 'slide-right-animation'; 208 this.exitAnimation = 'slide-right-animation';
200 209
  210 + this.prevSelected = this.selected;
201 this.selected = this.selected === 0 ? (this.pages-1) : (this.selected - 1); 211 this.selected = this.selected === 0 ? (this.pages-1) : (this.selected - 1);
202 }, 212 },
203 213
@@ -209,6 +219,7 @@ @@ -209,6 +219,7 @@
209 this.entryAnimation = 'slide-from-right-animation'; 219 this.entryAnimation = 'slide-from-right-animation';
210 this.exitAnimation = 'slide-left-animation'; 220 this.exitAnimation = 'slide-left-animation';
211 221
  222 + this.prevSelected = this.selected;
212 this.selected = this.selected === (this.pages-1) ? 0 : (this.selected + 1); 223 this.selected = this.selected === (this.pages-1) ? 0 : (this.selected + 1);
213 }, 224 },
214 225
controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html
  View file @e0e4a97
@@ -117,8 +117,8 @@ @@ -117,8 +117,8 @@
117 }, 117 },
118 118
119 _filterJson : function(data){ 119 _filterJson : function(data){
120 - console.log(data);  
121 - console.log(this.dataUrl); 120 +// console.log(data);
  121 +// console.log(this.dataUrl);
122 if(data.result != undefined && data.result.resource_id != undefined) { 122 if(data.result != undefined && data.result.resource_id != undefined) {
123 this.rootName = "result,records" 123 this.rootName = "result,records"
124 return data.result.records; 124 return data.result.records;
datalets/dynamic-datatable-datalet/datatable-datalet.html renamed to datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html
  View file @e0e4a97