Commit 57ef9bf428219b7e5a47439389b05458f2654811

Authored by Renato De Donato
1 parent 0ff13705

labels + info

controllets/datalet-selection-controllet/datalet-selection-controllet.html
@@ -14,6 +14,8 @@ @@ -14,6 +14,8 @@
14 14
15 <link rel="import" href="../../bower_components/paper-button/paper-button.html"> 15 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
16 16
  17 +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
  18 +
17 <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" /> 19 <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
18 20
19 <script src="../../../DEEPCLIENT/js/deepClient.js"></script> 21 <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
@@ -169,6 +171,11 @@ @@ -169,6 +171,11 @@
169 paper-button[disabled] { 171 paper-button[disabled] {
170 background-color: #B6B6B6; 172 background-color: #B6B6B6;
171 } 173 }
  174 +
  175 + #dialog_info {
  176 + border: 2px solid #2196F3;
  177 + background-color: #E0E0E0;
  178 + }
172 </style> 179 </style>
173 180
174 <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax> 181 <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
@@ -239,6 +246,11 @@ @@ -239,6 +246,11 @@
239 246
240 </div> 247 </div>
241 248
  249 + <paper-dialog id="dialog_info">
  250 + <h2 id="dialog_name"></h2>
  251 + <p id="dialog_description"></p>
  252 + </paper-dialog>
  253 +
242 </div> 254 </div>
243 255
244 </template> 256 </template>
@@ -301,6 +313,11 @@ @@ -301,6 +313,11 @@
301 value : undefined 313 value : undefined
302 }, 314 },
303 315
  316 + params:{
  317 + type: Object,
  318 + value: undefined
  319 + },
  320 +
304 modify : { 321 modify : {
305 type : Boolean, 322 type : Boolean,
306 value : false 323 value : false
@@ -325,6 +342,8 @@ @@ -325,6 +342,8 @@
325 this._preselectDatalet(); 342 this._preselectDatalet();
326 this.preselectedDatalet = undefined; 343 this.preselectedDatalet = undefined;
327 } 344 }
  345 +
  346 + this.params = {'data-url' : this.dataUrl};
328 }, 347 },
329 348
330 attached : function() { 349 attached : function() {
@@ -440,6 +459,14 @@ @@ -440,6 +459,14 @@
440 } 459 }
441 460
442 if(load){ 461 if(load){
  462 + var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
  463 + console.log(labels);
  464 + for (var i = 0; i < labels.length; i++) {
  465 + if (labels[i].innerHTML.trim() != "") {
  466 + this.params[labels[i].label] = labels[i].value;
  467 + }
  468 + }
  469 +
443 this._loadDatalet(selectedFields); 470 this._loadDatalet(selectedFields);
444 } 471 }
445 472
@@ -451,11 +478,11 @@ @@ -451,11 +478,11 @@
451 }, 478 },
452 479
453 _loadDatalet : function(selectedFields){ 480 _loadDatalet : function(selectedFields){
454 - var params = {'data-url' : this.dataUrl}; 481 +// var params = {'data-url' : this.dataUrl};
455 482
456 var dataletParams ={ 483 var dataletParams ={
457 component : this.selectedDatalet+"-datalet", 484 component : this.selectedDatalet+"-datalet",
458 - params : params, 485 + params : this.params,
459 fields : selectedFields, 486 fields : selectedFields,
460 placeHolder : this.$.datalet_selection_datalet_placeholder 487 placeHolder : this.$.datalet_selection_datalet_placeholder
461 }; 488 };
@@ -475,8 +502,8 @@ @@ -475,8 +502,8 @@
475 502
476 var data = { 503 var data = {
477 dataUrl : this.dataUrl, 504 dataUrl : this.dataUrl,
478 -// params : this.paramsFields,  
479 - params : {'data-url' : this.dataUrl}, 505 + params : this.params,
  506 +// params : {'data-url' : this.dataUrl},
480 fields : selectedFields, 507 fields : selectedFields,
481 datalet : this.selectedDatalet+"-datalet", 508 datalet : this.selectedDatalet+"-datalet",
482 comment : this.$.comment.value, 509 comment : this.$.comment.value,
@@ -487,6 +514,26 @@ @@ -487,6 +514,26 @@
487 514
488 }, 515 },
489 516
  517 + _showInfo : function(e){
  518 + var t = e.target;
  519 + if(t.tagName.indexOf("IRON-ICON") != -1)
  520 + t = $(e.target).parents("paper-icon-button")[0];
  521 +
  522 + var name = t.getAttribute("title").replace(" info", "");
  523 +
  524 + var dataset = $.grep(this.inputs, function(e){ return e.name == name; })[0];
  525 + if(!dataset)
  526 + dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
  527 +
  528 + this.$.dialog_name.innerHTML = dataset.name;
  529 + this.$.dialog_description.innerHTML = dataset.description;
  530 + this.$.dialog_info.open();
  531 +
  532 + var pos = t.getBoundingClientRect();
  533 + $("#dialog_info").css("top", pos.top - 4);
  534 + $("#dialog_info").css("left", pos.left - 4);
  535 + },
  536 +
490 _copy : function(o) { 537 _copy : function(o) {
491 var out, v, key; 538 var out, v, key;
492 out = Array.isArray(o) ? new Array(o.length) : {}; 539 out = Array.isArray(o) ? new Array(o.length) : {};
controllets/dataset-selection-controllet/dataset-selection-controllet.html
@@ -20,12 +20,9 @@ @@ -20,12 +20,9 @@
20 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html"> 20 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
21 21
22 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"> 22 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
23 -<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">  
24 23
25 <link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html"> 24 <link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
26 25
27 -<!--<script src="../../datalets/shared_js/d3.js"></script>-->  
28 -  
29 <link rel="import" href="paper-input-search.html"> 26 <link rel="import" href="paper-input-search.html">
30 27
31 <dom-module id="dataset-selection-controllet"> 28 <dom-module id="dataset-selection-controllet">
@@ -63,7 +60,6 @@ @@ -63,7 +60,6 @@
63 } 60 }
64 61
65 paper-dropdown-menu { 62 paper-dropdown-menu {
66 - /*display: block;*/  
67 width: 45%; 63 width: 45%;
68 margin-bottom: 32px; 64 margin-bottom: 32px;
69 --paper-input-container-focus-color: #2196F3; 65 --paper-input-container-focus-color: #2196F3;
@@ -93,20 +89,11 @@ @@ -93,20 +89,11 @@
93 } 89 }
94 90
95 .info_button { 91 .info_button {
96 - /*background-color: red;*/  
97 position: absolute; 92 position: absolute;
98 top: 18px; 93 top: 18px;
99 left: 45%; 94 left: 45%;
100 } 95 }
101 96
102 - /*paper-menu{*/  
103 - /*/!*visibility: visible ! important;*!/*/  
104 - /*}*/  
105 -  
106 - /*paper-item[focused] {*/  
107 - /*background: #FFFFFF;*/  
108 - /*}*/  
109 -  
110 paper-textarea { 97 paper-textarea {
111 width: 90%; 98 width: 90%;
112 margin-bottom: 32px; 99 margin-bottom: 32px;
@@ -124,27 +111,16 @@ @@ -124,27 +111,16 @@
124 111
125 #material_container { 112 #material_container {
126 margin-top: 8px; 113 margin-top: 8px;
127 - /*height: 55vh;*/  
128 } 114 }
129 115
130 #div_selection { 116 #div_selection {
131 padding-left: 10%; 117 padding-left: 10%;
132 padding-top: 64px; 118 padding-top: 64px;
133 - /*padding-bottom: 64px;*/  
134 } 119 }
135 120
136 #dialog_info { 121 #dialog_info {
137 border: 2px solid #2196F3; 122 border: 2px solid #2196F3;
138 background-color: #E0E0E0; 123 background-color: #E0E0E0;
139 - position: fixed;  
140 - top: 232px;  
141 - width: 60%;  
142 - height: auto;  
143 - /*overflow: auto;*/  
144 - }  
145 -  
146 - #div_datasetexplorer {  
147 - /*padding-top: 48px;*/  
148 } 124 }
149 </style> 125 </style>
150 126
@@ -162,11 +138,10 @@ @@ -162,11 +138,10 @@
162 138
163 <div id="div_selection"> 139 <div id="div_selection">
164 <div class="ddl_container"> 140 <div class="ddl_container">
165 - <paper-input-search id="input_search" label="Available datasets"> 141 + <paper-input-search id="_datasets" label="Available datasets">
166 <paper-menu class="dropdown-content"> 142 <paper-menu class="dropdown-content">
167 <template is="dom-repeat" items={{filteredDatasets}} as="dataset"> 143 <template is="dom-repeat" items={{filteredDatasets}} as="dataset">
168 <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item> 144 <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> 145 </template>
171 </paper-menu> 146 </paper-menu>
172 </paper-input-search> 147 </paper-input-search>
@@ -177,12 +152,12 @@ @@ -177,12 +152,12 @@
177 </div> 152 </div>
178 153
179 <template is="dom-if" if={{isSuggested}}> 154 <template is="dom-if" if={{isSuggested}}>
  155 +
180 <div class="ddl_container"> 156 <div class="ddl_container">
181 - <paper-dropdown-menu label="Suggested datasets"> 157 + <paper-dropdown-menu id="s_datasets" label="Suggested datasets">
182 <paper-menu class="dropdown-content"> 158 <paper-menu class="dropdown-content">
183 <template is="dom-repeat" items={{suggestedDatasets}} as="dataset"> 159 <template is="dom-repeat" items={{suggestedDatasets}} as="dataset">
184 <paper-item id={{index}} on-tap="_selectSuggestedDataUrl">{{dataset.name}}</paper-item> 160 <paper-item id={{index}} on-tap="_selectSuggestedDataUrl">{{dataset.name}}</paper-item>
185 - <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>-->  
186 </template> 161 </template>
187 </paper-menu> 162 </paper-menu>
188 </paper-dropdown-menu> 163 </paper-dropdown-menu>
@@ -196,7 +171,6 @@ @@ -196,7 +171,6 @@
196 171
197 <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea> 172 <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea>
198 173
199 - <!--aggiustami anche dialog...-->  
200 <paper-dialog id="dialog_info"> 174 <paper-dialog id="dialog_info">
201 <h2 id="dialog_name"></h2> 175 <h2 id="dialog_name"></h2>
202 <p id="dialog_description"></p> 176 <p id="dialog_description"></p>
@@ -207,9 +181,6 @@ @@ -207,9 +181,6 @@
207 181
208 <neon-animatable> 182 <neon-animatable>
209 <div id="div_datasetexplorer"></div> 183 <div id="div_datasetexplorer"></div>
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 id="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>-->  
212 - <!--</div>-->  
213 </neon-animatable> 184 </neon-animatable>
214 185
215 <neon-animatable> 186 <neon-animatable>
@@ -286,12 +257,6 @@ @@ -286,12 +257,6 @@
286 this._loadTreeMap(); 257 this._loadTreeMap();
287 }, 258 },
288 259
289 -// _isSuggested : function(){  
290 -// if(this.suggestedDatasets)  
291 -// return true;  
292 -// return false;  
293 -// },  
294 -  
295 _filterDatasets : function(e){ 260 _filterDatasets : function(e){
296 var filter = e.detail.inputValue; 261 var filter = e.detail.inputValue;
297 var filteredDatasets = []; 262 var filteredDatasets = [];
@@ -306,68 +271,79 @@ @@ -306,68 +271,79 @@
306 _loadTreeMap : function(){ 271 _loadTreeMap : function(){
307 var h = $("#material_container").height() - 48; 272 var h = $("#material_container").height() - 48;
308 var w = $("#material_container").width(); 273 var w = $("#material_container").width();
309 -  
310 -// if(this.selected != 1 && this.$.div_datasetexplorer.innerHTML == "") 274 + // /oxwall_x.y.z
311 this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet width=\""+w+"\" height=\""+h+"\" data-url=\"/openwall/api/datasetTree\" fields='[\"result,provider_name\",\"result,organization_name\",\"result,package_name\",\"result,resource_name\",\"result,url\",\"result,w\"]'></datasetexplorer-datalet>"; 275 this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet width=\""+w+"\" height=\""+h+"\" data-url=\"/openwall/api/datasetTree\" fields='[\"result,provider_name\",\"result,organization_name\",\"result,package_name\",\"result,resource_name\",\"result,url\",\"result,w\"]'></datasetexplorer-datalet>";
312 }, 276 },
313 277
314 - _selectDataUrl_treeMap : function(e){  
315 - var url = e.detail.url;  
316 - url = url.split('/');  
317 - var index = url.indexOf('resource')  
318 - if (index != -1) { // ckan  
319 - var resourceId = url[index + 1];  
320 - url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId; 278 + _selectDataUrl_treeMap : function(e) {
  279 + $("#_datasets")[0]._setSelectedItem(null);
  280 + $("#_datasets")[0].inputValue = "";
  281 + $("#info_dataset")[0].setAttribute("disabled", "true");
321 282
322 - } else  
323 - url = "sorry, data provider not supported yet"; 283 + if (this.isSuggested) {
  284 + $("#s_datasets")[0]._setSelectedItem(null);
  285 + $("#s_datasets")[0].contentElement.select(-1);
  286 + $("#info_s_dataset")[0].setAttribute("disabled", "true");
  287 + }
324 288
325 - this.dataUrl = url; 289 + this.dataUrl = e.detail.url;
326 this.selected=0; 290 this.selected=0;
327 }, 291 },
328 292
329 _selectDataUrl : function(e){ 293 _selectDataUrl : function(e){
330 - console.log(e.target); 294 + if (this.isSuggested) {
  295 + $("#s_datasets")[0]._setSelectedItem(null);
  296 + $("#s_datasets")[0].contentElement.select(-1);
  297 + $("#info_s_dataset")[0].setAttribute("disabled", "true");
  298 + }
  299 +
331 var dataset = this.filteredDatasets[parseInt(e.target.id)] 300 var dataset = this.filteredDatasets[parseInt(e.target.id)]
332 301
333 this.dataUrl = dataset.url; 302 this.dataUrl = dataset.url;
334 303
335 -// if(dataset.description != ""){  
336 -// this.$.info_button.removeAttribute("disabled");  
337 -// this.$.dialog_name.innerHTML = dataset.name;  
338 -// this.$.dialog_description.innerHTML = dataset.description;  
339 -// }  
340 -// else  
341 -// this.$.info_button.setAttribute("disabled", "true"); 304 + if(dataset.description != ""){
  305 + $("#info_dataset")[0].removeAttribute("disabled");
  306 + this.$.dialog_name.innerHTML = dataset.name;
  307 + this.$.dialog_description.innerHTML = dataset.description;
  308 + }
  309 + else
  310 + $("#info_dataset")[0].setAttribute("disabled", "true");
342 }, 311 },
343 312
344 _selectSuggestedDataUrl : function(e){ 313 _selectSuggestedDataUrl : function(e){
345 - console.log(e.target); 314 + $("#_datasets")[0]._setSelectedItem(null);
  315 + $("#_datasets")[0].inputValue = "";
  316 + $("#info_dataset")[0].setAttribute("disabled", "true");
  317 +
346 var dataset = this.suggestedDatasets[parseInt(e.target.id)] 318 var dataset = this.suggestedDatasets[parseInt(e.target.id)]
347 319
348 this.dataUrl = dataset.url; 320 this.dataUrl = dataset.url;
349 321
350 -// if(dataset.description != ""){  
351 -// this.$.info_button.removeAttribute("disabled");  
352 -// this.$.dialog_name.innerHTML = dataset.name;  
353 -// this.$.dialog_description.innerHTML = dataset.description;  
354 -// }  
355 -// else  
356 -// this.$.info_button.setAttribute("disabled", "true"); 322 + if(dataset.description != ""){
  323 + $("#info_s_dataset")[0].removeAttribute("disabled");
  324 + this.$.dialog_name.innerHTML = dataset.name;
  325 + this.$.dialog_description.innerHTML = dataset.description;
  326 + }
  327 + else
  328 + $("#info_s_dataset")[0].setAttribute("disabled", "true");
357 }, 329 },
358 330
359 - _showInfo : function(){ 331 + _showInfo : function(e){
  332 + var t = e.target;
  333 + if(t.tagName.indexOf("IRON-ICON") != -1)
  334 + t = $(e.target).parents("paper-icon-button")[0];
  335 +
360 this.$.dialog_info.open(); 336 this.$.dialog_info.open();
  337 +
  338 + var pos = t.getBoundingClientRect();
  339 + $("#dialog_info").css("top", pos.top - 4);
  340 + $("#dialog_info").css("left", pos.left - 4);
361 }, 341 },
362 342
363 _fireDataUrl : function(){ 343 _fireDataUrl : function(){
364 this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl}); 344 this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
365 }, 345 },
366 346
367 -// _addHTMLSpace : function(name){  
368 -// return name.replace(/ /g, '&nbsp;');  
369 -// },  
370 -  
371 _resize : function(){ 347 _resize : function(){
372 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; 348 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
373 h = h - 64 - 8; //height with page scroller 349 h = h - 64 - 8; //height with page scroller
controllets/dataset-selection-controllet/paper-input-search.html
@@ -441,236 +441,4 @@ respectively. @@ -441,236 +441,4 @@ respectively.
441 } 441 }
442 }); 442 });
443 })(); 443 })();
444 -</script>  
445 -  
446 -  
447 -  
448 -  
449 -<!--<link rel="import" href="../../bower_components/polymer/polymer.html">-->  
450 -  
451 -<!--<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">-->  
452 -<!--<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">-->  
453 -  
454 -<!--<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">-->  
455 -<!--<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">-->  
456 -<!--<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">-->  
457 -  
458 -<!--<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">-->  
459 -<!--<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">-->  
460 -<!--<link rel="import" href="../../bower_components/paper-item/paper-item.html">-->  
461 -  
462 -<!--<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">-->  
463 -  
464 -<!--<link rel="import" href="../../bower_components/paper-material/paper-material.html" />-->  
465 -  
466 -<!--<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">-->  
467 -<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->  
468 -<!--<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">-->  
469 -  
470 -<!--<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">-->  
471 -<!--<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">-->  
472 -  
473 -<!--<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">-->  
474 -  
475 -<!--&lt;!&ndash;<script src="../../datalets/shared_js/d3.js"></script>&ndash;&gt;-->  
476 -  
477 -<!--<link rel="import" href="../../bower_components/paper-input/paper-input.html">-->  
478 -<!--<link rel="import" href="demo/paper-autocomplete.html">-->  
479 -  
480 -<!--<dom-module id="paper-input-search">-->  
481 -  
482 - <!--<template>-->  
483 -  
484 - <!--&lt;!&ndash;<paper-dropdown-menu label="Available datasets">&ndash;&gt;-->  
485 - <!--&lt;!&ndash;<paper-menu class="dropdown-content">&ndash;&gt;-->  
486 - <!--&lt;!&ndash;<template is="dom-repeat" items={{datasets}} as="dataset">&ndash;&gt;-->  
487 - <!--&lt;!&ndash;<paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>&ndash;&gt;-->  
488 - <!--&lt;!&ndash;</template>&ndash;&gt;-->  
489 - <!--&lt;!&ndash;</paper-menu>&ndash;&gt;-->  
490 - <!--&lt;!&ndash;</paper-dropdown-menu>&ndash;&gt;-->  
491 -  
492 - <!--&lt;!&ndash;<paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>&ndash;&gt;-->  
493 -  
494 - <!--&lt;!&ndash;<paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea>&ndash;&gt;-->  
495 -  
496 - <!--&lt;!&ndash;<paper-dialog id="dialog_info">&ndash;&gt;-->  
497 - <!--&lt;!&ndash;<h2 id="dialog_name"></h2>&ndash;&gt;-->  
498 - <!--&lt;!&ndash;<p id="dialog_description"></p>&ndash;&gt;-->  
499 - <!--&lt;!&ndash;</paper-dialog>&ndash;&gt;-->  
500 -  
501 - <!--<style is="custom-style">-->  
502 - <!--paper-input {-->  
503 - <!--width: 200px;-->  
504 - <!--}-->  
505 - <!--</style>-->  
506 -  
507 - <!--<paper-input list="filtered_datasets" bind-value="{{filter::input}}"></paper-input>&lt;!&ndash; is="iron-input" type="search"&ndash;&gt;-->  
508 -  
509 - <!--<datalist id="filtered_datasets">-->  
510 - <!--<template is="dom-repeat" items={{_filteredDatasets}}>-->  
511 - <!--<option value={{item.name}}></option>-->  
512 - <!--</template>-->  
513 - <!--</datalist>-->  
514 -  
515 - <!--</template>-->  
516 -  
517 - <!--<script>-->  
518 -  
519 - <!--Polymer({-->  
520 -  
521 - <!--is : 'paper-input-search',-->  
522 -  
523 - <!--properties : {-->  
524 -  
525 - <!--datasets : {-->  
526 - <!--type : Array,-->  
527 - <!--value : undefined,-->  
528 -<!--// observer : '_ciao'-->  
529 - <!--},-->  
530 -  
531 - <!--_filteredDatasets : {-->  
532 - <!--type : Array,-->  
533 - <!--value: undefined-->  
534 - <!--},-->  
535 -  
536 - <!--filter: {-->  
537 - <!--type: String,-->  
538 - <!--value: "",-->  
539 - <!--observer: "_filterChanged"-->  
540 - <!--}-->  
541 - <!--},-->  
542 -  
543 - <!--attached : function(){-->  
544 - <!--this._filteredDatasets = this.datasets;-->  
545 - <!--console.log(this._filteredDatasets);-->  
546 - <!--},-->  
547 -  
548 - <!--_filterChanged : function(){-->  
549 -<!--// this.filteredDatalist = this.datalist;-->  
550 - <!--console.log(this.filter);-->  
551 - <!--},-->  
552 -  
553 - <!--});-->  
554 -  
555 - <!--</script>-->  
556 -  
557 -<!--</dom-module>-->  
558 -  
559 -  
560 -<!--paper-autocomplete!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->  
561 -<!--//http://stackoverflow.com/questions/31030583/polymer-paper-input-html-datalist-autocomplete-suggestions-list-->  
562 -  
563 -<!--<link rel="import" href="../../../bower_components/paper-input/paper-input.html">-->  
564 -<!--<link rel="import" href="../../../bower_components/paper-input/paper-input-container.html">-->  
565 -<!--<link rel="import" href="../../../bower_components/iron-collapse/iron-collapse.html">-->  
566 -<!--<link rel="import" href="../../../bower_components/paper-material/paper-material.html">-->  
567 -<!--<link rel="import" href="../../../bower_components/paper-button/paper-button.html">-->  
568 -  
569 -<!--&lt;!&ndash;<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">&ndash;&gt;-->  
570 -<!--&lt;!&ndash;<link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">&ndash;&gt;-->  
571 -<!--&lt;!&ndash;<link rel="import" href="../../../bower_components/paper-item/paper-item.html">&ndash;&gt;-->  
572 -  
573 -  
574 -<!--<dom-module id="paper-autocomplete">-->  
575 - <!--<style>-->  
576 - <!--iron-collapse {-->  
577 - <!--box-shadow: 6px;-->  
578 - <!--}-->  
579 -  
580 - <!--paper-button {-->  
581 - <!--width: 100%;-->  
582 - <!--text-transform: none;-->  
583 - <!--}-->  
584 -  
585 - <!--paper-input-container {-->  
586 - <!--width: 200px;-->  
587 - <!--}-->  
588 - <!--</style>-->  
589 - <!--<template>-->  
590 - <!--<paper-input-container>-->  
591 - <!--<label>{{label}}</label>-->  
592 - <!--<content select=".content"></content>-->  
593 - <!--<input id="searchBox" class="paper-input-input" is="iron-input" bind-value="{{searchValue::input}}"></input>-->  
594 - <!--</paper-input-container>-->  
595 -  
596 - <!--<iron-collapse id="collapse">-->  
597 -  
598 - <!--<paper-material>-->  
599 - <!--<div>-->  
600 - <!--<template id="resultList" is="dom-repeat" items="{{choices}}" filter="_listFilter">-->  
601 - <!--<paper-item>-->  
602 - <!--<paper-button on-tap="_selectItem">{{item.name}}</paper-button>-->  
603 - <!--</paper-item>-->  
604 - <!--</template>-->  
605 - <!--</div>-->  
606 - <!--</paper-material>-->  
607 - <!--</iron-collapse>-->  
608 -  
609 - <!--&lt;!&ndash;<iron-collapse id="collapse">&ndash;&gt;-->  
610 - <!--&lt;!&ndash;<paper-menu>&ndash;&gt;-->  
611 - <!--&lt;!&ndash;<template id="resultList" is="dom-repeat" items="{{choices}}" filter="_listFilter">&ndash;&gt;-->  
612 - <!--&lt;!&ndash;<paper-item>&ndash;&gt;-->  
613 - <!--&lt;!&ndash;&lt;!&ndash;<paper-button on-tap="_selectItem">{{item.name}}</paper-button>&ndash;&gt;&ndash;&gt;-->  
614 - <!--&lt;!&ndash;<paper-item on-tap="_selectItem">{{item.name}}</paper-item>&ndash;&gt;-->  
615 - <!--&lt;!&ndash;</paper-item>&ndash;&gt;-->  
616 - <!--&lt;!&ndash;</template>&ndash;&gt;-->  
617 - <!--&lt;!&ndash;</paper-menu>&ndash;&gt;-->  
618 - <!--&lt;!&ndash;</iron-collapse>&ndash;&gt;-->  
619 -  
620 - <!--</template>-->  
621 -<!--</dom-module>-->  
622 -<!--<script>-->  
623 - <!--(function() {-->  
624 - <!--Polymer({-->  
625 - <!--is: "paper-autocomplete",-->  
626 - <!--properties: {-->  
627 -<!--// choices: Array,-->  
628 - <!--label: String,-->  
629 - <!--value: {-->  
630 - <!--type: Object,-->  
631 - <!--},-->  
632 -  
633 - <!--choices: {-->  
634 - <!--type: Array,-->  
635 - <!--value: undefined-->  
636 - <!--},-->  
637 -  
638 - <!--searchValue: {-->  
639 - <!--type: String,-->  
640 - <!--value: '',-->  
641 - <!--observer: "_valueChanged"-->  
642 - <!--}-->  
643 - <!--},-->  
644 - <!--ready: function() {-->  
645 - <!--this.$.resultList.render();-->  
646 - <!--},-->  
647 -  
648 - <!--attached: function() {-->  
649 - <!--this.$.resultList.render();-->  
650 - <!--console.log(this.choices);-->  
651 - <!--},-->  
652 -  
653 - <!--_valueChanged: function(e) {console.log("we");-->  
654 - <!--var collapse = this.$.collapse-->  
655 - <!--if (e != '' && !collapse.opened) {-->  
656 - <!--this.$.resultList.render()-->  
657 - <!--collapse.toggle()-->  
658 - <!--} else-->  
659 - <!--if (e == '' && collapse.opened) {-->  
660 - <!--collapse.toggle()-->  
661 - <!--}-->  
662 - <!--},-->  
663 - <!--_listFilter: function(item) {-->  
664 - <!--return item.name.toLowerCase().includes(-->  
665 - <!--this.searchValue.toLowerCase()-->  
666 - <!--)-->  
667 - <!--},-->  
668 - <!--_selectItem: function(event) {-->  
669 - <!--this.set('searchValue', event.model.item.name)-->  
670 - <!--this.set('value', event.model.item)-->  
671 - <!--collapse.toggle()-->  
672 - <!--}-->  
673 - <!--})-->  
674 - <!--})()-->  
675 -<!--</script>-->  
676 - 444 +</script>
677 \ No newline at end of file 445 \ No newline at end of file