Blame view

datalets/base-datalet/base-datalet.html 17.5 KB
73bcce88   luigser   COMPONENTS
1
  <!--

5e6ba8af   isisadmin   datalet doc update
2
3
4
  @license

      The MIT License (MIT)

  

94601c1f   Renato De Donato   trevieww multitable
5
      Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy

5e6ba8af   isisadmin   datalet doc update
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  

      Permission is hereby granted, free of charge, to any person obtaining a copy

      of this software and associated documentation files (the "Software"), to deal

      in the Software without restriction, including without limitation the rights

      to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

      copies of the Software, and to permit persons to whom the Software is

      furnished to do so, subject to the following conditions:

  

      The above copyright notice and this permission notice shall be included in

      all copies or substantial portions of the Software.

  

      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

      IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

      FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

      AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

      LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

      OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

      THE SOFTWARE.

a1f0799c   isisadmin   datalet global re...
24
25
  -->

  

ae17a8dc   Luigi Serra   Controllet and da...
26
  <!--

950d181d   Luigi Serra   license updates
27
28
  * Developed by :

  * ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu

ae17a8dc   Luigi Serra   Controllet and da...
29
30
31
  *

  -->

  

a1f0799c   isisadmin   datalet global re...
32
33
34
  <link rel="import" href="../../bower_components/polymer/polymer.html">

  

  <!--

5e6ba8af   isisadmin   datalet doc update
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
  The `base-datalet` is the base component that includes datalet footer (with information about dataset domain and ROUTE-TO-PA project).

  Base datalet includes polymer.html and the BaseDataletBehaviors javascript file that define the datalet workcycle and the datalet base properties : dataUrl, fields and data.

  Every datalet must include this one in its `<template>` section.

  

  Example :

  

      <dom-module id="every-datalet">

          <template>

              ...

              <base-datalet data-url="{{dataUrl}}" fields="{{fields}}"></base-datalet>

              ...

          </template>

      </dom-module>

  

  @element base-datalet

  @status v0.1

  @homepage

  @group datalets

73bcce88   luigser   COMPONENTS
53
  -->

73bcce88   luigser   COMPONENTS
54
55
56
57
  

  <dom-module id="base-datalet">

      <template>

          <style>

0f6424fe   root   update new data-s...
58
59
60
61
62
63
64
65
              a {

                  color: #00BCD4;

                  text-decoration: none;

              }

              a:hover {

                  color: #2db395;

                  text-decoration: underline;

              }

94601c1f   Renato De Donato   trevieww multitable
66
              #base_datalet_container {

94601c1f   Renato De Donato   trevieww multitable
67
                  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;

59100bec   Renato De Donato   localization + ba...
68
                  padding-top: 2px;

59100bec   Renato De Donato   localization + ba...
69
                  border-top: 2px solid #B6B6B6;

c94733d2   Renato De Donato   paper-card modify
70
                  margin-top: 8px;

94601c1f   Renato De Donato   trevieww multitable
71
72
              }

              #base_datalet_rtp {

94601c1f   Renato De Donato   trevieww multitable
73
                  display: flex;

59100bec   Renato De Donato   localization + ba...
74
                  padding-top: 4px;

94601c1f   Renato De Donato   trevieww multitable
75
              }

0f6424fe   root   update new data-s...
76
              #rtp {

94601c1f   Renato De Donato   trevieww multitable
77
78
                  padding-top: 8px;

                  padding-right: 8px;

c94733d2   Renato De Donato   paper-card modify
79
                  font-size: 12px;

73bcce88   luigser   COMPONENTS
80
              }

0f6424fe   root   update new data-s...
81
              #rtpalogo {

0b7cbd33   Renato De Donato   title-desciption
82
                  height: 32px;

94601c1f   Renato De Donato   trevieww multitable
83
                  width: 32px;

73bcce88   luigser   COMPONENTS
84
              }

0f6424fe   root   update new data-s...
85
              #base_datalet_spin {

0b7cbd33   Renato De Donato   title-desciption
86
                  height: 64px;

73cc8795   pina   dataset page and ...
87
                  width: 100%;

0b7cbd33   Renato De Donato   title-desciption
88
                  margin-top: 64px;

59100bec   Renato De Donato   localization + ba...
89
              }

0b7cbd33   Renato De Donato   title-desciption
90
  

59100bec   Renato De Donato   localization + ba...
91
92
93
              #base_datalet_source_link{

                  padding-top: 12px;

              }

0b7cbd33   Renato De Donato   title-desciption
94
95
96
97
98
99
  

              #span_title{

                  font-size: small;

              }

  

              #span_description{

28265108   Renato De Donato   new link-text con...
100
                  font-style: italic;

0b7cbd33   Renato De Donato   title-desciption
101
102
                  color: #727272;

              }

498cdf34   Andrea Petta   leafletjs
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
  /*EXPORT*/

              .export

              {

                  cursor: pointer;

                  background-image:url("./static/images/more_horiz_grey600_36x36.png");

                  background-repeat: no-repeat;

                  position: absolute;

                  padding: 31px;

                  right: 21px;

                  top: 85px;

              }

  

              .highcharts-contextmenu

              {

                  position: absolute;

                  right: 50px;

                  top: 114px;

                  display: none;

                  border: solid 1px #000000;

              }

  

              .highcharts-contextmenu-container

              {

                  background: rgb(255, 255, 255);

              }

  

              .highcharts-contextmenu-container div

              {

                  cursor: pointer;

                  padding: 0px 10px;

                  color: rgb(48, 48, 48);

                  font-size: 11px;

                  background: none;

              }

  

              .highcharts-contextmenu-container div:hover

              {

                  background: #cccccc;

              }

  /*EXPORT*/

73bcce88   luigser   COMPONENTS
143
144
          </style>

  

73cc8795   pina   dataset page and ...
145
          <div id="base_datalet_imgWaitDatalet">

b4accc86   Renato De Donato   datalet improved
146
              <img id="base_datalet_spin" src="static/images/spin.svg">

73cc8795   pina   dataset page and ...
147
          </div>

0f6424fe   root   update new data-s...
148
  

94601c1f   Renato De Donato   trevieww multitable
149
          <div id="base_datalet_container">

0f6424fe   root   update new data-s...
150
  

59100bec   Renato De Donato   localization + ba...
151
              <div id="base_datalet_title_description">

0b7cbd33   Renato De Donato   title-desciption
152
                  <span id="span_title"><b>{{title}}</b> <span id="span_description">{{description}}</span></span>

59100bec   Renato De Donato   localization + ba...
153
154
155
156
157
              </div>

  

              <div id="base_datalet_source_link">

                  <b>Source:</b> <a id="base_datalet_source" target="_blank"></a> (<a id="base_datalet_link" target="_blank">dataset</a>)

              </div>

0f6424fe   root   update new data-s...
158
  

94601c1f   Renato De Donato   trevieww multitable
159
              <div id="base_datalet_rtp">

73cc8795   pina   dataset page and ...
160
                  <div id="rtp">Powered by ROUTE-TO-PA</div>

9579b866   Renato De Donato   firefox bug fix
161
                  <div><a href="http://www.routetopa.eu/" target="_blank"><img id="rtpalogo" src="static/images/rtpalogo.png" ></a></div>

94601c1f   Renato De Donato   trevieww multitable
162
              </div>

b4accc86   Renato De Donato   datalet improved
163
  

498cdf34   Andrea Petta   leafletjs
164
165
166
167
              <div id="export">

                  <div class="export" on-click="showHideExportMenu"></div>

                  <div class="highcharts-contextmenu" id="highcharts-contextmenu">

                      <div class="highcharts-contextmenu-container">

fb1e71b5   Andrea Petta   plugin update
168
169
170
                          <div id="export_html"     on-click="exportToHTML">Export to HTML</div>

                          <div id="export_png"      on-click="exportToIMG">Export to PNG</div>

                          <div id="export_rtf"      on-click="exportRTF">Export to RTF</div>

498cdf34   Andrea Petta   leafletjs
171
172
173
174
175
                          <div id="export_my_space" on-click="importToMySpace">Import in My Space</div>

                      </div>

                  </div>

              </div>

  

94601c1f   Renato De Donato   trevieww multitable
176
177
          </div>

  

73bcce88   luigser   COMPONENTS
178
179
      </template>

  

4e7eacf4   Luigi Serra   Controllets and d...
180
181
      <script src="static/js/BaseDataletBehavior.js"></script>

      <script src="static/js/WorkcycleBehavior.js"></script>

73bcce88   luigser   COMPONENTS
182
183
184
185
  

      <script>

          BaseDatalet = Polymer({

              is: 'base-datalet',

3c812cc9   Renato De Donato   title-desciption ...
186
  

5e6ba8af   isisadmin   datalet doc update
187
              /**

21107197   Andrea Petta   test
188
               *

7be24196   Renato De Donato   test2
189
               * It is called after the element's template has been stamped and all elements inside the element's local

5e6ba8af   isisadmin   datalet doc update
190
191
192
               * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)

               * and had their ready method called.

               *

73cc8795   pina   dataset page and ...
193
194
195
196
               * Extract

               *   1) the dataset domain

               *   2) the page of a datalet

               *   from the entire URL and set the text content of the datalet footer.

5e6ba8af   isisadmin   datalet doc update
197
               * @method ready

5e6ba8af   isisadmin   datalet doc update
198
               */

73bcce88   luigser   COMPONENTS
199
              ready: function(){

498cdf34   Andrea Petta   leafletjs
200
201
202
  

                  this.setExportMenu();

  

59100bec   Renato De Donato   localization + ba...
203
                  if(this.dataUrl != undefined) {

0f6424fe   root   update new data-s...
204
  

59100bec   Renato De Donato   localization + ba...
205
206
207
                      var urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];

                      this.$.base_datalet_source.innerHTML = urlSource;

                      this.$.base_datalet_source.setAttribute("href", urlSource);

73cc8795   pina   dataset page and ...
208
  

73cc8795   pina   dataset page and ...
209
  

59100bec   Renato De Donato   localization + ba...
210
211
212
                      //OpenDataSoft check

                      if(this.dataUrl.indexOf("/records/") > -1 )

                      {

8c25f3d6   Renato De Donato   issy
213
214
215
216
217
218
219
                          var i;

                          if(this.dataUrl.indexOf("&") > -1)

                              i = this.dataUrl.indexOf("&");

                          else

                              i = this.dataUrl.length;

  

                          this.$.base_datalet_link.setAttribute("href", urlSource + "/explore/dataset/" + this.dataUrl.substring(this.dataUrl.indexOf("=")+1, i));

59100bec   Renato De Donato   localization + ba...
220
                      }

2b65b828   isisadmin   base datalet fix
221
222
                      // CKAN

                      else if(this.dataUrl.indexOf("datastore_search?resource_id") > -1 )

59100bec   Renato De Donato   localization + ba...
223
                      {

2b65b828   isisadmin   base datalet fix
224
225
226
227
228
229
230
231
                          var comp = this;

                          $.ajax({

                              url: this.dataUrl.replace("datastore_search?resource_id", "resource_show?id"),

                              dataType: "json",

                              success: function(e){

                                  comp.$.base_datalet_link.setAttribute("href", urlSource + "/dataset/" + e.result.package_id + "/resource/" + e.result.id);

                              }

                          });

59100bec   Renato De Donato   localization + ba...
232
                      }

6cf27113   pina   add link dataset ...
233
                  }

b4190b56   Renato De Donato   myspace update
234
235
236
237
238
  

                  else {

                      this.hideFooter();

                      this.$.base_datalet_spin.remove();

                  }

035bbee3   Luigi Serra   Datalets and cont...
239
              },

17da8e08   Renato De Donato   hidden preview da...
240
  

035bbee3   Luigi Serra   Datalets and cont...
241
242
243
              /**

               * Set the domain url to show in the footer

               */

fb05b400   Renato De Donato   controllet 2.0, n...
244
245
246
  //            setDomain: function(url){

  //                this.$.domain.textContent = url;

  //            },

17da8e08   Renato De Donato   hidden preview da...
247
248
249
  

              hideFooter: function() {

                  this.$.base_datalet_container.innerHTML = "";

c94733d2   Renato De Donato   paper-card modify
250
                  this.$.base_datalet_container.style.margin = 0;

17da8e08   Renato De Donato   hidden preview da...
251
                  this.$.base_datalet_container.style.border = 0;

498cdf34   Andrea Petta   leafletjs
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
              },

  

              setExportMenu: function()

              {

                  // xxxx BITMASK. FROM RIGHT : HTML, PNG, RTF, MY SPACE (eg. 1111 show all, 0000 hide all)

                  var bitmask = this.export_menu;

                  var menu = ["export_html", "export_png", "export_rtf", "export_my_space"];

  

                  if(bitmask == 15) return;

  

                  if(bitmask == 0)

                  {

                      this.$.export.style.display = "none";

                      return;

                  }

  

                  //var max_i = Math.floor(Math.log2(this.export_menu))+1;

                  for(var i=0; i<menu.length; i++)

                  {

                      if(bitmask % 2 == 0)

                          this.$[menu[i]].style.display = "none";

  

                      bitmask = Math.floor(bitmask/2);

                  }

              },

  

              showHideExportMenu: function()

              {

                  if(this.$["highcharts-contextmenu"].style.display == "block")

                      this.$["highcharts-contextmenu"].style.display = "none";

                  else

                      this.$["highcharts-contextmenu"].style.display = "block";

              },

  

              exportToHTML: function () {

                  var parent = this.parentElement;

                  var html = '';

                  while(!parent.hasAttribute("data-url"))

                      parent = parent.parentElement;

  

                  html += '<'+parent.is;

                  for(var i=0; i<parent.attributes.length; i++)

                      html += ' '+parent.attributes[i].name+'=\''+parent.attributes[i].value+'\'';

                  html += '></'+parent.is+'>';

  

                  var dataletImport = '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +

                          '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +

                          '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES  -->\n';

  

                  var dataletLink = '<link rel="import" href="http://deep.routetopa.eu/COMPONENTS/datalets/'+parent.is+'/'+parent.is+'.html" /> \n';

  

                  window.prompt("Copy to clipboard: Ctrl+C, Enter", dataletImport+dataletLink+html);

              },

  

  

              exportToIMG: function () {

                  var parent = this.parentElement;

                  while(!parent.hasAttribute("data-url"))

                      parent = parent.parentElement;

  

  

f81cb81f   Andrea Petta   plugin update
313
                  var svg = $(parent).find(".highcharts-container");

498cdf34   Andrea Petta   leafletjs
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
                  svg = $(svg[0]).html();

  

                  var xhr = new XMLHttpRequest();

  

                  xhr.onreadystatechange = function(){

                      if (this.readyState == 4 && this.status == 200){

                          var blob = new Blob([this.response], {type:'octet/stream'});

                          var downloadUrl = window.URL.createObjectURL(blob);

                          var a = document.createElement("a");

                          a.href = downloadUrl;

                          a.download = "image.png";

                          document.body.appendChild(a);

                          a.click();

                          //window.URL.revokeObjectURL(downloadUrl);

                      }

                  };

  

dc2827bb   Andrea Petta   leafletjs
331
332
                  //xhr.open('POST', 'http://172.16.15.77/DEEalerProvider/DEEP/export/export-datalet-as-img', true);

                  xhr.open('POST', 'http://stage.routetopa.eu/deep/DEEP/export/export-datalet-as-img', true);

498cdf34   Andrea Petta   leafletjs
333
334
335
336
337
338
339
                  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  

                  var post = 'svg_data=' + window.encodeURIComponent(svg);

                  xhr.responseType = 'blob';

                  xhr.send(post);

              },

  

fb1e71b5   Andrea Petta   plugin update
340
341
342
343
344
345
              exportRTF: function () {

                  var parent = this.parentElement;

                  while(!parent.hasAttribute("data-url"))

                      parent = parent.parentElement;

  

  

f81cb81f   Andrea Petta   plugin update
346
                  var svg = $(parent).find(".highcharts-container");

fb1e71b5   Andrea Petta   plugin update
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
                  svg = $(svg[0]).html();

  

                  var xhr = new XMLHttpRequest();

  

                  xhr.onreadystatechange = function(){

                      if (this.readyState == 4 && this.status == 200){

                          var blob = new Blob([this.response], {type:'octet/stream'});

                          var downloadUrl = window.URL.createObjectURL(blob);

                          var a = document.createElement("a");

                          a.href = downloadUrl;

                          a.download = "datalet.rtf";

                          document.body.appendChild(a);

                          a.click();

                          //window.URL.revokeObjectURL(downloadUrl);

                      }

                  };

  

                  //xhr.open('POST', 'http://172.16.15.77/DEEalerProvider/DEEP/export/export-datalet-as-rtf', true);

                  xhr.open('POST', 'http://stage.routetopa.eu/deep/DEEP/export/export-datalet-as-rtf', true);

                  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  

                  var post = 'svg_data=' + window.encodeURIComponent(svg) + '&datalet=' + parent.is + '&dataset=' + this.$.base_datalet_link.getAttribute("href");

                  xhr.responseType = 'blob';

a55fd02c   Andrea Petta   plugin update
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
  

                  //OpenDataSoft check

                  if(this.dataUrl.indexOf("/records/") > -1 )

                  {

                      var urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];

  

                      var i;

                      if(this.dataUrl.indexOf("&") > -1)

                          i = this.dataUrl.indexOf("&");

                      else

                          i = this.dataUrl.length;

  

                      $.ajax({

                          url: urlSource + "/api/dataset/1.0/" + this.dataUrl.substring(this.dataUrl.indexOf("=")+1, i),

                          dataType: "json",

                          success: function(e){

                              post += '&name=' + e.metas.title + '&description=' + e.metas.description + '&created=' + e.metas.data_processed  + '&lastModified=' + e.metas.modified;

                              xhr.send(post);

                          }

                      });

                  }

                  else if(this.dataUrl.indexOf("datastore_search?resource_id") > -1 )

                  {

                      $.ajax({

                          url: this.dataUrl.replace("datastore_search?resource_id", "resource_show?id"),

                          dataType: "json",

                          success: function(e){

                              post += '&name=' + e.result.name + '&description=' + e.result.description + '&created=' + e.result.created + '&format=' + e.result.format + '&lastModified=' + e.result.last_modified;

                              xhr.send(post);

                          }

                      });

                  }

                  else

                  {

                      xhr.send(post);

                  }

  

fb1e71b5   Andrea Petta   plugin update
407
408
              },

  

498cdf34   Andrea Petta   leafletjs
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
              importToMySpace: function() {

                  var parent = this.parentElement;

                  var html = '';

                  while(!parent.hasAttribute("data-url"))

                      parent = parent.parentElement;

  

                  var params = {};

                  var fields;

                  var component = parent.is;

  

                  for(var i=0; i<parent.attributes.length; i++)

                      params[parent.attributes[i].name] = parent.attributes[i].value;

  

                  delete params["fields"];

                  fields = parent.attributes["fields"].value.replace(/\[|\]/g, "");

                  params = JSON.stringify(params);

  

                  $.ajax({

                      type: 'post',

                      url: ODE.ajax_private_room_datalet,

                      data: {"component":component, "fields":fields, "params":params, "data":""},

                      dataType: 'JSON',

                      success: function(data){

                          if(data.status == "ok")

                          {

f7f73c85   Andrea Petta   plugin update
434
                              alert("Datalet added to Myspace");

498cdf34   Andrea Petta   leafletjs
435
436
437
438
439
440
441
442
443
444
445
                          }

                          else

                          {

                              alert("Error");

                          }

                      },

                      error: function( XMLHttpRequest, textStatus, errorThrown ){

                          OW.error(textStatus);

                      },

                      complete: function(){}

                  });

17da8e08   Renato De Donato   hidden preview da...
446
              }

498cdf34   Andrea Petta   leafletjs
447
  

2b65b828   isisadmin   base datalet fix
448
           });

73bcce88   luigser   COMPONENTS
449
450
      </script>

  </dom-module>