WebCompDev / COMPONENTS

Commit 325c348ab6d97f03d9d56a93afcb742bc38648c0

Authored by Luigi Serra
1 parent dbc787cf

Cross browser bug fix

Inline Side-by-side
Showing 29 changed files with 106 additions and 4359 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @325c348
1 1 <link rel="import" href="../../bower_components/polymer/polymer.html">
2   -<link rel="import" href="../../bower_components/paper-styles/color.html">
  2 + <link rel="import" href="../../bower_components/paper-styles/color.html">
3 3  
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">
  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 7  
8   -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
9   -<link rel="import" href="../../bower_components/paper-input/paper-input.html">
10   -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
11   -<link rel="import" href="../../bower_components/paper-button/paper-button.html">
12   -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
13   -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
14   -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
15   -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
16   -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
17   -<link rel="import" href="../../bower_components/paper-item/paper-item.html">
18   -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
  8 + <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
  9 + <link rel="import" href="../../bower_components/paper-input/paper-input.html">
  10 + <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
  11 + <link rel="import" href="../../bower_components/paper-button/paper-button.html">
  12 + <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  13 + <link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  14 + <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
  15 + <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  16 + <link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  17 + <link rel="import" href="../../bower_components/paper-item/paper-item.html">
  18 + <link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
19 19  
20 20  
21   -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
22   -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
23   -<link rel="import" href="../treeview-controllet/treeview-controllet.html">
  21 + <link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
  22 + <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
  23 + <link rel="import" href="../treeview-controllet/treeview-controllet.html">
24 24  
25 25  
26   -<dom-module id="data-sevc-controllet">
27   - <template>
28   - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  26 + <dom-module id="data-sevc-controllet">
  27 + <template>
  28 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  29 + <link rel="stylesheet" href="static/css/reset.css">
29 30  
30   - <style is="custom-style">
  31 + <style is="custom-style">
31 32  
32   - /*TEST FOR CROSS BROWSER FLEX LAYOUT BUG FIXING --- PEZZOTS */
33   - .layout.horizontal.data-sevc-controllet, .layout.horizontal-reverse.data-sevc-controllet, .layout.vertical.data-sevc-controllet, .layout.vertical-reverse.data-sevc-controllet {
34   - display: flex;
35   - }
36   - .layout.vertical.data-sevc-controllet {
37   - flex-direction: column;
38   - }
39   - .layout.justified {
40   - justify-content: space-between;
41   - }
42   - .layout.vertical {
43   - flex-direction: column;
44   - }
45   - .layout.horizontal, .layout.horizontal-reverse, .layout.vertical, .layout.vertical-reverse {
46   - display: flex;
  33 + ::content body {
  34 + font-family: 'Roboto', sans-serif;
47 35 }
48 36  
49   - .layout.horizontal.data-sevc-controllet.data-sevc-controllet, .layout.horizontal-reverse.data-sevc-controllet.data-sevc-controllet, .layout.vertical.data-sevc-controllet.data-sevc-controllet, .layout.vertical-reverse.data-sevc-controllet.data-sevc-controllet {
50   - display: flex;
51   - }
52   - .layout.horizontal.data-sevc-controllet, .layout.horizontal-reverse.data-sevc-controllet, .layout.vertical.data-sevc-controllet, .layout.vertical-reverse.data-sevc-controllet {
53   - display: flex;
54   - }
55   - .layout.horizontal {
56   - flex-direction: row;
57   - }
58   - .layout.horizontal, .layout.horizontal-reverse, .layout.vertical, .layout.vertical-reverse {
59   - display: flex;
60   - }
61   - /*END TEST*/
62   -
63 37 .flexchild
64 38 {
65 39 @apply(--layout-flex);
... ... @@ -185,14 +159,14 @@
185 159  
186 160 #fields_placeholder{
187 161 width: 40%;
188   - height: 50vh;
  162 + height: 75vh;
189 163 position: relative;
190 164 float: left;
191 165 overflow: auto;
192 166 }
193 167  
194 168 #table_fields_container{
195   - height: 50vh;
  169 + height: 75vh;
196 170 width: 55%;
197 171 position: relative;
198 172 float: left;
... ...
controllets/data-sevc-controllet/data-sevc-controllet_.html deleted
View file @dbc787c
1   -<link rel="import" href="../../bower_components/polymer/polymer.html">
2   -<link rel="import" href="../../bower_components/paper-styles/color.html">
3   -
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/iron-ajax/iron-ajax.html">
9   -<link rel="import" href="../../bower_components/paper-input/paper-input.html">
10   -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
11   -<link rel="import" href="../../bower_components/paper-button/paper-button.html">
12   -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
13   -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
14   -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
15   -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
16   -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
17   -<link rel="import" href="../../bower_components/paper-item/paper-item.html">
18   -
19   -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
20   -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
21   -<link rel="import" href="../treeview-controllet/treeview-controllet.html">
22   -
23   -
24   -<dom-module id="data-sevc-controllet">
25   - <template>
26   - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
27   -
28   - <style is="custom-style">
29   - body {
30   - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
31   - font-size: 1em;
32   - margin: 0;
33   - padding: 1.5em;
34   - -webkit-tap-highlight-color: rgba(0,0,0,0);
35   - -webkit-touch-callout: none;
36   - overflow: hidden;
37   - }
38   -
39   - #pages{
40   - min-width: 1336px;
41   - max-width: 1634px;
42   - }
43   -
44   - .fields-card-content {
45   - padding-left: 1.5em;
46   - }
47   -
48   - .fancy .fields-title {
49   - /*position: absolute;
50   - top: 30px;
51   - left: 100px;
52   - display: inline-block;*/
53   - color: var(--paper-indigo-500);
54   - }
55   -
56   - .fancy-content {
57   - /*padding: 25px;*/
58   - }
59   -
60   - .avatar {
61   - display: inline-block;
62   - height: 2em;
63   - width: 2em;
64   - border-radius: 50%;
65   - /*background: var(--paper-pink-500);*/
66   - background: var(--paper-blue-500);
67   - color: white;
68   - line-height: 2em;
69   - font-size: 1.87em;
70   - text-align: center;
71   - }
72   -
73   - .fancy .title {
74   - /*position: absolute;
75   - top: 30px;
76   - left: 100px;*/
77   - display: inline-block;
78   - position: relative;
79   - top: .75em;
80   - left: .625em;
81   - color: var(--paper-indigo-500);
82   - }
83   -
84   - .fancy .big {
85   - font-size: 1.37em;
86   - padding: 0.5em 0 1em;
87   - color: var(--google-grey-500);
88   - }
89   -
90   - .fancy .medium {
91   - font-size: 1em;
92   - padding-bottom: 0.5em;
93   - color : #000000;
94   - font-weight: bold;
95   - }
96   -
97   - paper-input {
98   - width: 80%;
99   - }
100   -
101   - paper-dropdown-menu {
102   - text-align: left;
103   - margin: auto;
104   - width: 100%;
105   - }
106   -
107   - :host ::content paper-menu-button{
108   - display: block;
109   - width: 100%;
110   - }
111   -
112   - #visualization_slider_area{
113   - position:relative;
114   - float:left;
115   - height: 22vh;
116   - /*width: 50%;*/
117   - min-width: 670px;
118   - min-height: 180px;
119   - }
120   -
121   - #datalet_area{
122   - position:relative;
123   - /*height: 30em;*/
124   - width: 46%;
125   - min-height: 500px;
126   - min-width: 600px;
127   - float: right;
128   - }
129   -
130   - #fields_mapping_area{
131   - position:relative;
132   - height: auto;/*70%;*/
133   - /*width: 50%;*/
134   - float:left;
135   - min-width: 670px;
136   - }
137   -
138   - #visualization_customization_area{
139   - position:relative;
140   - /*height:auto;*/
141   - width: 46%;
142   - float:right;
143   - background-color: white;
144   - }
145   -
146   - .field-mapping-card{
147   - width: 50%;
148   - height: 50vh;
149   - overflow: auto;
150   - position: relative;
151   - float: left;
152   - }
153   -
154   - .horizontal-section-container .vertical-section {
155   - /*max-width: 130px;*/
156   - diplay:block;
157   - float: left;
158   - }
159   -
160   -
161   - .colorful {
162   - background: #4285f4;
163   - color: #fff;
164   - }
165   -
166   - .toolbar_button{
167   - /*height: 100%;
168   - display: inline-block;*/
169   - float: left;
170   - margin-top: 2em;
171   - --iron-icon-height: 32px;
172   - --iron-icon-width: 32px;
173   - }
174   -
175   - /*paper-iron-button.toolbar_button{
176   - height: 34px;
177   - width: 34px;
178   - }*/
179   -
180   - .toolbar-center{
181   - display: inline-block;
182   - position: relative;
183   - float: left;
184   - width: 90%;
185   - }
186   -
187   - .toolbar{
188   - width: 100%;
189   - height : 8em;
190   - vertical-align: middle;
191   - min-width: 975px;
192   - }
193   -
194   -
195   -
196   - #datalet_created_idm_fields_container{
197   - position: relative;
198   - float: left;
199   - width: 100%;
200   - height: 50vh;
201   - overflow: auto;
202   - }
203   -
204   - #finish{
205   - position: relative;
206   - float: left;
207   - width: 100%;
208   - height : 20%;
209   - align-content: center;
210   - }
211   -
212   - #datalet_created_placehorder {
213   - width: 100%;
214   - }
215   -
216   - #finish_button{
217   - float: left;
218   - margin-top: 2em;
219   - --iron-icon-height: 64px;
220   - --iron-icon-width: 64px;
221   - color: var(--paper-blue-500);
222   - }
223   -
224   - #finish_button:hover{
225   - --iron-icon : "add-circle-outline"
226   - }
227   -
228   - /* #finish_button iron-icon:hover{
229   - icon : "add-circle";
230   - }
231   -
232   - #finish_button iron-icon{
233   - height: 4vh;
234   - width: 4vw;
235   - }*/
236   -
237   - .area_container{
238   - margin : 0.8em;
239   - padding : 0.8em;
240   - border-width: 1em;
241   - border-radius: 0.125rem;
242   - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);
243   - }
244   -
245   - #fields_placeholder{
246   - width: 40%;
247   - height: 50vh;
248   - position: relative;
249   - float: left;
250   - overflow: auto;
251   - }
252   -
253   - #table_fields_container{
254   - height: 50vh;
255   - width: 55%;
256   - /*max-width: 100vw;
257   - max-height: 50vh;*/
258   - position: relative;
259   - float: left;
260   - overflow: auto;
261   - }
262   -
263   - paper-tabs, paper-toolbar {
264   - background-color: var(--paper-blue-500);
265   - color: #ffffff;
266   - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
267   - }
268   -
269   - paper-toolbar paper-tabs {
270   - box-shadow: none;
271   - --paper-tabs-selection-bar-color : var(--google-gray-500);
272   - }
273   -
274   - paper-tabs[noink][no-bar] paper-tab.iron-selected {
275   - background-color: var(--google-gray-500);
276   - }
277   -
278   - paper-tabs[align-bottom] {
279   - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
280   - }
281   -
282   - </style>
283   -
284   - <iron-ajax
285   - auto
286   - id="data_request"
287   - url={{dataUrl}}
288   - verbose="true"
289   - on-response="handleResponseData"
290   - debounce-duration="300">
291   - </iron-ajax>
292   -
293   - <iron-ajax
294   - id="datales_list_request"
295   - auto
296   - url={{dataletsListUrl}}
297   - handle-as="json"
298   - on-response="handleResponseDatalets"
299   - debounce-duration="300">
300   - </iron-ajax>
301   -
302   - <iron-ajax
303   - id="selected_datalet_request"
304   - url={{deepUrl}}
305   - verbose="true"
306   - on-response="handleSelectedDatalet"
307   - debounce-duration="300">
308   - </iron-ajax>
309   -
310   - <content>
311   - <div class="toolbar">
312   - <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>
313   - <div class="fancy toolbar-center">
314   - <div class="fancy-content">
315   - <div id="toolbar_number" class="avatar">1</div>
316   - <div class="title">
317   - <div id="toolbar_title" class="big">Dataset source</div>
318   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
319   - </div>
320   - </div>
321   - </div>
322   - <paper-icon-button id="NextButton" class="toolbar_button x-scope" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
323   - </div>
324   -
325   - <neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
326   -
327   - <neon-animatable>
328   -
329   - <div class="fancy 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-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
339   - </div>
340   -
341   - <div class="card-content">
342   - <paper-dropdown-menu id="datasets-sources" label="Available datasets">
343   - <paper-menu class="dropdown-content">
344   - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
345   - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item>
346   - </template>
347   - </paper-menu>
348   - </paper-dropdown-menu>
349   - </div>
350   -
351   - </div>
352   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
353   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
354   - </iron-pages>
355   - </div>
356   -
357   - </neon-animatable>
358   -
359   - <neon-animatable>
360   -
361   - <div class="fancy">
362   - <div class="fancy-content">
363   -
364   - <div id="fields_placeholder" class="area_container">
365   - <treeview-controllet id="fields_treeview"></treeview-controllet>
366   - </div>
367   - <div id="table_fields_container" class="area_container">
368   - <div id="table_component_place_holder"></div>
369   - </div>
370   - </div>
371   - </div>
372   -
373   - </neon-animatable>
374   -
375   - <neon-animatable>
376   -
377   - <div class='fancy'>
378   - <div class="fancy-content">
379   - <div id="visualization_slider_area" class="area_container"></div>
380   -
381   - <div id="datalet_area" class="area_container">
382   - <div id="datalet_placeholder"></div>
383   - </div>
384   -
385   - <div id="fields_mapping_area" class="area_container">
386   -
387   - <div id="selected_fields_main_container" class="field-mapping-card">
388   - <div class="title">
389   - <div class="medium">Selected fields</div>
390   - </div>
391   - <div id="selected_fields_container" class="area_container"></div>
392   - </div>
393   -
394   - <div id="idm_fields_main_container" class="field-mapping-card">
395   - <div class="title">
396   - <div class="medium">Datalet fields</div>
397   - </div>
398   - <div id="datalet_idm_fields_container" class="area_container"></div>
399   - </div>
400   - </div>
401   -
402   - <div id="visualization_customization_area">
403   - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
404   - </div>
405   -
406   - </div>
407   - </div>
408   -
409   - </neon-animatable>
410   -
411   - <!--<neon-animatable>
412   -
413   - <div class="fancy">
414   - <div class="card-content area_container">
415   - <div id="datalet_created_placehorder"></div>
416   - </div>
417   - <div class="card-content area_container">
418   - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle-outline" alt="Conforms the creation" title="finish"></paper-icon-button>
419   - </div>
420   - </div>
421   -
422   - </neon-animatable>-->
423   -
424   - </neon-animated-pages>
425   - </content>
426   - </template>
427   -
428   - <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
429   - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
430   - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
431   -
432   - <script>
433   -
434   - var datasetsPrato = {
435   - names:[
436   - 'Consuntivo entrate 2009',
437   - 'Consuntivo entrate 2010',
438   - 'Consuntivo entrate 2011',
439   - 'Consuntivo entrate 2012',
440   - 'Consuntivo entrate 2014'
441   - ],
442   - urls: [
443   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f&limit=10000',
444   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda&limit=10000',
445   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89&limit=10000',
446   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee&limit=10000',
447   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a&limit=10000'
448   - ]
449   - }
450   -
451   - var datasetsGroeningen = {
452   - names:[
453   - 'Vestigingen register gemeente Groningen',
454   - 'Woonruimte gemeente Groningen'
455   - ],
456   - urls: [
457   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd&limit=10000',
458   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f&limit=10000'
459   - ]
460   - }
461   -
462   - var datasetsDublin = {
463   - names:[
464   - 'SDCC Traffic Cameras',
465   - 'Derelict Site Register',
466   - 'Dublin City Council Commencement Notices',
467   - 'Dublin City Council Planning Applications',
468   - 'Dun Laoghaire-Rathdown County Council Planning Application 2008-2014',
469   - 'Fingal Council Planning Applications for last 7 years',
470   - 'Planning Register',
471   - 'Fingal Development Plan 2011-2017 Record of Protected Structures'
472   - ],
473   - urls: [
474   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=10000',
475   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc&limit=10000',
476   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075&limit=10000',
477   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e&limit=10000',
478   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff&limit=10000',
479   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441&limit=10000',
480   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d&limit=10000',
481   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6&limit=10000',
482   - ]
483   - }
484   -
485   - var AvailableDatasets = [datasetsPrato, datasetsGroeningen, datasetsDublin]
486   -
487   -
488   - Polymer({
489   -
490   - is : 'data-sevc-controllet',
491   -
492   - listeners : {
493   - 'items-slider-controllet_item-selected' : '_dataletSelected',
494   - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
495   - 'treeview-controllet-fileds-selected' : '_fieldsSelected'
496   - },
497   -
498   - properties : {
499   -
500   - entryAnimation : {
501   - type : String,
502   - value : ""
503   - },
504   -
505   - exitAnimation : {
506   - type : String,
507   - value : ""
508   - },
509   -
510   - selected : {
511   - type : Number,
512   - value : 0
513   - },
514   -
515   - /**
516   - * It represent the data url from CKAN api
517   - *
518   - * @attribute dataUrl
519   - * @type string
520   - * @default 'null'
521   - */
522   - dataUrl : {
523   - type : String,
524   - value : "",/*"http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",*/
525   - observer : '_dataUrlChanged'
526   - },
527   - /**
528   - * It represent the DEEP url to get information about the datalets
529   - *
530   - * @attribute deepUrl
531   - * @type string
532   - * @default 'null'
533   - */
534   - deepUrl : {
535   - type : String,
536   - value : ""
537   - },
538   -
539   - organization : {
540   - type : Number,
541   - value : 2
542   - },
543   -
544   - datalet_query : {
545   - type : String,
546   - value : ""
547   - },
548   -
549   - datalets_list : {
550   - type : Array ,
551   - value : []
552   - },
553   -
554   - selected_datalet : {
555   - type : String,
556   - value : ""
557   - },
558   -
559   - selected_fields : {
560   - type : Array,
561   - value : []
562   - },
563   -
564   - DatasourceTabSelected : {
565   - type : Number,
566   - value : 0
567   - },
568   -
569   - datasets :
570   - {
571   - type : Array,
572   - value : AvailableDatasets[0].names
573   - },
574   -
575   - datasets_urls :
576   - {
577   - type : Array,
578   - value :AvailableDatasets[0].urls
579   - }
580   -
581   - },
582   -
583   - ready : function(){
584   -
585   - this.datasets = AvailableDatasets[this.organization].names;
586   - this.datasets_urls = AvailableDatasets[this.organization].urls;
587   -
588   - $(this.$.fields_placeholder).perfectScrollbar();
589   - $(this.$.selected_fields_main_container).perfectScrollbar();
590   - $(this.$.idm_fields_main_container).perfectScrollbar();
591   - $(this.$.table_fields_container).perfectScrollbar();
592   -
593   - },
594   -
595   - /**
596   - * Callback to parse the data requested when dataUrl change its value
597   - *
598   - * @method handleResponseData
599   - */
600   - handleResponseData : function(e){
601   -
602   - this.$.fields_treeview.init(e.detail.response);
603   -
604   - var table_params ={
605   - component : "datatable-datalet",
606   - params :{
607   - 'data-url' : this.dataUrl
608   - },
609   - fields : [],
610   - placeHolder : (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]]
611   - };
612   -
613   - ComponentService.deep_url = this.deepUrl;
614   - ComponentService.getComponent(table_params);
615   -
616   - },
617   -
618   - /**
619   - * Callback to parse the components response object
620   - *
621   - * @method handleResponseDatalets
622   - */
623   - handleResponseDatalets : function(e){
624   - this.datalets_list = new Array();
625   - for(var i=0;i < e.detail.response.length;i++){
626   - var datalet_info = { name : e.detail.response[i].name ,
627   - image : e.detail.response[i].url + e.detail.response[i].name + ".png"
628   - };
629   -
630   - this.datalets_list.push(datalet_info);
631   - }
632   -
633   - /*var w = $(this.$.visualization_slider_area).width();
634   - var pages = 2;
635   - var numItemsPerPage = 3;*/
636   -
637   - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
638   - '\'></items-slider-controllet>';
639   - },
640   -
641   - handleSelectedDatalet : function(e){
642   -
643   - var response = e.detail.response;
644   - //<draggable-element-controllet is-target="true" heading="Field 1" description="This fields is used for ..." number="1"></draggable-element-controllet>
645   - this.$.datalet_idm_fields_container.innerHTML = "";
646   - for(var i =0; i < response.idm.inputs.input.length; i++){
647   - var input = response.idm.inputs.input[i];
648   - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';
649   - }
650   -
651   - if(response.idm.inputs.input.constructor == Object) {
652   - var input = response.idm.inputs.input;
653   - if(input.selection == "*") {
654   - var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet');
655   - for (var j = 0; j < input_selected_fields.length; j++) {
656   - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';
657   - }
658   - }
659   - }
660   -
661   - },
662   -
663   - assignToolbar : function(){
664   - this.$.toolbar_number.innerHTML = (this.selected + 1);
665   - switch(this.selected){
666   - case 0:
667   - this.$.toolbar_title.innerHTML = "Dataset source";
668   - this.$.toolbar_description.innerHTML = "Copy and paste/drag and drop in the textarea the url of datasource";
669   - break;
670   - case 1:
671   - this.$.toolbar_title.innerHTML = "Data fields selection";
672   - this.$.toolbar_description.innerHTML = "Select the fields you want to visualize";
673   - break;
674   - case 2:
675   - this.$.toolbar_title.innerHTML = "Data mapping";
676   - this.$.toolbar_description.innerHTML = "Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need";
677   - break;
678   - case 3:
679   - this.$.toolbar_title.innerHTML = "Finish";
680   - this.$.toolbar_description.innerHTML = "Confirms the creation of the datalet";
681   -
682   - break;
683   - }
684   - },
685   -
686   - _onPrevClick : function() {
687   - this.entryAnimation = 'slide-from-left-animation';
688   - this.exitAnimation = 'slide-right-animation';
689   - this.selected = this.selected === 0 ? 0 : (this.selected - 1);
690   - this.assignToolbar();
691   - },
692   -
693   - _onNextClick : function() {
694   - this.entryAnimation = 'slide-from-right-animation';
695   - this.exitAnimation = 'slide-left-animation';
696   - this.selected = this.selected === 2 ? 2 : (this.selected + 1);
697   - this.assignToolbar();
698   - },
699   -
700   - _datasourceSelected : function(e){
701   - if(Object.getPrototypeOf(e) !== CustomEvent.prototype) {
702   - e = e[Object.keys(e)[0]];
703   - }
704   -
705   - this.$.data_url.value = this.datasets_urls[parseInt(e.target.id)];
706   - },
707   -
708   - _dataUrlChanged : function(newValue, oldValue){
709   - this.$.data_request.generateRequest();
710   - },
711   -
712   - _dataletSelected : function(e){
713   - this.selected_datalet = e.detail.datalet;
714   - this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet;
715   - this.$.selected_datalet_request.generateRequest();
716   -
717   - },
718   -
719   - _fieldsSelected : function(e){
720   -
721   - this.$.selected_fields_container.innerHTML = "";
722   - for(var i=0;i<e.detail.fields.length;i++) {
723   - this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
724   - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +
725   - '"></draggable-element-controllet><br>';
726   - }
727   -
728   - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];
729   -
730   - var table_params ={
731   - component : "datatable-datalet",
732   - params :{
733   - 'data-url' : this.dataUrl
734   - },
735   - fields : e.detail.fields,
736   - placeHolder : this.$.table_component_place_holder
737   - };
738   -
739   - ComponentService.deep_url = this.deepUrl;
740   - ComponentService.getComponent(table_params);
741   -
742   - },
743   -
744   - _fieldsMapped : function(e){
745   -
746   - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
747   - this.selected_fields = Array();
748   -
749   - for (var i = 0; i < input_mapped_fields.length; i++) {
750   - if (input_mapped_fields[i].value != "") {
751   - this.selected_fields.push(input_mapped_fields[i].value);
752   - }
753   - }
754   -
755   - var datalet_params ={
756   - component : this.selected_datalet,
757   - params :{
758   - 'data-url' : this.dataUrl
759   - },
760   - fields : this.selected_fields,
761   - placeHolder : this.$.datalet_placeholder
762   - };
763   -
764   - var datalet_finish_params ={
765   - component : this.selected_datalet,
766   - params :{
767   - 'data-url' : this.dataUrl
768   - },
769   - fields : this.selected_fields,
770   - placeHolder : this.$.datalet_created_placehorder
771   - };
772   -
773   - ComponentService.deep_url = this.deepUrl;
774   -
775   - ComponentService.getComponent(datalet_params);
776   - ComponentService.getComponent(datalet_finish_params);
777   -
778   - },
779   -
780   - _handleDatasourceDragOver : function(e){
781   - this.$.data_url.value = "";
782   - },
783   -
784   - _onFinish : function(e){
785   -
786   - var data = {
787   - dataUrl : this.dataUrl,
788   - fields : this.selected_fields,
789   - datalet : this.selected_datalet
790   - }
791   -
792   - this.fire('data-sevc-controllet.dataletCreated', {data : data});
793   -
794   - }
795   -
796   - });
797   -
798   - </script>
799   -
800   -</dom-module>
801 0 \ No newline at end of file
controllets/data-sevc-controllet/data-sevc-controllet__.html deleted
View file @dbc787c
1   -<link rel="import" href="../../bower_components/polymer/polymer.html">
2   -<link rel="import" href="../../bower_components/paper-styles/color.html">
3   -
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/iron-ajax/iron-ajax.html">
9   -<link rel="import" href="../../bower_components/paper-input/paper-input.html">
10   -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
11   -<link rel="import" href="../../bower_components/paper-button/paper-button.html">
12   -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
13   -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
14   -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
15   -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
16   -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
17   -<link rel="import" href="../../bower_components/paper-item/paper-item.html">
18   -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
19   -
20   -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
21   -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
22   -<link rel="import" href="../treeview-controllet/treeview-controllet.html">
23   -
24   -
25   -<dom-module id="data-sevc-controllet">
26   - <template>
27   - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
28   -
29   - <style is="custom-style">
30   - body {
31   - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
32   - font-size: 1em;
33   - margin: 0;
34   - padding: 1.5em;
35   - -webkit-tap-highlight-color: rgba(0,0,0,0);
36   - -webkit-touch-callout: none;
37   - overflow: hidden;
38   - }
39   -
40   - #pages{
41   - }
42   -
43   - .flexchild {
44   - @apply(--layout-flex);
45   - }
46   - .flex2child {
47   - @apply(--layout-flex-2);
48   - }
49   - .flex3child {
50   - @apply(--layout-flex-3);
51   - }
52   -
53   - .fields-card-content {
54   - padding-left: 1.5em;
55   - }
56   -
57   - .fancy .fields-title {
58   - /*position: absolute;
59   - top: 30px;
60   - left: 100px;
61   - display: inline-block;*/
62   - /*color: var(--paper-indigo-500);*/
63   - }
64   -
65   - .fancy-content {
66   - /*padding: 25px;*/
67   - }
68   -
69   - .avatar {
70   - display: inline-block;
71   - height: 2em;
72   - width: 2em;
73   - border-radius: 50%;
74   - /*background: var(--paper-pink-500);*/
75   - background: var(--paper-blue-500);
76   - color: white;
77   - line-height: 2em;
78   - font-size: 1.87em;
79   - text-align: center;
80   - }
81   -
82   -
83   - .title
84   - {
85   - position: relative;
86   - top: 0.60vh;
87   - margin-left: 20px;
88   - }
89   -
90   - .fancy {
91   - /*position: absolute;
92   - top: 30px;
93   - left: 100px;*/
94   - display: inline-block;
95   - position: relative;
96   - top: .75em;
97   - left: .625em;
98   - color: var(--paper-indigo-500);
99   - }
100   -
101   - .big {
102   - font-size: 1.37em;
103   - color: var(--google-grey-500);
104   - }
105   -
106   - .medium {
107   - font-size: 1em;
108   - padding-bottom: 0.5em;
109   - color : #000000;
110   - font-weight: bold;
111   - }
112   -
113   - .small {
114   - font-size: 0.8em;
115   - padding-top: 10px;
116   - color: var(--paper-blue-500);
117   - font-weight: bold;
118   - }
119   -
120   - paper-input {
121   - width: 80%;
122   - }
123   -
124   - paper-dropdown-menu {
125   - text-align: left;
126   - margin: auto;
127   - width: 100%;
128   - }
129   -
130   - :host ::content paper-menu-button{
131   - display: block;
132   - width: 100%;
133   - }
134   -
135   - #visualization_slider_area{
136   - position:relative;
137   - float:left;
138   - height: 22vh;
139   - /*width: 50%;*/
140   - min-width: 670px;
141   - min-height: 180px;
142   - }
143   -
144   - #datalet_area{
145   - /*position:relative;
146   - height: 30em;
147   - width: 46%;
148   - min-height: 500px;
149   - min-width: 600px;
150   - float: right;*/
151   - }
152   -
153   - #fields_mapping_area{
154   - position:relative;
155   - height: auto;/*70%;*/
156   - /*width: 50%;*/
157   - float:left;
158   - min-width: 670px;
159   - }
160   -
161   - #visualization_customization_area{
162   - position:relative;
163   - /*height:auto;*/
164   - width: 46%;
165   - float:right;
166   - background-color: white;
167   - }
168   -
169   - .field-mapping-card{
170   - width: 50%;
171   - /*height: 50vh;*/
172   - overflow: auto;
173   - position: relative;
174   - float: left;
175   - }
176   -
177   - .horizontal-section-container .vertical-section {
178   - /*max-width: 130px;*/
179   - diplay:block;
180   - float: left;
181   - }
182   -
183   -
184   - .colorful {
185   - background: #4285f4;
186   - color: #fff;
187   - }
188   -
189   - .toolbar_button{
190   - --iron-icon-height: 32px;
191   - --iron-icon-width: 32px;
192   - }
193   -
194   - /*paper-iron-button.toolbar_button{
195   - height: 34px;
196   - width: 34px;
197   - }*/
198   -
199   - .toolbar-center{
200   - display: inline-block;
201   - position: relative;
202   - float: left;
203   - width: 90%;
204   - }
205   -
206   - .toolbar{
207   - width: 100%;
208   - height : 8em;
209   - vertical-align: middle;
210   - min-width: 975px;
211   - }
212   -
213   -
214   -
215   - #datalet_created_idm_fields_container{
216   - position: relative;
217   - float: left;
218   - width: 100%;
219   - height: 50vh;
220   - overflow: auto;
221   - }
222   -
223   - #finish{
224   - position: relative;
225   - float: left;
226   - width: 100%;
227   - height : 20%;
228   - align-content: center;
229   - }
230   -
231   - #datalet_created_placehorder {
232   - width: 100%;
233   - }
234   -
235   - #finish_button{
236   - float: left;
237   - margin-top: 2em;
238   - --iron-icon-height: 64px;
239   - --iron-icon-width: 64px;
240   - color: var(--paper-blue-500);
241   - }
242   -
243   - #finish_button:hover{
244   - --iron-icon : "add-circle-outline"
245   - }
246   -
247   - /* #finish_button iron-icon:hover{
248   - icon : "add-circle";
249   - }
250   -
251   - #finish_button iron-icon{
252   - height: 4vh;
253   - width: 4vw;
254   - }*/
255   -
256   - .area_container{
257   - margin : 0.8em;
258   - padding : 0.8em;
259   - border-width: 1em;
260   - border-radius: 0.125rem;
261   - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);
262   - }
263   -
264   - #fields_placeholder{
265   - width: 40%;
266   - height: 50vh;
267   - position: relative;
268   - float: left;
269   - overflow: auto;
270   - }
271   -
272   - #table_fields_container{
273   - height: 50vh;
274   - width: 55%;
275   - /*max-width: 100vw;
276   - max-height: 50vh;*/
277   - position: relative;
278   - float: left;
279   - overflow: auto;
280   - }
281   -
282   - paper-tabs, paper-toolbar {
283   - background-color: var(--paper-blue-500);
284   - color: #ffffff;
285   - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
286   - }
287   -
288   - paper-toolbar paper-tabs {
289   - box-shadow: none;
290   - --paper-tabs-selection-bar-color : var(--google-gray-500);
291   - }
292   -
293   - paper-tabs[noink][no-bar] paper-tab.iron-selected {
294   - background-color: var(--google-gray-500);
295   - }
296   -
297   - paper-tabs[align-bottom] {
298   - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
299   - }
300   -
301   - </style>
302   -
303   - <iron-ajax
304   - auto
305   - id="data_request"
306   - url={{dataUrl}}
307   - verbose="true"
308   - on-response="handleResponseData"
309   - debounce-duration="300">
310   - </iron-ajax>
311   -
312   - <iron-ajax
313   - id="datales_list_request"
314   - auto
315   - url={{dataletsListUrl}}
316   - handle-as="json"
317   - on-response="handleResponseDatalets"
318   - debounce-duration="300">
319   - </iron-ajax>
320   -
321   - <iron-ajax
322   - id="selected_datalet_request"
323   - url={{deepUrl}}
324   - verbose="true"
325   - on-response="handleSelectedDatalet"
326   - debounce-duration="300">
327   - </iron-ajax>
328   -
329   - <content>
330   -
331   - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
332   -
333   - <neon-animatable>
334   -
335   - <div class="vertical justified layout">
336   -
337   - <div class="horizontal layout">
338   - <div class="avatar" style="margin-left:15px">1</div>
339   - <div class="title flex">
340   - <div id="toolbar_title" class="big">Dataset source</div>
341   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
342   - </div>
343   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
344   - </div>
345   -
346   - <div class="area_container">
347   - <paper-tabs selected="{{DatasourceTabSelected}}">
348   - <paper-tab>Select data source</paper-tab>
349   - <paper-tab>Most popular</paper-tab>
350   - <paper-tab>Search</paper-tab>
351   - </paper-tabs>
352   - <iron-pages selected="{{DatasourceTabSelected}}">
353   - <div>
354   - <div class="card-content">
355   - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
356   - </div>
357   -
358   - <div class="card-content">
359   - <paper-dropdown-menu id="datasets-sources" label="Available datasets">
360   - <paper-menu class="dropdown-content">
361   - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
362   - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item>
363   - </template>
364   - </paper-menu>
365   - </paper-dropdown-menu>
366   - </div>
367   -
368   - </div>
369   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
370   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
371   - </iron-pages>
372   - </div>
373   -
374   - </div>
375   -
376   - </neon-animatable>
377   -
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">Copy and paste/drag and drop in the textarea the url of datasource</div>
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>
391   -
392   - <div class="horizontal layout">
393   -
394   - <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
395   - <treeview-controllet id="fields_treeview"></treeview-controllet>
396   - </div>
397   -
398   - <div id="table_fields_container" class="area_container flex2child">
399   - <div id="table_component_place_holder"></div>
400   - </div>
401   -
402   - </div>
403   -
404   - </div>
405   -
406   - </neon-animatable>
407   -
408   - <neon-animatable>
409   -
410   - <div class="vertical justified layout">
411   -
412   - <div class="horizontal layout">
413   - <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>
414   - <div class="avatar">3</div>
415   - <div class="title flex">
416   - <div id="toolbar_title" class="big">Data mapping</div>
417   - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>
418   - </div>
419   - </div>
420   -
421   -
422   - <div class="horizontal layout">
423   -
424   - <div class="flex">
425   - <!--
426   - <paper-material style="margin:10px 10px 10px 0">CONTENT 1</paper-material>
427   - <paper-material style="margin:10px 10px 10px 0">CONTENT 2</paper-material>
428   - -->
429   - <div id="visualization_slider_area" class="area_container"></div>
430   - <div id="fields_mapping_area" class="area_container">
431   -
432   - <div id="selected_fields_main_container" class="field-mapping-card">
433   - <div class="title">
434   - <div class="medium">Selected fields</div>
435   - </div>
436   - <div id="selected_fields_container" class="area_container"></div>
437   - </div>
438   -
439   - <div id="idm_fields_main_container" class="field-mapping-card">
440   - <div class="title">
441   - <div class="medium">Datalet fields</div>
442   - </div>
443   - <div id="datalet_idm_fields_container" class="area_container"></div>
444   - </div>
445   - </div>
446   - </div>
447   -
448   - <div class="flex">
449   - <!--<paper-material style="margin:10px 10px 10px 0">CONTENT 3</paper-material>-->
450   - <div id="datalet_placeholder"></div>
451   - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
452   - </div>
453   -
454   - </div>
455   -
456   - </div>
457   -
458   - </neon-animatable>
459   -
460   - </neon-animated-pages>
461   -
462   - <paper-toast id="message" text=""></paper-toast>
463   -
464   - </content>
465   - </template>
466   -
467   - <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
468   - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
469   - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
470   -
471   - <script>
472   -
473   - var datasetsPrato = {
474   - names:[
475   - 'Consuntivo entrate 2009',
476   - 'Consuntivo entrate 2010',
477   - 'Consuntivo entrate 2011',
478   - 'Consuntivo entrate 2012',
479   - 'Consuntivo entrate 2014'
480   - ],
481   - urls: [
482   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f&limit=10000',
483   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda&limit=10000',
484   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89&limit=10000',
485   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee&limit=10000',
486   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a&limit=10000'
487   - ]
488   - }
489   -
490   - var datasetsGroeningen = {
491   - names:[
492   - 'Vestigingen register gemeente Groningen',
493   - 'Woonruimte gemeente Groningen'
494   - ],
495   - urls: [
496   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd&limit=10000',
497   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f&limit=10000'
498   - ]
499   - }
500   -
501   - var datasetsDublin = {
502   - names:[
503   - 'SDCC Traffic Cameras',
504   - 'Derelict Site Register',
505   - 'Dublin City Council Commencement Notices',
506   - 'Dublin City Council Planning Applications',
507   - 'Dun Laoghaire-Rathdown County Council Planning Application 2008-2014',
508   - 'Fingal Council Planning Applications for last 7 years',
509   - 'Planning Register',
510   - 'Fingal Development Plan 2011-2017 Record of Protected Structures'
511   - ],
512   - urls: [
513   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=10000',
514   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc&limit=10000',
515   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075&limit=10000',
516   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e&limit=10000',
517   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff&limit=10000',
518   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441&limit=10000',
519   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d&limit=10000',
520   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6&limit=10000',
521   - ]
522   - }
523   -
524   - var AvailableDatasets = [datasetsPrato, datasetsGroeningen, datasetsDublin]
525   -
526   -
527   - Polymer({
528   -
529   - is : 'data-sevc-controllet',
530   -
531   - listeners : {
532   - 'items-slider-controllet_item-selected' : '_dataletSelected',
533   - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
534   - 'treeview-controllet-fileds-selected' : '_fieldsSelected'
535   - },
536   -
537   - properties : {
538   -
539   - entryAnimation : {
540   - type : String,
541   - value : ""
542   - },
543   -
544   - exitAnimation : {
545   - type : String,
546   - value : ""
547   - },
548   -
549   - selected : {
550   - type : Number,
551   - value : 0
552   - },
553   -
554   - /**
555   - * It represent the data url from CKAN api
556   - *
557   - * @attribute dataUrl
558   - * @type string
559   - * @default 'null'
560   - */
561   - dataUrl : {
562   - type : String,
563   - value : "",/*"http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",*/
564   - observer : '_dataUrlChanged'
565   - },
566   - /**
567   - * It represent the DEEP url to get information about the datalets
568   - *
569   - * @attribute deepUrl
570   - * @type string
571   - * @default 'null'
572   - */
573   - deepUrl : {
574   - type : String,
575   - value : ""
576   - },
577   -
578   - organization : {
579   - type : Number,
580   - value : 2
581   - },
582   -
583   - datalet_query : {
584   - type : String,
585   - value : ""
586   - },
587   -
588   - datalets_list : {
589   - type : Array ,
590   - value : []
591   - },
592   -
593   - selected_datalet : {
594   - type : String,
595   - value : ""
596   - },
597   -
598   - selected_fields : {
599   - type : Array,
600   - value : []
601   - },
602   -
603   - DatasourceTabSelected : {
604   - type : Number,
605   - value : 0
606   - },
607   -
608   - datasets :
609   - {
610   - type : Array,
611   - value : AvailableDatasets[0].names
612   - },
613   -
614   - datasets_urls :
615   - {
616   - type : Array,
617   - value :AvailableDatasets[0].urls
618   - }
619   -
620   - },
621   -
622   - ready : function(){
623   -
624   - this.datasets = AvailableDatasets[this.organization].names;
625   - this.datasets_urls = AvailableDatasets[this.organization].urls;
626   -
627   - $(this.$.fields_placeholder).perfectScrollbar();
628   - $(this.$.selected_fields_main_container).perfectScrollbar();
629   - $(this.$.idm_fields_main_container).perfectScrollbar();
630   - $(this.$.table_fields_container).perfectScrollbar();
631   -
632   - },
633   -
634   - /**
635   - * Callback to parse the data requested when dataUrl change its value
636   - *
637   - * @method handleResponseData
638   - */
639   - handleResponseData : function(e){
640   -
641   - this.$.fields_treeview.init(e.detail.response);
642   -
643   - var table_params ={
644   - component : "datatable-datalet",
645   - params :{
646   - 'data-url' : this.dataUrl
647   - },
648   - fields : [],
649   - placeHolder : (navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]]
650   - };
651   -
652   - ComponentService.deep_url = this.deepUrl;
653   - ComponentService.getComponent(table_params);
654   -
655   - },
656   -
657   - /**
658   - * Callback to parse the components response object
659   - *
660   - * @method handleResponseDatalets
661   - */
662   - handleResponseDatalets : function(e){
663   - this.datalets_list = new Array();
664   - for(var i=0;i < e.detail.response.length;i++){
665   - var datalet_info = { name : e.detail.response[i].name ,
666   - image : e.detail.response[i].url + e.detail.response[i].name + ".png"
667   - };
668   -
669   - this.datalets_list.push(datalet_info);
670   - }
671   -
672   - /*var w = $(this.$.visualization_slider_area).width();
673   - var pages = 2;
674   - var numItemsPerPage = 3;*/
675   -
676   - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
677   - '\'></items-slider-controllet>';
678   - },
679   -
680   - handleSelectedDatalet : function(e){
681   -
682   - var response = e.detail.response;
683   - //<draggable-element-controllet is-target="true" heading="Field 1" description="This fields is used for ..." number="1"></draggable-element-controllet>
684   - this.$.datalet_idm_fields_container.innerHTML = "";
685   -
686   - if(response.idm.inputs.input.constructor == Object) {
687   - var input = response.idm.inputs.input;
688   - if(input.selection == "*") {
689   - var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet');
690   - for (var j = 0; j < input_selected_fields.length; j++) {
691   - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (j + 1) + '"></draggable-element-controllet><br>';
692   - }
693   - }
694   - }else{
695   - for(var i =0; i < response.idm.inputs.input.length; i++){
696   - var input = response.idm.inputs.input[i];
697   - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';
698   - }
699   - }
700   -
701   - },
702   -
703   - assignToolbar : function(){
704   - this.$.toolbar_number.innerHTML = (this.selected + 1);
705   - switch(this.selected){
706   - case 0:
707   - this.$.toolbar_title.innerHTML = "Dataset source";
708   - this.$.toolbar_description.innerHTML = "Copy and paste/drag and drop in the textarea the url of datasource";
709   - break;
710   - case 1:
711   - this.$.toolbar_title.innerHTML = "Data fields selection";
712   - this.$.toolbar_description.innerHTML = "Select the fields you want to visualize";
713   - break;
714   - case 2:
715   - this.$.toolbar_title.innerHTML = "Data mapping";
716   - this.$.toolbar_description.innerHTML = "Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need";
717   - break;
718   - case 3:
719   - this.$.toolbar_title.innerHTML = "Finish";
720   - this.$.toolbar_description.innerHTML = "Confirms the creation of the datalet";
721   -
722   - break;
723   - }
724   - },
725   -
726   - validateCurrentPass : function(next_selected_pass){
727   -
728   - switch(next_selected_pass){
729   - case 0:
730   - return true;
731   - case 1:
732   - if(this.$.data_url.value == ""){
733   - this.$.message.text = "You have to select a dataset to access to pass 2.";
734   - this.$.message.show();
735   - return false;
736   - }else{
737   - return true;
738   - }
739   -
740   - case 2:
741   - if(Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet') == 0){
742   - this.$.message.text = "You have to select a set of fields to access to pass 3.";
743   - this.$.message.show();
744   - return false;
745   - }else{
746   - return true;
747   - }
748   - }
749   -
750   - },
751   -
752   - _onPrevClick : function() {
753   - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;
754   -
755   - this.entryAnimation = 'slide-from-left-animation';
756   - this.exitAnimation = 'slide-right-animation';
757   - this.selected = this.selected === 0 ? 0 : (this.selected - 1);
758   - //this.assignToolbar();
759   - },
760   -
761   - _onNextClick : function() {
762   -
763   - if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return;
764   -
765   - this.entryAnimation = 'slide-from-right-animation';
766   - this.exitAnimation = 'slide-left-animation';
767   - this.selected = this.selected === 2 ? 2 : (this.selected + 1);
768   - //this.assignToolbar();
769   - },
770   -
771   - _datasourceSelected : function(e){
772   - if(Object.getPrototypeOf(e) !== CustomEvent.prototype) {
773   - e = e[Object.keys(e)[0]];
774   - }
775   -
776   - this.$.data_url.value = this.datasets_urls[parseInt(e.target.id)];
777   - },
778   -
779   - _dataUrlChanged : function(newValue, oldValue){
780   - this.$.data_request.generateRequest();
781   - },
782   -
783   - _dataletSelected : function(e){
784   - this.selected_datalet = e.detail.datalet;
785   - this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet;
786   - this.$.selected_datalet_request.generateRequest();
787   -
788   - },
789   -
790   - _fieldsSelected : function(e){
791   -
792   - this.$.selected_fields_container.innerHTML = "";
793   - for(var i=0;i<e.detail.fields.length;i++) {
794   - this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
795   - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +
796   - '"></draggable-element-controllet><br>';
797   - }
798   -
799   - //var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];
800   -
801   - var table_params ={
802   - component : "datatable-datalet",
803   - params :{
804   - 'data-url' : this.dataUrl
805   - },
806   - fields : e.detail.fields,
807   - placeHolder : this.$.table_component_place_holder
808   - };
809   -
810   - ComponentService.deep_url = this.deepUrl;
811   - ComponentService.getComponent(table_params);
812   -
813   - },
814   -
815   - _fieldsMapped : function(e){
816   -
817   - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
818   - this.selected_fields = Array();
819   -
820   - for (var i = 0; i < input_mapped_fields.length; i++) {
821   - if (input_mapped_fields[i].value != "") {
822   - this.selected_fields.push(input_mapped_fields[i].value);
823   - }
824   - }
825   -
826   - var datalet_params ={
827   - component : this.selected_datalet,
828   - params :{
829   - 'data-url' : this.dataUrl
830   - },
831   - fields : this.selected_fields,
832   - placeHolder : this.$.datalet_placeholder
833   - };
834   -
835   - var datalet_finish_params ={
836   - component : this.selected_datalet,
837   - params :{
838   - 'data-url' : this.dataUrl
839   - },
840   - fields : this.selected_fields,
841   - placeHolder : this.$.datalet_created_placehorder
842   - };
843   -
844   - ComponentService.deep_url = this.deepUrl;
845   -
846   - ComponentService.getComponent(datalet_params);
847   - ComponentService.getComponent(datalet_finish_params);
848   -
849   - },
850   -
851   - _handleDatasourceDragOver : function(e){
852   - this.$.data_url.value = "";
853   - },
854   -
855   - _onFinish : function(e){
856   -
857   - var data = {
858   - dataUrl : this.dataUrl,
859   - fields : this.selected_fields,
860   - datalet : this.selected_datalet
861   - }
862   -
863   - this.fire('data-sevc-controllet.dataletCreated', {data : data});
864   -
865   - }
866   -
867   - });
868   -
869   - </script>
870   -
871   -</dom-module>
872 0 \ No newline at end of file
controllets/data-sevc-controllet/data-sevc-controllet_backup.html deleted
View file @dbc787c
1   -<link rel="import" href="../../bower_components/polymer/polymer.html">
2   -<link rel="import" href="../../bower_components/paper-styles/color.html">
3   -
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/iron-ajax/iron-ajax.html">
9   -<link rel="import" href="../../bower_components/paper-input/paper-input.html">
10   -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
11   -<link rel="import" href="../../bower_components/paper-button/paper-button.html">
12   -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
13   -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
14   -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
15   -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
16   -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
17   -<link rel="import" href="../../bower_components/paper-item/paper-item.html">
18   -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
19   -
20   -
21   -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
22   -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
23   -<link rel="import" href="../treeview-controllet/treeview-controllet.html">
24   -
25   -
26   -<dom-module id="data-sevc-controllet">
27   - <template>
28   - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
29   -
30   - <style is="custom-style">
31   - /* body
32   - {
33   - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
34   - font-size: 1em;
35   - margin: 0;
36   - padding: 1.5em;
37   - -webkit-tap-highlight-color: rgba(0,0,0,0);
38   - -webkit-touch-callout: none;
39   - overflow: hidden;
40   - }*/
41   -
42   - .flexchild
43   - {
44   - @apply(--layout-flex);
45   - }
46   -
47   - .flex2child
48   - {
49   - @apply(--layout-flex-2);
50   - }
51   -
52   - .avatar
53   - {
54   - display: inline-block;
55   - height: 2em;
56   - width: 2em;
57   - border-radius: 50%;
58   - background: var(--paper-blue-500);
59   - color: white;
60   - line-height: 2em;
61   - font-size: 1.87em;
62   - text-align: center;
63   - }
64   -
65   - .title
66   - {
67   - position: relative;
68   - top: 0.60vh;
69   - margin-left: 20px;
70   - }
71   -
72   - .big
73   - {
74   - font-size: 1.37em;
75   - color: var(--google-grey-500);
76   - }
77   -
78   - .medium
79   - {
80   - font-size: 1em;
81   - padding-bottom: 0.5em;
82   - color : #000000;
83   - font-weight: bold;
84   - }
85   -
86   - .small
87   - {
88   - font-size: 0.8em;
89   - padding-top: 10px;
90   - color: var(--paper-blue-500);
91   - font-weight: bold;
92   - }
93   -
94   - paper-input
95   - {
96   - width: 80%;
97   - }
98   -
99   - paper-dropdown-menu
100   - {
101   - text-align: left;
102   - margin: auto;
103   - width: 100%;
104   - }
105   -
106   - :host ::content paper-menu-button
107   - {
108   - display: block;
109   - width: 100%;
110   - }
111   -
112   - #visualization_slider_area
113   - {
114   - min-width: 670px;
115   - min-height: 180px;
116   - }
117   -
118   - #fields_mapping_area
119   - {
120   - min-width: 670px;
121   - min-height: 180px;
122   - }
123   -
124   - #datalet_placeholder
125   - {
126   - height: 360px;
127   - min-height: 360px;
128   -
129   - }
130   -
131   - .datalet_right_container
132   - {
133   - width: 100vh;
134   - }
135   -
136   - .field-mapping-card
137   - {
138   - width: 50%;
139   - float: left;
140   - }
141   -
142   - .toolbar_button
143   - {
144   - --iron-icon-height: 32px;
145   - --iron-icon-width: 32px;
146   - }
147   -
148   - #finish_button
149   - {
150   - --iron-icon-height: 32px;
151   - --iron-icon-width: 32px;
152   - color: var(--paper-blue-500);
153   - }
154   -
155   - .area_container
156   - {
157   - overflow: hidden;
158   - margin : 0.8em;
159   - padding : 0.8em;
160   - border-width: 1em;
161   - border-radius: 0.125rem;
162   - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);
163   - }
164   -
165   - #fields_placeholder{
166   - width: 40%;
167   - height: 50vh;
168   - position: relative;
169   - float: left;
170   - overflow: auto;
171   - }
172   -
173   - #table_fields_container{
174   - height: 50vh;
175   - width: 55%;
176   - position: relative;
177   - float: left;
178   - overflow: auto;
179   - }
180   -
181   - paper-tabs, paper-toolbar
182   - {
183   - background-color: var(--paper-blue-500);
184   - color: #ffffff;
185   - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
186   - }
187   -
188   - paper-toolbar paper-tabs
189   - {
190   - box-shadow: none;
191   - --paper-tabs-selection-bar-color : var(--google-gray-500);
192   - }
193   -
194   - paper-tabs[noink][no-bar] paper-tab.iron-selected
195   - {
196   - background-color: var(--google-gray-500);
197   - }
198   -
199   - paper-tabs[align-bottom]
200   - {
201   - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
202   - }
203   -
204   - #idm_fields_main_container{
205   - position: relative;
206   - height: 50vh;
207   - }
208   -
209   - #selected_fields_main_container{
210   - position: relative;
211   - height: 50vh;
212   - }
213   -
214   - paper-menu{
215   - width: 100%;
216   - }
217   -
218   - </style>
219   -
220   - <iron-ajax
221   - auto
222   - id="data_request"
223   - url={{dataUrl}}
224   - verbose="true"
225   - on-response="handleResponseData"
226   - debounce-duration="300">
227   - </iron-ajax>
228   -
229   - <iron-ajax
230   - id="datales_list_request"
231   - auto
232   - url={{dataletsListUrl}}
233   - handle-as="json"
234   - on-response="handleResponseDatalets"
235   - debounce-duration="300">
236   - </iron-ajax>
237   -
238   - <iron-ajax
239   - id="selected_datalet_request"
240   - url={{deepUrl}}
241   - verbose="true"
242   - on-response="handleSelectedDatalet"
243   - debounce-duration="300">
244   - </iron-ajax>
245   -
246   - <content>
247   -
248   - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
249   -
250   - <neon-animatable>
251   -
252   - <div class="vertical justified layout">
253   -
254   - <div class="horizontal layout">
255   - <div class="avatar" style="margin-left:15px">1</div>
256   - <div class="title flex">
257   - <div id="toolbar_title" class="big">Dataset source</div>
258   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
259   - </div>
260   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
261   - </div>
262   -
263   - <div class="area_container">
264   - <paper-tabs selected="{{DatasourceTabSelected}}">
265   - <paper-tab>Select data source</paper-tab>
266   - <paper-tab>Most popular</paper-tab>
267   - <paper-tab>Search</paper-tab>
268   - </paper-tabs>
269   - <iron-pages selected="{{DatasourceTabSelected}}">
270   - <div>
271   - <div class="card-content">
272   - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
273   - </div>
274   -
275   - <div class="card-content">
276   - <paper-dropdown-menu id="datasets-sources" label="Available datasets">
277   - <paper-menu class="dropdown-content">
278   - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
279   - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item>
280   - </template>
281   - </paper-menu>
282   - </paper-dropdown-menu>
283   - </div>
284   -
285   - </div>
286   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
287   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
288   - </iron-pages>
289   - </div>
290   -
291   - </div>
292   -
293   - </neon-animatable>
294   -
295   - <neon-animatable>
296   -
297   - <div class="vertical justified layout">
298   -
299   - <div class="horizontal layout">
300   - <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>
301   - <div class="avatar">2</div>
302   - <div class="title flex">
303   - <div id="toolbar_title" class="big">Dataset source</div>
304   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
305   - </div>
306   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
307   - </div>
308   -
309   - <div class="horizontal layout">
310   -
311   - <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
312   - <treeview-controllet id="fields_treeview"></treeview-controllet>
313   - </div>
314   -
315   - <div id="table_fields_container" class="area_container flex2child">
316   - <div id="table_component_place_holder"></div>
317   - </div>
318   -
319   - </div>
320   -
321   - </div>
322   -
323   - </neon-animatable>
324   -
325   - <neon-animatable style="height:100vh">
326   -
327   - <div class="vertical justified layout">
328   -
329   - <div class="horizontal layout">
330   - <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>
331   - <div class="avatar">3</div>
332   - <div class="title flex">
333   - <div id="toolbar_title" class="big">Data mapping</div>
334   - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>
335   - </div>
336   - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
337   - </div>
338   -
339   -
340   - <div class="horizontal layout">
341   -
342   - <div class="">
343   - <div id="visualization_slider_area" class="area_container"></div>
344   - <div id="fields_mapping_area" class="area_container">
345   -
346   - <div id="selected_fields_main_container" class="field-mapping-card">
347   - <div class="title">
348   - <div class="medium">Selected fields</div>
349   - </div>
350   - <div id="selected_fields_container" class="area_container"></div>
351   - </div>
352   -
353   - <div id="idm_fields_main_container" class="field-mapping-card">
354   - <div class="title">
355   - <div class="medium">Datalet fields</div>
356   - </div>
357   - <div id="datalet_idm_fields_container" class="area_container"></div>
358   - </div>
359   - </div>
360   - </div>
361   -
362   - <div class="datalet_right_container">
363   - <div class="vertical justified layout">
364   - <div id="datalet_placeholder" class=""></div>
365   - </div>
366   - </div>
367   -
368   - </div>
369   -
370   - </div>
371   -
372   - </neon-animatable>
373   -
374   - </neon-animated-pages>
375   -
376   - <paper-toast id="message" text=""></paper-toast>
377   -
378   - </content>
379   - </template>
380   -
381   - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
382   - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
383   -
384   - <script>
385   -
386   - var datasetsPrato = {
387   - names:[
388   - 'Consuntivo entrate 2009',
389   - 'Consuntivo entrate 2010',
390   - 'Consuntivo entrate 2011',
391   - 'Consuntivo entrate 2012',
392   - 'Consuntivo entrate 2014'
393   - ],
394   - urls: [
395   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f&limit=10000',
396   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda&limit=10000',
397   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89&limit=10000',
398   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee&limit=10000',
399   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a&limit=10000'
400   - ]
401   - }
402   -
403   - var datasetsGroeningen = {
404   - names:[
405   - 'Vestigingen register gemeente Groningen',
406   - 'Woonruimte gemeente Groningen'
407   - ],
408   - urls: [
409   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd&limit=10000',
410   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f&limit=10000'
411   - ]
412   - }
413   -
414   - var datasetsDublin = {
415   - names:[
416   - 'SDCC Traffic Cameras',
417   - 'Derelict Site Register',
418   - 'Dublin City Council Commencement Notices',
419   - 'Dublin City Council Planning Applications',
420   - 'Dun Laoghaire-Rathdown County Council Planning Application 2008-2014',
421   - 'Fingal Council Planning Applications for last 7 years',
422   - 'Planning Register',
423   - 'Fingal Development Plan 2011-2017 Record of Protected Structures'
424   - ],
425   - urls: [
426   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=10000',
427   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc&limit=10000',
428   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075&limit=10000',
429   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e&limit=10000',
430   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff&limit=10000',
431   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441&limit=10000',
432   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d&limit=10000',
433   - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6&limit=10000',
434   - ]
435   - }
436   -
437   - var AvailableDatasets = [datasetsPrato, datasetsGroeningen, datasetsDublin]
438   -
439   -
440   - Polymer({
441   -
442   - is : 'data-sevc-controllet',
443   -
444   - listeners : {
445   - 'items-slider-controllet_item-selected' : '_dataletSelected',
446   - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
447   - 'treeview-controllet-fileds-selected' : '_fieldsSelected'
448   - },
449   -
450   - properties : {
451   -
452   - entryAnimation : {
453   - type : String,
454   - value : ""
455   - },
456   -
457   - exitAnimation : {
458   - type : String,
459   - value : ""
460   - },
461   -
462   - selected : {
463   - type : Number,
464   - value : 0
465   - },
466   -
467   - /**
468   - * It represent the data url from CKAN api
469   - *
470   - * @attribute dataUrl
471   - * @type string
472   - * @default 'null'
473   - */
474   - dataUrl : {
475   - type : String,
476   - value : "",/*"http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",*/
477   - observer : '_dataUrlChanged'
478   - },
479   - /**
480   - * It represent the DEEP url to get information about the datalets
481   - *
482   - * @attribute deepUrl
483   - * @type string
484   - * @default 'null'
485   - */
486   - deepUrl : {
487   - type : String,
488   - value : ""
489   - },
490   -
491   - organization : {
492   - type : Number,
493   - value : 2
494   - },
495   -
496   - datalet_query : {
497   - type : String,
498   - value : ""
499   - },
500   -
501   - datalets_list : {
502   - type : Array ,
503   - value : []
504   - },
505   -
506   - selected_datalet : {
507   - type : String,
508   - value : ""
509   - },
510   -
511   - selected_fields : {
512   - type : Array,
513   - value : []
514   - },
515   -
516   - DatasourceTabSelected : {
517   - type : Number,
518   - value : 0
519   - },
520   -
521   - datasets :
522   - {
523   - type : Array,
524   - value : AvailableDatasets[0].names
525   - },
526   -
527   - datasets_urls :
528   - {
529   - type : Array,
530   - value :AvailableDatasets[0].urls
531   - }
532   -
533   - },
534   -
535   - ready : function(){
536   -
537   - this.datasets = AvailableDatasets[this.organization].names;
538   - this.datasets_urls = AvailableDatasets[this.organization].urls;
539   -
540   - $(this.$.fields_placeholder).perfectScrollbar();
541   - $(this.$.selected_fields_main_container).perfectScrollbar();
542   - $(this.$.idm_fields_main_container).perfectScrollbar();
543   - $(this.$.table_fields_container).perfectScrollbar();
544   -
545   - },
546   -
547   - /**
548   - * Callback to parse the data requested when dataUrl change its value
549   - *
550   - * @method handleResponseData
551   - */
552   - handleResponseData : function(e){
553   -
554   - this.$.fields_treeview.init(e.detail.response);
555   -
556   - /*var table_params ={
557   - component : "datatable-datalet",
558   - params :{
559   - 'data-url' : this.dataUrl
560   - },
561   - fields : [],
562   - placeHolder : (navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]]
563   - };
564   -
565   - ComponentService.deep_url = this.deepUrl;
566   - ComponentService.getComponent(table_params);*/
567   -
568   - },
569   -
570   - /**
571   - * Callback to parse the components response object
572   - *
573   - * @method handleResponseDatalets
574   - */
575   - handleResponseDatalets : function(e){
576   - this.datalets_list = new Array();
577   - for(var i=0;i < e.detail.response.length;i++){
578   - var datalet_info = { name : e.detail.response[i].name ,
579   - image : e.detail.response[i].url + e.detail.response[i].name + ".png"
580   - };
581   -
582   - this.datalets_list.push(datalet_info);
583   - }
584   -
585   - /*var w = $(this.$.visualization_slider_area).width();
586   - var pages = 2;
587   - var numItemsPerPage = 3;*/
588   -
589   - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
590   - '\'></items-slider-controllet>';
591   - },
592   -
593   - handleSelectedDatalet : function(e){
594   -
595   - var response = e.detail.response;
596   - //<draggable-element-controllet is-target="true" heading="Field 1" description="This fields is used for ..." number="1"></draggable-element-controllet>
597   - this.$.datalet_idm_fields_container.innerHTML = "";
598   -
599   - if(response.idm.inputs.input.constructor == Object) {
600   - var input = response.idm.inputs.input;
601   - if(input.selection == "*") {
602   - var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet');
603   - for (var j = 0; j < input_selected_fields.length; j++) {
604   - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (j + 1) + '"></draggable-element-controllet><br>';
605   - }
606   - }
607   - }else{
608   - for(var i =0; i < response.idm.inputs.input.length; i++){
609   - var input = response.idm.inputs.input[i];
610   - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';
611   - }
612   - }
613   -
614   - },
615   -
616   - assignToolbar : function(){
617   - this.$.toolbar_number.innerHTML = (this.selected + 1);
618   - switch(this.selected){
619   - case 0:
620   - this.$.toolbar_title.innerHTML = "Dataset source";
621   - this.$.toolbar_description.innerHTML = "Copy and paste/drag and drop in the textarea the url of datasource";
622   - break;
623   - case 1:
624   - this.$.toolbar_title.innerHTML = "Data fields selection";
625   - this.$.toolbar_description.innerHTML = "Select the fields you want to visualize";
626   - break;
627   - case 2:
628   - this.$.toolbar_title.innerHTML = "Data mapping";
629   - this.$.toolbar_description.innerHTML = "Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need";
630   - break;
631   - case 3:
632   - this.$.toolbar_title.innerHTML = "Finish";
633   - this.$.toolbar_description.innerHTML = "Confirms the creation of the datalet";
634   -
635   - break;
636   - }
637   - },
638   -
639   - validateCurrentPass : function(next_selected_pass){
640   -
641   - switch(next_selected_pass){
642   - case 0:
643   - return true;
644   - case 1:
645   - if(this.$.data_url.value == ""){
646   - this.$.message.text = "You have to select a dataset to access to pass 2.";
647   - this.$.message.show();
648   - return false;
649   - }else{
650   - return true;
651   - }
652   -
653   - case 2:
654   - if(Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet') == 0){
655   - this.$.message.text = "You have to select a set of fields to access to pass 3.";
656   - this.$.message.show();
657   - return false;
658   - }else{
659   - return true;
660   - }
661   - }
662   -
663   - },
664   -
665   - _onPrevClick : function() {
666   - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;
667   -
668   - this.entryAnimation = 'slide-from-left-animation';
669   - this.exitAnimation = 'slide-right-animation';
670   - this.selected = this.selected === 0 ? 0 : (this.selected - 1);
671   - //this.assignToolbar();
672   - },
673   -
674   - _onNextClick : function() {
675   -
676   - if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return;
677   -
678   - this.entryAnimation = 'slide-from-right-animation';
679   - this.exitAnimation = 'slide-left-animation';
680   - this.selected = this.selected === 2 ? 2 : (this.selected + 1);
681   - //this.assignToolbar();
682   - },
683   -
684   - _datasourceSelected : function(e){
685   - if(Object.getPrototypeOf(e) !== CustomEvent.prototype) {
686   - e = e[Object.keys(e)[0]];
687   - }
688   -
689   - this.$.data_url.value = this.datasets_urls[parseInt(e.target.id)];
690   - },
691   -
692   - _dataUrlChanged : function(newValue, oldValue){
693   - this.$.data_request.generateRequest();
694   - },
695   -
696   - _dataletSelected : function(e){
697   - this.selected_datalet = e.detail.datalet;
698   - this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet;
699   - this.$.selected_datalet_request.generateRequest();
700   -
701   - },
702   -
703   - _fieldsSelected : function(e){
704   -
705   - this.$.selected_fields_container.innerHTML = "";
706   - for(var i=0;i<e.detail.fields.length;i++) {
707   - this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
708   - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +
709   - '"></draggable-element-controllet><br>';
710   - }
711   -
712   - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];
713   -
714   - var table_params ={
715   - component : "datatable-datalet",
716   - params :{
717   - 'data-url' : this.dataUrl
718   - },
719   - fields : e.detail.fields,
720   - placeHolder : this.$.table_component_place_holder
721   - };
722   -
723   - ComponentService.deep_url = this.deepUrl;
724   - ComponentService.getComponent(table_params);
725   -
726   - },
727   -
728   - _fieldsMapped : function(e){
729   -
730   - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
731   - this.selected_fields = Array();
732   -
733   - for (var i = 0; i < input_mapped_fields.length; i++) {
734   - if (input_mapped_fields[i].value != "") {
735   - this.selected_fields.push(input_mapped_fields[i].value);
736   - }
737   - }
738   -
739   - var datalet_params ={
740   - component : this.selected_datalet,
741   - params :{
742   - 'data-url' : this.dataUrl
743   - },
744   - fields : this.selected_fields,
745   - placeHolder : this.$.datalet_placeholder
746   - };
747   -
748   - var datalet_finish_params ={
749   - component : this.selected_datalet,
750   - params :{
751   - 'data-url' : this.dataUrl
752   - },
753   - fields : this.selected_fields,
754   - placeHolder : this.$.datalet_created_placehorder
755   - };
756   -
757   - ComponentService.deep_url = this.deepUrl;
758   -
759   - ComponentService.getComponent(datalet_params);
760   - ComponentService.getComponent(datalet_finish_params);
761   -
762   - },
763   -
764   - _handleDatasourceDragOver : function(e){
765   - this.$.data_url.value = "";
766   - },
767   -
768   - _onFinish : function(e){
769   -
770   - var data = {
771   - dataUrl : this.dataUrl,
772   - fields : this.selected_fields,
773   - datalet : this.selected_datalet
774   - }
775   -
776   - this.fire('data-sevc-controllet.dataletCreated', {data : data});
777   -
778   - }
779   -
780   - });
781   -
782   - </script>
783   -
784   -</dom-module>
785 0 \ No newline at end of file
controllets/data-sevc-controllet/static/css/md_checkbox.css deleted
View file @dbc787c
1   -/*body {
2   - font-size: 16px;
3   -}
4   -
5   -.header {
6   - height: 8rem;
7   - background: #009688;
8   -}
9   -
10   -.content {
11   - width: 20rem;
12   - margin: -4rem auto 0 auto;
13   - padding: 1rem;
14   - background: #fff;
15   - border-radius: 0.125rem;
16   - box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);
17   -}
18   -*/
19   -
20   -/*
21   -<header class="header">
22   -
23   -</header>
24   -
25   -<section class="content">
26   - <ul class="list">
27   - <li class="list__item">
28   - <label class="label--checkbox">
29   - <input type="checkbox" class="checkbox" checked>
30   - Item 1
31   - </label>
32   - </li>
33   - <li class="list__item">
34   - <label class="label--checkbox">
35   - <input type="checkbox" class="checkbox">
36   - Item 2
37   - </label>
38   - </li>
39   - <li class="list__item">
40   - <label class="label--checkbox">
41   - <input type="checkbox" class="checkbox">
42   - Item 3
43   - </label>
44   - </li>
45   - <li class="list__item">
46   - <label class="label--checkbox">
47   - <input type="checkbox" class="checkbox">
48   - Item 4
49   - </label>
50   - </li>
51   - </ul>
52   -</section>
53   -
54   -<a href="http://www.twitter.com/sambego" target="_blank" class="button--round button--sticky">
55   - <i class="fa fa-twitter"></i>
56   -</a>
57   -*/
58   -ul ul, ol ul {
59   - /*list-style-type: circle;*/
60   -}
61   -user agent stylesheetul, menu, dir {
62   - /*display: block;
63   - list-style-type: disc;
64   - -webkit-margin-before: 1em;
65   - -webkit-margin-after: 1em;
66   - -webkit-margin-start: 0px;
67   - -webkit-margin-end: 0px;
68   - -webkit-padding-start: 40px;*/
69   -}
70   -
71   -.list {
72   - margin: .5rem;
73   -}
74   -
75   -.list__item {
76   - margin: 0 0 .5rem 0;
77   - padding: 0;
78   -}
79   -
80   -.label--checkbox {
81   - position: relative;
82   - margin: .5rem;
83   - font-family: Arial, sans-serif;
84   - line-height: 135%;
85   - cursor: pointer;
86   -}
87   -
88   -.checkbox {
89   - position: relative;
90   - top: -0.375rem;
91   - margin: 0 1rem 0 0;
92   - cursor: pointer;
93   -}
94   -.checkbox:before {
95   - -webkit-transition: all 0.3s ease-in-out;
96   - -moz-transition: all 0.3s ease-in-out;
97   - transition: all 0.3s ease-in-out;
98   - content: "";
99   - position: absolute;
100   - left: 0;
101   - z-index: 1;
102   - width: 1rem;
103   - height: 1rem;
104   - border: 2px solid #f2f2f2;
105   -}
106   -.checkbox:checked:before {
107   - -webkit-transform: rotate(-45deg);
108   - -moz-transform: rotate(-45deg);
109   - -ms-transform: rotate(-45deg);
110   - -o-transform: rotate(-45deg);
111   - transform: rotate(-45deg);
112   - height: .5rem;
113   - border-color: #009688;
114   - border-top-style: none;
115   - border-right-style: none;
116   -}
117   -.checkbox:after {
118   - content: "";
119   - position: absolute;
120   - top: -0.125rem;
121   - left: 0;
122   - width: 1.1rem;
123   - height: 1.1rem;
124   - background: #fff;
125   - cursor: pointer;
126   -}
127   -
128   -.button--round {
129   - -webkit-transition: 0.3s background ease-in-out;
130   - -moz-transition: 0.3s background ease-in-out;
131   - transition: 0.3s background ease-in-out;
132   - width: 2rem;
133   - height: 2rem;
134   - background: #5677fc;
135   - border-radius: 50%;
136   - box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);
137   - color: #fff;
138   - text-decoration: none;
139   - text-align: center;
140   -}
141   -.button--round i {
142   - font-size: 1rem;
143   - line-height: 220%;
144   - vertical-align: middle;
145   -}
146   -.button--round:hover {
147   - background: #3b50ce;
148   -}
149   -
150   -.button--sticky {
151   - position: fixed;
152   - right: 2rem;
153   - top: 16rem;
154   -}
155   -
156   -.content {
157   - -webkit-animation-duration: 0.4s;
158   - animation-duration: 0.4s;
159   - -webkit-animation-fill-mode: both;
160   - animation-fill-mode: both;
161   - -webkit-animation-name: slideUp;
162   - animation-name: slideUp;
163   - -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
164   - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
165   -}
166   -
167   -@-webkit-keyframes slideUp {
168   - 0% {
169   - -webkit-transform: translateY(6.25rem);
170   - transform: translateY(6.25rem);
171   - }
172   - 100% {
173   - -webkit-transform: translateY(0);
174   - transform: translateY(0);
175   - }
176   -}
177   -@keyframes slideUp {
178   - 0% {
179   - -webkit-transform: translateY(6.25rem);
180   - transform: translateY(6.25rem);
181   - }
182   - 100% {
183   - -webkit-transform: translateY(0);
184   - transform: translateY(0);
185   - }
186   -}
controllets/data-sevc-controllet/static/css/reset.css 0 → 100644
  View file @325c348
  1 +::content html {
  2 + color: #000;
  3 + background: #FFF;
  4 +}
  5 +
  6 +::content body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
  7 +h4, h5, h6, pre, code, form, fieldset, legend,
  8 +input, button, textarea, p, blockquote, th, td {
  9 + margin: 0;
  10 + padding: 0;
  11 +}
  12 +
  13 +::content table {
  14 + border-collapse: collapse;
  15 + border-spacing: 0;
  16 +}
  17 +
  18 +::content fieldset, img {
  19 + border: 0;
  20 +}
  21 +
  22 +::content address, caption, cite, code, dfn, em, strong,
  23 +th, var, optgroup {
  24 + font-style: inherit;
  25 + font-weight: inherit;
  26 +}
  27 +
  28 +::content del, ins {
  29 + text-decoration: none;
  30 +}
  31 +
  32 +::content li {
  33 + list-style: none;
  34 +}
  35 +
  36 +::content caption, th {
  37 + text-align: left;
  38 +}
  39 +
  40 +::content h1, h2, h3, h4, h5, h6 {
  41 + font-size: 100%;
  42 + font-weight: normal;
  43 +}
  44 +
  45 +::content q:before, q:after {
  46 + content: '';
  47 +}
  48 +
  49 +::content abbr, acronym {
  50 + border: 0;
  51 + font-variant: normal;
  52 +}
  53 +
  54 +::content sup {
  55 + vertical-align: baseline;
  56 +}
  57 +
  58 +::content sub {
  59 + vertical-align: baseline;
  60 +}
  61 +
  62 +/*because legend doesn't inherit in IE */
  63 +::content legend {
  64 + color: #000;
  65 +}
  66 +
  67 +::content input, button, textarea, select, optgroup, option {
  68 + font-family: inherit;
  69 + font-size: inherit;
  70 + font-style: inherit;
  71 + font-weight: inherit;
  72 +}
  73 +
  74 +/*@purpose To enable resizing for IE */
  75 +/*@branch For IE6-Win, IE7-Win */
  76 +::content input, button, textarea, select {
  77 + *font-size: 100%;
  78 +}
0 79 \ No newline at end of file
... ...
controllets/items-slider-controllet/chart.png deleted
View file @dbc787c

506 Bytes
controllets/items-slider-controllet/css/jquery.jscrollpane.css deleted
View file @dbc787c
1   -/*
2   - * CSS Styles that are needed by jScrollPane for it to operate correctly.
3   - *
4   - * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
5   - * may not operate correctly without them.
6   - */
7   -
8   -.jspContainer
9   -{
10   - overflow: hidden;
11   - position: relative;
12   -}
13   -
14   -.jspPane
15   -{
16   - position: absolute;
17   -}
18   -
19   -.jspVerticalBar
20   -{
21   - position: absolute;
22   - top: 0;
23   - right: 0;
24   - width: 10px;
25   - height: 100%;
26   - background: #fff;
27   -
28   -}
29   -
30   -.jspHorizontalBar
31   -{
32   - position: absolute;
33   - bottom: 0;
34   - left: 0;
35   - width: 100%;
36   - height: 10px;
37   - background: #fff;
38   -}
39   -
40   -.jspVerticalBar *,
41   -.jspHorizontalBar *
42   -{
43   - margin: 0;
44   - padding: 0;
45   -}
46   -
47   -.jspCap
48   -{
49   - display: none;
50   -}
51   -
52   -.jspHorizontalBar .jspCap
53   -{
54   - float: left;
55   -}
56   -
57   -.jspTrack
58   -{
59   - background: #fff;
60   - position: relative;
61   -}
62   -
63   -.jspDrag
64   -{
65   - background: #000;
66   - position: relative;
67   - top: 0;
68   - left: 0;
69   - cursor: pointer;
70   -}
71   -
72   -.jspHorizontalBar .jspTrack,
73   -.jspHorizontalBar .jspDrag
74   -{
75   - float: left;
76   - height: 100%;
77   -}
78   -
79   -.jspArrow
80   -{
81   - background: #50506d;
82   - text-indent: -20000px;
83   - display: block;
84   - cursor: pointer;
85   -}
86   -
87   -.jspArrow.jspDisabled
88   -{
89   - cursor: default;
90   - background: #80808d;
91   -}
92   -
93   -.jspVerticalBar .jspArrow
94   -{
95   - height: 10px;
96   -}
97   -
98   -.jspHorizontalBar .jspArrow
99   -{
100   - width: 10px;
101   - float: left;
102   - height: 100%;
103   -}
104   -
105   -.jspVerticalBar .jspArrow:focus
106   -{
107   - outline: none;
108   -}
109   -
110   -.jspCorner
111   -{
112   - background: #eeeef4;
113   - float: left;
114   - height: 100%;
115   -}
116   -
117   -/* Yuk! CSS Hack for IE6 3 pixel bug :( */
118   -* html .jspCorner
119   -{
120   - margin: 0 -3px 0 0;
121   -}
122 0 \ No newline at end of file
controllets/items-slider-controllet/css/style.css deleted
View file @dbc787c
1   -/* Circular Content Carousel Style */
2   -.ca-wrapper{
3   - width: 100%
4   -}
5   -
6   -.ca-container{
7   - position:relative;
8   - margin:25px auto 20px auto;
9   - /*width:990px;*/
10   - width:80%;
11   - height:150px;
12   -}
13   -.ca-wrapper{
14   - width:100%;
15   - height:100%;
16   - position:relative;
17   -}
18   -.ca-item{
19   - position:relative;
20   - float:left;
21   - width:150px;
22   - height:100%;
23   - text-align:center;
24   -}
25   -.ca-more{
26   - position: absolute;
27   - bottom: 10px;
28   - right:0px;
29   - padding:4px 15px;
30   - font-weight:bold;
31   - background: #ccbda2;
32   - text-align:center;
33   - color: white;
34   - font-family: "Georgia","Times New Roman",serif;
35   - font-style:italic;
36   - text-shadow:1px 1px 1px #897c63;
37   -}
38   -.ca-close{
39   - position:absolute;
40   - top:10px;
41   - right:10px;
42   - background:#fff url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/cross.png) no-repeat center center;
43   - width:27px;
44   - height:27px;
45   - text-indent:-9000px;
46   - outline:none;
47   - -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
48   - -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
49   - box-shadow:1px 1px 2px rgba(0,0,0,0.2);
50   - opacity:0.7;
51   -}
52   -.ca-close:hover{
53   - opacity:1.0;
54   -}
55   -.ca-item-main{
56   - padding:20px;
57   - position:absolute;
58   - top:5px;
59   - left:5px;
60   - right:5px;
61   - bottom:5px;
62   - background:#fff;
63   - overflow:hidden;
64   - -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
65   - -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
66   - box-shadow:1px 1px 2px rgba(0,0,0,0.2);
67   -}
68   -.ca-icon{
69   - width:233px;
70   - height:189px;
71   - position:relative;
72   - margin:0 auto;
73   - background:transparent url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal1.png) no-repeat center center;
74   -}
75   -.ca-item-2 .ca-icon{
76   - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal2.png);
77   -}
78   -.ca-item-3 .ca-icon{
79   - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal3.png);
80   -}
81   -.ca-item-4 .ca-icon{
82   - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal4.png);
83   -}
84   -.ca-item-5 .ca-icon{
85   - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal5.png);
86   -}
87   -.ca-item-6 .ca-icon{
88   - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal6.png);
89   -}
90   -.ca-item-7 .ca-icon{
91   - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal7.png);
92   -}
93   -.ca-item-8 .ca-icon{
94   - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal8.png);
95   -}
96   -.ca-item h3{
97   - font-family: 'Coustard', sans-serif;
98   - text-transform:uppercase;
99   - font-size:30px;
100   - color:#000;
101   - margin-bottom:20px;
102   - height:85px;
103   - text-align:center;
104   - text-shadow: 0px 1px 1px #e4ebe9;
105   -}
106   -.ca-item h4{
107   - font-family: "Georgia","Times New Roman",serif;
108   - font-style:italic;
109   - font-size:12px;
110   - text-align:left;
111   - border-left:10px solid #b0ccc6;
112   - padding-left:10px;
113   - line-height:24px;
114   - margin:10px;
115   - position:relative;
116   -}
117   -.ca-item h4 span{
118   - text-indent:40px;
119   - display:block;
120   -}
121   -.ca-item h4 span.ca-quote{
122   - color:#f4eee3;
123   - font-size:100px;
124   - position:absolute;
125   - top:20px;
126   - left:0px;
127   - text-indent:0px;
128   -}
129   -.ca-content-wrapper{
130   - background:#b0ccc6;
131   - position:absolute;
132   - width:0px; /* expands to width of the wrapper minus 1 element */
133   - height:440px;
134   - top:5px;
135   - text-align:left;
136   - z-index:10000;
137   - overflow:hidden;
138   -}
139   -.ca-content{
140   - width:660px;
141   - overflow:hidden;
142   -}
143   -.ca-content-text{
144   - font-size: 14px;
145   - font-style: italic;
146   - font-family: "Georgia","Times New Roman",serif;
147   - margin:10px 20px;
148   - padding:10px 20px;
149   - line-height:24px;
150   -}
151   -.ca-content-text p{
152   - padding-bottom:5px;
153   -}
154   -.ca-content h6{
155   - margin:25px 20px 0px 35px;
156   - font-size:32px;
157   - padding-bottom:5px;
158   - color:#000;
159   - font-family: 'Coustard', sans-serif;
160   - color:#60817a;
161   - border-bottom:2px solid #99bcb4;
162   - text-shadow: 1px 1px 1px #99BCB4;
163   -}
164   -.ca-content ul{
165   - margin:20px 35px;
166   - height:30px;
167   -}
168   -.ca-content ul li{
169   - float:left;
170   - margin:0px 2px;
171   -}
172   -.ca-content ul li a{
173   - color:#fff;
174   - background:#000;
175   - padding:3px 6px;
176   - font-size:14px;
177   - font-family: "Georgia","Times New Roman",serif;
178   - font-style:italic;
179   -}
180   -.ca-content ul li a:hover{
181   - background:#fff;
182   - color:#000;
183   - text-shadow:none;
184   -}
185   -.ca-nav span{
186   - width:25px;
187   - height:38px;
188   - background:transparent url(../images/arrows.png) no-repeat top left;
189   - position:absolute;
190   - top:50%;
191   - margin-top:-19px;
192   - left:-40px;
193   - text-indent:-9000px;
194   - opacity:0.7;
195   - cursor:pointer;
196   - z-index:100;
197   -}
198   -.ca-nav span.ca-nav-next{
199   - background-position:top right;
200   - left:auto;
201   - right:-40px;
202   -}
203   -.ca-nav span:hover{
204   - opacity:1.0;
205   -}
206 0 \ No newline at end of file
controllets/items-slider-controllet/images/ImageAttribution.txt deleted
View file @dbc787c
1   -Icon Set by
2   -<a href="http://cyberella74.deviantart.com/art/Archigraphs-Animals-Icons-139629985" target="_blank">Cyberella</a>
3   -
4   -Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) License:
5   -http://creativecommons.org/licenses/by-nc-nd/3.0/
controllets/items-slider-controllet/images/Thumbs.db deleted
View file @dbc787c
No preview for this file type
controllets/items-slider-controllet/images/animal1.png deleted
View file @dbc787c

36.2 KB
controllets/items-slider-controllet/images/animal2.png deleted
View file @dbc787c

33.6 KB
controllets/items-slider-controllet/images/animal3.png deleted
View file @dbc787c

22.3 KB
controllets/items-slider-controllet/images/animal4.png deleted
View file @dbc787c

39 KB
controllets/items-slider-controllet/images/animal5.png deleted
View file @dbc787c

43.4 KB
controllets/items-slider-controllet/images/animal6.png deleted
View file @dbc787c

32.7 KB
controllets/items-slider-controllet/images/animal7.png deleted
View file @dbc787c

24.9 KB
controllets/items-slider-controllet/images/animal8.png deleted
View file @dbc787c

31.2 KB
controllets/items-slider-controllet/images/arrows.png deleted
View file @dbc787c

1.54 KB
controllets/items-slider-controllet/images/cross.png deleted
View file @dbc787c

266 Bytes
controllets/items-slider-controllet/images/pattern.png deleted
View file @dbc787c

2.88 KB
controllets/items-slider-controllet/items-slider-controllet.html
  View file @325c348
... ... @@ -89,7 +89,7 @@
89 89 position: relative;
90 90 float:left;
91 91 display: inline-block;
92   - height: 25vh;
  92 + height: 38vh;
93 93 width: 100%;
94 94 overflow: hidden;
95 95 text-align: center;
... ...
controllets/items-slider-controllet/items-slider-controllet_.html deleted
View file @dbc787c
1   -<link rel="import" href="../../bower_components/polymer/polymer.html">
2   -<link rel="import" href="../../bower_components/paper-styles/color.html">
3   -<!--<link rel="import" href="../../bower_components/paper-styles/demo.css">-->
4   -
5   -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
6   -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
7   -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
8   -
9   -<link rel="import" href="../../bower_components/paper-card/paper-card.html">
10   -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
11   -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
12   -
13   -<dom-module id="items-slider-controllet">
14   - <template>
15   -
16   - <style is="custom-style">
17   - body {
18   - margin: 0;
19   - padding: 3em;
20   - -webkit-tap-highlight-color: rgba(0,0,0,0);
21   - -webkit-touch-callout: none;
22   - line-height: 0;
23   - font-size: 1vw;
24   - }
25   -
26   -
27   - :host ::content .content{
28   - position: relative;
29   - float: left;
30   - margin : .5em;
31   - height: 8em;
32   - width: 9em;
33   - background: #fff;
34   - background:#fff;
35   - overflow:hidden;
36   - border-radius: 0.125rem;
37   - box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);
38   - padding: 1em;
39   - }
40   -
41   - :host ::content .content-selected{
42   - position: relative;
43   - float: left;
44   - top : .5em;
45   - margin : .5em;
46   - height: 9em;
47   - width: 8em;
48   - background:#fff;
49   - overflow:hidden;
50   - border-style: solid;
51   - border-width: 0.03em;
52   - border-radius: 0.125rem;
53   - box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);
54   - padding: 1em;
55   - }
56   -
57   - img .card-content{
58   - padding: 0.5px 0 0.5px;
59   - }
60   -
61   - .title {
62   - display: inline-block;
63   - position: relative;
64   - padding-left: .2em;
65   - padding-right: .2em;
66   - color: var(--paper-indigo-500);
67   - }
68   -
69   - .title .big {
70   - /*font-size: 1.1em;*/
71   - /*widht: 100%;*/
72   - font-size: 0.9em;
73   - color: var(--google-grey-500);
74   - }
75   -
76   - .toolbar_button{
77   - /*height: 100%;
78   - display: inline-block;*/
79   - float: left;
80   - margin-top: 3.5em;
81   - --iron-icon-height: 28px;
82   - --iron-icon-width: 28px;
83   - }
84   -
85   - #pages{
86   - position:relative;
87   - margin:25px auto 20px auto;
88   - /*width:990px;*/
89   - width:80%;
90   - height:150px;
91   -
92   - /* position: relative;
93   - float:left;
94   - display: inline-block;
95   - height: 22vh;
96   - width: 80%;
97   - overflow: hidden;
98   - text-align: center;*/
99   - /*margin-left: 3em;*/
100   - }
101   -
102   - </style>
103   -
104   - <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>
105   -
106   - <neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
107   -
108   - <template is="dom-repeat" items="{{itemsPages}}" as="page" index-as="p">
109   -
110   - <neon-animatable>
111   - <template is="dom-repeat" items="{{itemsPerPage}}" as="item" index-as="i">
112   - <template is="dom-if" if="{{getName(p, i) != 0}}">
113   - <div class='fancy content' id="{{getName(p, i)}}" on-click="_cardClick">
114   -
115   - <div class="card-content">
116   - <div class="title">
117   - <div class="big">{{getName(p, i)}}</div>
118   - </div>
119   - </div>
120   - <br>
121   - <div class="card-content">
122   - <img width="75px" height="50px" src="{{getImage(p, i)}}" >
123   - </div>
124   - </div>
125   - </template>
126   - </template>
127   - </neon-animatable>
128   - </template>
129   -
130   - </neon-animated-pages>
131   -
132   - <paper-icon-button id="NextButton" class="toolbar_button x-scope" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
133   -
134   - </template>
135   -
136   - <script>
137   -
138   - Polymer({
139   -
140   - is : 'items-slider-controllet',
141   -
142   - properties : {
143   -
144   - entryAnimation : {
145   - type : String,
146   - value : ""
147   - },
148   -
149   - exitAnimation : {
150   - type : String,
151   - value : ""
152   - },
153   -
154   - selected : {
155   - type : Number,
156   - value : 0
157   - },
158   -
159   - /**
160   - * It stores all items to put in the slider
161   - *
162   - * @attribute tools
163   - * @type array
164   - * @default 'null'
165   - */
166   - items : {
167   - type: Array,
168   - value: []
169   - },
170   -
171   - itemsPages : {
172   - type : Array,
173   - value : []
174   - },
175   -
176   - itemsPerPage : {
177   - type : Array,
178   - value : []
179   - },
180   -
181   - prevSelectedCard : {
182   - type: Object,
183   - value : null
184   - },
185   -
186   - numItemsPerPage : {
187   - type: Number,
188   - value : 4
189   - }
190   -
191   - },
192   -
193   - ready : function(){
194   -
195   - var pages = Math.floor(this.items.length / this.numItemsPerPage);
196   - var mod = this.items.length % this.numItemsPerPage;
197   - if(mod > 0) pages += 1;
198   -
199   - this.itemsPages = new Array();
200   - this.itemsPerPage = new Array();
201   -
202   - for(var i = 0; i < pages; i++){
203   - this.itemsPages.push(i);
204   - }
205   -
206   - for(var i = 0; i < this.numItemsPerPage; i++){
207   - this.itemsPerPage.push(i);
208   - }
209   -
210   - },
211   -
212   - getPage : function(page){
213   - return this.itemsPages[page];
214   - },
215   -
216   - getName : function(page, item){
217   - return ( ((page * this.itemsPerPage.length) + item) > this.items.length - 1 ) ? 0 : this.items[(page * this.itemsPerPage.length) + item].name.replace("-datalet","");
218   - },
219   -
220   - getImage : function(page, item){
221   - return ( ((page * this.itemsPerPage.length) + item) > this.items.length - 1 ) ? 0 : this.items[(page * this.itemsPerPage.length) + item].image;
222   - },
223   -
224   - _onPrevClick : function() {
225   - this.entryAnimation = 'slide-from-left-animation';
226   - this.exitAnimation = 'slide-right-animation';
227   - this.selected = this.selected === 0 ? (this.itemsPages.length - 1) : (this.selected - 1);
228   - },
229   -
230   - _onNextClick : function() {
231   - this.entryAnimation = 'slide-from-right-animation';
232   - this.exitAnimation = 'slide-left-animation';
233   - this.selected = this.selected === (this.itemsPages.length -1) ? 0 : (this.selected + 1);
234   - },
235   -
236   - _cardClick : function(e){
237   - if(this.prevSelectedCard != null){
238   - this.prevSelectedCard.className = "fancy content";
239   -
240   - }
241   - e.currentTarget.className = "fancy content-selected";
242   - this.prevSelectedCard = e.currentTarget;
243   -
244   - this.fire('items-slider-controllet_item-selected', {datalet: e.currentTarget.id + "-datalet"});
245   -
246   - }
247   - });
248   -
249   - </script>
250   -
251   -</dom-module>
252 0 \ No newline at end of file
controllets/items-slider-controllet/items-slider-controllet__.html deleted
View file @dbc787c
1   -<link rel="import" href="../../bower_components/polymer/polymer.html">
2   -<link rel="import" href="../../bower_components/paper-styles/color.html">
3   -<!--<link rel="import" href="../../bower_components/paper-styles/demo.css">-->
4   -
5   -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
6   -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
7   -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
8   -
9   -<link rel="import" href="../../bower_components/paper-card/paper-card.html">
10   -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
11   -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
12   -
13   -<dom-module id="items-slider-controllet">
14   - <template>
15   - <link rel="stylesheet" type="text/css" href="css/style.css" />
16   -
17   -
18   - <style is="custom-style">
19   - /* body {
20   - margin: 0;
21   - padding: 3em;
22   - -webkit-tap-highlight-color: rgba(0,0,0,0);
23   - -webkit-touch-callout: none;
24   - line-height: 0;
25   - font-size: 1vw;
26   - }
27   -
28   -
29   - :host ::content .content{
30   - position: relative;
31   - float: left;
32   - margin : .5em;
33   -
34   - /!*height: 9em;
35   - width: 9em;*!/
36   - min-width: 80px;
37   - max-width: 115px;
38   - background: #fff;
39   - border-radius: 0.125rem;
40   - box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);
41   - padding: 1em;
42   - }
43   -
44   - :host ::content .content-selected{
45   - position: relative;
46   - float: left;
47   - top : .5em;
48   - margin : .5em;
49   -
50   - /!*height: 9em;
51   - width: 8em;*!/
52   - min-width: 80px;
53   - max-width: 115px;
54   -
55   - background: #fff;
56   - border-style: solid;
57   - border-width: 0.03em;
58   - border-radius: 0.125rem;
59   - box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);
60   - padding: 1em;
61   - }
62   -
63   - img .card-content{
64   - padding: 0.5px 0 0.5px;
65   - }
66   -
67   - .title {
68   - display: inline-block;
69   - position: relative;
70   - padding-left: .2em;
71   - padding-right: .2em;
72   - color: var(--paper-indigo-500);
73   - }
74   -
75   - .title .big {
76   - /!*font-size: 1.1em;*!/
77   - widht: 100%;
78   - font-size: 0.9em;
79   - color: var(--google-grey-500);
80   - }
81   -
82   - .toolbar_button{
83   - /!*height: 100%;
84   - display: inline-block;*!/
85   - float: left;
86   - margin-top: 3.5em;
87   - --iron-icon-height: 28px;
88   - --iron-icon-width: 28px;
89   - }
90   -
91   - #pages{
92   - position: relative;
93   - float:left;
94   - display: inline-block;
95   - height: 22vh;
96   - width: 80%;
97   - overflow: hidden;
98   - text-align: center;
99   - /!*margin-left: 3em;*!/
100   - }*/
101   -
102   - .ca-item-main-selected{
103   - padding:20px;
104   - position:absolute;
105   - top:5px;
106   - left:5px;
107   - right:5px;
108   - bottom:5px;
109   - border-radius: 4px;
110   - -webkit-box-shadow: 1px 0px 8px 0px rgba(50, 50, 50, 1);
111   - -moz-box-shadow: 1px 0px 8px 0px rgba(50, 50, 50, 1);
112   - box-shadow: 1px 0px 8px 0px rgba(50, 50, 50, 1);
113   - }
114   -
115   - </style>
116   -
117   -
118   - <div id="ca_container" class="ca-container">
119   - <div id="cards" class="ca-wrapper">
120   - <template is="dom-repeat" items="{{items}}" as="item" index-as="i">
121   - <div class="ca-item" id="{{getName(i)}}" on-click="_cardClick">
122   - <div class="ca-item-main">
123   - <div class="card-content">
124   - <div class="title">
125   - <div class="big">{{getName(i)}}</div>
126   - </div>
127   - </div>
128   - <br>
129   - <div class="card-content">
130   - <img width="75px" height="50px" src="{{getImage(i)}}" >
131   - </div>
132   - </div>
133   - </div>
134   - </template>
135   - </div>
136   - </div>
137   -
138   - </template>
139   -
140   - <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
141   - <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
142   - <script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
143   -
144   - <script>
145   -
146   - Polymer({
147   -
148   - is : 'items-slider-controllet',
149   -
150   - properties : {
151   -
152   - entryAnimation : {
153   - type : String,
154   - value : ""
155   - },
156   -
157   - exitAnimation : {
158   - type : String,
159   - value : ""
160   - },
161   -
162   - selected : {
163   - type : Number,
164   - value : 0
165   - },
166   -
167   - /**
168   - * It stores all items to put in the slider
169   - *
170   - * @attribute tools
171   - * @type array
172   - * @default 'null'
173   - */
174   - items : {
175   - type: Array,
176   - value: []
177   - },
178   -
179   - itemsPages : {
180   - type : Array,
181   - value : []
182   - },
183   -
184   - itemsPerPage : {
185   - type : Array,
186   - value : []
187   - },
188   -
189   - prevSelectedCard : {
190   - type: Object,
191   - value : null
192   - },
193   -
194   - numItemsPerPage : {
195   - type: Number,
196   - value : 4
197   - }
198   -
199   - },
200   -
201   - getName : function(index){
202   - return this.items[index].name.replace("-datalet","");
203   - },
204   -
205   - getImage : function(index){
206   - return this.items[index].image;
207   - },
208   -
209   - ready : function(){
210   - /* this.$.cards.innerHTML = '';
211   - for(var i = 0; i < this.items.length; i++){
212   - this.$.cards.innerHTML += '<div class="ca-item">' +
213   - '<div class="ca-item-main" on-click="_cardClick">' +
214   - '<div class="card-content">' +
215   - '<div class="title">' +
216   - '<div class="big">' +this.items[i].name.replace("-datalet","") + '</div>' +
217   - '</div>' +
218   - '</div>' +
219   - '<br>' +
220   - '<div class="card-content">' +
221   - '<img width="75px" height="50px" src="' + this.items[i].image + '" >' +
222   - '</div>' +
223   - '</div>' +
224   - '</div>';
225   -
226   - }*/
227   -
228   - this.async(function(){
229   - $(this.$.ca_container).contentcarousel();
230   - },1000)
231   -
232   - },
233   -
234   - _cardClick : function(e){
235   - if(this.prevSelectedCard != null){
236   - this.prevSelectedCard.children[0].className = "ca-item-main";
237   -
238   - }
239   - e.currentTarget.children[0].className = "ca-item-main-selected style-scope items-slider-controllet";
240   - this.prevSelectedCard = e.currentTarget;
241   -
242   - this.fire('items-slider-controllet_item-selected', {datalet: e.currentTarget.id + "-datalet"});
243   -
244   - }
245   - });
246   -
247   - </script>
248   -
249   -</dom-module>
250 0 \ No newline at end of file
controllets/items-slider-controllet/js/jquery.contentcarousel.js deleted
View file @dbc787c
1   -(function($) {
2   - var aux = {
3   - // navigates left / right
4   - navigate : function( dir, $el, $wrapper, opts, cache ) {
5   -
6   - var scroll = opts.scroll,
7   - factor = 1,
8   - idxClicked = 0;
9   -
10   - if( cache.expanded ) {
11   - scroll = 1; // scroll is always 1 in full mode
12   - factor = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item
13   - idxClicked = cache.idxClicked; // the index of the clicked item
14   - }
15   -
16   - // clone the elements on the right / left and append / prepend them according to dir and scroll
17   - if( dir === 1 ) {
18   - $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
19   - $(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
20   - });
21   - }
22   - else {
23   - var $first = $wrapper.children().eq(0);
24   -
25   - $wrapper.find('div.ca-item:gt(' + ( cache.totalItems - 1 - scroll ) + ')').each(function(i) {
26   - // insert before $first so they stay in the right order
27   - $(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
28   - });
29   - }
30   -
31   - // animate the left of each item
32   - // the calculations are dependent on dir and on the cache.expanded value
33   - $wrapper.find('div.ca-item').each(function(i) {
34   - var $item = $(this);
35   - $item.stop().animate({
36   - left : ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px'
37   - }, opts.sliderSpeed, opts.sliderEasing, function() {
38   - if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) {
39   - // remove the item that was cloned
40   - $item.remove();
41   - }
42   - cache.isAnimating = false;
43   - });
44   - });
45   -
46   - },
47   - // opens an item (animation) -> opens all the others
48   - openItem : function( $wrapper, $item, opts, cache ) {
49   - cache.idxClicked = $item.index();
50   - // the item's position (1, 2, or 3) on the viewport (the visible items)
51   - cache.winpos = aux.getWinPos( $item.position().left, cache );
52   - $wrapper.find('div.ca-item').not( $item ).hide();
53   - $item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({
54   - width : cache.itemW * 2 + 'px',
55   - left : cache.itemW + 'px'
56   - }, opts.itemSpeed, opts.itemEasing)
57   - .end()
58   - .stop()
59   - .animate({
60   - left : '0px'
61   - }, opts.itemSpeed, opts.itemEasing, function() {
62   - cache.isAnimating = false;
63   - cache.expanded = true;
64   -
65   - aux.openItems( $wrapper, $item, opts, cache );
66   - });
67   -
68   - },
69   - // opens all the items
70   - openItems : function( $wrapper, $openedItem, opts, cache ) {
71   - var openedIdx = $openedItem.index();
72   -
73   - $wrapper.find('div.ca-item').each(function(i) {
74   - var $item = $(this),
75   - idx = $item.index();
76   -
77   - if( idx !== openedIdx ) {
78   - $item.css( 'left', - ( openedIdx - idx ) * ( cache.itemW * 3 ) + 'px' ).show().find('div.ca-content-wrapper').css({
79   - left : cache.itemW + 'px',
80   - width : cache.itemW * 2 + 'px'
81   - });
82   -
83   - // hide more link
84   - aux.toggleMore( $item, false );
85   - }
86   - });
87   - },
88   - // show / hide the item's more button
89   - toggleMore : function( $item, show ) {
90   - ( show ) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide();
91   - },
92   - // close all the items
93   - // the current one is animated
94   - closeItems : function( $wrapper, $openedItem, opts, cache ) {
95   - var openedIdx = $openedItem.index();
96   -
97   - $openedItem.find('div.ca-content-wrapper').stop().animate({
98   - width : '0px'
99   - }, opts.itemSpeed, opts.itemEasing)
100   - .end()
101   - .stop()
102   - .animate({
103   - left : cache.itemW * ( cache.winpos - 1 ) + 'px'
104   - }, opts.itemSpeed, opts.itemEasing, function() {
105   - cache.isAnimating = false;
106   - cache.expanded = false;
107   - });
108   -
109   - // show more link
110   - aux.toggleMore( $openedItem, true );
111   -
112   - $wrapper.find('div.ca-item').each(function(i) {
113   - var $item = $(this),
114   - idx = $item.index();
115   -
116   - if( idx !== openedIdx ) {
117   - $item.find('div.ca-content-wrapper').css({
118   - width : '0px'
119   - })
120   - .end()
121   - .css( 'left', ( ( cache.winpos - 1 ) - ( openedIdx - idx ) ) * cache.itemW + 'px' )
122   - .show();
123   -
124   - // show more link
125   - aux.toggleMore( $item, true );
126   - }
127   - });
128   - },
129   - // gets the item's position (1, 2, or 3) on the viewport (the visible items)
130   - // val is the left of the item
131   - getWinPos : function( val, cache ) {
132   - switch( val ) {
133   - case 0 : return 1; break;
134   - case cache.itemW : return 2; break;
135   - case cache.itemW * 2 : return 3; break;
136   - }
137   - }
138   - },
139   - methods = {
140   - init : function( options ) {
141   -
142   - if( this.length ) {
143   -
144   - var settings = {
145   - sliderSpeed : 500, // speed for the sliding animation
146   - sliderEasing : 'easeOutExpo',// easing for the sliding animation
147   - itemSpeed : 500, // speed for the item animation (open / close)
148   - itemEasing : 'easeOutExpo',// easing for the item animation (open / close)
149   - scroll : 1 // number of items to scroll at a time
150   - };
151   -
152   - return this.each(function() {
153   -
154   - // if options exist, lets merge them with our default settings
155   - if ( options ) {
156   - $.extend( settings, options );
157   - }
158   -
159   - var $el = $(this),
160   - $wrapper = $el.find('div.ca-wrapper'),
161   - $items = $wrapper.children('div.ca-item'),
162   - cache = {};
163   -
164   - // save the with of one item
165   - cache.itemW = $items.width();
166   - // save the number of total items
167   - cache.totalItems = $items.length;
168   -
169   - // add navigation buttons
170   - if( cache.totalItems > 3 )
171   - $el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>')
172   -
173   - // control the scroll value
174   - if( settings.scroll < 1 )
175   - settings.scroll = 1;
176   - else if( settings.scroll > 3 )
177   - settings.scroll = 3;
178   -
179   - var $navPrev = $el.find('span.ca-nav-prev'),
180   - $navNext = $el.find('span.ca-nav-next');
181   -
182   - // hide the items except the first 3
183   - $wrapper.css( 'overflow', 'hidden' );
184   -
185   - // the items will have position absolute
186   - // calculate the left of each item
187   - $items.each(function(i) {
188   - $(this).css({
189   - position : 'absolute',
190   - left : i * cache.itemW + 'px'
191   - });
192   - });
193   -
194   - // click to open the item(s)
195   - $el.find('a.ca-more').live('click.contentcarousel', function( event ) {
196   - if( cache.isAnimating ) return false;
197   - cache.isAnimating = true;
198   - $(this).hide();
199   - var $item = $(this).closest('div.ca-item');
200   - aux.openItem( $wrapper, $item, settings, cache );
201   - return false;
202   - });
203   -
204   - // click to close the item(s)
205   - $el.find('a.ca-close').live('click.contentcarousel', function( event ) {
206   - if( cache.isAnimating ) return false;
207   - cache.isAnimating = true;
208   - var $item = $(this).closest('div.ca-item');
209   - aux.closeItems( $wrapper, $item, settings, cache );
210   - return false;
211   - });
212   -
213   - // navigate left
214   - $navPrev.bind('click.contentcarousel', function( event ) {
215   - if( cache.isAnimating ) return false;
216   - cache.isAnimating = true;
217   - aux.navigate( -1, $el, $wrapper, settings, cache );
218   - });
219   -
220   - // navigate right
221   - $navNext.bind('click.contentcarousel', function( event ) {
222   - if( cache.isAnimating ) return false;
223   - cache.isAnimating = true;
224   - aux.navigate( 1, $el, $wrapper, settings, cache );
225   - });
226   -
227   - // adds events to the mouse
228   - $el.bind('mousewheel.contentcarousel', function(e, delta) {
229   - if(delta > 0) {
230   - if( cache.isAnimating ) return false;
231   - cache.isAnimating = true;
232   - aux.navigate( -1, $el, $wrapper, settings, cache );
233   - }
234   - else {
235   - if( cache.isAnimating ) return false;
236   - cache.isAnimating = true;
237   - aux.navigate( 1, $el, $wrapper, settings, cache );
238   - }
239   - return false;
240   - });
241   -
242   - });
243   - }
244   - }
245   - };
246   -
247   - $.fn.contentcarousel = function(method) {
248   - if ( methods[method] ) {
249   - return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
250   - } else if ( typeof method === 'object' || ! method ) {
251   - return methods.init.apply( this, arguments );
252   - } else {
253   - $.error( 'Method ' + method + ' does not exist on jQuery.contentcarousel' );
254   - }
255   - };
256   -
257   -})(jQuery);
258 0 \ No newline at end of file
controllets/items-slider-controllet/js/jquery.easing.1.3.js deleted
View file @dbc787c
1   -/*
2   - * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
3   - *
4   - * Uses the built in easing capabilities added In jQuery 1.1
5   - * to offer multiple easing options
6   - *
7   - * TERMS OF USE - jQuery Easing
8   - *
9   - * Open source under the BSD License.
10   - *
11   - * Copyright © 2008 George McGinley Smith
12   - * All rights reserved.
13   - *
14   - * Redistribution and use in source and binary forms, with or without modification,
15   - * are permitted provided that the following conditions are met:
16   - *
17   - * Redistributions of source code must retain the above copyright notice, this list of
18   - * conditions and the following disclaimer.
19   - * Redistributions in binary form must reproduce the above copyright notice, this list
20   - * of conditions and the following disclaimer in the documentation and/or other materials
21   - * provided with the distribution.
22   - *
23   - * Neither the name of the author nor the names of contributors may be used to endorse
24   - * or promote products derived from this software without specific prior written permission.
25   - *
26   - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
27   - * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
28   - * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
29   - * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
30   - * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
31   - * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
32   - * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
33   - * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
34   - * OF THE POSSIBILITY OF SUCH DAMAGE.
35   - *
36   -*/
37   -
38   -// t: current time, b: begInnIng value, c: change In value, d: duration
39   -jQuery.easing['jswing'] = jQuery.easing['swing'];
40   -
41   -jQuery.extend( jQuery.easing,
42   -{
43   - def: 'easeOutQuad',
44   - swing: function (x, t, b, c, d) {
45   - //alert(jQuery.easing.default);
46   - return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
47   - },
48   - easeInQuad: function (x, t, b, c, d) {
49   - return c*(t/=d)*t + b;
50   - },
51   - easeOutQuad: function (x, t, b, c, d) {
52   - return -c *(t/=d)*(t-2) + b;
53   - },
54   - easeInOutQuad: function (x, t, b, c, d) {
55   - if ((t/=d/2) < 1) return c/2*t*t + b;
56   - return -c/2 * ((--t)*(t-2) - 1) + b;
57   - },
58   - easeInCubic: function (x, t, b, c, d) {
59   - return c*(t/=d)*t*t + b;
60   - },
61   - easeOutCubic: function (x, t, b, c, d) {
62   - return c*((t=t/d-1)*t*t + 1) + b;
63   - },
64   - easeInOutCubic: function (x, t, b, c, d) {
65   - if ((t/=d/2) < 1) return c/2*t*t*t + b;
66   - return c/2*((t-=2)*t*t + 2) + b;
67   - },
68   - easeInQuart: function (x, t, b, c, d) {
69   - return c*(t/=d)*t*t*t + b;
70   - },
71   - easeOutQuart: function (x, t, b, c, d) {
72   - return -c * ((t=t/d-1)*t*t*t - 1) + b;
73   - },
74   - easeInOutQuart: function (x, t, b, c, d) {
75   - if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
76   - return -c/2 * ((t-=2)*t*t*t - 2) + b;
77   - },
78   - easeInQuint: function (x, t, b, c, d) {
79   - return c*(t/=d)*t*t*t*t + b;
80   - },
81   - easeOutQuint: function (x, t, b, c, d) {
82   - return c*((t=t/d-1)*t*t*t*t + 1) + b;
83   - },
84   - easeInOutQuint: function (x, t, b, c, d) {
85   - if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
86   - return c/2*((t-=2)*t*t*t*t + 2) + b;
87   - },
88   - easeInSine: function (x, t, b, c, d) {
89   - return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
90   - },
91   - easeOutSine: function (x, t, b, c, d) {
92   - return c * Math.sin(t/d * (Math.PI/2)) + b;
93   - },
94   - easeInOutSine: function (x, t, b, c, d) {
95   - return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
96   - },
97   - easeInExpo: function (x, t, b, c, d) {
98   - return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
99   - },
100   - easeOutExpo: function (x, t, b, c, d) {
101   - return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
102   - },
103   - easeInOutExpo: function (x, t, b, c, d) {
104   - if (t==0) return b;
105   - if (t==d) return b+c;
106   - if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
107   - return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
108   - },
109   - easeInCirc: function (x, t, b, c, d) {
110   - return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
111   - },
112   - easeOutCirc: function (x, t, b, c, d) {
113   - return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
114   - },
115   - easeInOutCirc: function (x, t, b, c, d) {
116   - if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
117   - return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
118   - },
119   - easeInElastic: function (x, t, b, c, d) {
120   - var s=1.70158;var p=0;var a=c;
121   - if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
122   - if (a < Math.abs(c)) { a=c; var s=p/4; }
123   - else var s = p/(2*Math.PI) * Math.asin (c/a);
124   - return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
125   - },
126   - easeOutElastic: function (x, t, b, c, d) {
127   - var s=1.70158;var p=0;var a=c;
128   - if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
129   - if (a < Math.abs(c)) { a=c; var s=p/4; }
130   - else var s = p/(2*Math.PI) * Math.asin (c/a);
131   - return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
132   - },
133   - easeInOutElastic: function (x, t, b, c, d) {
134   - var s=1.70158;var p=0;var a=c;
135   - if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
136   - if (a < Math.abs(c)) { a=c; var s=p/4; }
137   - else var s = p/(2*Math.PI) * Math.asin (c/a);
138   - if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
139   - return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
140   - },
141   - easeInBack: function (x, t, b, c, d, s) {
142   - if (s == undefined) s = 1.70158;
143   - return c*(t/=d)*t*((s+1)*t - s) + b;
144   - },
145   - easeOutBack: function (x, t, b, c, d, s) {
146   - if (s == undefined) s = 1.70158;
147   - return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
148   - },
149   - easeInOutBack: function (x, t, b, c, d, s) {
150   - if (s == undefined) s = 1.70158;
151   - if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
152   - return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
153   - },
154   - easeInBounce: function (x, t, b, c, d) {
155   - return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
156   - },
157   - easeOutBounce: function (x, t, b, c, d) {
158   - if ((t/=d) < (1/2.75)) {
159   - return c*(7.5625*t*t) + b;
160   - } else if (t < (2/2.75)) {
161   - return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
162   - } else if (t < (2.5/2.75)) {
163   - return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
164   - } else {
165   - return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
166   - }
167   - },
168   - easeInOutBounce: function (x, t, b, c, d) {
169   - if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
170   - return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
171   - }
172   -});
173   -
174   -/*
175   - *
176   - * TERMS OF USE - EASING EQUATIONS
177   - *
178   - * Open source under the BSD License.
179   - *
180   - * Copyright © 2001 Robert Penner
181   - * All rights reserved.
182   - *
183   - * Redistribution and use in source and binary forms, with or without modification,
184   - * are permitted provided that the following conditions are met:
185   - *
186   - * Redistributions of source code must retain the above copyright notice, this list of
187   - * conditions and the following disclaimer.
188   - * Redistributions in binary form must reproduce the above copyright notice, this list
189   - * of conditions and the following disclaimer in the documentation and/or other materials
190   - * provided with the distribution.
191   - *
192   - * Neither the name of the author nor the names of contributors may be used to endorse
193   - * or promote products derived from this software without specific prior written permission.
194   - *
195   - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
196   - * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
197   - * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
198   - * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
199   - * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
200   - * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
201   - * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
202   - * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
203   - * OF THE POSSIBILITY OF SUCH DAMAGE.
204   - *
205   - */
206 0 \ No newline at end of file
controllets/items-slider-controllet/js/jquery.mousewheel.js deleted
View file @dbc787c
1   -/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
2   - * Licensed under the MIT License (LICENSE.txt).
3   - *
4   - * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
5   - * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
6   - * Thanks to: Seamus Leahy for adding deltaX and deltaY
7   - *
8   - * Version: 3.0.4
9   - *
10   - * Requires: 1.2.2+
11   - */
12   -
13   -(function($) {
14   -
15   -var types = ['DOMMouseScroll', 'mousewheel'];
16   -
17   -$.event.special.mousewheel = {
18   - setup: function() {
19   - if ( this.addEventListener ) {
20   - for ( var i=types.length; i; ) {
21   - this.addEventListener( types[--i], handler, false );
22   - }
23   - } else {
24   - this.onmousewheel = handler;
25   - }
26   - },
27   -
28   - teardown: function() {
29   - if ( this.removeEventListener ) {
30   - for ( var i=types.length; i; ) {
31   - this.removeEventListener( types[--i], handler, false );
32   - }
33   - } else {
34   - this.onmousewheel = null;
35   - }
36   - }
37   -};
38   -
39   -$.fn.extend({
40   - mousewheel: function(fn) {
41   - return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
42   - },
43   -
44   - unmousewheel: function(fn) {
45   - return this.unbind("mousewheel", fn);
46   - }
47   -});
48   -
49   -
50   -function handler(event) {
51   - var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
52   - event = $.event.fix(orgEvent);
53   - event.type = "mousewheel";
54   -
55   - // Old school scrollwheel delta
56   - if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
57   - if ( event.detail ) { delta = -event.detail/3; }
58   -
59   - // New school multidimensional scroll (touchpads) deltas
60   - deltaY = delta;
61   -
62   - // Gecko
63   - if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
64   - deltaY = 0;
65   - deltaX = -1*delta;
66   - }
67   -
68   - // Webkit
69   - if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
70   - if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
71   -
72   - // Add event and delta to the front of the arguments
73   - args.unshift(event, delta, deltaX, deltaY);
74   -
75   - return $.event.handle.apply(this, args);
76   -}
77   -
78   -})(jQuery);
79 0 \ No newline at end of file
controllets/treeview-controllet/treeview-controllet_.html deleted
View file @dbc787c
1   -<link rel="import" href="../../bower_components/polymer/polymer.html">
2   -<link rel="import" href="../../bower_components/paper-styles/color.html">
3   -<link rel="import" href="../../bower_components/paper-item/paper-item.html">
4   -<link rel="import" href="../../bower_components/paper-card/paper-card.html">
5   -
6   -
7   -
8   -<dom-module id="treeview-controllet">
9   - <template>
10   - <style is="custom-style">
11   -
12   - :host ::content .list {
13   - margin: .5rem;
14   - display: block;
15   - list-style-type: none;
16   - }
17   -
18   - :host ::content .list__item {
19   - margin: 0 0 .5rem 0;
20   - padding: 0;
21   - }
22   -
23   - :host ::content .label--checkbox {
24   - position: relative;
25   - margin: .5rem;
26   - font-family: Arial, sans-serif;
27   - line-height: 135%;
28   - cursor: pointer;
29   - padding-left: 30px;
30   - padding-top: 0px;
31   - }
32   -
33   - :host ::content .checkbox + label {
34   - /*text-indent: -5000px;
35   - height: 20px;
36   - width: auto;*/
37   - }
38   -
39   - :host ::content input[type="checkbox"]:not(:checked), :host ::content input[type="checkbox"]:checked {
40   - position: relative;
41   - left: 10px;
42   - visibility: visible;
43   - }
44   -
45   - :host ::content .checkbox {
46   - position: relative;
47   - /*top: -0.375rem;*/
48   - top: 3px;
49   - margin: 0 1rem 0 0;
50   - cursor: pointer;
51   - min-height: 0;
52   - max-height: 0;
53   - }
54   -
55   - :host ::content .checkbox:before {
56   - -webkit-transition: all 0.3s ease-in-out;
57   - -moz-transition: all 0.3s ease-in-out;
58   - transition: all 0.3s ease-in-out;
59   - content: "";
60   - position: absolute;
61   - left: 0;
62   - z-index: 1;
63   - width: 1.2em;
64   - height: 1.2em;
65   - border: 2px solid #DDDDDD;
66   - }
67   -
68   - :host ::content .checkbox:checked:before {
69   - -webkit-transform: rotate(-45deg);
70   - -moz-transform: rotate(-45deg);
71   - -ms-transform: rotate(-45deg);
72   - -o-transform: rotate(-45deg);
73   - transform: rotate(-45deg);
74   - height: 1em;
75   - border-color: var(--paper-blue-500);
76   - border-top-style: none;
77   - border-right-style: none;
78   - }
79   -
80   - :host ::content .checkbox:after {
81   - content: "";
82   - position: absolute;
83   - top: -0.125em;
84   - left: 0;
85   - width: 1.4em;
86   - height: 1.4em;
87   - background: #fff;
88   - cursor: pointer;
89   - }
90   -
91   - :host ::content .select-all{
92   - position:relative;
93   - float:left;
94   - left: 20px;
95   - top: -3px;
96   - }
97   -
98   - :host ::content div.hiding_panel{
99   - width: 100%;
100   - height: 15px;
101   - /*padding: 3px;
102   - height: 35px;
103   - border: 1px;
104   - background: #fff;
105   - border-radius: 0.125rem;
106   - box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);*/
107   - }
108   -
109   - :host ::content div.panel-title{
110   - position: relative;
111   - float: left;
112   - padding-left: 10px;
113   - font-weight: bolder;
114   - color: #000000;
115   - }
116   -
117   - :host ::content iron-icon.panel-hide-trigger {
118   - position: relative;
119   - float: left;
120   - height: 24px;
121   - width: 24px;
122   - border-radius: 50%;
123   - /*background: var(--paper-pink-500);*/
124   - background: #348ED5;
125   - color: white;
126   - line-height: 64px;
127   - }
128   -
129   - :host ::content iron-icon.panel-hide-trigger:hover {
130   - /*color: var(--google-gray-700);*/
131   - color : #000000;
132   - }
133   -
134   - :host ::content .items-list{
135   - display: none;
136   - }
137   -
138   - </style>
139   -
140   - <div class="vertical-section">
141   - <div id="treeview_placeholder" class="horizontal-section"></div>
142   - </div>
143   -
144   - </template>
145   -
146   - <script>
147   -
148   - Polymer({
149   -
150   - is : 'treeview-controllet',
151   -
152   - listeners : {
153   - 'tap' : '_clickHandler'
154   - },
155   -
156   - properties : {
157   -
158   - fieldsMap : {
159   - type : Map,
160   - value : null
161   - }
162   -
163   - },
164   -
165   - createFieldsContainer : function(id, heading, level){
166   -
167   - var ul = document.createElement('ul');
168   - ul.className = "list";
169   - ul.id = id;
170   - ul.innerHTML = '<div class="hiding_panel">' +
171   - '<iron-icon icon="chevron-right" class="panel-hide-trigger"></iron-icon>' +
172   - '<div class="panel-title">' + heading + '</div>' +
173   - '<input id="'+ heading +'" type="checkbox" class="checkbox select-all">' +
174   - '</div>' +
175   - '<br>';
176   - /*'<div class="items-list"></div>';*/
177   - ul.innerHTML += (id.indexOf("records") != -1) ? '<div class="items-list" style="display:block;"></div>' : '<div class="items-list"></div>';
178   -
179   - return ul;
180   -
181   - },
182   -
183   - createListItem : function(id, label) {
184   - return '<li class="list__item">'
185   - + '<input id="'+ id +'" type="checkbox" class="checkbox">'
186   - + '<div class="label--checkbox">'+ label +'</div>'
187   - + '</li>';
188   - },
189   -
190   - analyzeObject : function(parent_list, curr_field, object) {
191   - if(object == null) return;
192   - if(curr_field != null){
193   - if(object == null) object = "";
194   -
195   - if(object.constructor == Array){//Deal with flat array case
196   - if(object[0].constructor != Object){
197   - //MATERIAL CHECKBOX UL
198   - this.fieldsMap[parent_list[parent_list.length - 2]].children[2].innerHTML += this.createListItem(parent_list.toString(), curr_field);
199   - return;
200   - }
201   - }
202   - if(object.constructor == Array || object.constructor == Object){
203   - var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1], parent_list.length);
204   - this.fieldsMap[curr_field] = panel;
205   - //MATERIAL CHECKBOX UL
206   - this.fieldsMap[parent_list[parent_list.length - 2]].appendChild(this.fieldsMap[curr_field]);
207   - }else{
208   - //MATERIAL CHECKBOX UL
209   - this.fieldsMap[parent_list[parent_list.length - 2]].children[2].innerHTML += this.createListItem(parent_list.toString(), curr_field);
210   - }
211   - }
212   - if(object.constructor == Array || object.constructor == Object) {
213   - var obj = (object.constructor == Array) ? object[0] : object;
214   - if(Object.prototype.toString.call(obj) === '[object String]') return;//Deal with flat array case
215   - for (var field in obj) {
216   - var parents = new Array();
217   - parent_list.every(function (element, index, array) {
218   - parents.push(element);
219   - return true;
220   - });
221   - parents.push(field);
222   - this.analyzeObject(parents, field, obj[field]);
223   - }
224   - }
225   - },
226   -
227   - init : function(data){
228   - //crete root node and insert it in to shadow dom
229   - var mainPanel = this.createFieldsContainer("root", "Data fields", 0);
230   - //MATERIAL CHECKBOX UL
231   - mainPanel.children[2].style.display = "block";
232   -
233   - this.$.treeview_placeholder.innerHTML = "";
234   - this.$.treeview_placeholder.appendChild(mainPanel);
235   - this.fieldsMap = new Map;
236   - this.fieldsMap["root"] = mainPanel;
237   - //call recursive analyze function for current json to get all fields user can select
238   - this.analyzeObject(new Array("root"), null, data);
239   -
240   - },
241   -
242   - fireSelectedFields : function(){
243   -
244   - var cbs = Polymer.dom(this.$.treeview_placeholder).querySelectorAll('input[type=checkbox]:checked');
245   - var fields = Array();
246   - for(var i=0;i<cbs.length;i++) {
247   - if(cbs[i].className.includes("select-all")) continue;
248   - fields.push(cbs[i].id.replace("root,",""));
249   - }
250   -
251   - this.fire('treeview-controllet-fileds-selected', {fields : fields});
252   - },
253   -
254   - _clickHandler : function(e){
255   - if(Object.getPrototypeOf(e) !== CustomEvent.prototype) {
256   - e = e[Object.keys(e)[0]];
257   - }
258   -
259   - if(!e.target.control) {
260   - switch((e.target.className.indexOf("iron-icon") != -1) ? "panel-hide-trigger" : e.target.className){
261   - case 'checkbox':
262   -
263   - this.fireSelectedFields();
264   -
265   - break;
266   - case 'panel-hide-trigger':
267   -
268   - if(e.target.parentNode.parentNode.children[2].style.display == "block") {
269   - e.target.parentNode.parentNode.children[2].style.cssText = "display: none;";
270   - e.target.icon = "chevron-right";
271   -
272   - }else{
273   - e.target.parentNode.parentNode.children[2].style.cssText = "display: block;";
274   - e.target.icon = "expand-more";
275   - }
276   - break;
277   - case 'checkbox select-all':
278   - var childs = e.srcElement.parentNode.parentNode.children[2].childNodes;
279   - for(var i=0; i < childs.length; i++){
280   - childs[i].children[0].checked = e.srcElement.checked;
281   - }
282   -
283   - this.fireSelectedFields();
284   -
285   - break;
286   - }
287   - }
288   - }
289   - });
290   -
291   - </script>
292   -
293   -</dom-module>
294 0 \ No newline at end of file