WebCompDev / COMPONENTS

Commit 9d4a34db1fc7047dcae93d795c73a01d5a3cfd0c

Authored by Luigi Serra
1 parent 486a1c48

selection controllet and card update

Inline Side-by-side
Showing 7 changed files with 266 additions and 1119 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @9d4a34d
... ... @@ -52,7 +52,7 @@
52 52  
53 53 <link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
54 54 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
55   -<link rel="import" href="../treeview-controllet/treeview-controllet.html">
  55 +<link rel="import" href="../tree-view-controllet/tree-view-controllet.html">
56 56 <link rel="import" href="../text-element-controllet/text-element-controllet.html">
57 57  
58 58 <!--
... ... @@ -80,7 +80,6 @@ Example:
80 80 <dom-module id="data-sevc-controllet">
81 81 <template>
82 82 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
83   - <link rel="stylesheet" href="static/css/reset.css">
84 83  
85 84 <style is="custom-style">
86 85  
... ... @@ -381,7 +380,7 @@ Example:
381 380 <div class="horizontal layout">
382 381  
383 382 <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
384   - <treeview-controllet id="fields_treeview"></treeview-controllet>
  383 + <tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>
385 384 </div>
386 385  
387 386 <div id="table_fields_container" class="area_container flex2child">
... ... @@ -535,7 +534,7 @@ Example:
535 534 listeners : {
536 535 'items-slider-controllet_item-selected' : '_dataletSelected',
537 536 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
538   - 'treeview-controllet_fileds-selected' : '_fieldsSelected',
  537 + 'tree-view-controllet_selected-fields' : '_fieldsSelected',
539 538 'text-element-controllet_content-changed' : '_textElementChanged'
540 539 },
541 540  
... ... @@ -680,14 +679,14 @@ Example:
680 679 * Utility function to inject datalet in a placeholder
681 680 */
682 681 injectDatalet: function(place_holder){
683   - var datalet_params_2 ={
  682 + var datalet_params ={
684 683 component : this.selectedDatalet,
685 684 params : this.paramsFields,
686 685 fields : this.selectedFields,
687 686 placeHolder : place_holder
688 687 };
689 688 ComponentService.deep_url = this.deepUrl;
690   - ComponentService.getComponent(datalet_params_2);
  689 + ComponentService.getComponent(datalet_params);
691 690 },
692 691  
693 692 /**
... ... @@ -698,9 +697,9 @@ Example:
698 697 * @param {Event} e
699 698 */
700 699 handleResponseData : function(e){
701   -
702   - this.$.fields_treeview.init(e.detail.response, this.selectedFields);
703   -
  700 + this.$.fields_treeview.setAttribute("json-data", JSON.stringify(e.detail.response));
  701 + this.$.fields_treeview.setAttribute("preselected-fields", JSON.stringify(this.selectedFields));
  702 + this.$.fields_treeview.ready();//chrome
704 703 },
705 704  
706 705 /**
... ... @@ -951,7 +950,7 @@ Example:
951 950 */
952 951 _fieldsSelected : function(e){
953 952  
954   - this.selectedFields = e.detail.fields;
  953 + this.selectedFields = e.detail.fields;
955 954 this.$.selectedFields_container.innerHTML = "";
956 955 for(var i=0;i<e.detail.fields.length;i++) {
957 956 this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
... ...
controllets/data-sevc-controllet/data-sevc-controllet__.html deleted
View file @486a1c4
1   -<!--
2   -@license
3   - The MIT License (MIT)
4   -
5   - Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
6   -
7   - Permission is hereby granted, free of charge, to any person obtaining a copy
8   - of this software and associated documentation files (the "Software"), to deal
9   - in the Software without restriction, including without limitation the rights
10   - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11   - copies of the Software, and to permit persons to whom the Software is
12   - furnished to do so, subject to the following conditions:
13   -
14   - The above copyright notice and this permission notice shall be included in
15   - all copies or substantial portions of the Software.
16   -
17   - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18   - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19   - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20   - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21   - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22   - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23   - THE SOFTWARE.
24   --->
25   -
26   -<!--
27   -* Developed by :
28   -* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
29   -*
30   --->
31   -
32   -<link rel="import" href="../../bower_components/polymer/polymer.html">
33   -<link rel="import" href="../../bower_components/paper-styles/color.html">
34   -
35   -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
36   -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
37   -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
38   -
39   -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
40   -<link rel="import" href="../../bower_components/paper-input/paper-input.html">
41   -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
42   -<link rel="import" href="../../bower_components/paper-button/paper-button.html">
43   -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
44   -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
45   -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
46   -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
47   -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
48   -<link rel="import" href="../../bower_components/paper-item/paper-item.html">
49   -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
50   -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
51   -<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
52   -
53   -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
54   -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
55   -<link rel="import" href="../tree-view-controllet/tree-view-controllet.html">
56   -<link rel="import" href="../text-element-controllet/text-element-controllet.html">
57   -
58   -<!--
59   -The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.
60   -It's composed by three steps. First, user have to select a datasource to access to a dataset. He can copy and paste/drag and drop an url(an api url with json response) or select
61   -from select contextual menu an available one. Second, the user selects the fields he want to visualize from a treeview by checking on it. A table preview of selected fields will show
62   -the currently selected values. Third, the users selects a visualization(datalet) from a slider and drags the previous selected fields in to the input data model fields area. A preview
63   -is available every time a fields is dragged in the input data model fields area.
64   -
65   -Example:
66   -
67   - <data-sevc-controllet deep-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/"
68   - datalets-list-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list"
69   - datasets='{[{name : 'dataset1', url : dataset1Urls}, ... , {name : 'datasetN', url : datasetNUrls}]'>
70   - </data-sevc-controllet>
71   -
72   -
73   -@element data-sevc-controllet
74   -@status beta
75   -@homepage
76   -@group controllets
77   --->
78   -
79   -
80   -<dom-module id="data-sevc-controllet">
81   - <template>
82   - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
83   - <link rel="stylesheet" href="static/css/reset.css">
84   -
85   - <style is="custom-style">
86   -
87   - ::content body {
88   - font-family: 'Roboto', sans-serif;
89   - }
90   -
91   - .flexchild
92   - {
93   - @apply(--layout-flex);
94   - }
95   -
96   - .flex2child
97   - {
98   - @apply(--layout-flex-2);
99   - }
100   -
101   - .avatar
102   - {
103   - display: inline-block;
104   - height: 2em;
105   - width: 2em;
106   - border-radius: 50%;
107   - background: var(--paper-blue-500);
108   - color: white;
109   - line-height: 2em;
110   - font-size: 1.87em;
111   - text-align: center;
112   - }
113   -
114   - .title
115   - {
116   - position: relative;
117   - top: 0.60vh;
118   - margin-left: 20px;
119   - }
120   -
121   - .big
122   - {
123   - font-size: 1.37em;
124   - color: var(--google-grey-500);
125   - }
126   -
127   - .medium
128   - {
129   - font-size: 1em;
130   - padding-bottom: 0.5em;
131   - color : #000000;
132   - font-weight: bold;
133   - }
134   -
135   - .small
136   - {
137   - font-size: 0.8em;
138   - padding-top: 10px;
139   - color: var(--paper-blue-500);
140   - font-weight: bold;
141   - }
142   -
143   - paper-input
144   - {
145   - width: 80%;
146   - }
147   -
148   - paper-dropdown-menu
149   - {
150   - text-align: left;
151   - margin: auto;
152   - width: 100%;
153   - }
154   -
155   - ::content paper-menu-button
156   - {
157   - display: block;
158   - width: 100%;
159   - }
160   -
161   - #visualization_slider_area
162   - {
163   - min-width: 670px;
164   - min-height: 180px;
165   - }
166   -
167   - #fields_mapping_area
168   - {
169   - min-width: 670px;
170   - min-height: 180px;
171   - }
172   -
173   - #datalet_placeholder
174   - {
175   - height: 360px;
176   - min-height: 360px;
177   -
178   - }
179   -
180   - .datalet_right_container
181   - {
182   - width: 100vh;
183   - }
184   -
185   - .field-mapping-card
186   - {
187   - width: 50%;
188   - float: left;
189   - }
190   -
191   - .toolbar_button
192   - {
193   - --iron-icon-height: 32px;
194   - --iron-icon-width: 32px;
195   - }
196   -
197   - #finish_button
198   - {
199   - --iron-icon-height: 32px;
200   - --iron-icon-width: 32px;
201   - color: var(--paper-blue-500);
202   - }
203   -
204   - .area_container
205   - {
206   - overflow: hidden;
207   - margin : 0.8em;
208   - padding : 0.8em;
209   - border-width: 1em;
210   - border-radius: 0.125rem;
211   - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);
212   - }
213   -
214   - #fields_placeholder{
215   - width: 40%;
216   - height: 75vh;
217   - position: relative;
218   - float: left;
219   - overflow: auto;
220   - }
221   -
222   - #table_fields_container{
223   - height: 75vh;
224   - width: 55%;
225   - position: relative;
226   - float: left;
227   - overflow: auto;
228   - }
229   -
230   - paper-tabs, paper-toolbar
231   - {
232   - background-color: var(--paper-blue-500);
233   - color: #ffffff;
234   - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
235   - }
236   -
237   - paper-toolbar paper-tabs
238   - {
239   - box-shadow: none;
240   - --paper-tabs-selection-bar-color : var(--google-gray-500);
241   - }
242   -
243   - paper-tabs[noink][no-bar] paper-tab.iron-selected
244   - {
245   - background-color: var(--google-gray-500);
246   - }
247   -
248   - paper-tabs[align-bottom]
249   - {
250   - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
251   - }
252   -
253   - #idm_fields_main_container{
254   - position: relative;
255   - height: 50vh;
256   - }
257   -
258   - #selected_fields_main_container{
259   - position: relative;
260   - height: 50vh;
261   - }
262   -
263   - #idm_layout_main_container{
264   - position: relative;
265   - height: 25vh;
266   - }
267   -
268   - paper-menu{
269   - width: 100%;
270   - }
271   -
272   - paper-dialog {
273   - position: fixed;
274   - top: 16px;
275   - width: auto;
276   - height: auto;
277   - overflow: auto;
278   - padding : 30px;
279   - }
280   -
281   - </style>
282   -
283   - <iron-ajax
284   - id="data_request"
285   - url={{dataUrl}}
286   - verbose="true"
287   - on-response="handleResponseData"
288   - debounce-duration="300">
289   - </iron-ajax>
290   -
291   - <iron-ajax
292   - id="datales_list_request"
293   - auto
294   - url={{dataletsListUrl}}
295   - handle-as="json"
296   - on-response="handleResponseDatalets"
297   - debounce-duration="300">
298   - </iron-ajax>
299   -
300   - <iron-ajax
301   - id="selected_datalet_request"
302   - url={{deepUrl}}
303   - verbose="true"
304   - on-response="handleSelectedDatalet"
305   - debounce-duration="300">
306   - </iron-ajax>
307   -
308   - <content>
309   -
310   - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
311   -
312   - <neon-animatable>
313   -
314   - <div class="vertical justified layout">
315   -
316   - <div class="horizontal layout">
317   - <div class="avatar" style="margin-left:15px">1</div>
318   - <div class="title flex">
319   - <div id="toolbar_title" class="big">Dataset source</div>
320   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
321   - </div>
322   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
323   - </div>
324   -
325   - <div class="area_container">
326   - <paper-tabs selected="{{DatasourceTabSelected}}">
327   - <paper-tab>Select data source</paper-tab>
328   - <paper-tab>Most popular</paper-tab>
329   - <paper-tab>Search</paper-tab>
330   - </paper-tabs>
331   - <iron-pages selected="{{DatasourceTabSelected}}">
332   - <div>
333   - <div class="card-content">
334   - <paper-dropdown-menu id="datasets-sources" label="Available datasets">
335   - <paper-menu class="dropdown-content">
336   - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
337   - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>
338   - </template>
339   - </paper-menu>
340   - </paper-dropdown-menu>
341   - <paper-icon-button id="infoButton" on-click="_onInfoClick" icon="info-outline" alt="Information about selected dataset" title="info-button" style="color:#9e9e9e;"></paper-icon-button>
342   - </div>
343   -
344   - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>
345   -
346   - <div class="card-content">
347   - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
348   - </div>
349   -
350   -
351   - </div>
352   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
353   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
354   - </iron-pages>
355   - </div>
356   -
357   - </div>
358   -
359   - </neon-animatable>
360   -
361   - <neon-animatable>
362   -
363   - <div class="vertical justified layout">
364   -
365   - <div class="horizontal layout">
366   - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>
367   - <div class="avatar">2</div>
368   - <div class="title flex">
369   - <div id="toolbar_title" class="big">Dataset source</div>
370   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
371   - </div>
372   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
373   - </div>
374   -
375   - <div class="horizontal layout">
376   -
377   - <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
378   - <tree-view-controllet id="fields_treeview" root-name="data" opened-path="data,records"></tree-view-controllet>
379   - </div>
380   -
381   - <div id="table_fields_container" class="area_container flex2child">
382   - <div id="table_component_place_holder"></div>
383   - </div>
384   -
385   - </div>
386   -
387   - </div>
388   -
389   - </neon-animatable>
390   -
391   - <neon-animatable style="height:100vh">
392   -
393   - <div class="vertical justified layout">
394   -
395   - <div class="horizontal layout">
396   - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>
397   - <div class="avatar">3</div>
398   - <div class="title flex">
399   - <div id="toolbar_title" class="big">Data mapping</div>
400   - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>
401   - </div>
402   - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
403   - </div>
404   -
405   -
406   - <div class="horizontal layout">
407   -
408   - <div class="">
409   - <div id="visualization_slider_area" class="area_container"></div>
410   - <div id="fields_mapping_area" class="area_container">
411   -
412   - <div id="selected_fields_main_container" class="field-mapping-card">
413   - <div class="title">
414   - <div class="medium">Selected fields</div>
415   - </div>
416   - <div id="selected_fields_container" class="area_container"></div>
417   - </div>
418   -
419   - <div id="idm_fields_main_container" class="field-mapping-card">
420   - <div class="title">
421   - <div class="medium">Datalet fields</div>
422   - </div>
423   - <div id="datalet_idm_fields_container" class="area_container"></div>
424   - </div>
425   -
426   - <div id="idm_layout_main_container" class="area_container">
427   - <div class="title">
428   - <div class="medium">Layout fields</div>
429   - </div>
430   - <div id="idm_layout_container" class="area_container"></div>
431   - </div>
432   - </div>
433   - </div>
434   -
435   - <div id="datalet_placeholder" style="min-width: 43%;"></div>
436   -
437   -
438   - </div>
439   -
440   - </div>
441   -
442   - </neon-animatable>
443   -
444   - </neon-animated-pages>
445   -
446   - <paper-toast id="message" text=""></paper-toast>
447   -
448   - <paper-dialog id="infoDialog">
449   - <h2 id="infoDialogTitle"></h2>
450   - <paper-dialog-scrollable id="infoDialogContent">
451   - </paper-dialog-scrollable>
452   - </paper-dialog>
453   -
454   - </content>
455   - </template>
456   -
457   - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
458   - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
459   -
460   - <script>
461   -
462   - Polymer({
463   -
464   - is : 'data-sevc-controllet',
465   -
466   - /**
467   - * Received when the user selects a datalet from slider.
468   - *
469   - * @event items-slider-controllet_item-selected
470   - */
471   -
472   - /**
473   - * Received when the user drags a selected fields in to one of the source input data model field
474   - *
475   - * @event draggable-element-controllet_content-dragged
476   - */
477   -
478   - /**
479   - * Received when the user selects one field from treeview controllet
480   - *
481   - * @event treeview-controllet-fileds-selected
482   - */
483   -
484   - /**
485   - * Received when the user drags a selected fields in to one of the source input data model field
486   - *
487   - * @event draggable-element-controllet_content-dragged
488   - */
489   -
490   - /**
491   - * Received when the user change text value of the selected datalet layout inputs
492   - *
493   - * @event text-element-controllet_content-changed
494   - */
495   -
496   - /**
497   - * Fired when the user press to finish button. At this event are attached all information about the visualization currently created
498   - *
499   - * @event data-sevc-controllet.dataletCreated
500   - */
501   -
502   - listeners : {
503   - 'items-slider-controllet_item-selected' : '_dataletSelected',
504   - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
505   - 'treeview-controllet_fileds-selected' : '_fieldsSelected',
506   - 'text-element-controllet_content-changed' : '_textElementChanged'
507   - },
508   -
509   - properties : {
510   -
511   - entryAnimation : {
512   - type : String,
513   - value : ""
514   - },
515   -
516   - exitAnimation : {
517   - type : String,
518   - value : ""
519   - },
520   -
521   - selected : {
522   - type : Number,
523   - value : 0
524   - },
525   -
526   - /**
527   - * It represents the data url from CKAN api
528   - *
529   - * @attribute dataUrl
530   - * @type string
531   - * @default 'null'
532   - */
533   - dataUrl : {
534   - type : String,
535   - value : undefined,
536   - observer : '_dataUrlChanged'
537   - },
538   - /**
539   - * It represents the DEEP url to get information about the datalets
540   - *
541   - * @attribute deepUrl
542   - * @type string
543   - * @default 'null'
544   - */
545   - deepUrl : {
546   - type : String,
547   - value : ""
548   - },
549   - /**
550   - * It's used to store the list of datalets returned from DEEP
551   - *
552   - * @attribute datalets_list
553   - * @type Array
554   - * @default empty
555   - */
556   - datalets_list : {
557   - type : Array ,
558   - value : []
559   - },
560   - /**
561   - * It's used to store the selected datalet. It will be set when the controllet get the event of selection by item slider (items-slider-controllet_item-selected)
562   - *
563   - * @attribute selected_datalet
564   - * @type String
565   - * @default ''
566   - */
567   - selected_datalet : {
568   - type : String,
569   - value : ""
570   - },
571   - /**
572   - * It's used to store the list of selected fields by user
573   - *
574   - * @attribute selected_fields
575   - * @type Array
576   - * @default empty
577   - */
578   - selected_fields : {
579   - type : Array,
580   - value : []
581   - },
582   - /**
583   - * It's used to store the params to give to datalet. This kind of params will not processed by selection step
584   - *
585   - * @attribute params_fields
586   - * @type Object
587   - * @default empty
588   - */
589   - params_fields:{
590   - type: Object,
591   - value: {}
592   - },
593   - /**
594   - * It's used to store the tab index in the first pass
595   - *
596   - * @attribute DatasourceTabSelected
597   - * @type Number
598   - * @default 0
599   - */
600   - DatasourceTabSelected : {
601   - type : Number,
602   - value : 0
603   - },
604   - /**
605   - * It's used to store the datasets to show in the contexual menu
606   - *
607   - * @attribute datasets
608   - * @type Array
609   - * @default empty
610   - */
611   - datasets :
612   - {
613   - type : Array,
614   - value : []
615   - }
616   - },
617   - /**
618   - * It is called after the elementÂ’s template has been stamped and all elements inside the elementÂ’s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.
619   - * In this phase the scrollbar will be initialized
620   - *
621   - * @method handleResponseData
622   - *
623   - * @param {Event} e
624   - */
625   -
626   - ready : function(){
627   -
628   - $(this.$.fields_placeholder).perfectScrollbar();
629   - $(this.$.selected_fields_main_container).perfectScrollbar();
630   - $(this.$.idm_fields_main_container).perfectScrollbar();
631   - $(this.$.idm_layout_main_container).perfectScrollbar();
632   - $(this.$.table_fields_container).perfectScrollbar();
633   -
634   - },
635   -
636   - /**
637   - * Callback to parse the data requested when dataUrl change its value
638   - *
639   - * @method handleResponseData
640   - *
641   - * @param {Event} e
642   - */
643   - handleResponseData : function(e){
644   -
645   - //this.$.fields_treeview.init(e.detail.response);
646   -
647   - //this.$.fields_placeholder.innerHTML = '<tree-view-controllet id="fields_treeview" root-name="Data" opened-path="Data,records" json-data=\'' + JSON.stringify(e.detail.response) + '\'></tree-view-controllet>';
648   - this.$.fields_treeview.setAttribute("json-data", JSON.stringify(e.detail.response));
649   - this.$.fields_treeview.init();//chrome
650   - },
651   -
652   - /**
653   - * Callback to parse the components response object
654   - *
655   - * @method handleResponseDatalets
656   - *
657   - * @param {Event} e
658   - */
659   - handleResponseDatalets : function(e){
660   - this.datalets_list = new Array();
661   - for(var i=0;i < e.detail.response.length;i++){
662   - var datalet_info = { name : e.detail.response[i].name ,
663   - image : e.detail.response[i].url + e.detail.response[i].name + ".png"
664   - };
665   -
666   - this.datalets_list.push(datalet_info);
667   - }
668   -
669   - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
670   - '\'></items-slider-controllet>';
671   - },
672   - /**
673   - * Callback to dataset selection from list in the phase three. When a datalet is selected this function will build a bundle of box items, based on the datalet input data model,
674   - * to allow user to drag the fields, from the selected fields box, and create a new visualization.
675   - *
676   - * @method handleSelectedDatalet
677   - *
678   - * @param {Event} e
679   - */
680   - handleSelectedDatalet : function(e){
681   -
682   - var response = e.detail.response;
683   - this.$.datalet_idm_fields_container.innerHTML = "";
684   - this.$.idm_layout_container.innerHTML = "";
685   -
686   - if(response.idm.inputs.input.constructor == Object) {
687   - var input = response.idm.inputs.input;
688   - if(input.selection == "*") {
689   - var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet');
690   - for (var j = 0; j < input_selected_fields.length; j++) {
691   - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (j + 1) + '"></draggable-element-controllet><br>';
692   - }
693   - }
694   - }else{
695   - for(var i =0; i < response.idm.inputs.input.length; i++){
696   - var input = response.idm.inputs.input[i];
697   - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';
698   - }
699   - }
700   -
701   - if(response.idm.inputs.layouts.input.constructor == Object) {
702   - var input = response.idm.inputs.layouts.input;
703   - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" description="' + input.description + '" number="1"></text-element-controllet>';
704   - }else{
705   - for(var i =0; i < response.idm.inputs.layouts.input.length; i++){
706   - var input = response.idm.inputs.layouts.input[i];
707   - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" ' +
708   - 'description="' + input.description + '" ' +
709   - 'number="' + (i+1) + '">' +
710   - '</text-element-controllet>';
711   - }
712   -
713   - }
714   -
715   - },
716   - /**
717   - * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.
718   - *
719   - * @method generateDataletPreview
720   - */
721   - generateDataletPreview : function(){
722   -
723   - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
724   - this.selected_fields = Array();
725   -
726   - for (var i = 0; i < input_mapped_fields.length; i++) {
727   - if (input_mapped_fields[i].value != "") {
728   - this.selected_fields.push(input_mapped_fields[i].value);
729   - }
730   - }
731   -
732   - var input_layouts_fields = Polymer.dom(this.$.idm_layout_container).querySelectorAll('text-element-controllet');
733   - this.params_fields = {'data-url' : this.dataUrl};
734   -
735   - for (var i = 0; i < input_layouts_fields.length; i++) {
736   - if (input_layouts_fields[i].value != "") {
737   - this.params_fields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;
738   - }
739   - }
740   -
741   -
742   - var datalet_params ={
743   - component : this.selected_datalet,
744   - params : this.params_fields,
745   - fields : this.selected_fields,
746   - placeHolder : this.$.datalet_placeholder
747   - };
748   -
749   -
750   - ComponentService.deep_url = this.deepUrl;
751   - ComponentService.getComponent(datalet_params);
752   -
753   - },
754   - /**
755   - * Validate the current pass in order to access to next one.
756   - *
757   - * @method validateCurrentPass
758   - *
759   - * @param {Number} next_selected_pass
760   - */
761   - validateCurrentPass : function(next_selected_pass){
762   -
763   - switch(next_selected_pass){
764   - case 0:
765   - return true;
766   - case 1:
767   - if(this.$.data_url.value == ""){
768   - this.$.message.text = "You have to select a dataset to access to pass 2.";
769   - this.$.message.show();
770   - return false;
771   - }else{
772   - return true;
773   - }
774   -
775   - case 2:
776   - if(Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet') == 0){
777   - this.$.message.text = "You have to select a set of fields to access to pass 3.";
778   - this.$.message.show();
779   - return false;
780   - }else{
781   - return true;
782   - }
783   - }
784   -
785   - },
786   - /**
787   - * Callback for manage the previous pass button
788   - *
789   - * @method _onPrevClick
790   - *
791   - */
792   - _onPrevClick : function() {
793   - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;
794   -
795   - this.entryAnimation = 'slide-from-left-animation';
796   - this.exitAnimation = 'slide-right-animation';
797   - this.selected = this.selected === 0 ? 0 : (this.selected - 1);
798   - },
799   - /**
800   - * Callback to manage the next pass button
801   - *
802   - * @method _onNextClick
803   - *
804   - */
805   - _onNextClick : function() {
806   -
807   - if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return;
808   -
809   - this.entryAnimation = 'slide-from-right-animation';
810   - this.exitAnimation = 'slide-left-animation';
811   - this.selected = this.selected === 2 ? 2 : (this.selected + 1);
812   - },
813   - /**
814   - * Callback to manage InfoButton click to give user information about the selected dataset
815   - *
816   - */
817   - _onInfoClick : function(){
818   -
819   - this.$.infoDialog.open();
820   -
821   - },
822   - /**
823   - * Callback related to datasource selection from select menu
824   - *
825   - * @method _datasourceSelected
826   - *
827   - * @param {Event} e
828   - */
829   - _datasourceSelected : function(e){
830   -
831   - this.$.data_url.value = this.datasets[parseInt(e.target.id)].url;
832   - this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name;
833   - this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description;
834   -
835   - },
836   - /**
837   - * Callback related to data url change
838   - *
839   - * @method _dataUrlChanged
840   - *
841   - * @param {Event} e
842   - */
843   - _dataUrlChanged : function(newValue, oldValue){
844   - this.$.data_request.generateRequest();
845   - },
846   - /**
847   - * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet
848   - *
849   - * @method _dataletSelected
850   - *
851   - * @param {Event} e
852   - */
853   - _dataletSelected : function(e){
854   - this.selected_datalet = e.detail.datalet;
855   - this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet;
856   - this.$.selected_datalet_request.generateRequest();
857   -
858   - },
859   - /**
860   - * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field
861   - *
862   - * @method _fieldsSelected
863   - *
864   - * @param {Event} e
865   - */
866   - _fieldsSelected : function(e){
867   -
868   - this.$.selected_fields_container.innerHTML = "";
869   - for(var i=0;i<e.detail.fields.length;i++) {
870   - this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
871   - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +
872   - '"></draggable-element-controllet><br>';
873   - }
874   -
875   - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];
876   -
877   - var table_params ={
878   - component : "datatable-datalet",
879   - params :{
880   - 'data-url' : this.dataUrl
881   - },
882   - fields : e.detail.fields,
883   - placeHolder : this.$.table_component_place_holder
884   - };
885   -
886   - ComponentService.deep_url = this.deepUrl;
887   - ComponentService.getComponent(table_params);
888   -
889   - },
890   - /**
891   - * Callback related to event 'draggable-element-controllet_content-dragged' fired by draggable-element-controllet when the user drags a selected field in to input data model field
892   - *
893   - * @method _fieldsMapped
894   - *
895   - * @param {Event} e
896   - */
897   - _fieldsMapped : function(e){
898   -
899   - this.generateDataletPreview();
900   -
901   - },
902   - /**
903   - * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text
904   - *
905   - * @method _textElementChanged
906   - *
907   - * @param {Event} e
908   - */
909   - _textElementChanged : function(e){
910   - this.generateDataletPreview();
911   - },
912   - /**
913   - * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.
914   - *
915   - * @method _handleDatasourceDragOver
916   - *
917   - * @param {Event} e
918   - */
919   - _handleDatasourceDragOver : function(e){
920   - this.$.data_url.value = "";
921   - },
922   - /**
923   - * Callback related to the finish button.
924   - *
925   - * @method _onFinish
926   - *
927   - * @param {Event} e
928   - */
929   - _onFinish : function(e){
930   -
931   - if((this.selected_fields.length == 0) || this.selected_datalet == ""){
932   - this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";
933   - this.$.message.show();
934   - return;
935   - }
936   -
937   - var data = {
938   - dataUrl : this.dataUrl,
939   - params : this.params_fields,
940   - fields : this.selected_fields,
941   - datalet : this.selected_datalet,
942   - staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data)
943   - }
944   -
945   - this.fire('data-sevc-controllet.dataletCreated', {data : data});
946   -
947   - }
948   -
949   - });
950   -
951   - </script>
952   -
953   -</dom-module>
954 0 \ No newline at end of file
controllets/data-sevc-controllet/data-sevc-controllet_.html renamed to controllets/data-sevc-controllet/data-sevc-controllet_treeview_checkbox.html
  View file @9d4a34d
... ... @@ -262,7 +262,12 @@ Example:
262 262  
263 263 #idm_layout_main_container{
264 264 position: relative;
265   - height: 25vh;
  265 + height: 50vh;
  266 + }
  267 +
  268 + #comment{
  269 + position: relative;
  270 + width: 35vw;
266 271 }
267 272  
268 273 paper-menu{
... ... @@ -345,7 +350,7 @@ Example:
345 350 <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>
346 351  
347 352 <div class="card-content">
348   - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
  353 + <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
349 354 </div>
350 355  
351 356  
... ... @@ -400,7 +405,7 @@ Example:
400 405 <div id="toolbar_title" class="big">Data mapping</div>
401 406 <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>
402 407 </div>
403   - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
  408 + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
404 409 </div>
405 410  
406 411  
... ... @@ -423,20 +428,48 @@ Example:
423 428 </div>
424 429 <div id="datalet_idm_fields_container" class="area_container"></div>
425 430 </div>
426   -
427   - <div id="idm_layout_main_container" class="area_container">
428   - <div class="title">
429   - <div class="medium">Layout fields</div>
430   - </div>
431   - <div id="idm_layout_container" class="area_container"></div>
432   - </div>
433 431 </div>
434 432 </div>
435 433  
436   - <div id="datalet_placeholder" style="min-width: 43%;"></div>
  434 + <div id="datalet_placeholder" style="min-width: 43%;margin-top:10px;"></div>
  435 +
  436 + </div>
  437 +
  438 + </div>
  439 +
  440 + </neon-animatable>
437 441  
  442 + <neon-animatable>
  443 + <div class="vertical justified layout">
  444 +
  445 + <div class="horizontal layout">
  446 + <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>
  447 + <div class="avatar">4</div>
  448 + <div class="title flex">
  449 + <div id="toolbar_title" class="big">Finalize visualization</div>
  450 + <div id="toolbar_description" class="small">Assign the values for label parameters (e.g. title for you visualization).</div>
  451 + </div>
  452 + <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
438 453 </div>
439 454  
  455 + <div class="horizontal layout">
  456 + <div style="margin-top: 10px;">
  457 + <div class="title">
  458 + <div class="medium">Layout fields</div>
  459 + </div>
  460 + <div id="idm_layout_main_container" class="area_container">
  461 + <div id="idm_layout_container" class="area_container"></div>
  462 + </div>
  463 +
  464 + <div id="comment">
  465 + <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 character comment" maxlength="100"></paper-textarea>
  466 + </div>
  467 +
  468 + </div>
  469 +
  470 + <div id="datalet_placeholder_2" style="min-width: 43%;margin-top: 10px;"></div>
  471 +
  472 + </div>
440 473 </div>
441 474  
442 475 </neon-animatable>
... ... @@ -638,8 +671,23 @@ Example:
638 671 $(this.$.idm_layout_main_container).perfectScrollbar();
639 672 $(this.$.table_fields_container).perfectScrollbar();
640 673  
641   - if(this.dataletPreset != undefined)
  674 + if(this.dataletPreset != undefined) {
642 675 this.$.data_url.value = this.dataletPreset['data-url'];
  676 + this.selected = 1;
  677 + }
  678 + },
  679 + /**
  680 + * Utility function to inject datalet in a placeholder
  681 + */
  682 + injectDatalet: function(place_holder){
  683 + var datalet_params_2 ={
  684 + component : this.selectedDatalet,
  685 + params : this.paramsFields,
  686 + fields : this.selectedFields,
  687 + placeHolder : place_holder
  688 + };
  689 + ComponentService.deep_url = this.deepUrl;
  690 + ComponentService.getComponent(datalet_params_2);
643 691 },
644 692  
645 693 /**
... ... @@ -694,12 +742,13 @@ Example:
694 742 this.$.datalet_idm_fields_container.innerHTML = "";
695 743 this.$.idm_layout_container.innerHTML = "";
696 744  
  745 + var input;
697 746 var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);
698 747  
699 748 if(response.idm.inputs.input.constructor == Object) {
700 749 if(response.idm.inputs.input.selection == "*")
701 750 {
702   - var input = response.idm.inputs.input;
  751 + input = response.idm.inputs.input;
703 752 response.idm.inputs.input = new Array();
704 753 for(var i=0;i<this.selectedFields.length;i++){
705 754 var newInput = jQuery.extend(true, {}, input);
... ... @@ -709,7 +758,6 @@ Example:
709 758 }
710 759 }
711 760  
712   - var input;
713 761 var heading;
714 762 var id;
715 763  
... ... @@ -737,21 +785,22 @@ Example:
737 785 }
738 786  
739 787 if(layouts.input != undefined) {
740   - if (layouts.input.constructor == Object) {
741   - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + layouts.input.name +
742   - '" description="' + layouts.input.description +
743   - '" value="' + this.dataletPreset[Object.keys(this.dataletPreset)[0]] +
744   - '" number="1"></text-element-controllet>';
745   - } else {
746   - for (var i = 0; i < layouts.input.length; i++) {
747   - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +
748   - 'description="' + layouts.input[i].description + '" ' +
749   - 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '" ' +
750   - 'number="' + (i + 1) + '">' +
751   - '</text-element-controllet>';
  788 + if(layouts.input.constructor == Object){
  789 + layouts.input = new Array(jQuery.extend(true, {}, layouts.input));
  790 + }
  791 +
  792 + html = '<text-element-controllet ';
  793 + for (var i = 0; i < layouts.input.length; i++) {
  794 + html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +
  795 + 'description="' + layouts.input[i].description + '" ' +
  796 + 'number="' + (i + 1) + '" ';
  797 + if(this.dataletPreset != undefined){
  798 + html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"';
752 799 }
753 800  
  801 + html += '></text-element-controllet>';
754 802 }
  803 + this.$.idm_layout_container.innerHTML = html;
755 804 }
756 805  
757 806 if(this.selectedFields != undefined) this.generateDataletPreview();
... ... @@ -782,17 +831,7 @@ Example:
782 831 }
783 832 }
784 833  
785   -
786   - var datalet_params ={
787   - component : this.selectedDatalet,
788   - params : this.paramsFields,
789   - fields : this.selectedFields,
790   - placeHolder : this.$.datalet_placeholder
791   - };
792   -
793   -
794   - ComponentService.deep_url = this.deepUrl;
795   - ComponentService.getComponent(datalet_params);
  834 + this.injectDatalet(this.$.datalet_placeholder);
796 835  
797 836 },
798 837 /**
... ... @@ -824,6 +863,9 @@ Example:
824 863 }else{
825 864 return true;
826 865 }
  866 + case 3:
  867 + this.injectDatalet(this.$.datalet_placeholder_2);
  868 + return true;
827 869 }
828 870  
829 871 },
... ... @@ -848,11 +890,11 @@ Example:
848 890 */
849 891 _onNextClick : function() {
850 892  
851   - if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return;
  893 + if(!this.validateCurrentPass(this.selected === 3 ? 3 : (this.selected + 1))) return;
852 894  
853 895 this.entryAnimation = 'slide-from-right-animation';
854 896 this.exitAnimation = 'slide-left-animation';
855   - this.selected = this.selected === 2 ? 2 : (this.selected + 1);
  897 + this.selected = this.selected === 3 ? 3 : (this.selected + 1);
856 898 },
857 899 /**
858 900 * Callback to manage InfoButton click to give user information about the selected dataset
... ... @@ -909,6 +951,7 @@ Example:
909 951 */
910 952 _fieldsSelected : function(e){
911 953  
  954 + this.selectedFields = e.detail.fields;
912 955 this.$.selectedFields_container.innerHTML = "";
913 956 for(var i=0;i<e.detail.fields.length;i++) {
914 957 this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
... ... @@ -952,6 +995,7 @@ Example:
952 995 */
953 996 _textElementChanged : function(e){
954 997 this.generateDataletPreview();
  998 + this.injectDatalet(this.$.datalet_placeholder_2);
955 999 },
956 1000 /**
957 1001 * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.
... ... @@ -983,6 +1027,7 @@ Example:
983 1027 params : this.paramsFields,
984 1028 fields : this.selectedFields,
985 1029 datalet : this.selectedDatalet,
  1030 + comment : this.$.commentArea.value,
986 1031 staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data)
987 1032 }
988 1033  
... ...
controllets/paper-card-controllet/paper-card-controllet.html
  View file @9d4a34d
... ... @@ -95,25 +95,25 @@
95 95  
96 96 <template is="dom-if" if="{{checkType(type, 'text')}}">
97 97  
98   - <paper-fab mini icon="create"></paper-fab>
  98 + <paper-fab mini icon="create" on-click="_handleFabClick"></paper-fab>
99 99  
100 100 </template>
101 101  
102 102 <template is="dom-if" if="{{checkType(type, 'image')}}">
103 103  
104   - <paper-fab mini icon="perm-media"></paper-fab>
  104 + <paper-fab mini icon="perm-media" on-click="_handleFabClick"></paper-fab>
105 105  
106 106 </template>
107 107  
108 108 <template is="dom-if" if="{{checkType(type, 'datalet')}}">
109 109  
110   - <paper-fab mini icon="assessment"></paper-fab>
  110 + <paper-fab mini icon="assessment" on-click="_handleFabClick"></paper-fab>
111 111  
112 112 </template>
113 113  
114 114 <template is="dom-if" if="{{checkType(type, 'link')}}">
115 115  
116   - <paper-fab mini icon="link"></paper-fab>
  116 + <paper-fab mini icon="link" on-click="_handleFabClick"></paper-fab>
117 117  
118 118 </template>
119 119  
... ... @@ -182,6 +182,10 @@
182 182  
183 183 checkType: function(type, check){
184 184 return (type == check);
  185 + },
  186 +
  187 + _handleFabClick: function(e){
  188 + this.fire('paper-card-controllet_button-clicked', {data : this});
185 189 }
186 190 })
187 191 </script>
... ...
controllets/tree-view-controllet/demo/index.html
  View file @9d4a34d
1 1 <html>
2 2  
3 3 <head>
4   - <script src="../../js/jquery-1.11.2.min.js"></script>
  4 + <script src="../../shared_js/jquery-1.11.2.min.js"></script>
5 5  
6   - <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  6 + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
7 7  
8 8 <link rel="import" href="../tree-view-controllet.html" />
9 9 </head>
... ... @@ -11,22 +11,30 @@
11 11 <body>
12 12  
13 13 <style>
14   - #container {
  14 + .container {
  15 + display: flex;
  16 + flex-direction: row;
  17 + }
  18 + #tree_container {
15 19 width: 300px;
16   - height: 100vh;
17   - overflow: auto;
18 20 }
19   - #fields {
20   - height: 30px;
21   - background-color: #2196F3;
  21 + #fields_container {
  22 + margin-left: 100px;
22 23 }
23 24 </style>
24 25  
25   - <p id="fields">&nbsp;</p>
  26 + <div class="container">
  27 +
  28 + <div id="tree_container">
  29 +
  30 + <tree-view-controllet id="tree" root-name="data" opened-path="records,geometry" preselected-fields='["records,datasetid", "records,recordid", "nhits"]'></tree-view-controllet>
26 31  
27   - <div id="container">
  32 + </div>
28 33  
29   - <tree-view-controllet id="tree" root-name="data" opened-path="data,records"></tree-view-controllet>
  34 + <div id="fields_container">
  35 + <h3>Selected fields:</h3>
  36 + <p id="fields">&nbsp;</p>
  37 + </div>
30 38  
31 39 </div>
32 40  
... ... @@ -39,12 +47,12 @@
39 47 dataType: "json",
40 48 success: function(data){
41 49 tree.setAttribute("json-data", JSON.stringify(data));
42   - tree.init();//chrome
  50 + tree.ready();//chrome
43 51 }
44 52 });
45 53  
46   - tree.addEventListener("click", function () {
47   - fields.innerHTML = tree.getFlatFields();
  54 + tree.addEventListener("tree-view-controllet_selected-fields", function (e) {
  55 + fields.innerHTML = e.detail.fields;
48 56 console.log(tree.getFlatFields());
49 57 console.log(tree.getFields());//firefox console.log does not recognize associative array?
50 58 });
... ...
controllets/tree-view-controllet/tree-view-controllet.html
  View file @9d4a34d
... ... @@ -20,8 +20,13 @@
20 20 font-weight: 700;
21 21 }
22 22  
  23 + paper-item.menu-trigger.iron-selected {
  24 + background-color: #B6B6B6;
  25 + }
  26 +
23 27 paper-item:not(.menu-trigger).iron-selected {
24 28 background-color: #2196F3;
  29 + color: #FFFFFF;
25 30 }
26 31  
27 32 .sublist {
... ... @@ -29,11 +34,16 @@
29 34 padding-right: 20px;
30 35 }
31 36  
  37 + :host{
  38 + --paper-menu-focused-item-after: {
  39 + opacity: 0;
  40 + };
  41 + }
32 42 </style>
33 43  
34 44 <template>
35 45  
36   - <paper-menu id="paper-tree"></paper-menu>
  46 + <paper-menu id="paper_tree"></paper-menu>
37 47  
38 48 </template>
39 49  
... ... @@ -46,12 +56,12 @@
46 56  
47 57 rootName : {
48 58 type : String,
49   - value : "Data"
  59 + value : "root"
50 60 },
51 61  
52 62 jsonData : {
53 63 type : Object,
54   - value : null
  64 + value : undefined
55 65 },
56 66  
57 67 selectedFields : {
... ... @@ -59,9 +69,14 @@
59 69 value : []
60 70 },
61 71  
  72 + preselectedFields : {
  73 + type : Array,
  74 + value : []
  75 + },
  76 +
62 77 openedPath : {
63 78 type : String,
64   - value : ""
  79 + value : undefined
65 80 }
66 81  
67 82 },
... ... @@ -73,16 +88,30 @@
73 88  
74 89 ready : function() {
75 90 if(this.jsonData)
76   - this.init();
  91 + this._init();
  92 + },
  93 +
  94 + getFields : function() {
  95 + return this.selectedFields;
  96 + },
  97 +
  98 + getFlatFields : function() {
  99 + var fields = [];
  100 +
  101 + for(var A in this.selectedFields)
  102 + for(var e in this.selectedFields[A])
  103 + fields.push(this.selectedFields[A][e]);
  104 +
  105 + return fields;
77 106 },
78 107  
79   - init : function() {
80   - var tree = document.getElementById('paper-tree');
81   - this.injectBoundHTML(createTree(this.rootName, this.jsonData), tree);
82   - this.openPath();
  108 + _init : function() {
  109 + this._injectBoundHTML(this._initCreateTree(this.rootName, this.jsonData), this.$.paper_tree);
  110 + this._preselectFields();
  111 + this._openPath();
83 112 },
84 113  
85   - injectBoundHTML : function(html, element) {
  114 + _injectBoundHTML : function(html, element) {
86 115 var template = document.createElement('template');
87 116 template.innerHTML = html;
88 117 var fragment = this.instanceTemplate(template);
... ... @@ -93,39 +122,121 @@
93 122 return fragment;
94 123 },
95 124  
96   - openPath : function() {
97   - var openedPath;
  125 + _initCreateTree : function(nodeName, node) {
  126 + var list = new Array();
  127 + for(var child in node)
  128 + list.push(this._createTree(child, node[child]));
  129 + return this._paper_submenu(nodeName, list);
  130 + },
98 131  
99   - if (this.openedPath == "")
100   - openedPath = this.rootName;
101   - else
102   - openedPath = this.openedPath;
  132 + _createTree : function(nodeName, node) {
  133 + var html = "";
  134 + if(node.constructor == Object){
  135 + var list = new Array();
  136 + for(var child in node)
  137 + list.push(this._createTree(nodeName+","+child, node[child]));
  138 + html = this._paper_submenu(nodeName, list);
  139 + }
  140 + else if (node.constructor == Array){
  141 + var list = new Array();
  142 + if(node[0].constructor == Object){
  143 + for(var child in node[0])
  144 + list.push(this._createTree(nodeName+","+child, node[0][child]));
  145 + html = this._paper_submenu(nodeName, list);
  146 + }
  147 + else{
  148 + html = nodeName;
  149 + }
  150 + }
  151 + else{
  152 + html = nodeName;
  153 + }
  154 + return html;
  155 + },
103 156  
104   - var nodes = openedPath.split(",");
  157 + _paper_submenu : function(str, list) {
  158 + var submenu = "<paper-submenu>";
105 159  
106   - openedPath = "";
  160 + submenu += "<paper-item class=\"menu-trigger\">"+this._getName(str)+"</paper-item>" + "<paper-menu id=\""+str+"\" class=\"menu-content sublist\" multi>";
107 161  
108   - while(nodes.length != 0) {
109   - openedPath += nodes.splice(0,1);
110   - var menu = document.getElementById(openedPath);
111   - var submenu = menu.parentNode.parentNode;
112   - submenu.setAttribute("opened", "true");
113   - openedPath += ",";
  162 + for(var i in list){
  163 + if(list[i].indexOf("paper-submenu") != -1)
  164 + submenu += list[i];
  165 + else
  166 + submenu += this._paper_item(list[i]);
114 167 }
  168 +
  169 + submenu += "</paper-menu>" + "</paper-submenu>";
  170 +
  171 + return submenu;
115 172 },
116 173  
117   - _onSelect : function(e) {
118   - //this.updateSelectedFields(e);
119   - this.fire('treeview-controllet_fileds-selected', {fields : this.getFlatFields()});
  174 + _paper_item : function(str){
  175 + return "<paper-item id=\""+str+"\">"+this._getName(str)+"</paper-item>";
  176 + },
  177 +
  178 + _getName : function (str){
  179 + str = str.split(",");
  180 + return str[str.length-1];
  181 + },
  182 +
  183 + _preselectFields : function() {
  184 + if (this.preselectedFields){
  185 + for(var field in this.preselectedFields){
  186 + var path = this.preselectedFields[field];
  187 +
  188 + if (path.lastIndexOf(",") != -1)
  189 + path = path.substring(0, path.lastIndexOf(","));
  190 + else
  191 + path = this.rootName;
  192 +
  193 + var menu = document.getElementById(path);
  194 + var item = document.getElementById(this.preselectedFields[field]);
  195 + var index = menu.items.indexOf(item);
  196 +
  197 + if (menu.selectedValues == undefined){
  198 + menu.selectedValues = [index];
  199 + }
  200 + else{
  201 + var selectedValues = [];
  202 + for (var i in menu.selectedValues)
  203 + selectedValues.push(menu.selectedValues[i]);
  204 + selectedValues.push(index);
  205 + menu.selectedValues = selectedValues;
  206 + }
  207 + }
  208 + }
  209 + },
  210 +
  211 + _openPath : function() {
  212 + this.$.paper_tree.firstChild.open();
  213 +
  214 + if (this.openedPath) {
  215 + var openedPath = this.openedPath;
  216 + var nodes = openedPath.split(",");
  217 + openedPath = "";
  218 +
  219 + while (nodes.length != 0) {
  220 + openedPath += nodes.splice(0, 1);
  221 +
  222 + var menu = document.getElementById(openedPath);
  223 + var submenu = menu.parentNode.parentNode;
  224 + submenu.open();
  225 +
  226 + openedPath += ",";
  227 + }
  228 + }
  229 + },
120 230  
  231 + _onSelect : function(e) {
  232 + this._updateSelectedFields(e);
121 233 },
122 234  
123 235 _onDeselect : function(e) {
124   - this.updateSelectedFields(e);
125   - this.fire('treeview-controllet_fileds-selected', {fields : this.getFlatFields()});
  236 + this._updateSelectedFields(e);
126 237 },
127 238  
128   - updateSelectedFields : function(e) {
  239 + _updateSelectedFields : function(e) {
129 240 var menuId = e.target.id;
130 241 var selectedIds = [];
131 242  
... ... @@ -140,79 +251,12 @@
140 251 this.selectedFields[menuId] = selectedIds;
141 252 else
142 253 delete this.selectedFields[menuId];
143   - },
144   -
145   - getFields : function() {
146   - return this.selectedFields;
147   - },
148   -
149   - getFlatFields : function() {
150   - var fields = [];
151 254  
152   - for(var A in this.selectedFields)
153   - for(var e in this.selectedFields[A])
154   - fields.push(this.selectedFields[A][e].replace(this.rootName + ",",""));
155   -
156   - return fields;
  255 + this.fire('tree-view-controllet_selected-fields', {fields : this.getFlatFields()});
157 256 }
158 257  
159 258 });
160 259  
161 260 </script>
162 261  
163   - <script>
164   -
165   - function createTree(nodeName, node){
166   - var html = "";
167   - if(node.constructor == Object){
168   - var list = new Array();
169   - for(var child in node)
170   - list.push(createTree(nodeName+","+child, node[child]));
171   - html = paper_submenu(nodeName, list);
172   - }
173   - else if (node.constructor == Array){
174   - var list = new Array();
175   - if(node[0].constructor == Object){
176   - for(var child in node[0])
177   - list.push(createTree(nodeName+","+child, node[0][child]));
178   - html = paper_submenu(nodeName, list);
179   - }
180   - else{
181   - html = nodeName;
182   - }
183   - }
184   - else{
185   - html = nodeName;
186   - }
187   - return html;
188   - }
189   -
190   - function paper_submenu(str, list){
191   - var submenu = "<paper-submenu>";
192   -
193   - submenu += "<paper-item class=\"menu-trigger\">"+getName(str)+"</paper-item>" + "<paper-menu id=\""+str+"\" class=\"menu-content sublist\" multi>";
194   -
195   - for(var i in list){
196   - if(list[i].indexOf("paper-submenu") != -1)
197   - submenu += list[i];
198   - else
199   - submenu += paper_item(list[i]);
200   - }
201   -
202   - submenu += "</paper-menu>" + "</paper-submenu>";
203   -
204   - return submenu;
205   - }
206   -
207   - function paper_item(str){
208   - return "<paper-item id=\""+str+"\">"+getName(str)+"</paper-item>";
209   - }
210   -
211   - function getName(str){
212   - str = str.split(",");
213   - return str[str.length-1];
214   - }
215   -
216   - </script>
217   -
218 262 </dom-module>
219 263 \ No newline at end of file
... ...
datalets/datatable-datalet/datatable-datalet.html
  View file @9d4a34d
... ... @@ -63,7 +63,7 @@ Example:
63 63 var DatatableBehavior = {
64 64  
65 65 presentData: function(){
66   - if(!this.data || this.data == undefined) return;
  66 + if(!this.data || this.data[0] == undefined) return;
67 67 html = "";
68 68 html += '<thead>'+
69 69 '<tr>';
... ...