Commit 7692111d89043b9afda4b88fe26dde7c1a5898e9
Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS
Showing
75 changed files
with
3615 additions
and
451 deletions
controllets/data-sevc-controllet/colors
0 → 100755
1 | +Dark primary #1976D2; /** OW_Control type:color, key:darkPrimaryColor, section:2. Colors, label:1. Dark primary **/ | |
2 | + | |
3 | +Primary #2196F3; /** OW_Control type:color, key:primaryColor, section:2. Colors, label:2. Primary **/ | |
4 | + | |
5 | +Light primary #BBDEFB; /** OW_Control type:color, key:lightPrimaryColor, section:2. Colors, label:3. Light primary **/ | |
6 | + | |
7 | +Text/Icons #FFFFFF; /** OW_Control type:color, key:textIconsColor, section:2. Colors, label:4. Text/Icons **/ | |
8 | + | |
9 | +Accent #00BCD4; /** OW_Control type:color, key:accentColor, section:2. Colors, label:5. Accent **/ | |
10 | + | |
11 | +Primary text #212121; /** OW_Control type:color, section:2. Colors, key:textColor, label:6. Text **/ | |
12 | + | |
13 | +Secondary text #727272; /** OW_Control type:color, section:2. Colors, key:secondaryTextColor, label:7. Secondary text **/ | |
14 | + | |
15 | +Divider #B6B6B6; /** OW_Control type:color, section:2. Colors, key:dividerColor, label:8. Divider **/ | |
16 | + | |
17 | + | |
18 | + | |
19 | + | |
20 | +E0E0E0 | |
21 | + | |
22 | +9E9E9E 0.87 | |
23 | + | |
24 | + | |
25 | + | |
26 | +00AABF | |
27 | + | |
28 | + | |
29 | + | |
30 | + | |
31 | + | |
32 | + | |
33 | + | |
34 | + | |
35 | +'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif | |
0 | 36 | \ No newline at end of file | ... | ... |
controllets/data-sevc-controllet/data-sevc-controllet-orig.html
0 → 100755
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-material/paper-material.html"> | |
42 | +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> | |
43 | +<link rel="import" href="../../bower_components/paper-button/paper-button.html"> | |
44 | +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> | |
45 | +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html"> | |
46 | +<link rel="import" href="../../bower_components/iron-pages/iron-pages.html"> | |
47 | +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> | |
48 | +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> | |
49 | +<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | |
50 | +<link rel="import" href="../../bower_components/paper-toast/paper-toast.html"> | |
51 | +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"> | |
52 | +<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"> | |
53 | + | |
54 | +<link rel="import" href="../items-list-controllet/item-list-controllet.html"> | |
55 | +<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> | |
56 | +<link rel="import" href="../tree-view-controllet/tree-view-controllet.html"> | |
57 | +<link rel="import" href="../text-element-controllet/text-element-controllet.html"> | |
58 | +<link rel="import" href="../animated-button-container-controllet/animated-button-container-controllet.html"> | |
59 | + | |
60 | +<!-- | |
61 | +The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required. | |
62 | +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 | |
63 | +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 | |
64 | +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 | |
65 | +is available every time a fields is dragged in the input data model fields area. | |
66 | + | |
67 | +Example: | |
68 | + | |
69 | + <data-sevc-controllet deep-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/" | |
70 | + datalets-list-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list" | |
71 | + datasets='{[{name : 'dataset1', url : dataset1Urls}, ... , {name : 'datasetN', url : datasetNUrls}]'> | |
72 | + </data-sevc-controllet> | |
73 | + | |
74 | + | |
75 | +@element data-sevc-controllet | |
76 | +@status beta | |
77 | +@homepage | |
78 | +@group controllets | |
79 | +--> | |
80 | + | |
81 | + | |
82 | +<dom-module id="data-sevc-controllet"> | |
83 | + <template> | |
84 | + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | |
85 | + | |
86 | + <style is="custom-style"> | |
87 | + | |
88 | + ::content body { | |
89 | + font-family: 'Roboto', sans-serif; | |
90 | + } | |
91 | + | |
92 | + .flexchild | |
93 | + { | |
94 | + @apply(--layout-flex); | |
95 | + } | |
96 | + | |
97 | + .flex2child | |
98 | + { | |
99 | + @apply(--layout-flex-2); | |
100 | + } | |
101 | + | |
102 | + .avatar | |
103 | + { | |
104 | + display: inline-block; | |
105 | + height: 2em; | |
106 | + width: 2em; | |
107 | + border-radius: 50%; | |
108 | + background: var(--paper-blue-500); | |
109 | + color: white; | |
110 | + line-height: 2em; | |
111 | + font-size: 1.87em; | |
112 | + text-align: center; | |
113 | + } | |
114 | + | |
115 | + .title | |
116 | + { | |
117 | + position: relative; | |
118 | + top: 0.60vh; | |
119 | + margin-left: 20px; | |
120 | + } | |
121 | + | |
122 | + .big | |
123 | + { | |
124 | + font-size: 1.37em; | |
125 | + color: var(--google-grey-500); | |
126 | + } | |
127 | + | |
128 | + .medium | |
129 | + { | |
130 | + font-size: 1em; | |
131 | + padding-bottom: 0.5em; | |
132 | + color : #000000; | |
133 | + font-weight: bold; | |
134 | + } | |
135 | + | |
136 | + .small | |
137 | + { | |
138 | + font-size: 0.8em; | |
139 | + padding-top: 10px; | |
140 | + color: var(--paper-blue-500); | |
141 | + font-weight: bold; | |
142 | + } | |
143 | + | |
144 | + paper-input | |
145 | + { | |
146 | + width: 80%; | |
147 | + } | |
148 | + | |
149 | + paper-dropdown-menu | |
150 | + { | |
151 | + text-align: left; | |
152 | + margin: auto; | |
153 | + width: 100%; | |
154 | + } | |
155 | + | |
156 | + ::content paper-menu-button | |
157 | + { | |
158 | + display: block; | |
159 | + width: 100%; | |
160 | + } | |
161 | + | |
162 | + #visualization_slider_area | |
163 | + { | |
164 | + padding-top: 20px; | |
165 | + overflow: visible; | |
166 | + } | |
167 | + | |
168 | + #fields_mapping_area | |
169 | + { | |
170 | + min-width: 670px; | |
171 | + min-height: 180px; | |
172 | + } | |
173 | + | |
174 | + #datalet_placeholder | |
175 | + { | |
176 | + height: 60vh; | |
177 | + min-height: 60vh; | |
178 | + min-width: 45%; | |
179 | + margin-top:10px; | |
180 | + } | |
181 | + | |
182 | + .datalet_right_container | |
183 | + { | |
184 | + width: 100vh; | |
185 | + } | |
186 | + | |
187 | + .field-mapping-card | |
188 | + { | |
189 | + width: 50%; | |
190 | + float: left; | |
191 | + } | |
192 | + | |
193 | + .toolbar_button | |
194 | + { | |
195 | + --iron-icon-height: 32px; | |
196 | + --iron-icon-width: 32px; | |
197 | + } | |
198 | + | |
199 | + #finish_button | |
200 | + { | |
201 | + --iron-icon-height: 32px; | |
202 | + --iron-icon-width: 32px; | |
203 | + color: var(--paper-blue-500); | |
204 | + } | |
205 | + | |
206 | + .area_container | |
207 | + { | |
208 | + overflow: hidden; | |
209 | + margin : 0.8em; | |
210 | + padding : 0.8em; | |
211 | + } | |
212 | + | |
213 | + #fields_placeholder{ | |
214 | + width: 40%; | |
215 | + height: 75vh; | |
216 | + position: relative; | |
217 | + float: left; | |
218 | + overflow: auto; | |
219 | + } | |
220 | + | |
221 | + #table_fields_container{ | |
222 | + height: 75vh; | |
223 | + width: 55%; | |
224 | + position: relative; | |
225 | + float: left; | |
226 | + overflow: auto; | |
227 | + } | |
228 | + | |
229 | + #idm_fields_main_container{ | |
230 | + position: relative; | |
231 | + height: 60vh; | |
232 | + } | |
233 | + | |
234 | + #selectedFields_main_container{ | |
235 | + position: relative; | |
236 | + height: 60vh; | |
237 | + } | |
238 | + | |
239 | + #idm_layout_main_container{ | |
240 | + position: relative; | |
241 | + height: 50vh; | |
242 | + } | |
243 | + | |
244 | + #comment{ | |
245 | + position: relative; | |
246 | + width: 35vw; | |
247 | + } | |
248 | + | |
249 | + paper-menu{ | |
250 | + width: 100%; | |
251 | + } | |
252 | + | |
253 | + paper-dialog { | |
254 | + position: fixed; | |
255 | + top: 16px; | |
256 | + width: auto; | |
257 | + height: auto; | |
258 | + overflow: auto; | |
259 | + padding : 30px; | |
260 | + } | |
261 | + | |
262 | + paper-tabs, paper-toolbar | |
263 | + { | |
264 | + background-color: var(--paper-blue-500); | |
265 | + color: #ffffff; | |
266 | + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); | |
267 | + --paper-tabs-selection-bar-color: var(--google-gray-500); | |
268 | + } | |
269 | + | |
270 | + paper-toolbar paper-tabs | |
271 | + { | |
272 | + box-shadow: none; | |
273 | + } | |
274 | + | |
275 | + paper-tabs[noink][no-bar] paper-tab.iron-selected | |
276 | + { | |
277 | + background-color: var(--google-gray-500); | |
278 | + } | |
279 | + | |
280 | + paper-tabs[align-bottom] | |
281 | + { | |
282 | + box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15); | |
283 | + } | |
284 | + </style> | |
285 | + | |
286 | + <iron-ajax | |
287 | + auto | |
288 | + id="data_request" | |
289 | + url={{dataUrl}} | |
290 | + verbose="true" | |
291 | + on-response="handleResponseData" | |
292 | + debounce-duration="300"> | |
293 | + </iron-ajax> | |
294 | + | |
295 | + <iron-ajax | |
296 | + id="datales_list_request" | |
297 | + auto | |
298 | + url={{dataletsListUrl}} | |
299 | + handle-as="json" | |
300 | + on-response="handleResponseDatalets" | |
301 | + debounce-duration="300"> | |
302 | + </iron-ajax> | |
303 | + | |
304 | + <iron-ajax | |
305 | + id="selectedDatalet_request" | |
306 | + url={{deepUrl}} | |
307 | + verbose="true" | |
308 | + on-response="handleSelectedDatalet" | |
309 | + debounce-duration="300"> | |
310 | + </iron-ajax> | |
311 | + | |
312 | + <content> | |
313 | + | |
314 | + <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | |
315 | + | |
316 | + <neon-animatable> | |
317 | + | |
318 | + <div class="vertical justified layout"> | |
319 | + | |
320 | + <div class="horizontal layout"> | |
321 | + <div class="avatar" style="margin-left:15px">1</div> | |
322 | + <div class="title flex"> | |
323 | + <div id="toolbar_title" class="big">Dataset source</div> | |
324 | + <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div> | |
325 | + </div> | |
326 | + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | |
327 | + </div> | |
328 | + | |
329 | + <paper-material elevation="2" class="area_container"> | |
330 | + <paper-tabs selected="{{DatasourceTabSelected}}"> | |
331 | + <paper-tab>Select data source</paper-tab> | |
332 | + <paper-tab>Most popular</paper-tab> | |
333 | + <paper-tab>Search</paper-tab> | |
334 | + </paper-tabs> | |
335 | + <iron-pages selected="{{DatasourceTabSelected}}"> | |
336 | + <div> | |
337 | + <div class="card-content"> | |
338 | + <paper-dropdown-menu id="datasets-sources" name="datasets-sources" label="Available datasets"> | |
339 | + <paper-menu class="dropdown-content"> | |
340 | + <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index"> | |
341 | + <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item> | |
342 | + </template> | |
343 | + </paper-menu> | |
344 | + </paper-dropdown-menu> | |
345 | + <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> | |
346 | + </div> | |
347 | + | |
348 | + <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div> | |
349 | + | |
350 | + <div class="card-content"> | |
351 | + <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea> | |
352 | + </div> | |
353 | + | |
354 | + | |
355 | + </div> | |
356 | + <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | |
357 | + <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | |
358 | + </iron-pages> | |
359 | + </paper-material> | |
360 | + | |
361 | + </div> | |
362 | + | |
363 | + </neon-animatable> | |
364 | + | |
365 | + <neon-animatable> | |
366 | + | |
367 | + <div class="vertical justified layout"> | |
368 | + | |
369 | + <div class="horizontal layout"> | |
370 | + <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> | |
371 | + <div class="avatar">2</div> | |
372 | + <div class="title flex"> | |
373 | + <div id="toolbar_title" class="big">Dataset source</div> | |
374 | + <div id="toolbar_description" class="small">Select the fields you want to use for visualization from tree on the right side. The table on the left side will show you the values related to the selected fields.</div> | |
375 | + </div> | |
376 | + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | |
377 | + </div> | |
378 | + | |
379 | + <div class="horizontal layout"> | |
380 | + | |
381 | + <paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px"> | |
382 | + <tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet> | |
383 | + </paper-material> | |
384 | + | |
385 | + <paper-material elevation="2" id="table_fields_container" class="area_container flex2child"> | |
386 | + <div id="table_component_place_holder"></div> | |
387 | + </paper-material> | |
388 | + | |
389 | + </div> | |
390 | + | |
391 | + </div> | |
392 | + | |
393 | + </neon-animatable> | |
394 | + | |
395 | + <neon-animatable> | |
396 | + | |
397 | + <div class="vertical justified layout"> | |
398 | + | |
399 | + <div class="horizontal layout"> | |
400 | + <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> | |
401 | + <div class="avatar">3</div> | |
402 | + <div class="title flex"> | |
403 | + <div id="toolbar_title" class="big">Data mapping</div> | |
404 | + <div id="toolbar_description" class="small">Select the visualization by clicking on the button(a window will appear with all available visualization).After, drag and drop the selected fields into datalet parameters area. A preview will be shown on the right side.</div> | |
405 | + </div> | |
406 | + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | |
407 | + </div> | |
408 | + | |
409 | + | |
410 | + <div class="horizontal layout"> | |
411 | + | |
412 | + <div class=""> | |
413 | + <paper-material elevation="0" id="visualization_slider_area"></paper-material> | |
414 | + <paper-material elevation="2" id="fields_mapping_area" class="area_container"> | |
415 | + | |
416 | + <div id="selectedFields_main_container" class="field-mapping-card"> | |
417 | + <div class="title"> | |
418 | + <div class="medium">Selected fields</div> | |
419 | + </div> | |
420 | + <paper-material elevation="2" id="selectedFields_container" class="area_container"></paper-material> | |
421 | + </div> | |
422 | + | |
423 | + <div id="idm_fields_main_container" class="field-mapping-card"> | |
424 | + <div class="title"> | |
425 | + <div class="medium">Datalet fields</div> | |
426 | + </div> | |
427 | + <paper-material elevation="2" id="datalet_idm_fields_container" class="area_container"></paper-material> | |
428 | + </div> | |
429 | + </paper-material> | |
430 | + </div> | |
431 | + | |
432 | + <div id="datalet_placeholder"></div> | |
433 | + | |
434 | + </div> | |
435 | + | |
436 | + </div> | |
437 | + | |
438 | + </neon-animatable> | |
439 | + | |
440 | + <neon-animatable> | |
441 | + <div class="vertical justified layout"> | |
442 | + | |
443 | + <div class="horizontal layout"> | |
444 | + <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> | |
445 | + <div class="avatar">4</div> | |
446 | + <div class="title flex"> | |
447 | + <div id="toolbar_title" class="big">Finalize visualization</div> | |
448 | + <div id="toolbar_description" class="small">Assign the values for layout parameters (e.g. title for you visualization) and look at the final visualization. You can also add a comment if you are in the private room. </div> | |
449 | + </div> | |
450 | + <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button> | |
451 | + </div> | |
452 | + | |
453 | + <div class="horizontal layout"> | |
454 | + <div style="margin-top: 10px;"> | |
455 | + <div class="title"> | |
456 | + <div class="medium">Layout fields</div> | |
457 | + </div> | |
458 | + <paper-material elevation="2" id="idm_layout_main_container" class="area_container"> | |
459 | + <paper-material elevation="2" id="idm_layout_container" class="area_container"></paper-material> | |
460 | + </paper-material> | |
461 | + | |
462 | + <div id="comment"> | |
463 | + <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 characters comment" maxlength="100"></paper-textarea> | |
464 | + </div> | |
465 | + | |
466 | + </div> | |
467 | + | |
468 | + <div id="datalet_placeholder_2" style="min-width: 45%;margin-top: 10px;"></div> | |
469 | + | |
470 | + </div> | |
471 | + </div> | |
472 | + | |
473 | + </neon-animatable> | |
474 | + | |
475 | + </neon-animated-pages> | |
476 | + | |
477 | + <paper-toast id="message" text=""></paper-toast> | |
478 | + | |
479 | + <paper-dialog id="infoDialog"> | |
480 | + <h2 id="infoDialogTitle"></h2> | |
481 | + <paper-dialog-scrollable id="infoDialogContent"> | |
482 | + </paper-dialog-scrollable> | |
483 | + </paper-dialog> | |
484 | + | |
485 | + </content> | |
486 | + </template> | |
487 | + | |
488 | + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | |
489 | + <script src="../../../DEEPCLIENT/js/deepClient.js"></script> | |
490 | + | |
491 | + <script> | |
492 | + | |
493 | + Polymer({ | |
494 | + | |
495 | + is : 'data-sevc-controllet', | |
496 | + | |
497 | + /** | |
498 | + * Received when the user selects a datalet from slider. | |
499 | + * | |
500 | + * @event items-list-controllet_item-selected | |
501 | + */ | |
502 | + | |
503 | + /** | |
504 | + * Received when the user drags a selected fields in to one of the source input data model field | |
505 | + * | |
506 | + * @event draggable-element-controllet_content-dragged | |
507 | + */ | |
508 | + | |
509 | + /** | |
510 | + * Received when the user selects one field from treeview controllet | |
511 | + * | |
512 | + * @event treeview-controllet-fileds-selected | |
513 | + */ | |
514 | + | |
515 | + /** | |
516 | + * Received when the user drags a selected fields in to one of the source input data model field | |
517 | + * | |
518 | + * @event draggable-element-controllet_content-dragged | |
519 | + */ | |
520 | + | |
521 | + /** | |
522 | + * Received when the user change text value of the selected datalet layout inputs | |
523 | + * | |
524 | + * @event text-element-controllet_content-changed | |
525 | + */ | |
526 | + | |
527 | + /** | |
528 | + * Fired when the user press to finish button. At this event are attached all information about the visualization currently created | |
529 | + * | |
530 | + * @event data-sevc-controllet.dataletCreated | |
531 | + */ | |
532 | + | |
533 | + listeners : { | |
534 | + 'items-list-controllet_item-selected' : '_dataletSelected', | |
535 | + 'draggable-element-controllet_content-dragged' : '_fieldsMapped', | |
536 | + 'tree-view-controllet_selected-fields' : '_fieldsSelected', | |
537 | + 'text-element-controllet_content-changed' : '_textElementChanged' | |
538 | + }, | |
539 | + | |
540 | + properties : { | |
541 | + | |
542 | + entryAnimation : { | |
543 | + type : String, | |
544 | + value : "" | |
545 | + }, | |
546 | + | |
547 | + exitAnimation : { | |
548 | + type : String, | |
549 | + value : "" | |
550 | + }, | |
551 | + | |
552 | + selected : { | |
553 | + type : Number, | |
554 | + value : 0 | |
555 | + }, | |
556 | + | |
557 | + /** | |
558 | + * It represents the data url from CKAN api | |
559 | + * | |
560 | + * @attribute dataUrl | |
561 | + * @type string | |
562 | + * @default 'null' | |
563 | + */ | |
564 | + dataUrl : { | |
565 | + type : String, | |
566 | + value : undefined, | |
567 | + observer : '_dataUrlChanged' | |
568 | + }, | |
569 | + /** | |
570 | + * It represents the DEEP url to get information about the datalets | |
571 | + * | |
572 | + * @attribute deepUrl | |
573 | + * @type string | |
574 | + * @default 'null' | |
575 | + */ | |
576 | + deepUrl : { | |
577 | + type : String, | |
578 | + value : undefined | |
579 | + }, | |
580 | + /** | |
581 | + * It's used to store the list of datalets returned from DEEP | |
582 | + * | |
583 | + * @attribute datalets_list | |
584 | + * @type Array | |
585 | + * @default empty | |
586 | + */ | |
587 | + datalets_list : { | |
588 | + type : Array , | |
589 | + value : [] | |
590 | + }, | |
591 | + /** | |
592 | + * It's used to store the selected datalet. It will be set when the controllet get the event of selection by item slider (items-list-controllet_item-selected) | |
593 | + * | |
594 | + * @attribute selectedDatalet | |
595 | + * @type String | |
596 | + * @default '' | |
597 | + */ | |
598 | + selectedDatalet : { | |
599 | + type : String, | |
600 | + value : undefined | |
601 | + }, | |
602 | + /** | |
603 | + * It's used to store the list of selected fields by user | |
604 | + * | |
605 | + * @attribute selectedFields | |
606 | + * @type Array | |
607 | + * @default empty | |
608 | + */ | |
609 | + selectedFields : { | |
610 | + type : Array, | |
611 | + value : undefined | |
612 | + }, | |
613 | + /** | |
614 | + * It contains all attributes for the datalet preset. It'll be used when the controllet is called to modify an exsting datalet. | |
615 | + */ | |
616 | + dataletPreset:{ | |
617 | + type: Object, | |
618 | + value: undefined | |
619 | + }, | |
620 | + /** | |
621 | + * It's used to store the params to give to datalet. This kind of params will not processed by selection step | |
622 | + * | |
623 | + * @attribute paramsFields | |
624 | + * @type Object | |
625 | + * @default empty | |
626 | + */ | |
627 | + paramsFields:{ | |
628 | + type: Object, | |
629 | + value: undefined | |
630 | + }, | |
631 | + /** | |
632 | + * It's used to store the tab index in the first pass | |
633 | + * | |
634 | + * @attribute DatasourceTabSelected | |
635 | + * @type Number | |
636 | + * @default 0 | |
637 | + */ | |
638 | + DatasourceTabSelected : { | |
639 | + type : Number, | |
640 | + value : 0 | |
641 | + }, | |
642 | + /** | |
643 | + * It's used to store the datasets to show in the contexual menu | |
644 | + * | |
645 | + * @attribute datasets | |
646 | + * @type Array | |
647 | + * @default empty | |
648 | + */ | |
649 | + datasets : | |
650 | + { | |
651 | + type : Array, | |
652 | + value : [] | |
653 | + } | |
654 | + }, | |
655 | + /** | |
656 | + * 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. | |
657 | + * In this phase the scrollbar will be initialized | |
658 | + * | |
659 | + * @method handleResponseData | |
660 | + * | |
661 | + * @param {Event} e | |
662 | + */ | |
663 | + | |
664 | + ready : function(){ | |
665 | + | |
666 | + $(this.$.fields_placeholder).perfectScrollbar(); | |
667 | + $(this.$.selectedFields_main_container).perfectScrollbar(); | |
668 | + $(this.$.idm_fields_main_container).perfectScrollbar(); | |
669 | + $(this.$.idm_layout_main_container).perfectScrollbar(); | |
670 | + $(this.$.table_fields_container).perfectScrollbar(); | |
671 | + | |
672 | + if(this.dataletPreset != undefined) { | |
673 | + this.$.data_url.value = this.dataletPreset['data-url']; | |
674 | + this.selected = 1; | |
675 | + } | |
676 | + | |
677 | + //Fiefox force :O | |
678 | + var table_params ={ | |
679 | + component : "datatable-datalet", | |
680 | + params :{ | |
681 | + 'data-url' : this.dataUrl | |
682 | + }, | |
683 | + fields : [], | |
684 | + placeHolder : this.$.table_component_place_holder | |
685 | + }; | |
686 | + | |
687 | + ComponentService.deep_url = this.deepUrl; | |
688 | + ComponentService.getComponent(table_params); | |
689 | + }, | |
690 | + /** | |
691 | + * Utility function to inject datalet in a placeholder | |
692 | + */ | |
693 | + injectDatalet: function(place_holder){ | |
694 | + | |
695 | + var datalet_params ={ | |
696 | + component : this.selectedDatalet, | |
697 | + params : this.paramsFields, | |
698 | + fields : this.selectedFields, | |
699 | + placeHolder : place_holder | |
700 | + }; | |
701 | + ComponentService.deep_url = this.deepUrl; | |
702 | + ComponentService.getComponent(datalet_params); | |
703 | + }, | |
704 | + | |
705 | + /** | |
706 | + * Callback to parse the data requested when dataUrl change its value | |
707 | + * | |
708 | + * @method handleResponseData | |
709 | + * | |
710 | + * @param {Event} e | |
711 | + */ | |
712 | + handleResponseData : function(e){ | |
713 | + this.$.fields_treeview.setAttribute("json-data", JSON.stringify(e.detail.response)); | |
714 | + this.$.fields_treeview.setAttribute("preselected-fields", JSON.stringify(this.selectedFields)); | |
715 | + this.$.fields_treeview.ready();//chrome | |
716 | + }, | |
717 | + | |
718 | + /** | |
719 | + * Callback to parse the components response object | |
720 | + * | |
721 | + * @method handleResponseDatalets | |
722 | + * | |
723 | + * @param {Event} e | |
724 | + */ | |
725 | + handleResponseDatalets : function(e){ | |
726 | + this.datalets_list = new Array(); | |
727 | + for(var i=0;i < e.detail.response.length;i++){ | |
728 | + var datalet_info = { name : e.detail.response[i].name , | |
729 | + image : e.detail.response[i].url + e.detail.response[i].name + ".png" | |
730 | + }; | |
731 | + | |
732 | + this.datalets_list.push(datalet_info); | |
733 | + } | |
734 | + | |
735 | + if(this.selectedDatalet == undefined) | |
736 | + this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' + | |
737 | + '<items-list-controllet' + | |
738 | + ' replace-string="-datalet"' + | |
739 | + ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + | |
740 | + '</items-list-controllet>' + | |
741 | + '</animated-button-container-controllet>'; | |
742 | + else | |
743 | + this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' + | |
744 | + '<items-list-controllet' + | |
745 | + ' replace-string="-datalet"' + | |
746 | + ' selected-card=\'' + this.selectedDatalet + '\'' + | |
747 | + ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + | |
748 | + '</items-list-controllet>' + | |
749 | + '</animated-button-container-controllet>'; | |
750 | + | |
751 | + }, | |
752 | + /** | |
753 | + * 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, | |
754 | + * to allow user to drag the fields, from the selected fields box, and create a new visualization. | |
755 | + * | |
756 | + * @method handleSelectedDatalet | |
757 | + * | |
758 | + * @param {Event} e | |
759 | + */ | |
760 | + handleSelectedDatalet : function(e){ | |
761 | + | |
762 | + var response = e.detail.response; | |
763 | + this.$.datalet_idm_fields_container.innerHTML = ""; | |
764 | + this.$.idm_layout_container.innerHTML = ""; | |
765 | + | |
766 | + var input; | |
767 | + var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts); | |
768 | + | |
769 | + if(response.idm.inputs.input.constructor == Object) { | |
770 | + if(response.idm.inputs.input.selection == "*") | |
771 | + { | |
772 | + var fields = this.$.selectedFields_container.querySelectorAll('draggable-element-controllet'); | |
773 | + input = response.idm.inputs.input; | |
774 | + response.idm.inputs.input = new Array(); | |
775 | + for(var i=0;i<fields.length;i++){ | |
776 | + var newInput = jQuery.extend(true, {}, input); | |
777 | + newInput.name = input.name + ' ' + (i + 1); | |
778 | + response.idm.inputs.input.push(newInput); | |
779 | + } | |
780 | + } | |
781 | + } | |
782 | + | |
783 | + var heading; | |
784 | + var id; | |
785 | + | |
786 | + for(var i =0; i < response.idm.inputs.input.length; i++) { | |
787 | + var html = '<draggable-element-controllet is-target="true" '; | |
788 | + input = response.idm.inputs.input[i]; | |
789 | + | |
790 | + heading = ' heading="' + input.name + '"'; | |
791 | + id = ' id="' + (i + 1) + '"'; | |
792 | + | |
793 | + html += heading + id; | |
794 | + html += ' description="' + input.description + '"' + | |
795 | + ' number="' + (i + 1) + '"'; | |
796 | + | |
797 | + if(this.selectedFields != undefined) { | |
798 | + if(this.selectedFields[i] != undefined) { | |
799 | + html += ' value="' + this.selectedFields[i] + '"' + | |
800 | + ' label="' + this.selectedFields[i].split(",")[this.selectedFields[i].split(",").length - 1] + '"'; | |
801 | + } | |
802 | + } | |
803 | + | |
804 | + html += '></draggable-element-controllet>'; | |
805 | + this.$.datalet_idm_fields_container.innerHTML += html; | |
806 | + | |
807 | + } | |
808 | + | |
809 | + if(layouts.input != undefined) { | |
810 | + if(layouts.input.constructor == Object){ | |
811 | + layouts.input = new Array(jQuery.extend(true, {}, layouts.input)); | |
812 | + } | |
813 | + | |
814 | + html = '<text-element-controllet '; | |
815 | + for (var i = 0; i < layouts.input.length; i++) { | |
816 | + html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' + | |
817 | + 'description="' + layouts.input[i].description + '" ' + | |
818 | + 'number="' + (i + 1) + '" '; | |
819 | + if(this.dataletPreset != undefined){ | |
820 | + html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"'; | |
821 | + } | |
822 | + | |
823 | + html += '></text-element-controllet>'; | |
824 | + } | |
825 | + this.$.idm_layout_container.innerHTML = html; | |
826 | + } | |
827 | + | |
828 | + if(this.selectedFields != undefined) this.generateDataletPreview(); | |
829 | + | |
830 | + }, | |
831 | + /** | |
832 | + * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values. | |
833 | + * | |
834 | + * @method generateDataletPreview | |
835 | + */ | |
836 | + generateDataletPreview : function(){ | |
837 | + | |
838 | + var input_mapped_fields = this.$.datalet_idm_fields_container.querySelectorAll('draggable-element-controllet[is-target=true]'); | |
839 | + this.selectedFields = Array(); | |
840 | + | |
841 | + for (var i = 0; i < input_mapped_fields.length; i++) { | |
842 | + if (input_mapped_fields[i].value != "") { | |
843 | + this.selectedFields.push(input_mapped_fields[i].value); | |
844 | + } | |
845 | + } | |
846 | + | |
847 | + var input_layouts_fields = this.$.idm_layout_container.querySelectorAll('text-element-controllet'); | |
848 | + this.paramsFields = {'data-url' : this.dataUrl}; | |
849 | + | |
850 | + for (var i = 0; i < input_layouts_fields.length; i++) { | |
851 | + if (input_layouts_fields[i].value != "") { | |
852 | + this.paramsFields[input_layouts_fields[i].heading] = input_layouts_fields[i].value; | |
853 | + } | |
854 | + } | |
855 | + | |
856 | + this.injectDatalet(this.$.datalet_placeholder); | |
857 | + | |
858 | + }, | |
859 | + /** | |
860 | + * Validate the current pass in order to access to next one. | |
861 | + * | |
862 | + * @method validateCurrentPass | |
863 | + * | |
864 | + * @param {Number} next_selected_pass | |
865 | + */ | |
866 | + validateCurrentPass : function(next_selected_pass){ | |
867 | + | |
868 | + switch(next_selected_pass){ | |
869 | + case 0: | |
870 | + this.$.data_url.value = ""; | |
871 | + this.$.fields_treeview.setAttribute("json-data", null); | |
872 | + this.$.fields_treeview.setAttribute("preselected-fields", null); | |
873 | + this.$.fields_treeview.ready();//chrome | |
874 | + return true; | |
875 | + case 1: | |
876 | + var x = this.$.fields_treeview.getAttribute("json-data"); | |
877 | + if(this.$.data_url.value == undefined || this.$.fields_treeview.getAttribute('json-data') == "null" || this.$.fields_treeview.getAttribute('json-data') == null){ | |
878 | + this.$.message.text = "You have to select a dataset to access to pass 2. It's possible that the data you selected are not available."; | |
879 | + this.$.message.show(); | |
880 | + return false; | |
881 | + }else{ | |
882 | + return true; | |
883 | + } | |
884 | + | |
885 | + case 2: | |
886 | + if(this.selectedFields == undefined || this.selectedFields.length == 0){ | |
887 | + this.$.message.text = "You have to select a set of fields to access to pass 3."; | |
888 | + this.$.message.show(); | |
889 | + return false; | |
890 | + }else{ | |
891 | + this.$.datalet_placeholder_2.innerHTML = ""; | |
892 | + if(this.selectedDatalet != undefined) this.injectDatalet(this.$.datalet_placeholder); | |
893 | + return true; | |
894 | + } | |
895 | + case 3: | |
896 | + if(this.paramsFields == undefined){ | |
897 | + this.$.message.text = "You have to select a datalet and map the selected fields to datalets fields(by drag and drop) to access to pass 4."; | |
898 | + this.$.message.show(); | |
899 | + return false; | |
900 | + }else{ | |
901 | + this.$.datalet_placeholder.innerHTML = ""; | |
902 | + this.injectDatalet(this.$.datalet_placeholder_2); | |
903 | + return true; | |
904 | + } | |
905 | + } | |
906 | + | |
907 | + }, | |
908 | + /** | |
909 | + * Callback for manage the previous pass button | |
910 | + * | |
911 | + * @method _onPrevClick | |
912 | + * | |
913 | + */ | |
914 | + _onPrevClick : function() { | |
915 | + if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return; | |
916 | + | |
917 | + this.entryAnimation = 'slide-from-left-animation'; | |
918 | + this.exitAnimation = 'slide-right-animation'; | |
919 | + this.selected = this.selected === 0 ? 0 : (this.selected - 1); | |
920 | + }, | |
921 | + /** | |
922 | + * Callback to manage the next pass button | |
923 | + * | |
924 | + * @method _onNextClick | |
925 | + * | |
926 | + */ | |
927 | + _onNextClick : function() { | |
928 | + | |
929 | + if(!this.validateCurrentPass(this.selected === 3 ? 3 : (this.selected + 1))) return; | |
930 | + | |
931 | + this.entryAnimation = 'slide-from-right-animation'; | |
932 | + this.exitAnimation = 'slide-left-animation'; | |
933 | + this.selected = this.selected === 3 ? 3 : (this.selected + 1); | |
934 | + }, | |
935 | + /** | |
936 | + * Callback to manage InfoButton click to give user information about the selected dataset | |
937 | + * | |
938 | + */ | |
939 | + _onInfoClick : function(){ | |
940 | + | |
941 | + this.$.infoDialog.open(); | |
942 | + | |
943 | + }, | |
944 | + /** | |
945 | + * Callback related to datasource selection from select menu | |
946 | + * | |
947 | + * @method _datasourceSelected | |
948 | + * | |
949 | + * @param {Event} e | |
950 | + */ | |
951 | + _datasourceSelected : function(e){ | |
952 | + | |
953 | + this.$.data_url.value = this.datasets[parseInt(e.target.id)].url; | |
954 | + this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name; | |
955 | + this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description; | |
956 | + | |
957 | + }, | |
958 | + /** | |
959 | + * Callback related to data url change | |
960 | + * | |
961 | + * @method _dataUrlChanged | |
962 | + * | |
963 | + * @param {Event} e | |
964 | + */ | |
965 | + _dataUrlChanged : function(newValue, oldValue){ | |
966 | + this.$.data_request.generateRequest(); | |
967 | + }, | |
968 | + /** | |
969 | + * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet | |
970 | + * | |
971 | + * @method _dataletSelected | |
972 | + * | |
973 | + * @param {Event} e | |
974 | + */ | |
975 | + _dataletSelected : function(e){ | |
976 | + this.selectedDatalet = e.detail.datalet; | |
977 | + this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet; | |
978 | + this.$.selectedDatalet_request.generateRequest(); | |
979 | + | |
980 | + }, | |
981 | + /** | |
982 | + * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field | |
983 | + * | |
984 | + * @method _fieldsSelected | |
985 | + * | |
986 | + * @param {Event} e | |
987 | + */ | |
988 | + _fieldsSelected : function(e){ | |
989 | + | |
990 | + this.selectedFields = e.detail.fields; | |
991 | + this.$.selectedFields_container.innerHTML = ""; | |
992 | + for(var i=0;i<e.detail.fields.length;i++) { | |
993 | + this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] + | |
994 | + '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] + | |
995 | + '"></draggable-element-controllet><br>'; | |
996 | + } | |
997 | + | |
998 | + var table_params ={ | |
999 | + component : "datatable-datalet", | |
1000 | + params :{ | |
1001 | + 'data-url' : this.dataUrl | |
1002 | + }, | |
1003 | + fields : e.detail.fields, | |
1004 | + placeHolder : this.$.table_component_place_holder | |
1005 | + }; | |
1006 | + | |
1007 | + ComponentService.deep_url = this.deepUrl; | |
1008 | + ComponentService.getComponent(table_params); | |
1009 | + | |
1010 | + | |
1011 | + }, | |
1012 | + /** | |
1013 | + * 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 | |
1014 | + * | |
1015 | + * @method _fieldsMapped | |
1016 | + * | |
1017 | + * @param {Event} e | |
1018 | + */ | |
1019 | + _fieldsMapped : function(e){ | |
1020 | + | |
1021 | + this.generateDataletPreview(); | |
1022 | + | |
1023 | + }, | |
1024 | + /** | |
1025 | + * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text | |
1026 | + * | |
1027 | + * @method _textElementChanged | |
1028 | + * | |
1029 | + * @param {Event} e | |
1030 | + */ | |
1031 | + _textElementChanged : function(e){ | |
1032 | + if(this.selected == 3) { | |
1033 | + this.generateDataletPreview(); | |
1034 | + this.$.datalet_placeholder.innerHTML = ""; | |
1035 | + this.injectDatalet(this.$.datalet_placeholder_2); | |
1036 | + } | |
1037 | + }, | |
1038 | + /** | |
1039 | + * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value. | |
1040 | + * | |
1041 | + * @method _handleDatasourceDragOver | |
1042 | + * | |
1043 | + * @param {Event} e | |
1044 | + */ | |
1045 | + _handleDatasourceDragOver : function(e){ | |
1046 | + this.$.data_url.value = ""; | |
1047 | + }, | |
1048 | + /** | |
1049 | + * Callback related to the finish button. | |
1050 | + * | |
1051 | + * @method _onFinish | |
1052 | + * | |
1053 | + * @param {Event} e | |
1054 | + */ | |
1055 | + _onFinish : function(e){ | |
1056 | + | |
1057 | + if((this.selectedFields.length == 0) || this.selectedDatalet == ""){ | |
1058 | + this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization."; | |
1059 | + this.$.message.show(); | |
1060 | + return; | |
1061 | + } | |
1062 | + | |
1063 | + var data = { | |
1064 | + dataUrl : this.dataUrl, | |
1065 | + params : this.paramsFields, | |
1066 | + fields : this.selectedFields, | |
1067 | + datalet : this.selectedDatalet, | |
1068 | + comment : this.$.commentArea.value, | |
1069 | + staticData : JSON.stringify(this.$.datalet_placeholder_2.children[1].behavior.data) | |
1070 | + } | |
1071 | + | |
1072 | + this.fire('data-sevc-controllet.dataletCreated', {data : data}); | |
1073 | + | |
1074 | + } | |
1075 | + | |
1076 | + }); | |
1077 | + | |
1078 | + </script> | |
1079 | + | |
1080 | +</dom-module> | |
0 | 1081 | \ No newline at end of file | ... | ... |
controllets/data-sevc-controllet/data-sevc-controllet.html
... | ... | @@ -2,7 +2,7 @@ |
2 | 2 | @license |
3 | 3 | The MIT License (MIT) |
4 | 4 | |
5 | - Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
5 | + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy | |
6 | 6 | |
7 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy |
8 | 8 | of this software and associated documentation files (the "Software"), to deal |
... | ... | @@ -54,8 +54,10 @@ |
54 | 54 | <link rel="import" href="../items-list-controllet/item-list-controllet.html"> |
55 | 55 | <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> |
56 | 56 | <link rel="import" href="../tree-view-controllet/tree-view-controllet.html"> |
57 | +<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html"> | |
57 | 58 | <link rel="import" href="../text-element-controllet/text-element-controllet.html"> |
58 | 59 | <link rel="import" href="../animated-button-container-controllet/animated-button-container-controllet.html"> |
60 | +<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html"> | |
59 | 61 | |
60 | 62 | <!-- |
61 | 63 | The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required. |
... | ... | @@ -80,409 +82,426 @@ Example: |
80 | 82 | |
81 | 83 | |
82 | 84 | <dom-module id="data-sevc-controllet"> |
83 | - <template> | |
84 | - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | |
85 | + <template> | |
86 | + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | |
85 | 87 | |
86 | - <style is="custom-style"> | |
88 | + <style is="custom-style"> | |
87 | 89 | |
88 | - ::content body { | |
89 | - font-family: 'Roboto', sans-serif; | |
90 | - } | |
90 | + ::content body { | |
91 | + font-family: 'Roboto', sans-serif; | |
92 | + } | |
91 | 93 | |
92 | - .flexchild | |
93 | - { | |
94 | - @apply(--layout-flex); | |
95 | - } | |
94 | + .flexchild | |
95 | + { | |
96 | + @apply(--layout-flex); | |
97 | + } | |
96 | 98 | |
97 | - .flex2child | |
98 | - { | |
99 | - @apply(--layout-flex-2); | |
100 | - } | |
99 | + .flex2child | |
100 | + { | |
101 | + @apply(--layout-flex-2); | |
102 | + } | |
101 | 103 | |
102 | - .avatar | |
103 | - { | |
104 | - display: inline-block; | |
105 | - height: 2em; | |
106 | - width: 2em; | |
107 | - border-radius: 50%; | |
108 | - background: var(--paper-blue-500); | |
109 | - color: white; | |
110 | - line-height: 2em; | |
111 | - font-size: 1.87em; | |
112 | - text-align: center; | |
113 | - } | |
104 | + .avatar | |
105 | + { | |
106 | + display: inline-block; | |
107 | + height: 2em; | |
108 | + width: 2em; | |
109 | + border-radius: 50%; | |
110 | + background: var(--paper-blue-500); | |
111 | + color: white; | |
112 | + line-height: 2em; | |
113 | + font-size: 1.87em; | |
114 | + text-align: center; | |
115 | + } | |
114 | 116 | |
115 | - .title | |
116 | - { | |
117 | - position: relative; | |
118 | - top: 0.60vh; | |
119 | - margin-left: 20px; | |
120 | - } | |
117 | + .title | |
118 | + { | |
119 | + position: relative; | |
120 | + top: 0.60vh; | |
121 | + margin-left: 20px; | |
122 | + } | |
121 | 123 | |
122 | - .big | |
123 | - { | |
124 | - font-size: 1.37em; | |
125 | - color: var(--google-grey-500); | |
126 | - } | |
124 | + .big | |
125 | + { | |
126 | + font-size: 1.37em; | |
127 | + color: var(--google-grey-500); | |
128 | + } | |
127 | 129 | |
128 | - .medium | |
129 | - { | |
130 | - font-size: 1em; | |
131 | - padding-bottom: 0.5em; | |
132 | - color : #000000; | |
133 | - font-weight: bold; | |
134 | - } | |
130 | + .medium | |
131 | + { | |
132 | + font-size: 1em; | |
133 | + padding-bottom: 0.5em; | |
134 | + color : #000000; | |
135 | + font-weight: bold; | |
136 | + } | |
135 | 137 | |
136 | - .small | |
137 | - { | |
138 | - font-size: 0.8em; | |
139 | - padding-top: 10px; | |
140 | - color: var(--paper-blue-500); | |
141 | - font-weight: bold; | |
142 | - } | |
138 | + .small | |
139 | + { | |
140 | + font-size: 0.8em; | |
141 | + padding-top: 10px; | |
142 | + color: var(--paper-blue-500); | |
143 | + font-weight: bold; | |
144 | + } | |
143 | 145 | |
144 | - paper-input | |
145 | - { | |
146 | - width: 80%; | |
147 | - } | |
146 | + paper-input | |
147 | + { | |
148 | + width: 80%; | |
149 | + } | |
148 | 150 | |
149 | - paper-dropdown-menu | |
150 | - { | |
151 | - text-align: left; | |
152 | - margin: auto; | |
153 | - width: 100%; | |
154 | - } | |
151 | + paper-dropdown-menu | |
152 | + { | |
153 | + text-align: left; | |
154 | + margin: auto; | |
155 | + width: 100%; | |
156 | + } | |
155 | 157 | |
156 | - ::content paper-menu-button | |
157 | - { | |
158 | - display: block; | |
159 | - width: 100%; | |
160 | - } | |
158 | + ::content paper-menu-button | |
159 | + { | |
160 | + display: block; | |
161 | + width: 100%; | |
162 | + } | |
161 | 163 | |
162 | - #visualization_slider_area | |
163 | - { | |
164 | - padding-top: 20px; | |
165 | - overflow: visible; | |
166 | - } | |
164 | + #visualization_slider_area | |
165 | + { | |
166 | + padding-top: 20px; | |
167 | + overflow: visible; | |
168 | + } | |
167 | 169 | |
168 | - #fields_mapping_area | |
169 | - { | |
170 | - min-width: 670px; | |
171 | - min-height: 180px; | |
172 | - } | |
170 | + #fields_mapping_area | |
171 | + { | |
172 | + min-width: 670px; | |
173 | + min-height: 180px; | |
174 | + } | |
173 | 175 | |
174 | - #datalet_placeholder | |
175 | - { | |
176 | - height: 60vh; | |
177 | - min-height: 60vh; | |
178 | - min-width: 45%; | |
179 | - margin-top:10px; | |
180 | - } | |
176 | + #datalet_placeholder | |
177 | + { | |
178 | + height: 60vh; | |
179 | + min-height: 60vh; | |
180 | + min-width: 45%; | |
181 | + margin-top:10px; | |
182 | + } | |
181 | 183 | |
182 | - .datalet_right_container | |
183 | - { | |
184 | - width: 100vh; | |
185 | - } | |
184 | + .datalet_right_container | |
185 | + { | |
186 | + width: 100vh; | |
187 | + } | |
186 | 188 | |
187 | - .field-mapping-card | |
188 | - { | |
189 | - width: 50%; | |
190 | - float: left; | |
191 | - } | |
189 | + .field-mapping-card | |
190 | + { | |
191 | + width: 50%; | |
192 | + float: left; | |
193 | + } | |
192 | 194 | |
193 | - .toolbar_button | |
194 | - { | |
195 | - --iron-icon-height: 32px; | |
196 | - --iron-icon-width: 32px; | |
197 | - } | |
195 | + .toolbar_button | |
196 | + { | |
197 | + --iron-icon-height: 32px; | |
198 | + --iron-icon-width: 32px; | |
199 | + } | |
198 | 200 | |
199 | - #finish_button | |
200 | - { | |
201 | - --iron-icon-height: 32px; | |
202 | - --iron-icon-width: 32px; | |
203 | - color: var(--paper-blue-500); | |
204 | - } | |
201 | + #finish_button | |
202 | + { | |
203 | + --iron-icon-height: 32px; | |
204 | + --iron-icon-width: 32px; | |
205 | + color: var(--paper-blue-500); | |
206 | + } | |
205 | 207 | |
206 | - .area_container | |
207 | - { | |
208 | - overflow: hidden; | |
209 | - margin : 0.8em; | |
210 | - padding : 0.8em; | |
211 | - } | |
208 | + .area_container | |
209 | + { | |
210 | + overflow: hidden; | |
211 | + margin : 0.8em; | |
212 | + padding : 0.8em; | |
213 | + } | |
212 | 214 | |
213 | - #fields_placeholder{ | |
214 | - width: 40%; | |
215 | - height: 75vh; | |
216 | - position: relative; | |
217 | - float: left; | |
218 | - overflow: auto; | |
219 | - } | |
215 | + /*#fields_placeholder{*/ | |
216 | + /*width: 40%;*/ | |
217 | + /*height: 75vh;*/ | |
218 | + /*position: relative;*/ | |
219 | + /*float: left;*/ | |
220 | + /*overflow: auto;*/ | |
221 | + /*}*/ | |
222 | + | |
223 | + #fields_placeholder{ | |
224 | + width: 100%; | |
225 | + /*height: 75vh;*/ | |
226 | + /*position: relative;*/ | |
227 | + /*float: right;*/ | |
228 | + /*overflow: auto;*/ | |
229 | + } | |
220 | 230 | |
221 | - #table_fields_container{ | |
222 | - height: 75vh; | |
223 | - width: 55%; | |
224 | - position: relative; | |
225 | - float: left; | |
226 | - overflow: auto; | |
227 | - } | |
231 | + #table_fields_container{ | |
232 | + height: 75vh; | |
233 | + width: 55%; | |
234 | + position: relative; | |
235 | + float: left; | |
236 | + overflow: auto; | |
237 | + } | |
228 | 238 | |
229 | - #idm_fields_main_container{ | |
230 | - position: relative; | |
231 | - height: 60vh; | |
232 | - } | |
239 | + #idm_fields_main_container{ | |
240 | + position: relative; | |
241 | + height: 60vh; | |
242 | + } | |
233 | 243 | |
234 | - #selectedFields_main_container{ | |
235 | - position: relative; | |
236 | - height: 60vh; | |
237 | - } | |
244 | + #selectedFields_main_container{ | |
245 | + position: relative; | |
246 | + height: 60vh; | |
247 | + } | |
238 | 248 | |
239 | - #idm_layout_main_container{ | |
240 | - position: relative; | |
241 | - height: 50vh; | |
242 | - } | |
249 | + #idm_layout_main_container{ | |
250 | + position: relative; | |
251 | + height: 50vh; | |
252 | + } | |
243 | 253 | |
244 | - #comment{ | |
245 | - position: relative; | |
246 | - width: 35vw; | |
247 | - } | |
254 | + #comment{ | |
255 | + position: relative; | |
256 | + width: 35vw; | |
257 | + } | |
248 | 258 | |
249 | - paper-menu{ | |
250 | - width: 100%; | |
251 | - } | |
259 | + paper-menu{ | |
260 | + width: 100%; | |
261 | + } | |
252 | 262 | |
253 | - paper-dialog { | |
254 | - position: fixed; | |
255 | - top: 16px; | |
256 | - width: auto; | |
257 | - height: auto; | |
258 | - overflow: auto; | |
259 | - padding : 30px; | |
260 | - } | |
263 | + paper-dialog { | |
264 | + position: fixed; | |
265 | + top: 16px; | |
266 | + width: auto; | |
267 | + height: auto; | |
268 | + overflow: auto; | |
269 | + padding : 30px; | |
270 | + } | |
261 | 271 | |
262 | - paper-tabs, paper-toolbar | |
263 | - { | |
264 | - background-color: var(--paper-blue-500); | |
265 | - color: #ffffff; | |
266 | - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); | |
267 | - --paper-tabs-selection-bar-color: var(--google-gray-500); | |
268 | - } | |
269 | - | |
270 | - paper-toolbar paper-tabs | |
271 | - { | |
272 | - box-shadow: none; | |
273 | - } | |
274 | - | |
275 | - paper-tabs[noink][no-bar] paper-tab.iron-selected | |
276 | - { | |
277 | - background-color: var(--google-gray-500); | |
278 | - } | |
279 | - | |
280 | - paper-tabs[align-bottom] | |
281 | - { | |
282 | - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15); | |
283 | - } | |
284 | - </style> | |
285 | - | |
286 | - <iron-ajax | |
287 | - auto | |
288 | - id="data_request" | |
289 | - url={{dataUrl}} | |
290 | - verbose="true" | |
291 | - on-response="handleResponseData" | |
292 | - debounce-duration="300"> | |
293 | - </iron-ajax> | |
294 | - | |
295 | - <iron-ajax | |
296 | - id="datales_list_request" | |
297 | - auto | |
298 | - url={{dataletsListUrl}} | |
299 | - handle-as="json" | |
300 | - on-response="handleResponseDatalets" | |
301 | - debounce-duration="300"> | |
302 | - </iron-ajax> | |
303 | - | |
304 | - <iron-ajax | |
305 | - id="selectedDatalet_request" | |
306 | - url={{deepUrl}} | |
307 | - verbose="true" | |
308 | - on-response="handleSelectedDatalet" | |
309 | - debounce-duration="300"> | |
310 | - </iron-ajax> | |
311 | - | |
312 | - <content> | |
313 | - | |
314 | - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | |
315 | - | |
316 | - <neon-animatable> | |
317 | - | |
318 | - <div class="vertical justified layout"> | |
319 | - | |
320 | - <div class="horizontal layout"> | |
321 | - <div class="avatar" style="margin-left:15px">1</div> | |
322 | - <div class="title flex"> | |
323 | - <div id="toolbar_title" class="big">Dataset source</div> | |
324 | - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div> | |
325 | - </div> | |
326 | - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | |
327 | - </div> | |
272 | + paper-tabs, paper-toolbar | |
273 | + { | |
274 | + background-color: var(--paper-blue-500); | |
275 | + color: #ffffff; | |
276 | + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); | |
277 | + --paper-tabs-selection-bar-color: var(--google-gray-500); | |
278 | + } | |
328 | 279 | |
329 | - <paper-material elevation="2" class="area_container"> | |
330 | - <paper-tabs selected="{{DatasourceTabSelected}}"> | |
331 | - <paper-tab>Select data source</paper-tab> | |
332 | - <paper-tab>Most popular</paper-tab> | |
333 | - <paper-tab>Search</paper-tab> | |
334 | - </paper-tabs> | |
335 | - <iron-pages selected="{{DatasourceTabSelected}}"> | |
336 | - <div> | |
337 | - <div class="card-content"> | |
338 | - <paper-dropdown-menu id="datasets-sources" name="datasets-sources" label="Available datasets"> | |
339 | - <paper-menu class="dropdown-content"> | |
340 | - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index"> | |
341 | - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item> | |
342 | - </template> | |
343 | - </paper-menu> | |
344 | - </paper-dropdown-menu> | |
345 | - <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> | |
346 | - </div> | |
280 | + paper-toolbar paper-tabs | |
281 | + { | |
282 | + box-shadow: none; | |
283 | + } | |
347 | 284 | |
348 | - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div> | |
285 | + paper-tabs[noink][no-bar] paper-tab.iron-selected | |
286 | + { | |
287 | + background-color: var(--google-gray-500); | |
288 | + } | |
349 | 289 | |
350 | - <div class="card-content"> | |
351 | - <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea> | |
352 | - </div> | |
290 | + paper-tabs[align-bottom] | |
291 | + { | |
292 | + box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15); | |
293 | + } | |
294 | + </style> | |
295 | + | |
296 | + <iron-ajax | |
297 | + auto | |
298 | + id="data_request" | |
299 | + url={{dataUrl}} | |
300 | + verbose="true" | |
301 | + on-response="handleResponseData" | |
302 | + debounce-duration="300"> | |
303 | + </iron-ajax> | |
304 | + | |
305 | + <iron-ajax | |
306 | + id="datales_list_request" | |
307 | + auto | |
308 | + url={{dataletsListUrl}} | |
309 | + handle-as="json" | |
310 | + on-response="handleResponseDatalets" | |
311 | + debounce-duration="300"> | |
312 | + </iron-ajax> | |
313 | + | |
314 | + <iron-ajax | |
315 | + id="selectedDatalet_request" | |
316 | + url={{deepUrl}} | |
317 | + verbose="true" | |
318 | + on-response="handleSelectedDatalet" | |
319 | + debounce-duration="300"> | |
320 | + </iron-ajax> | |
321 | + | |
322 | + <content> | |
323 | + | |
324 | + <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | |
325 | + | |
326 | + <neon-animatable> | |
327 | + | |
328 | + <div class="vertical justified layout"> | |
329 | + | |
330 | + <div class="horizontal layout"> | |
331 | + <div class="avatar" style="margin-left:15px">1</div> | |
332 | + <div class="title flex"> | |
333 | + <div id="toolbar_title" class="big">Dataset source</div> | |
334 | + <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div> | |
335 | + </div> | |
336 | + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | |
337 | + </div> | |
338 | + | |
339 | + <paper-material elevation="2" class="area_container"> | |
340 | + <paper-tabs selected="{{DatasourceTabSelected}}"> | |
341 | + <paper-tab>Select data source</paper-tab> | |
342 | + <paper-tab>Tree Map Search</paper-tab> | |
343 | + <paper-tab>Most popular</paper-tab> | |
344 | + </paper-tabs> | |
345 | + <iron-pages selected="{{DatasourceTabSelected}}"> | |
346 | + <div> | |
347 | + <div class="card-content"> | |
348 | + <paper-dropdown-menu id="datasets-sources" name="datasets-sources" label="Available datasets"> | |
349 | + <paper-menu class="dropdown-content"> | |
350 | + <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index"> | |
351 | + <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item> | |
352 | + </template> | |
353 | + </paper-menu> | |
354 | + </paper-dropdown-menu> | |
355 | + <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> | |
356 | + </div> | |
353 | 357 | |
358 | + <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div> | |
354 | 359 | |
360 | + <div class="card-content"> | |
361 | + <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea> | |
355 | 362 | </div> |
356 | - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | |
357 | - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | |
358 | - </iron-pages> | |
359 | - </paper-material> | |
360 | 363 | |
361 | - </div> | |
362 | 364 | |
363 | - </neon-animatable> | |
365 | + </div> | |
366 | + <!--<div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>--> | |
367 | + <div> | |
368 | + <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> | |
369 | + </div> | |
370 | + <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | |
371 | + </iron-pages> | |
372 | + </paper-material> | |
364 | 373 | |
365 | - <neon-animatable> | |
374 | + </div> | |
366 | 375 | |
367 | - <div class="vertical justified layout"> | |
376 | + </neon-animatable> | |
368 | 377 | |
369 | - <div class="horizontal layout"> | |
370 | - <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> | |
371 | - <div class="avatar">2</div> | |
372 | - <div class="title flex"> | |
373 | - <div id="toolbar_title" class="big">Dataset source</div> | |
374 | - <div id="toolbar_description" class="small">Select the fields you want to use for visualization from tree on the right side. The table on the left side will show you the values related to the selected fields.</div> | |
375 | - </div> | |
376 | - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | |
378 | + <neon-animatable> | |
379 | + | |
380 | + <div class="vertical justified layout"> | |
381 | + | |
382 | + <div class="horizontal layout"> | |
383 | + <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> | |
384 | + <div class="avatar">2</div> | |
385 | + <div class="title flex"> | |
386 | + <div id="toolbar_title" class="big">Dataset source</div> | |
387 | + <div id="toolbar_description" class="small">Select the fields you want to use for visualization from tree on the right side. The table on the left side will show you the values related to the selected fields.</div> | |
377 | 388 | </div> |
389 | + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | |
390 | + </div> | |
378 | 391 | |
379 | - <div class="horizontal layout"> | |
392 | + <div class="horizontal layout"> | |
380 | 393 | |
381 | - <paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px"> | |
382 | - <tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet> | |
383 | - </paper-material> | |
394 | + <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">--> | |
395 | + <!--<tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>--> | |
396 | + <!--</paper-material>--> | |
384 | 397 | |
385 | - <paper-material elevation="2" id="table_fields_container" class="area_container flex2child"> | |
386 | - <div id="table_component_place_holder"></div> | |
387 | - </paper-material> | |
398 | + <!--<paper-material elevation="2" id="table_fields_container" class="area_container flex2child">--> | |
399 | + <!--<div id="table_component_place_holder"></div>--> | |
400 | + <!--</paper-material>--> | |
388 | 401 | |
402 | + <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">--> | |
403 | + <div id="fields_placeholder"> | |
404 | + <tree-view-multi-table-controllet id="fields_treeview" root-name="data" opened-path="result,records" data-url={{dataUrl}}></tree-view-multi-table-controllet> | |
389 | 405 | </div> |
406 | + <!--</paper-material>--> | |
390 | 407 | |
391 | 408 | </div> |
392 | 409 | |
393 | - </neon-animatable> | |
410 | + </div> | |
394 | 411 | |
395 | - <neon-animatable> | |
412 | + </neon-animatable> | |
396 | 413 | |
397 | - <div class="vertical justified layout"> | |
414 | + <neon-animatable> | |
398 | 415 | |
399 | - <div class="horizontal layout"> | |
400 | - <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> | |
401 | - <div class="avatar">3</div> | |
402 | - <div class="title flex"> | |
403 | - <div id="toolbar_title" class="big">Data mapping</div> | |
404 | - <div id="toolbar_description" class="small">Select the visualization by clicking on the button(a window will appear with all available visualization).After, drag and drop the selected fields into datalet parameters area. A preview will be shown on the right side.</div> | |
405 | - </div> | |
406 | - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | |
416 | + <div class="vertical justified layout"> | |
417 | + | |
418 | + <div class="horizontal layout"> | |
419 | + <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> | |
420 | + <div class="avatar">3</div> | |
421 | + <div class="title flex"> | |
422 | + <div id="toolbar_title" class="big">Data mapping</div> | |
423 | + <div id="toolbar_description" class="small">Select the visualization by clicking on the button(a window will appear with all available visualization).After, drag and drop the selected fields into datalet parameters area. A preview will be shown on the right side.</div> | |
407 | 424 | </div> |
425 | + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | |
426 | + </div> | |
408 | 427 | |
409 | 428 | |
410 | - <div class="horizontal layout"> | |
429 | + <div class="horizontal layout"> | |
411 | 430 | |
412 | - <div class=""> | |
413 | - <paper-material elevation="0" id="visualization_slider_area"></paper-material> | |
414 | - <paper-material elevation="2" id="fields_mapping_area" class="area_container"> | |
431 | + <div class=""> | |
432 | + <paper-material elevation="0" id="visualization_slider_area"></paper-material> | |
433 | + <paper-material elevation="2" id="fields_mapping_area" class="area_container"> | |
415 | 434 | |
416 | - <div id="selectedFields_main_container" class="field-mapping-card"> | |
417 | - <div class="title"> | |
418 | - <div class="medium">Selected fields</div> | |
419 | - </div> | |
420 | - <paper-material elevation="2" id="selectedFields_container" class="area_container"></paper-material> | |
435 | + <div id="selectedFields_main_container" class="field-mapping-card"> | |
436 | + <div class="title"> | |
437 | + <div class="medium">Selected fields</div> | |
421 | 438 | </div> |
439 | + <paper-material elevation="2" id="selectedFields_container" class="area_container"></paper-material> | |
440 | + </div> | |
422 | 441 | |
423 | - <div id="idm_fields_main_container" class="field-mapping-card"> | |
424 | - <div class="title"> | |
425 | - <div class="medium">Datalet fields</div> | |
426 | - </div> | |
427 | - <paper-material elevation="2" id="datalet_idm_fields_container" class="area_container"></paper-material> | |
442 | + <div id="idm_fields_main_container" class="field-mapping-card"> | |
443 | + <div class="title"> | |
444 | + <div class="medium">Datalet fields</div> | |
428 | 445 | </div> |
429 | - </paper-material> | |
430 | - </div> | |
431 | - | |
432 | - <div id="datalet_placeholder"></div> | |
433 | - | |
446 | + <paper-material elevation="2" id="datalet_idm_fields_container" class="area_container"></paper-material> | |
447 | + </div> | |
448 | + </paper-material> | |
434 | 449 | </div> |
435 | 450 | |
436 | - </div> | |
451 | + <div id="datalet_placeholder"></div> | |
437 | 452 | |
438 | - </neon-animatable> | |
453 | + </div> | |
439 | 454 | |
440 | - <neon-animatable> | |
441 | - <div class="vertical justified layout"> | |
455 | + </div> | |
442 | 456 | |
443 | - <div class="horizontal layout"> | |
444 | - <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> | |
445 | - <div class="avatar">4</div> | |
446 | - <div class="title flex"> | |
447 | - <div id="toolbar_title" class="big">Finalize visualization</div> | |
448 | - <div id="toolbar_description" class="small">Assign the values for layout parameters (e.g. title for you visualization) and look at the final visualization. You can also add a comment if you are in the private room. </div> | |
449 | - </div> | |
450 | - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button> | |
451 | - </div> | |
457 | + </neon-animatable> | |
452 | 458 | |
453 | - <div class="horizontal layout"> | |
454 | - <div style="margin-top: 10px;"> | |
455 | - <div class="title"> | |
456 | - <div class="medium">Layout fields</div> | |
457 | - </div> | |
458 | - <paper-material elevation="2" id="idm_layout_main_container" class="area_container"> | |
459 | - <paper-material elevation="2" id="idm_layout_container" class="area_container"></paper-material> | |
460 | - </paper-material> | |
459 | + <neon-animatable> | |
460 | + <div class="vertical justified layout"> | |
461 | 461 | |
462 | - <div id="comment"> | |
463 | - <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 characters comment" maxlength="100"></paper-textarea> | |
464 | - </div> | |
462 | + <div class="horizontal layout"> | |
463 | + <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> | |
464 | + <div class="avatar">4</div> | |
465 | + <div class="title flex"> | |
466 | + <div id="toolbar_title" class="big">Finalize visualization</div> | |
467 | + <div id="toolbar_description" class="small">Assign the values for layout parameters (e.g. title for you visualization) and look at the final visualization. You can also add a comment if you are in the private room. </div> | |
468 | + </div> | |
469 | + <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button> | |
470 | + </div> | |
465 | 471 | |
472 | + <div class="horizontal layout"> | |
473 | + <div style="margin-top: 10px;"> | |
474 | + <div class="title"> | |
475 | + <div class="medium">Layout fields</div> | |
466 | 476 | </div> |
477 | + <paper-material elevation="2" id="idm_layout_main_container" class="area_container"> | |
478 | + <paper-material elevation="2" id="idm_layout_container" class="area_container"></paper-material> | |
479 | + </paper-material> | |
467 | 480 | |
468 | - <div id="datalet_placeholder_2" style="min-width: 45%;margin-top: 10px;"></div> | |
481 | + <div id="comment"> | |
482 | + <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 characters comment" maxlength="100"></paper-textarea> | |
483 | + </div> | |
469 | 484 | |
470 | 485 | </div> |
486 | + | |
487 | + <div id="datalet_placeholder_2" style="min-width: 45%;margin-top: 10px;"></div> | |
488 | + | |
471 | 489 | </div> |
490 | + </div> | |
472 | 491 | |
473 | - </neon-animatable> | |
492 | + </neon-animatable> | |
474 | 493 | |
475 | - </neon-animated-pages> | |
494 | + </neon-animated-pages> | |
476 | 495 | |
477 | - <paper-toast id="message" text=""></paper-toast> | |
496 | + <paper-toast id="message" text=""></paper-toast> | |
478 | 497 | |
479 | - <paper-dialog id="infoDialog"> | |
480 | - <h2 id="infoDialogTitle"></h2> | |
481 | - <paper-dialog-scrollable id="infoDialogContent"> | |
482 | - </paper-dialog-scrollable> | |
483 | - </paper-dialog> | |
498 | + <paper-dialog id="infoDialog"> | |
499 | + <h2 id="infoDialogTitle"></h2> | |
500 | + <paper-dialog-scrollable id="infoDialogContent"> | |
501 | + </paper-dialog-scrollable> | |
502 | + </paper-dialog> | |
484 | 503 | |
485 | - </content> | |
504 | + </content> | |
486 | 505 | </template> |
487 | 506 | |
488 | 507 | <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> |
... | ... | @@ -534,7 +553,8 @@ Example: |
534 | 553 | 'items-list-controllet_item-selected' : '_dataletSelected', |
535 | 554 | 'draggable-element-controllet_content-dragged' : '_fieldsMapped', |
536 | 555 | 'tree-view-controllet_selected-fields' : '_fieldsSelected', |
537 | - 'text-element-controllet_content-changed' : '_textElementChanged' | |
556 | + 'text-element-controllet_content-changed' : '_textElementChanged', | |
557 | + 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap' | |
538 | 558 | }, |
539 | 559 | |
540 | 560 | properties : { |
... | ... | @@ -625,8 +645,8 @@ Example: |
625 | 645 | * @default empty |
626 | 646 | */ |
627 | 647 | paramsFields:{ |
628 | - type: Object, | |
629 | - value: undefined | |
648 | + type: Object, | |
649 | + value: undefined | |
630 | 650 | }, |
631 | 651 | /** |
632 | 652 | * It's used to store the tab index in the first pass |
... | ... | @@ -653,7 +673,7 @@ Example: |
653 | 673 | } |
654 | 674 | }, |
655 | 675 | /** |
656 | - * It is called after the elements template has been stamped and all elements inside the elements local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called. | |
676 | + * 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. | |
657 | 677 | * In this phase the scrollbar will be initialized |
658 | 678 | * |
659 | 679 | * @method handleResponseData |
... | ... | @@ -663,7 +683,7 @@ Example: |
663 | 683 | |
664 | 684 | ready : function(){ |
665 | 685 | |
666 | - $(this.$.fields_placeholder).perfectScrollbar(); | |
686 | +// $(this.$.fields_placeholder).perfectScrollbar(); | |
667 | 687 | $(this.$.selectedFields_main_container).perfectScrollbar(); |
668 | 688 | $(this.$.idm_fields_main_container).perfectScrollbar(); |
669 | 689 | $(this.$.idm_layout_main_container).perfectScrollbar(); |
... | ... | @@ -726,19 +746,19 @@ Example: |
726 | 746 | this.datalets_list = new Array(); |
727 | 747 | for(var i=0;i < e.detail.response.length;i++){ |
728 | 748 | var datalet_info = { name : e.detail.response[i].name , |
729 | - image : e.detail.response[i].url + e.detail.response[i].name + ".png" | |
749 | + image : e.detail.response[i].url + e.detail.response[i].name + ".png" | |
730 | 750 | }; |
731 | 751 | |
732 | 752 | this.datalets_list.push(datalet_info); |
733 | 753 | } |
734 | 754 | |
735 | 755 | if(this.selectedDatalet == undefined) |
736 | - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' + | |
737 | - '<items-list-controllet' + | |
738 | - ' replace-string="-datalet"' + | |
739 | - ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + | |
740 | - '</items-list-controllet>' + | |
741 | - '</animated-button-container-controllet>'; | |
756 | + this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' + | |
757 | + '<items-list-controllet' + | |
758 | + ' replace-string="-datalet"' + | |
759 | + ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + | |
760 | + '</items-list-controllet>' + | |
761 | + '</animated-button-container-controllet>'; | |
742 | 762 | else |
743 | 763 | this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' + |
744 | 764 | '<items-list-controllet' + |
... | ... | @@ -759,73 +779,73 @@ Example: |
759 | 779 | */ |
760 | 780 | handleSelectedDatalet : function(e){ |
761 | 781 | |
762 | - var response = e.detail.response; | |
763 | - this.$.datalet_idm_fields_container.innerHTML = ""; | |
764 | - this.$.idm_layout_container.innerHTML = ""; | |
765 | - | |
766 | - var input; | |
767 | - var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts); | |
768 | - | |
769 | - if(response.idm.inputs.input.constructor == Object) { | |
770 | - if(response.idm.inputs.input.selection == "*") | |
771 | - { | |
772 | - var fields = this.$.selectedFields_container.querySelectorAll('draggable-element-controllet'); | |
773 | - input = response.idm.inputs.input; | |
774 | - response.idm.inputs.input = new Array(); | |
775 | - for(var i=0;i<fields.length;i++){ | |
776 | - var newInput = jQuery.extend(true, {}, input); | |
777 | - newInput.name = input.name + ' ' + (i + 1); | |
778 | - response.idm.inputs.input.push(newInput); | |
779 | - } | |
780 | - } | |
781 | - } | |
782 | - | |
783 | - var heading; | |
784 | - var id; | |
785 | - | |
786 | - for(var i =0; i < response.idm.inputs.input.length; i++) { | |
787 | - var html = '<draggable-element-controllet is-target="true" '; | |
788 | - input = response.idm.inputs.input[i]; | |
789 | - | |
790 | - heading = ' heading="' + input.name + '"'; | |
791 | - id = ' id="' + (i + 1) + '"'; | |
792 | - | |
793 | - html += heading + id; | |
794 | - html += ' description="' + input.description + '"' + | |
795 | - ' number="' + (i + 1) + '"'; | |
796 | - | |
797 | - if(this.selectedFields != undefined) { | |
798 | - if(this.selectedFields[i] != undefined) { | |
799 | - html += ' value="' + this.selectedFields[i] + '"' + | |
800 | - ' label="' + this.selectedFields[i].split(",")[this.selectedFields[i].split(",").length - 1] + '"'; | |
801 | - } | |
802 | - } | |
803 | - | |
804 | - html += '></draggable-element-controllet>'; | |
805 | - this.$.datalet_idm_fields_container.innerHTML += html; | |
806 | - | |
807 | - } | |
808 | - | |
809 | - if(layouts.input != undefined) { | |
810 | - if(layouts.input.constructor == Object){ | |
811 | - layouts.input = new Array(jQuery.extend(true, {}, layouts.input)); | |
812 | - } | |
813 | - | |
814 | - html = '<text-element-controllet '; | |
815 | - for (var i = 0; i < layouts.input.length; i++) { | |
816 | - html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' + | |
817 | - 'description="' + layouts.input[i].description + '" ' + | |
818 | - 'number="' + (i + 1) + '" '; | |
819 | - if(this.dataletPreset != undefined){ | |
820 | - html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"'; | |
821 | - } | |
822 | - | |
823 | - html += '></text-element-controllet>'; | |
824 | - } | |
825 | - this.$.idm_layout_container.innerHTML = html; | |
826 | - } | |
827 | - | |
828 | - if(this.selectedFields != undefined) this.generateDataletPreview(); | |
782 | + var response = e.detail.response; | |
783 | + this.$.datalet_idm_fields_container.innerHTML = ""; | |
784 | + this.$.idm_layout_container.innerHTML = ""; | |
785 | + | |
786 | + var input; | |
787 | + var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts); | |
788 | + | |
789 | + if(response.idm.inputs.input.constructor == Object) { | |
790 | + if(response.idm.inputs.input.selection == "*") | |
791 | + { | |
792 | + var fields = this.$.selectedFields_container.querySelectorAll('draggable-element-controllet'); | |
793 | + input = response.idm.inputs.input; | |
794 | + response.idm.inputs.input = new Array(); | |
795 | + for(var i=0;i<fields.length;i++){ | |
796 | + var newInput = jQuery.extend(true, {}, input); | |
797 | + newInput.name = input.name + ' ' + (i + 1); | |
798 | + response.idm.inputs.input.push(newInput); | |
799 | + } | |
800 | + } | |
801 | + } | |
802 | + | |
803 | + var heading; | |
804 | + var id; | |
805 | + | |
806 | + for(var i =0; i < response.idm.inputs.input.length; i++) { | |
807 | + var html = '<draggable-element-controllet is-target="true" '; | |
808 | + input = response.idm.inputs.input[i]; | |
809 | + | |
810 | + heading = ' heading="' + input.name + '"'; | |
811 | + id = ' id="' + (i + 1) + '"'; | |
812 | + | |
813 | + html += heading + id; | |
814 | + html += ' description="' + input.description + '"' + | |
815 | + ' number="' + (i + 1) + '"'; | |
816 | + | |
817 | + if(this.selectedFields != undefined) { | |
818 | + if(this.selectedFields[i] != undefined) { | |
819 | + html += ' value="' + this.selectedFields[i] + '"' + | |
820 | + ' label="' + this.selectedFields[i].split(",")[this.selectedFields[i].split(",").length - 1] + '"'; | |
821 | + } | |
822 | + } | |
823 | + | |
824 | + html += '></draggable-element-controllet>'; | |
825 | + this.$.datalet_idm_fields_container.innerHTML += html; | |
826 | + | |
827 | + } | |
828 | + | |
829 | + if(layouts.input != undefined) { | |
830 | + if(layouts.input.constructor == Object){ | |
831 | + layouts.input = new Array(jQuery.extend(true, {}, layouts.input)); | |
832 | + } | |
833 | + | |
834 | + html = '<text-element-controllet '; | |
835 | + for (var i = 0; i < layouts.input.length; i++) { | |
836 | + html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' + | |
837 | + 'description="' + layouts.input[i].description + '" ' + | |
838 | + 'number="' + (i + 1) + '" '; | |
839 | + if(this.dataletPreset != undefined){ | |
840 | + html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"'; | |
841 | + } | |
842 | + | |
843 | + html += '></text-element-controllet>'; | |
844 | + } | |
845 | + this.$.idm_layout_container.innerHTML = html; | |
846 | + } | |
847 | + | |
848 | + if(this.selectedFields != undefined) this.generateDataletPreview(); | |
829 | 849 | |
830 | 850 | }, |
831 | 851 | /** |
... | ... | @@ -950,9 +970,9 @@ Example: |
950 | 970 | */ |
951 | 971 | _datasourceSelected : function(e){ |
952 | 972 | |
953 | - this.$.data_url.value = this.datasets[parseInt(e.target.id)].url; | |
954 | - this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name; | |
955 | - this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description; | |
973 | + this.$.data_url.value = this.datasets[parseInt(e.target.id)].url; | |
974 | + this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name; | |
975 | + this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description; | |
956 | 976 | |
957 | 977 | }, |
958 | 978 | /** |
... | ... | @@ -987,25 +1007,25 @@ Example: |
987 | 1007 | */ |
988 | 1008 | _fieldsSelected : function(e){ |
989 | 1009 | |
990 | - this.selectedFields = e.detail.fields; | |
991 | - this.$.selectedFields_container.innerHTML = ""; | |
992 | - for(var i=0;i<e.detail.fields.length;i++) { | |
1010 | + this.selectedFields = e.detail.fields; | |
1011 | + this.$.selectedFields_container.innerHTML = ""; | |
1012 | + for(var i=0;i<e.detail.fields.length;i++) { | |
993 | 1013 | this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] + |
994 | - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] + | |
995 | - '"></draggable-element-controllet><br>'; | |
996 | - } | |
1014 | + '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] + | |
1015 | + '"></draggable-element-controllet><br>'; | |
1016 | + } | |
997 | 1017 | |
998 | - var table_params ={ | |
999 | - component : "datatable-datalet", | |
1000 | - params :{ | |
1018 | + var table_params ={ | |
1019 | + component : "datatable-datalet", | |
1020 | + params :{ | |
1001 | 1021 | 'data-url' : this.dataUrl |
1002 | - }, | |
1003 | - fields : e.detail.fields, | |
1004 | - placeHolder : this.$.table_component_place_holder | |
1005 | - }; | |
1022 | + }, | |
1023 | + fields : e.detail.fields, | |
1024 | + placeHolder : this.$.table_component_place_holder | |
1025 | + }; | |
1006 | 1026 | |
1007 | - ComponentService.deep_url = this.deepUrl; | |
1008 | - ComponentService.getComponent(table_params); | |
1027 | + ComponentService.deep_url = this.deepUrl; | |
1028 | + ComponentService.getComponent(table_params); | |
1009 | 1029 | |
1010 | 1030 | |
1011 | 1031 | }, |
... | ... | @@ -1071,7 +1091,23 @@ Example: |
1071 | 1091 | |
1072 | 1092 | this.fire('data-sevc-controllet.dataletCreated', {data : data}); |
1073 | 1093 | |
1074 | - } | |
1094 | + }, | |
1095 | + | |
1096 | + //tree map | |
1097 | + _selectDataUrl_treeMap : function(e){ | |
1098 | + var url = e.detail.url; | |
1099 | + url = url.split('/'); | |
1100 | + var index = url.indexOf('resource') | |
1101 | + if (index != -1) { // ckan | |
1102 | + var resourceId = url[index + 1]; | |
1103 | + url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId; | |
1104 | + | |
1105 | + } else | |
1106 | + url = "sorry, data provider not supported yet"; | |
1107 | + | |
1108 | + this.dataUrl = url; | |
1109 | + this.DatasourceTabSelected=0; | |
1110 | + }, | |
1075 | 1111 | |
1076 | 1112 | }); |
1077 | 1113 | ... | ... |
controllets/data-sevc-controllet/data-sevc-controllet_ddr.html
0 → 100755
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á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> | |
0 | 125 | \ No newline at end of file | ... | ... |
controllets/data-sevc-controllet/demo/index.html
0 → 100755
1 | +<html> | |
2 | + | |
3 | +<head> | |
4 | + <meta charset="UTF-8"> | |
5 | + <script src="../../shared_js/jquery-1.11.2.min.js"></script> | |
6 | + | |
7 | + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | |
8 | + | |
9 | + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | |
10 | + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | |
11 | + | |
12 | + <link rel="import" href="../data-sevc-controllet_ddr.html" /> | |
13 | +</head> | |
14 | + | |
15 | +<body> | |
16 | + | |
17 | +<data-sevc-controllet id="dsc" deep-url="http://172.16.15.89/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet> | |
18 | + | |
19 | +<script> | |
20 | + var description = "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa "+ | |
21 | + " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+ | |
22 | + " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+ | |
23 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
24 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
25 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
26 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
27 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
28 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
29 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
30 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
31 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
32 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
33 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
34 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
35 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
36 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"; | |
37 | + | |
38 | + var dataset1 = {description: description, name: "Data", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c3b52992-ba61-4a73-a637-0f2e1ca26aab"}; | |
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"}; | |
41 | + var datasets = [dataset1, dataset2, dataset3]; | |
42 | + | |
43 | + var dsc = document.getElementById('dsc'); | |
44 | + dsc.setAttribute("datasets", JSON.stringify(datasets)); | |
45 | +</script> | |
46 | + | |
47 | +</body> | |
48 | + | |
49 | +</html> | |
0 | 50 | \ No newline at end of file | ... | ... |
controllets/datalet-selection-controllet/datalet-selection-controllet.html
0 → 100755
1 | +<link rel="import" href="../../bower_components/polymer/polymer.html" /> | |
2 | + | |
3 | +<link rel="import" href="../../bower_components/paper-material/paper-material.html" /> | |
4 | + | |
5 | +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> | |
6 | +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> | |
7 | +<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | |
8 | + | |
9 | +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> | |
10 | +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> | |
11 | +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html"> | |
12 | + | |
13 | +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> | |
14 | + | |
15 | +<link rel="import" href="../../bower_components/paper-button/paper-button.html"> | |
16 | + | |
17 | +<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" /> | |
18 | + | |
19 | +<link rel="import" href="../../datalets/datatable-datalet/datatable-datalet.html" /> | |
20 | + | |
21 | +<dom-module id="datalet-selection-controllet"> | |
22 | + | |
23 | + <template> | |
24 | + | |
25 | + <style is="custom-style"> | |
26 | + | |
27 | + #datalet_selection_container { | |
28 | + display: flex; | |
29 | + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
30 | + font-size: 16px; | |
31 | + } | |
32 | + | |
33 | + #datalet_selection_inputs { | |
34 | + position: relative; | |
35 | + height: 100vh; | |
36 | + margin-left: 32px; | |
37 | + width: 344px; | |
38 | + } | |
39 | + | |
40 | + #datalet_selection_labels { | |
41 | + position: relative; | |
42 | + height: 100vh; | |
43 | + margin-left: 32px; | |
44 | + width: 344px; | |
45 | + } | |
46 | + | |
47 | + #datalet_selection_column { | |
48 | + position: relative; | |
49 | + width: 100%; | |
50 | + margin-left: 32px; | |
51 | + } | |
52 | + | |
53 | + #datalet_selection_datalet { | |
54 | + position: relative; | |
55 | + height: 100vh; | |
56 | + width: 100%; | |
57 | + /*margin-left: 32px;*/ | |
58 | + /*margin-top: 32px;*/ | |
59 | + /*margin-bottom: 32px;*/ | |
60 | + } | |
61 | + | |
62 | + #datalet_selection_comment{ | |
63 | + width: 100%; | |
64 | + margin-bottom: 32px; | |
65 | + } | |
66 | + | |
67 | + #datalet_selection_datalet_placeholder { | |
68 | + padding: 16px; | |
69 | + } | |
70 | + | |
71 | + .inputs{ | |
72 | + position: relative; | |
73 | + /*margin-left: 16px;*/ | |
74 | + /*margin-right: 16px;*/ | |
75 | + } | |
76 | + | |
77 | + .input_name{ | |
78 | + height: 16px; | |
79 | + padding: 16px; | |
80 | + /*background-color: #B6B6B6;*/ | |
81 | + | |
82 | + background-color: #2196F3; | |
83 | + color: #FFFFFF; | |
84 | + font-weight: 700; | |
85 | + } | |
86 | + | |
87 | + .input_header{ | |
88 | + /*height: 16px;*/ | |
89 | + padding: 16px; | |
90 | + background-color: #B6B6B6; | |
91 | + text-align: center; | |
92 | + font-weight: 700; | |
93 | + } | |
94 | + | |
95 | + .info_button { | |
96 | + position: absolute; | |
97 | + top: 4px; | |
98 | + right: 0px; | |
99 | + } | |
100 | + | |
101 | + paper-textarea { | |
102 | + height: 48px; | |
103 | + padding: 0px 8px; | |
104 | + --paper-input-container-focus-color: #2196F3; | |
105 | + } | |
106 | + | |
107 | + paper-dropdown-menu { | |
108 | + height: 48px; | |
109 | + padding: 0px 8px; | |
110 | + --paper-input-container-focus-color: #2196F3; | |
111 | + } | |
112 | + | |
113 | + paper-item.iron-selected { | |
114 | + background-color: #2196F3; | |
115 | + color: #FFFFFF; | |
116 | + } | |
117 | + | |
118 | + paper-icon-button { | |
119 | + /*color: #2196F3;*/ | |
120 | + color: #FFFFFF; | |
121 | + --paper-icon-button-ink-color: #2196F3; | |
122 | + /*padding: 0px;*/ | |
123 | + } | |
124 | + | |
125 | + paper-button { | |
126 | + /*display: block;*/ | |
127 | + position: absolute; | |
128 | + bottom: 16px; | |
129 | + right: 11px; | |
130 | + | |
131 | + /*float: right;*/ | |
132 | + /*margin-right: 11px;*/ | |
133 | + | |
134 | + | |
135 | + | |
136 | + | |
137 | + height: 48px; | |
138 | + width: 172px; | |
139 | + background-color: #00BCD4; | |
140 | + color: white; | |
141 | + font-weight: 700; | |
142 | + padding: 16px; | |
143 | + } | |
144 | + | |
145 | + paper-button:hover { | |
146 | + background-color: #00AABF; | |
147 | + } | |
148 | + </style> | |
149 | + | |
150 | + <iron-ajax id="selectedDatalet_request" on-response="handleSelectedDatalet"></iron-ajax> | |
151 | + | |
152 | + <div id="datalet_selection_container"> | |
153 | + <items-vslider-controllet datalets-list-url={{dataletsListUrl}}></items-vslider-controllet> | |
154 | + | |
155 | + | |
156 | + <paper-material id="datalet_selection_inputs" elevation="5"> | |
157 | + <div class="input_header">INPUTS</div> | |
158 | + <template is="dom-repeat" items="{{inputs}}" index-as="index"> | |
159 | + <div class="inputs"> | |
160 | + <div class="input_name"> | |
161 | + {{item.name}} | |
162 | + <div class="info_button"> | |
163 | + <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button> | |
164 | + </div> | |
165 | + </div> | |
166 | + <paper-dropdown-menu no-label-float label={{item.name}}> | |
167 | + <paper-menu class="dropdown-content"> | |
168 | + <template is="dom-repeat" items={{fields}}> | |
169 | + <paper-item id={{index}} on-tap="_loadDatalet">{{item}}</paper-item> | |
170 | + </template> | |
171 | + </paper-menu> | |
172 | + </paper-dropdown-menu> | |
173 | + </div> | |
174 | + </template> | |
175 | + </paper-material> | |
176 | + | |
177 | + <paper-material id="datalet_selection_labels" elevation="5"> | |
178 | + <div class="input_header">LABELS</div> | |
179 | + <template is="dom-repeat" items="{{labels}}" index-as="index"> | |
180 | + <div class="inputs"> | |
181 | + <div class="input_name"> | |
182 | + {{item.name}} | |
183 | + <div class="info_button"> | |
184 | + <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button> | |
185 | + </div> | |
186 | + </div> | |
187 | + <paper-textarea no-label-float label={{item.name}}></paper-textarea> | |
188 | + </div> | |
189 | + </template> | |
190 | + </paper-material> | |
191 | + | |
192 | + | |
193 | + <div id="datalet_selection_column"> | |
194 | + <paper-material id="datalet_selection_comment" elevation="5"> | |
195 | + <div class="input_header">COMMENT</div> | |
196 | + <paper-textarea no-label-float label="comment (max 100 characters)"></paper-textarea> | |
197 | + </paper-material> | |
198 | + | |
199 | + <paper-material id="datalet_selection_datalet" elevation="5"> | |
200 | + <div class="input_header">DATALET PREVIEW</div> | |
201 | + <div id="datalet_selection_datalet_placeholder"></div> | |
202 | + | |
203 | + </paper-material> | |
204 | + | |
205 | + <paper-button raised>ADD DATALET</paper-button> | |
206 | + | |
207 | + </div> | |
208 | + | |
209 | + </div> | |
210 | + | |
211 | + </template> | |
212 | + | |
213 | + <script> | |
214 | + | |
215 | + Polymer({ | |
216 | + | |
217 | + is : 'datalet-selection-controllet', | |
218 | + | |
219 | + properties : { | |
220 | + | |
221 | + deepUrl : { | |
222 | + type : String, | |
223 | + value : undefined | |
224 | + }, | |
225 | + | |
226 | + dataletsListUrl : { | |
227 | + type : String, | |
228 | + value : undefined | |
229 | + }, | |
230 | + | |
231 | + selectedDatalet : { | |
232 | + type : String, | |
233 | + value : undefined | |
234 | + }, | |
235 | + | |
236 | + inputs : { | |
237 | + type : Array, | |
238 | + value : [] | |
239 | + }, | |
240 | + | |
241 | + labels : { | |
242 | + type : Array, | |
243 | + value : [] | |
244 | + }, | |
245 | + | |
246 | + fields : { | |
247 | + type : Array, | |
248 | + value : ["result,records,Lat","result,records,Lng"] | |
249 | + }, | |
250 | + | |
251 | + dataUrl : { | |
252 | + type : String, | |
253 | + value : " http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=10000" | |
254 | + } | |
255 | + | |
256 | + }, | |
257 | + | |
258 | + listeners: { | |
259 | + 'items-vslider-controllet_selected-datalet': '_dataletSelected' | |
260 | + }, | |
261 | + | |
262 | + ready : function() { | |
263 | + this._resize(); | |
264 | + $(this.$.datalet_selection_inputs).perfectScrollbar(); | |
265 | + $(this.$.datalet_selection_labels).perfectScrollbar(); | |
266 | + $(this.$.datalet_selection_datalet).perfectScrollbar(); | |
267 | + }, | |
268 | + | |
269 | + attached : function() { | |
270 | + this._resize(); | |
271 | + var that = this; | |
272 | + window.addEventListener("resize", function() { that._resize(); }); | |
273 | + }, | |
274 | + | |
275 | + _dataletSelected : function(e){ | |
276 | + this.selectedDatalet = e.detail.datalet; | |
277 | + if(this.selectedDatalet){ | |
278 | + this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet"; | |
279 | + this.$.selectedDatalet_request.generateRequest(); | |
280 | + } | |
281 | + else | |
282 | + this.inputs = [] | |
283 | + }, | |
284 | + | |
285 | + handleSelectedDatalet : function(e){ | |
286 | +// console.log(e.detail.response.idm.inputs.layouts.input); | |
287 | + var inputs = e.detail.response.idm.inputs.input; | |
288 | + var labels = e.detail.response.idm.inputs.layouts.input; | |
289 | + | |
290 | + if(inputs.constructor == Object) {//not Array && inputs.input.selection == "*" | |
291 | + var name = inputs.name; | |
292 | + inputs = []; | |
293 | + for(var i in this.fields) | |
294 | + inputs.push({name: name + " " + i}); | |
295 | + | |
296 | + } | |
297 | + | |
298 | + this.inputs = inputs; | |
299 | + this.labels = labels; | |
300 | + }, | |
301 | + | |
302 | + _loadDatalet : function(){ | |
303 | +// this.$.datalet_selection_datalet_placeholder.innerHTML = "<datatable-datalet data-url=\""+this.dataUrl+"\" fields='[\"result,records,Lat\",\"result,records,Lng\"]'></datatable-datalet>"; | |
304 | + 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&limit=10000\" fields='[\"result,records,Lat\",\"result,records,Lng\"]'>we"; | |
305 | + | |
306 | +// $("#base_datalet_container").html(""); | |
307 | + $("#base_datalet_container").css('visibility','hidden'); | |
308 | + $("#base_datalet_container").css('padding','0px'); | |
309 | + $("#base_datalet_container").css('height','0px'); | |
310 | +// console.log($("#base_datalet_container")); | |
311 | + | |
312 | + }, | |
313 | + | |
314 | + _resize : function(){ | |
315 | + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; | |
316 | + h = h - 64 - 8; //height with page scroller | |
317 | + | |
318 | + $("#items_vslider_container").height(h);//vslider controllet | |
319 | + | |
320 | + $("#datalet_selection_inputs").height(h); | |
321 | + $("#datalet_selection_labels").height(h); | |
322 | + $("#datalet_selection_datalet").height(h-132); | |
323 | + } | |
324 | + | |
325 | + }); | |
326 | + | |
327 | + </script> | |
328 | + | |
329 | +</dom-module> | |
0 | 330 | \ No newline at end of file | ... | ... |
controllets/datalet-selection-controllet/demo/index.html
0 → 100755
1 | +<html> | |
2 | + | |
3 | +<head> | |
4 | + <script src="../../shared_js/jquery-1.11.2.min.js"></script> | |
5 | + | |
6 | + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | |
7 | + | |
8 | + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | |
9 | + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | |
10 | + | |
11 | + <link rel="import" href="../datalet-selection-controllet.html" /> | |
12 | +</head> | |
13 | + | |
14 | +<body> | |
15 | + | |
16 | +<datalet-selection-controllet deep-url="http://172.16.15.89/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet> | |
17 | + | |
18 | +</body> | ... | ... |
controllets/dataset-selection-controllet/dataset-selection-controllet.html
0 → 100755
1 | +<link rel="import" href="../../bower_components/polymer/polymer.html"> | |
2 | + | |
3 | +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> | |
4 | +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html"> | |
5 | + | |
6 | +<link rel="import" href="../../bower_components/neon-animation/neon-animation.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"> | |
9 | + | |
10 | +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> | |
11 | +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> | |
12 | +<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | |
13 | + | |
14 | +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> | |
15 | + | |
16 | +<link rel="import" href="../../bower_components/paper-material/paper-material.html" /> | |
17 | + | |
18 | +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> | |
19 | +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> | |
20 | +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html"> | |
21 | + | |
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 | + | |
25 | +<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html"> | |
26 | + | |
27 | +<!--<script src="../../datalets/shared_js/d3.js"></script>--> | |
28 | + | |
29 | +<dom-module id="dataset-selection-controllet"> | |
30 | + | |
31 | + <template> | |
32 | + | |
33 | + <style is="custom-style"> | |
34 | + paper-tabs { | |
35 | + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
36 | + font-size: 16px; | |
37 | + font-weight: bold; | |
38 | + --paper-tabs-selection-bar-color: #2196F3; | |
39 | + } | |
40 | + | |
41 | + paper-tab { | |
42 | + transition: all 1.0s; | |
43 | + } | |
44 | + | |
45 | + paper-tab.iron-selected { | |
46 | + background-color: #B6B6B6; | |
47 | + } | |
48 | + | |
49 | + paper-tab:hover { | |
50 | + color: #2196F3; | |
51 | + } | |
52 | + | |
53 | + paper-tab[disabled] { | |
54 | + color: #B6B6B6; | |
55 | + } | |
56 | + | |
57 | + paper-dropdown-menu { | |
58 | + width: 45%; | |
59 | + margin-bottom: 32px; | |
60 | + --paper-input-container-focus-color: #2196F3; | |
61 | + } | |
62 | + | |
63 | + paper-item.iron-selected { | |
64 | + background-color: #2196F3; | |
65 | + color: #FFFFFF; | |
66 | + } | |
67 | + | |
68 | + /*paper-item[focused] {*/ | |
69 | + /*background: #FFFFFF;*/ | |
70 | + /*}*/ | |
71 | + | |
72 | + paper-textarea { | |
73 | + width: 90%; | |
74 | + margin-bottom: 32px; | |
75 | + --paper-input-container-focus-color: #2196F3; | |
76 | + } | |
77 | + | |
78 | + paper-icon-button { | |
79 | + color: #2196F3; | |
80 | + --paper-icon-button-ink-color: #2196F3; | |
81 | + } | |
82 | + | |
83 | + paper-icon-button[disabled] { | |
84 | + color: #B6B6B6; | |
85 | + } | |
86 | + | |
87 | + #material_container { | |
88 | + margin-top: 8px; | |
89 | + /*height: 55vh;*/ | |
90 | + } | |
91 | + | |
92 | + #div_selection { | |
93 | + padding-left: 10%; | |
94 | + padding-top: 64px; | |
95 | + /*padding-bottom: 64px;*/ | |
96 | + } | |
97 | + | |
98 | + #dialog_info { | |
99 | + border: 2px solid #2196F3; | |
100 | + background-color: #E0E0E0; | |
101 | + position: fixed; | |
102 | + top: 232px; | |
103 | + width: 60%; | |
104 | + height: auto; | |
105 | + /*overflow: auto;*/ | |
106 | + } | |
107 | + | |
108 | + #div_datasetexplorer { | |
109 | + padding-top: 48px; | |
110 | + } | |
111 | + </style> | |
112 | + | |
113 | + <paper-material id="material_container" elevation="5"> | |
114 | + | |
115 | + <paper-tabs selected="{{selected}}" on-tap="_loadTreeMap"> | |
116 | + <paper-tab noink>SELECT DATA SOURCE</paper-tab> | |
117 | + <paper-tab noink>TREE MAP SEARCH</paper-tab> | |
118 | + <paper-tab noink disabled>MOST POPULAR</paper-tab> | |
119 | + </paper-tabs> | |
120 | + | |
121 | + <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation"> | |
122 | + | |
123 | + <neon-animatable> | |
124 | + | |
125 | + <div id="div_selection"> | |
126 | + <paper-dropdown-menu label="Available datasets"> | |
127 | + <paper-menu class="dropdown-content"> | |
128 | + <template is="dom-repeat" items={{datasets}} as="dataset"> | |
129 | + <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item> | |
130 | + </template> | |
131 | + </paper-menu> | |
132 | + </paper-dropdown-menu> | |
133 | + | |
134 | + <paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button> | |
135 | + | |
136 | + <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea> | |
137 | + | |
138 | + <paper-dialog id="dialog_info"> | |
139 | + <h2 id="dialog_name"></h2> | |
140 | + <p id="dialog_description"></p> | |
141 | + </paper-dialog> | |
142 | + </div> | |
143 | + | |
144 | + </neon-animatable> | |
145 | + | |
146 | + <neon-animatable> | |
147 | + <div id="div_datasetexplorer"> | |
148 | + <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> | |
149 | + </div> | |
150 | + </neon-animatable> | |
151 | + | |
152 | + <neon-animatable> | |
153 | + </neon-animatable> | |
154 | + | |
155 | + </neon-animated-pages> | |
156 | + | |
157 | + </paper-material> | |
158 | + | |
159 | + </template> | |
160 | + | |
161 | + <script> | |
162 | + | |
163 | + Polymer({ | |
164 | + | |
165 | + is : 'dataset-selection-controllet', | |
166 | + | |
167 | + properties : { | |
168 | + | |
169 | + selected : { | |
170 | + type : Number, | |
171 | + value : 0 | |
172 | + }, | |
173 | + | |
174 | + datasets : { | |
175 | + type : Array, | |
176 | + value : undefined | |
177 | + }, | |
178 | + | |
179 | + dataUrl : { | |
180 | + type : String, | |
181 | + value : undefined, | |
182 | + observer : '_fireDataUrl' | |
183 | + } | |
184 | + | |
185 | + }, | |
186 | + | |
187 | + listeners: { | |
188 | + 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap' | |
189 | + }, | |
190 | + | |
191 | + ready : function(){ | |
192 | + $(this.$.dialog_info).perfectScrollbar(); | |
193 | + }, | |
194 | + | |
195 | + attached : function(){ | |
196 | + this._resize(); | |
197 | + var that = this; | |
198 | + window.addEventListener("resize", function() { that._resize(); }); | |
199 | + }, | |
200 | + | |
201 | + _loadTreeMap : function(){ | |
202 | + if(this.selected == 0 && this.$.div_datasetexplorer.innerHTML == "") | |
203 | + 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>"; | |
204 | + }, | |
205 | + | |
206 | + _selectDataUrl_treeMap : function(e){ | |
207 | + var url = e.detail.url; | |
208 | + url = url.split('/'); | |
209 | + var index = url.indexOf('resource') | |
210 | + if (index != -1) { // ckan | |
211 | + var resourceId = url[index + 1]; | |
212 | + url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId; | |
213 | + | |
214 | + } else | |
215 | + url = "sorry, data provider not supported yet"; | |
216 | + | |
217 | + this.dataUrl = url; | |
218 | + this.selected=0; | |
219 | + }, | |
220 | + | |
221 | + _selectDataUrl : function(e){ | |
222 | + var dataset = this.datasets[parseInt(e.target.id)] | |
223 | + | |
224 | + this.dataUrl = dataset.url; | |
225 | + | |
226 | + if(dataset.description != ""){ | |
227 | + this.$.info_button.removeAttribute("disabled"); | |
228 | + this.$.dialog_name.innerHTML = dataset.name; | |
229 | + this.$.dialog_description.innerHTML = dataset.description; | |
230 | + } | |
231 | + else | |
232 | + this.$.info_button.setAttribute("disabled", "true"); | |
233 | + }, | |
234 | + | |
235 | + _showInfo : function(){ | |
236 | + this.$.dialog_info.open(); | |
237 | + }, | |
238 | + | |
239 | + _fireDataUrl : function(){ | |
240 | + this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl}); | |
241 | + }, | |
242 | + | |
243 | + _resize : function(){ | |
244 | + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; | |
245 | + h = h - 64 - 8; //height with page scroller | |
246 | + $("#material_container").height(h); | |
247 | + } | |
248 | + | |
249 | + }); | |
250 | + | |
251 | + </script> | |
252 | + | |
253 | +</dom-module> | |
0 | 254 | \ No newline at end of file | ... | ... |
controllets/dataset-selection-controllet/demo/index.html
0 → 100755
1 | +<html> | |
2 | + | |
3 | +<head> | |
4 | + <script src="../../shared_js/jquery-1.11.2.min.js"></script> | |
5 | + | |
6 | + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | |
7 | + | |
8 | + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | |
9 | + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | |
10 | + | |
11 | + <link rel="import" href="../dataset-selection-controllet.html" /> | |
12 | +</head> | |
13 | + | |
14 | +<body> | |
15 | + | |
16 | +<dataset-selection-controllet id="ds"></dataset-selection-controllet> | |
17 | + | |
18 | +<script> | |
19 | + var description = "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa "+ | |
20 | + " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+ | |
21 | + " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+ | |
22 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
23 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
24 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
25 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
26 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
27 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
28 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
29 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
30 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
31 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
32 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
33 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
34 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+ | |
35 | + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"; | |
36 | + | |
37 | + var dataset1 = {description: description, name: "Data", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c3b52992-ba61-4a73-a637-0f2e1ca26aab"}; | |
38 | + var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"}; | |
39 | + 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 datasets = [dataset1, dataset2, dataset3]; | |
41 | + | |
42 | + var ds = document.getElementById('ds'); | |
43 | + ds.setAttribute("datasets", JSON.stringify(datasets)); | |
44 | + | |
45 | +</script> | |
46 | + | |
47 | +</body> | |
48 | + | |
49 | +</html> | |
0 | 50 | \ No newline at end of file | ... | ... |
controllets/items-vslider-controllet/demo/index.html
0 → 100755
1 | +<html> | |
2 | + | |
3 | +<head> | |
4 | + <script src="../../shared_js/jquery-1.11.2.min.js"></script> | |
5 | + | |
6 | + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | |
7 | + | |
8 | + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | |
9 | + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | |
10 | + | |
11 | + <link rel="import" href="../items-vslider-controllet.html" /> | |
12 | +</head> | |
13 | + | |
14 | +<body> | |
15 | + | |
16 | +<items-vslider-controllet datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list"></items-vslider-controllet> | |
17 | + | |
18 | +</body> | |
19 | + | |
20 | +</html> | |
0 | 21 | \ No newline at end of file | ... | ... |
controllets/items-vslider-controllet/items-vslider-controllet.html
0 → 100755
1 | +<link rel="import" href="../../bower_components/polymer/polymer.html" /> | |
2 | + | |
3 | +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> | |
4 | + | |
5 | +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> | |
6 | +<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html"> | |
7 | +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> | |
8 | + | |
9 | +<link rel="import" href="../../bower_components/paper-material/paper-material.html" /> | |
10 | + | |
11 | +<link rel="import" href="../../bower_components/paper-input/paper-input.html"> | |
12 | + | |
13 | +<dom-module id="items-vslider-controllet"> | |
14 | + | |
15 | + <template> | |
16 | + | |
17 | + <style is="custom-style"> | |
18 | + paper-icon-button{ | |
19 | + color: #FFFFFF; | |
20 | + height: 48px; | |
21 | + width: 48px; | |
22 | + padding: 0px; | |
23 | + margin: 0px; | |
24 | + --paper-icon-button-ink-color: white; | |
25 | + } | |
26 | + | |
27 | + #items_vslider_container{ | |
28 | + display: flex; | |
29 | + flex-direction: column; | |
30 | + height: 100vh; | |
31 | + width: 172px; | |
32 | + background-color: #E0E0E0; | |
33 | + } | |
34 | + | |
35 | + #div_datalets_container { | |
36 | + position: relative; | |
37 | + margin-bottom: 16px; | |
38 | + } | |
39 | + | |
40 | + .arrow-up{ | |
41 | + background-color: #2196F3; | |
42 | + padding-left: 63px; | |
43 | + } | |
44 | + | |
45 | + .arrow-down{ | |
46 | + background-color: #2196F3; | |
47 | + padding-left: 63px; | |
48 | + } | |
49 | + | |
50 | + .content-card{ | |
51 | + position: relative; | |
52 | + float: left;/*firefox*/ | |
53 | + /*margin : 16px;*/ | |
54 | + margin : 16px 16px 0px 16px; | |
55 | + padding: 8px; | |
56 | + height: 124px; | |
57 | + width: 124px; | |
58 | + cursor: pointer; | |
59 | + background-color: #FFFFFF; | |
60 | + } | |
61 | + | |
62 | + img{ | |
63 | + /*height: 100%;*/ | |
64 | + width: 100%; | |
65 | + } | |
66 | + | |
67 | + .legend { | |
68 | + position: absolute; | |
69 | + left: 0; | |
70 | + bottom: 16px; | |
71 | + padding: 8px; | |
72 | + width: 124px; | |
73 | + background-color: #9E9E9E; | |
74 | + color: #FFFFFF; | |
75 | + opacity: 0.87; | |
76 | + z-index: 1; | |
77 | + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
78 | + font-size: 16px; | |
79 | + } | |
80 | + | |
81 | + .legend.selected { | |
82 | + font-weight: 700; | |
83 | + background-color: #2196F3; | |
84 | + opacity: 1; | |
85 | + } | |
86 | + | |
87 | + #items_vslider_search{ | |
88 | + height: 48px; | |
89 | + padding: 0px 8px; | |
90 | + background-color: #B6B6B6; | |
91 | + --paper-input-container-focus-color: #2196F3; | |
92 | + } | |
93 | + | |
94 | + .search{ | |
95 | + color: #FFFFFF | |
96 | + } | |
97 | + | |
98 | + .clear { | |
99 | + margin-bottom: 3px; | |
100 | + width: 16px; | |
101 | + height: 16px; | |
102 | + color: #2196F3; | |
103 | + --paper-icon-button-ink-color: #2196F3; | |
104 | + } | |
105 | + </style> | |
106 | + | |
107 | + <iron-ajax auto handle-as="json" url={{dataletsListUrl}} on-response="_getDatalets"></iron-ajax> | |
108 | + | |
109 | + <paper-material id="items_vslider_container" elevation="5"> | |
110 | + | |
111 | + <paper-input id="items_vslider_search" value={{filter}} no-label-float label="search datalet"> | |
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> | |
114 | + </paper-input> | |
115 | + | |
116 | + <div class="arrow-up"> | |
117 | + <paper-icon-button on-click="_onPrevClick" icon="hardware:keyboard-arrow-up"></paper-icon-button> | |
118 | + </div> | |
119 | + | |
120 | + <div id="div_datalets_container" class="flex"> | |
121 | + <template is="dom-repeat" items="{{filteredDatalets}}"> | |
122 | + <paper-material id={{item.imageName}} elevation="1" class='content-card' on-click="_selectDatalet"> | |
123 | + <div class="legend">{{item.imageName}}</div> | |
124 | + <div><img src={{item.imageUrl}}></div> | |
125 | + </paper-material> | |
126 | + </template> | |
127 | + </div> | |
128 | + | |
129 | + <div class="arrow-down"> | |
130 | + <paper-icon-button on-click="_onNextClick" icon="hardware:keyboard-arrow-down"></paper-icon-button> | |
131 | + </div> | |
132 | + | |
133 | + </paper-material> | |
134 | + | |
135 | + </template> | |
136 | + | |
137 | + <script> | |
138 | + | |
139 | + Polymer({ | |
140 | + | |
141 | + is : 'items-vslider-controllet', | |
142 | + | |
143 | + properties : { | |
144 | + | |
145 | + dataletsListUrl : { | |
146 | + type : String, | |
147 | + value : undefined | |
148 | + }, | |
149 | + | |
150 | + selectedDatalet : { | |
151 | + type : String, | |
152 | + value : undefined | |
153 | + }, | |
154 | + | |
155 | + datalets : { | |
156 | + type : Array, | |
157 | + value : [] | |
158 | + }, | |
159 | + | |
160 | + filteredDatalets : { | |
161 | + type : Array, | |
162 | + value : [] | |
163 | + }, | |
164 | + | |
165 | + filter : { | |
166 | + type : String, | |
167 | + value : "", | |
168 | + observer : '_filterDatalets' | |
169 | + } | |
170 | + }, | |
171 | + | |
172 | + listeners: { | |
173 | + 'dom-change': '_onDomChange' | |
174 | + }, | |
175 | + | |
176 | + ready : function() { | |
177 | +// this._resize(); | |
178 | + $(this.$.div_datalets_container).perfectScrollbar(); | |
179 | + }, | |
180 | + | |
181 | + attached : function() { | |
182 | +// this._resize(); | |
183 | +// var that = this; | |
184 | +// window.addEventListener("resize", function() { that._resize(); }); | |
185 | + }, | |
186 | + | |
187 | + _clearInput : function() { | |
188 | + this.$.items_vslider_search.value = ""; | |
189 | + }, | |
190 | + | |
191 | + _getDatalets : function(e){ | |
192 | + var datalets = new Array(); | |
193 | + for(var i=0; i < e.detail.response.length; i++){ | |
194 | + var datalet = { imageName : e.detail.response[i].name.replace("-datalet", ""), imageUrl : e.detail.response[i].url + e.detail.response[i].name + ".png" }; | |
195 | + datalets.push(datalet); | |
196 | + } | |
197 | + | |
198 | + this.datalets = datalets; | |
199 | + this.filteredDatalets = datalets; | |
200 | + }, | |
201 | + | |
202 | + _filterDatalets : function(){ | |
203 | + var datalets = new Array(); | |
204 | + for(var i=0; i < this.datalets.length; i++){ | |
205 | + var datalet = this.datalets[i]; | |
206 | + if(datalet.imageName.indexOf(this.filter) != -1) | |
207 | + datalets.push(datalet); | |
208 | + } | |
209 | + | |
210 | + this.filteredDatalets = datalets; | |
211 | + | |
212 | + $("#div_datalets_container").animate({ scrollTop: 0}, 0); | |
213 | + }, | |
214 | + | |
215 | + _onDomChange : function() { | |
216 | + if(this.selectedDatalet != undefined ){ | |
217 | + | |
218 | + for(var i=0; i < this.filteredDatalets.length; i++){ | |
219 | + var datalet = this.filteredDatalets[i]; | |
220 | + var dataletCard = document.getElementById(datalet.imageName); | |
221 | + dataletCard.elevation = "1"; | |
222 | + dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace("selected", ""); | |
223 | + } | |
224 | + | |
225 | + if(document.getElementById(this.selectedDatalet) != null){ | |
226 | + var dataletCard = document.getElementById(this.selectedDatalet); | |
227 | + dataletCard.elevation = "5"; | |
228 | + dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className + " selected"; | |
229 | + } | |
230 | + | |
231 | + } | |
232 | + }, | |
233 | + | |
234 | + _selectDatalet : function(e){ | |
235 | + if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet) != null)){ | |
236 | + var dataletCard = document.getElementById(this.selectedDatalet); | |
237 | + dataletCard.elevation = "1"; | |
238 | + dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", ""); | |
239 | + } | |
240 | + | |
241 | + if(e.currentTarget.id != this.selectedDatalet){ | |
242 | + e.currentTarget.elevation = "5"; | |
243 | + e.currentTarget.getElementsByClassName("legend")[0].className = e.currentTarget.getElementsByClassName("legend")[0].className + " selected"; | |
244 | + this.selectedDatalet = e.currentTarget.id; | |
245 | + } | |
246 | + else | |
247 | + this.selectedDatalet = undefined; | |
248 | + | |
249 | + this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet}); | |
250 | + }, | |
251 | + | |
252 | + | |
253 | + _getImageUrl : function(index){ | |
254 | + return this.datalets[index].imageUrl; | |
255 | + }, | |
256 | + | |
257 | + _onPrevClick : function() { | |
258 | + | |
259 | + var container = $("#div_datalets_container"); | |
260 | + var h = container.height(); | |
261 | + var dataletPerPage = parseInt(h/156); | |
262 | + var scroll = $("#div_datalets_container").scrollTop()-156*dataletPerPage; | |
263 | + var diff = scroll % 156; | |
264 | +// scroll += 156-diff; | |
265 | + scroll -= diff; | |
266 | + $("#div_datalets_container").animate({ scrollTop: scroll}, 300); | |
267 | + | |
268 | + }, | |
269 | + | |
270 | + _onNextClick : function() { | |
271 | + var container = $("#div_datalets_container"); | |
272 | + var h = container.height(); | |
273 | + var dataletPerPage = parseInt(h/156); | |
274 | + var scroll = $("#div_datalets_container").scrollTop()+156*dataletPerPage; | |
275 | + var diff = scroll % 156; | |
276 | + scroll -= diff; | |
277 | + $("#div_datalets_container").animate({ scrollTop: scroll}, 300); | |
278 | + | |
279 | + }, | |
280 | + | |
281 | +// _resize : function(){ | |
282 | +// var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; | |
283 | +// h = h - 64 - 8; //height with page scroller | |
284 | +// $("#items_vslider_container").height(h); | |
285 | +// } | |
286 | + | |
287 | + }); | |
288 | + | |
289 | + </script> | |
290 | + | |
291 | +</dom-module> | |
0 | 292 | \ No newline at end of file | ... | ... |
controllets/items-vslider-controllet/items-vslider-controllet2.html
0 → 100755
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> | |
0 | 300 | \ No newline at end of file | ... | ... |
controllets/items-vslider-controllet/items-vslider-controllet3.html
0 → 100755
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> | |
0 | 459 | \ No newline at end of file | ... | ... |
controllets/items-vslider-controllet/test.html
0 → 100755
1 | +<!doctype html> | |
2 | +<!-- | |
3 | +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
4 | +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | |
5 | +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
6 | +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | |
7 | +Code distributed by Google as part of the polymer project is also | |
8 | +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | |
9 | +--> | |
10 | +<html> | |
11 | +<head> | |
12 | + <title>neon-animated-pages demo: declarative</title> | |
13 | + | |
14 | + <meta charset="utf-8"> | |
15 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
16 | + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> | |
17 | + | |
18 | + <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script> | |
19 | + | |
20 | + <link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> | |
21 | + <link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html"> | |
22 | + <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> | |
23 | + <link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | |
24 | + | |
25 | + <style> | |
26 | + body { | |
27 | + overflow: hidden; | |
28 | + } | |
29 | + .toolbar { | |
30 | + padding: 8px; | |
31 | + } | |
32 | + </style> | |
33 | + | |
34 | + <style is="custom-style"> | |
35 | + neon-animatable { | |
36 | + color: white; | |
37 | + @apply(--layout-horizontal); | |
38 | + @apply(--layout-center-center); | |
39 | + @apply(--paper-font-display4); | |
40 | + } | |
41 | + neon-animatable:nth-child(1) { | |
42 | + background: var(--paper-red-500); | |
43 | + } | |
44 | + neon-animatable:nth-child(2) { | |
45 | + background: var(--paper-blue-500); | |
46 | + } | |
47 | + neon-animatable:nth-child(3) { | |
48 | + background: var(--paper-orange-500); | |
49 | + } | |
50 | + neon-animatable:nth-child(4) { | |
51 | + background: var(--paper-green-500); | |
52 | + } | |
53 | + neon-animatable:nth-child(5) { | |
54 | + background: var(--paper-purple-500); | |
55 | + } | |
56 | + </style> | |
57 | + | |
58 | +</head> | |
59 | +<body class="fullbleed layout vertical"> | |
60 | + | |
61 | +<template is="dom-bind"> | |
62 | + | |
63 | + <div class="toolbar"> | |
64 | + <button on-click="_onPrevClick"><<</button> | |
65 | + <button on-click="_onNextClick">>></button> | |
66 | + </div> | |
67 | + | |
68 | + <neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | |
69 | + <neon-animatable>1</neon-animatable> | |
70 | + <neon-animatable>2</neon-animatable> | |
71 | + <neon-animatable>3</neon-animatable> | |
72 | + <neon-animatable>4</neon-animatable> | |
73 | + <neon-animatable>5</neon-animatable> | |
74 | + </neon-animated-pages> | |
75 | + | |
76 | +</template> | |
77 | + | |
78 | +<script> | |
79 | + var scope = document.querySelector('template[is="dom-bind"]'); | |
80 | + scope.selected = 0; | |
81 | + scope._onPrevClick = function() { | |
82 | + this.entryAnimation = ''; | |
83 | + this.exitAnimation = 'slide-up-animation'; | |
84 | + this.selected = this.selected === 0 ? 4 : (this.selected - 1); | |
85 | + } | |
86 | + scope._onNextClick = function() { | |
87 | + this.entryAnimation = 'slide-down-animation'; | |
88 | + this.exitAnimation = ''; | |
89 | + this.selected = this.selected === 4 ? 0 : (this.selected + 1); | |
90 | + } | |
91 | +</script> | |
92 | + | |
93 | +</body> | |
94 | +</html> | |
0 | 95 | \ No newline at end of file | ... | ... |
controllets/multi-table-controllet/demo/index.html
100644 → 100755
controllets/multi-table-controllet/multi-table-controllet.html
100644 → 100755
controllets/page-slider-controllet/demo/index.html
100644 → 100755
controllets/page-slider-controllet/page-slider-controllet.html
... | ... | @@ -17,15 +17,23 @@ |
17 | 17 | color: #00BCD4; |
18 | 18 | height: 48px; |
19 | 19 | width: 48px; |
20 | + padding: 0px; | |
20 | 21 | --paper-icon-button-ink-color: #00BCD4; |
21 | 22 | } |
22 | 23 | |
23 | 24 | paper-icon-button:hover{ |
25 | + color: #00AABF; | |
26 | + } | |
27 | + | |
28 | + paper-icon-button[disabled]{ | |
29 | + color: #B6B6B6; | |
24 | 30 | } |
25 | 31 | |
26 | 32 | .header{ |
33 | + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
27 | 34 | width: 100%; |
28 | - padding-bottom: 8px; | |
35 | + /*padding-bottom: 8px;*/ | |
36 | + /*border-bottom: 2px solid #B6B6B6;*/ | |
29 | 37 | } |
30 | 38 | |
31 | 39 | .chevron-left{ |
... | ... | @@ -133,7 +141,7 @@ |
133 | 141 | avatar : { |
134 | 142 | type : String, |
135 | 143 | value : "1" |
136 | - }, | |
144 | + } | |
137 | 145 | |
138 | 146 | }, |
139 | 147 | ... | ... |
controllets/tree-view-controllet/demo/index.html
... | ... | @@ -64,6 +64,7 @@ |
64 | 64 | </html> |
65 | 65 | |
66 | 66 | <!--urls:--> |
67 | +<!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json--> | |
67 | 68 | <!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1--> |
68 | 69 | <!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',--> |
69 | 70 | <!--url: 'https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse',--> | ... | ... |
controllets/tree-view-multi-table-controllet/demo/index.html
100644 → 100755
1 | 1 | <html> |
2 | 2 | |
3 | 3 | <head> |
4 | + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | |
5 | + | |
4 | 6 | <script src="../../shared_js/jquery-1.11.2.min.js"></script> |
5 | 7 | |
6 | - <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | |
8 | + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | |
9 | + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | |
7 | 10 | |
8 | 11 | <link rel="import" href="../../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html" /> |
9 | 12 | </head> | ... | ... |
controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html
100644 → 100755
... | ... | @@ -5,10 +5,6 @@ |
5 | 5 | <link rel="import" href="../tree-view-controllet/tree-view-controllet.html" /> |
6 | 6 | <link rel="import" href="../multi-table-controllet/multi-table-controllet.html" /> |
7 | 7 | |
8 | -<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | |
9 | -<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | |
10 | - | |
11 | - | |
12 | 8 | <dom-module id="tree-view-multi-table-controllet"> |
13 | 9 | |
14 | 10 | <style is="custom-style"> |
... | ... | @@ -68,7 +64,8 @@ |
68 | 64 | |
69 | 65 | dataUrl : { |
70 | 66 | type : String, |
71 | - value : undefined | |
67 | + value : undefined, | |
68 | + observer : '_init' | |
72 | 69 | } |
73 | 70 | |
74 | 71 | }, |
... | ... | @@ -78,21 +75,19 @@ |
78 | 75 | }, |
79 | 76 | |
80 | 77 | ready : function() { |
81 | - var tree = document.getElementById('tree_view'); | |
82 | - | |
83 | - $.ajax({ | |
84 | - url: this.dataUrl, | |
85 | - dataType: "json", | |
86 | - success: function(data){ | |
87 | - tree.setAttribute("json-data", JSON.stringify(data)); | |
88 | - tree.ready(); | |
89 | - } | |
90 | - }); | |
78 | +// if(this.dataUrl) | |
79 | +// this._init(); | |
91 | 80 | |
92 | 81 | $(this.$.material_tree_view).perfectScrollbar(); |
93 | 82 | $(this.$.material_multi_table).perfectScrollbar(); |
94 | 83 | }, |
95 | 84 | |
85 | + attached : function(){ | |
86 | + this._resize(); | |
87 | + var that = this; | |
88 | + window.addEventListener("resize", function() { that._resize(); }); | |
89 | + }, | |
90 | + | |
96 | 91 | getFields : function() { |
97 | 92 | return this.$.tree_view.getFields(); |
98 | 93 | }, |
... | ... | @@ -101,11 +96,33 @@ |
101 | 96 | return this.$.tree_view.getFlatFields(); |
102 | 97 | }, |
103 | 98 | |
99 | + _init : function() { | |
100 | + var tree = document.getElementById('tree_view'); | |
101 | + var t = this; | |
102 | + | |
103 | + $.ajax({ | |
104 | + url: this.dataUrl, | |
105 | + dataType: "json", | |
106 | + success: function(data){ | |
107 | + tree.setAttribute("json-data", JSON.stringify(data)); | |
108 | + tree.selectedFields = []; | |
109 | + t._updateSelectedFields(); | |
110 | + tree.ready(); | |
111 | + } | |
112 | + }); | |
113 | + }, | |
114 | + | |
104 | 115 | _updateSelectedFields : function() { |
105 | 116 | var fields = this.$.tree_view.getFields(); |
106 | 117 | this.$.multi_table.setSelectedFields(fields); |
107 | 118 | }, |
108 | 119 | |
120 | + _resize : function(){ | |
121 | + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; | |
122 | + h = h - 64; //height with page scroller | |
123 | + $("#material_tree_view").height(h); | |
124 | + } | |
125 | + | |
109 | 126 | }); |
110 | 127 | |
111 | 128 | </script> | ... | ... |
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
100644 → 100755
... | ... | @@ -29,7 +29,7 @@ |
29 | 29 | * |
30 | 30 | --> |
31 | 31 | |
32 | -<link rel="import" href="http://deep.routetopa.eu/COMPONENTS/datalets/base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> | |
32 | +<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> | |
33 | 33 | |
34 | 34 | <!-- |
35 | 35 | |
... | ... | @@ -124,7 +124,8 @@ Example: |
124 | 124 | <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet> |
125 | 125 | </template> |
126 | 126 | |
127 | - <script src="http://deep.routetopa.eu/COMPONENTS/datalets/shared_js/d3.js"></script> | |
127 | + <!--<script src="../shared_js/d3.js"></script>--> | |
128 | + <script src="../shared_js/d3.js"></script> | |
128 | 129 | <script src="js/buildtreemap.js"></script> |
129 | 130 | <script> |
130 | 131 | |
... | ... | @@ -237,7 +238,7 @@ Example: |
237 | 238 | |
238 | 239 | ready: function(){ |
239 | 240 | this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatasetexplorerBehavior); |
240 | - this.async(function(){this.behavior.init(this)},1000); | |
241 | + this.async(function(){this.behavior.init(this)},0); | |
241 | 242 | } |
242 | 243 | |
243 | 244 | }); | ... | ... |
datalets/datasetexplorer-datalet/datasetexplorer-datalet.png
100644 → 100755
datalets/datasetexplorer-datalet/demo/index.html
100644 → 100755
datalets/datasetexplorer-datalet/docs.html
100644 → 100755
datalets/datasetexplorer-datalet/js/buildtreemap.js
100644 → 100755
... | ... | @@ -190,9 +190,8 @@ function build(root, place_holder, select_listener) { |
190 | 190 | .append("foreignObject") |
191 | 191 | .attr("width", root.dx) |
192 | 192 | .attr("height", root.dy - root.y) |
193 | - .append("xhtml:body") | |
194 | - .html('<iframe src="'+pageurl+'" width="'+root.dx+'" height="'+root.dy+'"></iframe>'); | |
195 | - | |
193 | + .append("xhtml:body") | |
194 | + .html('<iframe src="'+pageurl+'" width="'+root.dx+'" height="'+root.dy+'"></iframe>'); | |
196 | 195 | } |
197 | 196 | |
198 | 197 | return g; | ... | ... |
datalets/datasetexplorer-datalet/spin.svg
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/css/dataTables.bootstrap.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/css/dataTables.bootstrap.min.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/css/dataTables.foundation.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/css/dataTables.foundation.min.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/css/dataTables.jqueryui.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/css/dataTables.jqueryui.min.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/css/jquery.dataTables.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/css/jquery.dataTables.min.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/css/jquery.dataTables_themeroller.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/images/sort_asc.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/images/sort_asc_disabled.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/images/sort_both.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/images/sort_desc.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/images/sort_desc_disabled.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/js/dataTables.bootstrap.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/js/dataTables.bootstrap.min.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/js/dataTables.foundation.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/js/dataTables.foundation.min.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/js/dataTables.jqueryui.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/js/dataTables.jqueryui.min.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/js/jquery.dataTables.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/DataTables-1.10.9/js/jquery.dataTables.min.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/datatables.css
100644 → 100755
... | ... | @@ -879,7 +879,7 @@ body .ui-tooltip { |
879 | 879 | .ui-widget-content .ui-state-default, |
880 | 880 | .ui-widget-header .ui-state-default { |
881 | 881 | /*border: 1px solid #cccccc;*/ |
882 | - height: 48px; | |
882 | + /*height: 48px;*/ | |
883 | 883 | /*font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/ |
884 | 884 | background: #2196F3; /*#f6f6f6 url("jQueryUI-1.11.4/images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;*/ |
885 | 885 | font-weight: 700; |
... | ... | @@ -1263,7 +1263,7 @@ table.dataTable tfoot th { |
1263 | 1263 | } |
1264 | 1264 | table.dataTable thead th, |
1265 | 1265 | table.dataTable thead td { |
1266 | - padding: 10px 18px; | |
1266 | + padding: 15px 18px; | |
1267 | 1267 | } |
1268 | 1268 | table.dataTable thead th:active, |
1269 | 1269 | table.dataTable thead td:active { | ... | ... |
datalets/dynamic-datatable-datalet/js/DataTables/datatables.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/datatables.min.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/datatables.min.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-bg_diagonals-thick_18_b81900_40x40.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-bg_diagonals-thick_20_666666_40x40.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-bg_flat_10_000000_40x100.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-bg_glass_100_f6f6f6_1x400.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-bg_glass_100_fdf5ce_1x400.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-bg_glass_65_ffffff_1x400.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-bg_gloss-wave_35_f6a828_500x100.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-bg_highlight-soft_100_eeeeee_1x100.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-bg_highlight-soft_75_ffe45c_1x100.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-icons_222222_256x240.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-icons_228ef1_256x240.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-icons_ef8c08_256x240.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-icons_ffd27a_256x240.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/images/ui-icons_ffffff_256x240.png
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/jquery-ui.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/jquery-ui.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/jquery-ui.min.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/jquery-ui.min.js
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/jquery-ui.structure.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/jquery-ui.structure.min.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/jquery-ui.theme.css
100644 → 100755
datalets/dynamic-datatable-datalet/js/DataTables/jQueryUI-1.11.4/jquery-ui.theme.min.css
100644 → 100755