SGH / COMPONENTS

Commit 348eaf89b7c566959357052b1b8526a6ff361656

Authored by Renato De Donato
2 parents 421d90db 34c460f1

Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Inline Side-by-side
Showing 2 changed files with 102 additions and 498 deletions
controllets/data-sevc-controllet/demo/index.html
  View file @348eaf8
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 <body> 21 <body>
22 22
23 <!--<span data-l10n-id="name"></span>--> 23 <!--<span data-l10n-id="name"></span>-->
24 - <data-sevc-controllet localization="fr" id="dsc" deep-url="http://192.168.232.128/DEEalerProvider/DEEP/" datalets-list-url="http://192.168.232.128/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet> 24 + <data-sevc-controllet localization="it" id="dsc" deep-url="http://172.16.15.77/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.77/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet>
25 25
26 <script> 26 <script>
27 27
demo.html
  View file @348eaf8
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
  4 + <meta charset="UTF-8">
  5 +
  6 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  7 +
4 <link rel="import" href="bower_components/iron-component-page/iron-component-page.html"> 8 <link rel="import" href="bower_components/iron-component-page/iron-component-page.html">
5 - <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">  
6 - <link rel="import" href="bower_components/paper-menu/paper-menu.html">  
7 <link rel="import" href="bower_components/paper-item/paper-item.html"> 9 <link rel="import" href="bower_components/paper-item/paper-item.html">
8 <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 10 <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
9 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> 11 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
10 - <link rel="import" href="bower_components/paper-styles/color.html">  
11 - <link rel="import" href="bower_components/paper-input/paper-textarea.html">  
12 - <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">  
13 - <link rel="import" href="bower_components/iron-ajax/iron-ajax.html">  
14 -  
15 - <link rel="import" href="controllets/animated-button-container-controllet/animated-button-container-controllet.html">  
16 - <link rel="import" href="controllets/items-list-controllet/item-list-controllet.html">  
17 - <link rel="import" href="controllets/draggable-element-controllet/draggable-element-controllet.html">  
18 - <link rel="import" href="controllets/treeview-controllet/treeview-controllet.html">  
19 - <link rel="import" href="controllets/text-element-controllet/text-element-controllet.html"> 12 + <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
20 13
21 - <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>  
22 <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 14 <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
23 - <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
24 - <script src="../DEEPCLIENT/js/deepClient.js"></script> 15 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
25 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script> 16 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>
26 17
27 - <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>  
28 - <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
29 - <link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">  
30 - <meta charset="UTF-8">  
31 -  
32 18
33 <script type="text/javascript"> 19 <script type="text/javascript">
34 - selected_component_url = "";  
35 -  
36 $(document).ready(function () { 20 $(document).ready(function () {
37 - window.addEventListener("treeview-controllet_fileds-selected", DEEP._fieldsSelected, false);  
38 - window.addEventListener("items-list-controllet_item-selected", DEEP._dataletSelected, false);  
39 - window.addEventListener("draggable-element-controllet_content-dragged", DEEP._fieldsMapped, false);  
40 - window.addEventListener("text-element-controllet_content-changed", DEEP._textElementChanged, false);  
41 -  
42 editAreaLoader.init({ 21 editAreaLoader.init({
43 - id : "sbiricuda" // textarea id  
44 - ,syntax: "html" // syntax to be uses for highgliting  
45 - ,start_highlight: true // to display with highlight mode on start-up  
46 - ,syntax: "html"  
47 - ,replace_tab_by_spaces: 4,  
48 - isEditable : false, 22 + id : "sbiricuda", // textarea id
  23 + syntax: "html", // syntax to be uses for highgliting
  24 + start_highlight: true, // to display with highlight mode on start-up
  25 + replace_tab_by_spaces: 4,
  26 + isEditable : false
49 }); 27 });
50 }); 28 });
  29 +
  30 + var createHTML = function(e)
  31 + {
  32 + var dataletHTML = "";
  33 +
  34 + dataletHTML = '<' + e.detail.data.datalet;
  35 +
  36 + for (var property in e.detail.data.params) {
  37 + if (e.detail.data.params.hasOwnProperty(property)) {
  38 + if(property != "_colorIndex")
  39 + dataletHTML += ' ' + property + '="' + e.detail.data.params[property] + '"';
  40 + }
  41 + }
  42 +
  43 + dataletHTML += ' fields=\'' + JSON.stringify(e.detail.data.fields) + '\'';
  44 + dataletHTML += ' data=\'' + e.detail.data.staticData + '\'>';
  45 + dataletHTML += '</'+e.detail.data.datalet+'>';
  46 +
  47 + var dataletImport = '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +
  48 + '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +
  49 + '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES -->\n';
  50 +
  51 + var dataletLink = '<link rel="import" href="http://deep.routetopa.eu/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n';
  52 +
  53 + editAreaLoader.setValue("sbiricuda", dataletImport+dataletLink+dataletHTML);
  54 + }
  55 +
51 </script> 56 </script>
52 57
53 <style> 58 <style>
  59 +
54 body { 60 body {
55 font-family: 'Roboto', sans-serif; 61 font-family: 'Roboto', sans-serif;
56 } 62 }
57 63
58 - .avatar  
59 - {  
60 - display: inline-block;  
61 - height: 0.5em;  
62 - width: 0.5em;  
63 - border-radius: 50%;  
64 - /*background: #3f51b5;*/  
65 - color: white;  
66 - line-height: 2em;  
67 - font-size: 1.87em;  
68 - text-align: center;  
69 - margin-right: 5px;  
70 - }  
71 -  
72 #toolbar{ 64 #toolbar{
73 background: #2196F3 ; 65 background: #2196F3 ;
74 } 66 }
  67 +
75 #logo{ 68 #logo{
76 width: 56px; 69 width: 56px;
77 height: 56px; 70 height: 56px;
@@ -81,90 +74,10 @@ @@ -81,90 +74,10 @@
81 background-position: center center; 74 background-position: center center;
82 75
83 } 76 }
84 - .area_container  
85 - {  
86 - overflow: hidden;  
87 - margin : 0.8em;  
88 - padding : 0.8em;  
89 - border-width: 1em;  
90 - border-radius: 0.125rem;  
91 - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);  
92 - }  
93 -  
94 - #visualization_slider_area  
95 - {  
96 - min-width: 566px;  
97 - height: 100px;  
98 - }  
99 - .content-card {  
100 - position: relative;  
101 - float: left;  
102 - margin: .2em;  
103 - width: 14%;  
104 - min-height: 100px;  
105 - height: 40%;  
106 - background: #fff;  
107 - -moz-border-radius: 0.125rem;  
108 - -webkit-border-radius: 0.125rem;  
109 - border-radius: 0.125rem;  
110 - box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);  
111 - -webkit-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);  
112 - -moz-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);  
113 - padding: 1em;  
114 - }  
115 -  
116 - .content-selected{  
117 - position: relative;  
118 - float: left;  
119 - top : 5%;  
120 - margin : .2em;  
121 - width: 14%;  
122 - height: 40%;  
123 -  
124 - background: #fff;  
125 - border-style: solid;  
126 - border-width: 0.03em;  
127 - -moz-border-radius: 0.125rem;; /* Firefox */  
128 - -webkit-border-radius: 0.125rem;; /* Safari, Chrome */  
129 - border-radius: 0.125rem;  
130 - box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);  
131 - -webkit-box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);  
132 - -moz-box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);  
133 - padding: 1em;  
134 - }  
135 -  
136 </style> 77 </style>
137 78
138 </head> 79 </head>
139 -<body unresolved>  
140 -  
141 -<template id="DEEP" is="dom-bind">  
142 -  
143 - <iron-ajax  
144 - auto  
145 - id="data_request"  
146 - url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"  
147 - verbose="true"  
148 - on-response="handleResponseData"  
149 - debounce-duration="300">  
150 - </iron-ajax>  
151 -  
152 - <iron-ajax  
153 - id="datales_list_request"  
154 - auto  
155 - url={{datasetsList}}  
156 - handle-as="json"  
157 - on-response="handleResponseDatalets"  
158 - debounce-duration="300">  
159 - </iron-ajax>  
160 -  
161 - <iron-ajax  
162 - id="selected_datalet_request"  
163 - url={{deepUrl}}  
164 - verbose="true"  
165 - on-response="handleSelectedDatalet"  
166 - debounce-duration="300">  
167 - </iron-ajax> 80 +<body>
168 81
169 <paper-toolbar id="toolbar"> 82 <paper-toolbar id="toolbar">
170 <paper-menu-button> 83 <paper-menu-button>
@@ -175,380 +88,71 @@ @@ -175,380 +88,71 @@
175 </paper-menu> 88 </paper-menu>
176 </paper-menu-button> 89 </paper-menu-button>
177 <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span> 90 <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>
178 - <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo" ></paper-icon-button></a> 91 + <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo"></paper-icon-button></a>
179 </paper-toolbar> 92 </paper-toolbar>
180 - <div id="main_content">  
181 - <div class="vertical justified layout" style="margin-top: 40px;">  
182 -  
183 - <div class="horizontal layout area_container">  
184 - <p>  
185 - Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,  
186 - query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).  
187 - Datalet are reusable since they can be placed in every web page, like institutional web-sites,  
188 - blogs, forums and so on, without any knowledge on how it effectively is implemented.  
189 - </p>  
190 - </div>  
191 -  
192 - <div class="horizontal layout">  
193 - <paper-textarea style="width: 80%;margin-top: 8px;" id="data_url" label="Dataset api data url" floatingLabel value="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f" on-change="_textElementChanged"></paper-textarea>  
194 - <paper-dropdown-menu style="width: 20%;" id="datasets-sources" label="Example datasets">  
195 - <paper-menu class="dropdown-content">  
196 - <template is="dom-repeat" items="[[Datasets.names]]" as="dataset" index-as="i">  
197 - <paper-item id="[[i]]" on-tap="_datasourceSelected">[[dataset]]</paper-item>  
198 - </template>  
199 - </paper-menu>  
200 - </paper-dropdown-menu>  
201 - </div>  
202 -  
203 - <div class="horizontal layout">  
204 -  
205 - <div style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">  
206 - <treeview-controllet id="fields_treeview"></treeview-controllet>  
207 - </div>  
208 -  
209 - <div style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;" id="table_fields_container" class="area_container flex2child">  
210 - <div id="table_component_place_holder"></div>  
211 - </div>  
212 -  
213 - </div>  
214 -  
215 - <div class="horizontal layout">  
216 -  
217 - <div style="position:relative;width: 50%;min-height: 80vh;max-height: 80vh;" id="datalet_params_main_placeholder" class="area_container flexchild" style="min-width:300px">  
218 - <div class="">  
219 - <div id="visualization_slider_area" class="area_container"></div>  
220 - <div id="fields_mapping_area" class="area_container horizontal layout">  
221 -  
222 - <div id="selected_fields_main_container" class="field-mapping-card" style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;">  
223 - <div class="title">  
224 - <div class="medium">Selected fields</div>  
225 - </div>  
226 - <div id="selected_fields_container" class="area_container"></div>  
227 - </div>  
228 -  
229 - <div id="idm_fields_main_container" class="field-mapping-card" style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;">  
230 - <div class="title">  
231 - <div class="medium">Datalet fields</div>  
232 - </div>  
233 - <div id="datalet_idm_fields_container" class="area_container"></div>  
234 - </div>  
235 - </div>  
236 - <div id="idm_layout_main_container" class="area_container" style="position:relative;min-height: 20vh;max-height: 20vh;">  
237 - <div class="title">  
238 - <div class="medium">Layout fields</div>  
239 - </div>  
240 - <div id="idm_layout_container" class="area_container"></div>  
241 - </div>  
242 - </div>  
243 -  
244 - </div>  
245 -  
246 - <div style="position:relative;width: 50%;min-height: 80vh;max-height: 80vh;" id="datalet_main_container" class="area_container flex2child">  
247 - </div>  
248 -  
249 - </div>  
250 -  
251 - <div class="horizontal layout">  
252 - <div id="code_area" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" class="area_container flex2child">  
253 - <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" style="" rows="4" cols="50">  
254 - Copy and paste this code to inject the datalet in you page.  
255 - </textarea>  
256 - </div>  
257 - </div>  
258 -  
259 - </div>  
260 93
  94 + <div class="">
  95 + <p>
  96 + Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
  97 + query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
  98 + Datalet are reusable since they can be placed in every web page, like institutional web-sites,
  99 + blogs, forums and so on, without any knowledge on how it effectively is implemented.
  100 + </p>
261 </div> 101 </div>
262 -</template>  
263 -<script>  
264 -  
265 - //DEEP.deepUrl = "http://deep.routetopa.eu/DEEP/";  
266 - //DEEP.datasetsList = "http://deep.routetopa.eu/DEEP/datalets-list";  
267 - DEEP.deepUrl = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/";  
268 - DEEP.datasetsList = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list";  
269 -  
270 - DEEP.Datasets = {  
271 - names:[  
272 - 'Italy - Consuntivo entrate 2009',  
273 - 'Italy - Consuntivo entrate 2010',  
274 - 'Italy - Consuntivo entrate 2011',  
275 - 'Italy - Consuntivo entrate 2012',  
276 - 'Italy - Consuntivo entrate 2014',  
277 - 'Holland - Vestigingen register gemeente Groningen',  
278 - 'Holland - Woonruimte gemeente Groningen',  
279 - 'Ireland - SDCC Traffic Cameras',  
280 - 'Ireland - Derelict Site Register',  
281 - 'Ireland - Dublin City Council Commencement Notices',  
282 - 'Ireland - Dublin City Council Planning Applications',  
283 - 'Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014',  
284 - 'Ireland - Fingal Council Planning Applications for last 7 years',  
285 - 'Ireland - Planning Register',  
286 - 'Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures',  
287 - 'Bubble example',  
288 - 'Issy - 3d pie chart'  
289 - ],  
290 - urls: [  
291 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f',  
292 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda',  
293 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89',  
294 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee',  
295 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a',  
296 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd',  
297 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f',  
298 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52',  
299 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc',  
300 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075',  
301 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e',  
302 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff',  
303 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441',  
304 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d',  
305 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6',  
306 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a',  
307 - "https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"  
308 - ]  
309 - };  
310 -  
311 - DEEP.selected_fields = undefined;  
312 -  
313 - DEEP.handleResponseData = function(e){  
314 - DEEP.$.fields_treeview.init(e.detail.response);  
315 - $("#fields_placeholder").perfectScrollbar();  
316 - $("#table_fields_container").perfectScrollbar();  
317 - };  
318 -  
319 - DEEP.handleResponseDatalets = function(e){  
320 - DEEP.datalets_list = new Array();  
321 - for(var i=0;i < e.detail.response.length;i++){  
322 - var datalet_info = { name : e.detail.response[i].name ,  
323 - image : e.detail.response[i].url + e.detail.response[i].name + ".png"  
324 - };  
325 -  
326 - DEEP.datalets_list.push(datalet_info);  
327 - }  
328 102
329 - DEEP.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +  
330 - '<items-list-controllet' +  
331 - ' replace-string="-datalet"' +  
332 - ' items=\'' + JSON.stringify(DEEP.datalets_list) + '\'>' +  
333 - '</items-list-controllet>' +  
334 - '</animated-button-container-controllet>';  
335 - };  
336 -  
337 - DEEP.handleSelectedDatalet = function(e){  
338 -  
339 - var response = e.detail.response;  
340 - DEEP.$.datalet_idm_fields_container.innerHTML = "";  
341 - DEEP.$.idm_layout_container.innerHTML = "";  
342 -  
343 - var input;  
344 - var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);  
345 -  
346 - if(response.idm.inputs.input.constructor == Object) {  
347 - if(response.idm.inputs.input.selection == "*")  
348 - {  
349 - var fields = this.$.selected_fields_container.querySelectorAll('draggable-element-controllet');  
350 - input = response.idm.inputs.input;  
351 - response.idm.inputs.input = new Array();  
352 - for(var i=0;i<fields.length;i++){  
353 - var newInput = jQuery.extend(true, {}, input);  
354 - newInput.name = input.name + ' ' + (i + 1);  
355 - response.idm.inputs.input.push(newInput);  
356 - }  
357 - }  
358 - }  
359 -  
360 - var heading;  
361 - var id;  
362 -  
363 - for(var i =0; i < response.idm.inputs.input.length; i++) {  
364 - var html = '<draggable-element-controllet is-target="true" ';  
365 - input = response.idm.inputs.input[i];  
366 -  
367 - heading = ' heading="' + input.name + '"';  
368 - id = ' id="' + (i + 1) + '"';  
369 -  
370 - html += heading + id;  
371 - html += ' description="' + input.description + '"' +  
372 - ' number="' + (i + 1) + '"';  
373 -  
374 - if(DEEP.selected_fields != undefined) {  
375 - if(this.selected_fields[i] != undefined) {  
376 - html += ' value="' + this.selected_fields[i] + '"' +  
377 - ' label="' + this.selected_fields[i].split(",")[this.selected_fields[i].split(",").length - 1] + '"';  
378 - }  
379 - }  
380 -  
381 - html += '></draggable-element-controllet>';  
382 - this.$.datalet_idm_fields_container.innerHTML += html;  
383 -  
384 - }  
385 -  
386 - if(layouts.input != undefined) {  
387 - if(layouts.input.constructor == Object){  
388 - layouts.input = new Array(jQuery.extend(true, {}, layouts.input));  
389 - }  
390 -  
391 - html = '<text-element-controllet ';  
392 - for (var i = 0; i < layouts.input.length; i++) {  
393 - html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +  
394 - 'description="' + layouts.input[i].description + '" ' +  
395 - 'number="' + (i + 1) + '" ';  
396 -  
397 - html += '></text-element-controllet>';  
398 - }  
399 - DEEP.$.idm_layout_container.innerHTML = html;  
400 - }  
401 -  
402 - if(DEEP.selected_fields != undefined) DEEP.generateDataletPreview();  
403 -  
404 - $("#selected_fields_main_container").perfectScrollbar();  
405 - $("#idm_fields_main_container").perfectScrollbar();  
406 - $("#idm_layout_main_container").perfectScrollbar();  
407 - $("#datalet_params_main_placeholder").perfectScrollbar();  
408 - };  
409 -  
410 - DEEP._urlChanged = function(event){  
411 - DEEP.$.data_request.url = event.target.value;  
412 - DEEP.$.data_request.generateRequest();  
413 - DEEP.$.table_component_place_holder.innerHTML = "";  
414 - };  
415 -  
416 - DEEP._datasourceSelected = function(event){  
417 - DEEP.$.data_url.value = DEEP.Datasets.urls[parseInt(event.target.id)];  
418 - DEEP.$.data_request.url = DEEP.Datasets.urls[parseInt(event.target.id)];  
419 - DEEP.$.data_request.generateRequest();  
420 - DEEP.$.table_component_place_holder.innerHTML = "";  
421 - };  
422 -  
423 - DEEP._fieldsSelected = function(e){  
424 -  
425 - DEEP.$.selected_fields_container.innerHTML = "";  
426 - for(var i=0;i<e.detail.fields.length;i++) {  
427 - DEEP.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +  
428 - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +  
429 - '"></draggable-element-controllet><br>';  
430 - }  
431 -  
432 - ComponentService.deep_url = DEEP.deepUrl;  
433 -  
434 - ComponentService.getComponent({  
435 - component : "datatable-datalet",  
436 - params :{  
437 - 'data-url' : DEEP.$.data_url.value  
438 - },  
439 - fields : e.detail.fields,  
440 - placeHolder : DEEP.$.table_component_place_holder  
441 - });  
442 -  
443 - };  
444 -  
445 - DEEP._dataletSelected = function(e){  
446 - DEEP.selected_datalet = e.detail.datalet;  
447 - DEEP.$.selected_datalet_request.url = DEEP.deepUrl + e.detail.datalet;  
448 - DEEP.$.selected_datalet_request.generateRequest();  
449 - };  
450 -  
451 - DEEP._fieldsMapped = function(e){  
452 - DEEP.generateDataletPreview();  
453 - };  
454 -  
455 - DEEP.timer = 0;  
456 - DEEP._textElementChanged = function(e){  
457 - clearTimeout (DEEP.timer);  
458 - DEEP.timer = setTimeout(DEEP.generateDataletPreview, 1500);  
459 - };  
460 -  
461 - DEEP.getXMLHttpRequest = function()  
462 - {  
463 - if (window.XMLHttpRequest) {  
464 - return new XMLHttpRequest();  
465 - }  
466 - else {  
467 - try {  
468 - return new ActiveXObject("MSXML2.XMLHTTP.3.0");  
469 - }  
470 - catch(ex) {  
471 - return null;  
472 - }  
473 - }  
474 - };  
475 -  
476 - DEEP.generateDataletPreview = function(){  
477 -  
478 - var input_mapped_fields = Polymer.dom(DEEP.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');  
479 - DEEP.selected_fields = Array();  
480 -  
481 - for (var i = 0; i < input_mapped_fields.length; i++) {  
482 - if (input_mapped_fields[i].value != "") {  
483 - DEEP.selected_fields.push(input_mapped_fields[i].value);  
484 - }  
485 - }  
486 -  
487 - var input_layouts_fields = Polymer.dom(DEEP.$.idm_layout_container).querySelectorAll('text-element-controllet');  
488 - DEEP.params_fields = {'data-url' : DEEP.$.data_url.value};  
489 -  
490 - for (var i = 0; i < input_layouts_fields.length; i++) {  
491 - if (input_layouts_fields[i].value != "") {  
492 - DEEP.params_fields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;  
493 - }  
494 - }  
495 -  
496 - ComponentService.deep_url = DEEP.deepUrl;  
497 - ComponentService.getComponent({  
498 - component : DEEP.selected_datalet,  
499 - params : DEEP.params_fields,  
500 - fields : DEEP.selected_fields,  
501 - placeHolder : DEEP.$.datalet_main_container  
502 - });  
503 -  
504 - var request = DEEP.getXMLHttpRequest();  
505 -  
506 - request.onreadystatechange = function(){  
507 - if(request.readyState == 4){  
508 - try {  
509 - var resp = JSON.parse(request.response);  
510 - var link = '<link rel="import" href="' + resp.bridge_link + resp.component_link +'">\n';  
511 -  
512 - //Build datalet injecting html code  
513 - var datalet_code = link + '<' + DEEP.selected_datalet;  
514 - var keys = Object.keys(DEEP.params_fields);  
515 - for(var i = 0; i < keys.length; i++){  
516 - datalet_code += ' ' + keys[i] + '=\'' + DEEP.params_fields[keys[i]] +'\'';  
517 - }  
518 - datalet_code += " fields='" + JSON.stringify(DEEP.selected_fields) + "'></" + DEEP.selected_datalet + ">";  
519 -  
520 - //'<!-- ADD THE POLYFILL TO YOUR PAGE - https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.14/webcomponents.min.js -->\n'  
521 -  
522 - DEEP.$.code_area.innerHTML = '<textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" style="" rows="4" cols="50" autofocus="false">' +  
523 - '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +  
524 - '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +  
525 - '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES -->\n'  
526 - + datalet_code +  
527 - '</textarea>';  
528 -  
529 - editAreaLoader.init({  
530 - id : "sbiricuda" // textarea id  
531 - ,syntax: "html" // syntax to be uses for highgliting  
532 - ,start_highlight: true // to display with highlight mode on start-up  
533 - ,syntax: "html"  
534 - ,replace_tab_by_spaces: 4,  
535 - isEditable : false,  
536 - });  
537 -  
538 - } catch (e){  
539 - var resp = {  
540 - status: 'error',  
541 - data: 'Unknown error occurred: [' + request.response + ']'  
542 - };  
543 - }  
544 - }};  
545 -  
546 - request.open('GET', DEEP.deepUrl + DEEP.selected_datalet);  
547 - request.send();  
548 -  
549 - }; 103 + <iframe style="width:100%; height:62vh" frameborder="0" srcdoc='
  104 + <head>
  105 + <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  106 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
  107 + <link rel="import" href="controllets/data-sevc-controllet/data-sevc-controllet.html" />
  108 + <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  109 + <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  110 + <script type="text/javascript">
  111 + $(document).ready(function () {
  112 +
  113 + var datasets = [
  114 + {decription:"", name:"Italy - Consuntivo entrate 2009", url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"},
  115 + {decription:"", name:"Italy - Consuntivo entrate 2010",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda"},
  116 + {decription:"", name:"Italy - Consuntivo entrate 2011",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89"},
  117 + {decription:"", name:"Italy - Consuntivo entrate 2012",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee"},
  118 + {decription:"", name:"Italy - Consuntivo entrate 2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
  119 + {decription:"", name:"Holland - Vestigingen register gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd"},
  120 + {decription:"", name:"Holland - Woonruimte gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f"},
  121 + {decription:"", name:"Ireland - SDCC Traffic Cameras",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52"},
  122 + {decription:"", name:"Ireland - Derelict Site Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"},
  123 + {decription:"", name:"Ireland - Dublin City Council Commencement Notices",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075"},
  124 + {decription:"", name:"Ireland - Dublin City Council Planning Applications",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e"},
  125 + {decription:"", name:"Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff"},
  126 + {decription:"", name:"Ireland - Fingal Council Planning Applications for last 7 years",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441"},
  127 + {decription:"", name:"Ireland - Planning Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d"},
  128 + {decription:"", name:"Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6"},
  129 + {decription:"", name:"Bubble example",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
  130 + {decription:"", name:"Issy - 3d pie chart", url:"https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"}
  131 + ];
  132 +
  133 + var dsc = document.getElementById("dsc");
  134 + dsc.setAttribute("datasets", JSON.stringify(datasets));
  135 +
  136 + window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});
  137 +
  138 + });
  139 + </script>
  140 + </head>
  141 + <body>
  142 + <data-sevc-controllet localization="en" id="dsc" deep-url="http://deep.routetopa.eu/DEEP/" datalets-list-url="http://deep.routetopa.eu/DEEP/datalets-list"></data-sevc-controllet>
  143 + </body>
  144 + '>
  145 + </iframe>
  146 +
  147 + <div id="code_area">
  148 + <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 15vh;max-height: 15vh;" style="" rows="4" cols="50">
  149 +Copy and paste this code to inject the datalet in you page.
  150 + </textarea>
  151 + </div>
550 152
551 -</script> 153 + <!--<div>
  154 + <textarea style="width: 90%; margin-left:10px; height: 110px" id="code-textarea"></textarea>
  155 + </div>-->
552 156
553 </body> 157 </body>
554 </html> 158 </html>
555 \ No newline at end of file 159 \ No newline at end of file