SGH / COMPONENTS

Commit 88b60b91e6d6be7f47a48e7566f3f213fb53a9dd

Authored by Luigi Serra
2 parents b420f252 4143bce6

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

Inline Side-by-side
Showing 5 changed files with 212 additions and 562 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html
  View file @88b60b9
... ... @@ -16,7 +16,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
16 16  
17 17 :host {
18 18 display: block;
19   - /*background: #000;*/
  19 + background: #FFFFFF;
  20 + /*margin-top: 16px;;*/
20 21 }
21 22  
22 23 /* clearfix */
... ... @@ -28,7 +29,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 29 }
29 30  
30 31 /* ---- grid-item ---- */
31   - ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;}
  32 + ::content .grid-item {
  33 + float: left;
  34 + box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
  35 + border-top: 4px solid white;
  36 + border-left: 4px solid white;
  37 + cursor: pointer;
  38 + }
32 39 ::content .grid-sizer {width: 200px;}
33 40 ::content .grid-item-w20 {width: 200px;}
34 41 ::content .grid-item-w40 {width: 400px;}
... ... @@ -42,44 +49,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
42 49 ::content .grid-item-c4 {background-color: #2C29FF;}
43 50 /* ---- grid-item ---- */
44 51  
45   - ::content .room-body {color:#FFFFFF;}
  52 + ::content .room-body
  53 + {
  54 + height: calc(100% - 40px);/* 100% =*200/400 -4 border*/
  55 + width: calc(100% - 16px);
  56 + color:#FFFFFF;
  57 + padding: 8px;
  58 + word-wrap: break-word;
  59 + overflow: hidden;
  60 + text-overflow: ellipsis;
  61 + }
46 62 ::content .room-subject
47 63 {
48 64 position: absolute;
49   - width: 100%;
50   - height: 30px;
51   - bottom: 30px;
52   - background-color: rgba(0,0,0,0.6);
  65 + width: calc(100% - 16px);
  66 + height: 32px;
  67 + bottom: 32px;
  68 + background-color: rgba(0,0,0,0.8);
  69 + padding: 16px 0px 0px 16px;
53 70 color: #FFFFFF;
54   - }
55   - ::content .room-subject span
56   - {
57   - top: 5px;
58   - left: 5px;
59   - position: relative;
60   - text-overflow: ellipsis;
  71 + font-weight: 700;
  72 + white-space: nowrap;
  73 + word-wrap: break-word;
61 74 overflow: hidden;
62   - white-space:nowrap;
63   - text-overflow:ellipsis;
64   - display:inline-block;
65   - }
66   - ::content .room-body span
67   - {
68   - top: 5px;
69   - left: 5px;
70   - position: relative;
71 75 text-overflow: ellipsis;
72   - overflow: hidden;
73   - text-overflow:ellipsis;
74   - display:inline-block;
75 76 }
  77 +
76 78 ::content .room-timestamp
77 79 {
78 80 position: absolute;
79   - right:3px;
80   - bottom: 3px;
81   - font-size: 8px;
82   - color: #CCCCCC;
  81 + bottom: 0px;
  82 + right:0px;
  83 + color: #FFFFFF;
  84 + padding: 8px;
  85 + font-size: small;
  86 + line-height: 16px;
83 87 }
84 88 </style>
85 89  
... ...
controllets/data-sevc-controllet/demo/index.html
  View file @88b60b9
... ... @@ -21,7 +21,7 @@
21 21 <body>
22 22  
23 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 26 <script>
27 27  
... ...
controllets/room-controllet/room-controllet.html
  View file @88b60b9
... ... @@ -2,46 +2,79 @@
2 2  
3 3 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
4 4  
  5 +<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
  6 +<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
  7 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  8 +
5 9 <dom-module id="room-controllet">
6 10  
7 11 <template>
8 12  
9 13 <style is="custom-style">
10 14  
11   - .room {
12   - cursor: pointer;
  15 + iron-icon {
  16 + padding: 0px;
  17 + margin: 0px;
13 18 }
14 19  
15   - .room-body {
  20 + iron-icon.this {
  21 + position: absolute;
  22 + top: -3px;
  23 + left: -3px;
  24 +
  25 + -moz-transform: scaleX(-1);
  26 + -o-transform: scaleX(-1);
  27 + -webkit-transform: scaleX(-1);
  28 + transform: scaleX(-1);
  29 + filter: FlipH;
  30 + -ms-filter: "FlipH";
16 31  
17 32 }
18 33  
19   - .room-subject {
  34 + paper-dialog {
  35 + margin: 0px;
  36 + }
20 37  
  38 + .room-tooltip {
  39 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  40 + position: absolute;
  41 + min-width: 250px;
  42 + top: 49px;
  43 + left: 98px;
  44 + padding: 16px;
21 45 }
22 46  
23   - .room-timestamp {
  47 + .div_icon{
  48 + display: inline-block;
  49 + height: 20px;
  50 + width: 20px;
  51 + margin:4px 6px 4px 2px;
  52 + }
24 53  
  54 + p {
  55 + padding-top: 8px;
  56 + margin: 0px;
  57 + white-space: nowrap;
25 58 }
26 59  
27   - .room-tooltip {
28   - position: absolute;
29   - border: 2px solid #2196F3;
30   - background-color: #E0E0E0;
31   - min-width: 248px;
32   - top: 0px;
33   - left: 0px;
  60 + .ptop{
  61 + padding-top: 0px;
34 62 }
35 63  
36 64 </style>
37 65  
38   - <div id={{roomId}} class$="grid-item room {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip">
39   - <div class="room-body"><span>{{body}}</span></div>
  66 + <div id={{roomId}} class$="grid-item {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip" style$="background-color: {{roomColor}};">
  67 + <div class="room-body">{{body}}</div>
40 68 <div class="room-subject"><span>{{subject}}</span></div>
41 69 <div class="room-timestamp">{{timestamp}}</div>
42 70  
43   - <paper-dialog id="pippo" class="room-tooltip">
44   - {{roomId}}
  71 + <paper-dialog id="room_info" class="room-tooltip">
  72 + <iron-icon icon="communication:call-made" class="this" style="color: #2196F3;"></iron-icon>
  73 + <p class="ptop">This room <b style="color: #2196F3;">{{subject}}</b>,</p>
  74 + <p>created by <b style="color: #2196F3;">{{roomOwner}}</b> has:</p>
  75 + <p><iron-icon class="div_icon" style$="background-color: {{roomColor}};"></iron-icon><b style$="color: {{roomColor}};">{{_howMany(roomShape, 0)}} views</b> (<b style$="color: {{roomColor}};">{{roomViews}}</b>),</p>
  76 + <p><iron-icon icon="editor:border-left"></iron-icon> <b>{{_howMany(roomShape, 1)}} comments</b> (<b>{{comments}}</b>) and</p>
  77 + <p><iron-icon icon="editor:border-bottom"></iron-icon> <b>{{_howMany(roomShape, 2)}} datasets</b> (<b>{{datasets}}</b>).</p>
45 78 </paper-dialog>
46 79 </div>
47 80  
... ... @@ -75,6 +108,16 @@
75 108 value : ""
76 109 },
77 110  
  111 + roomOwner : {
  112 + type : String,
  113 + value : ""
  114 + },
  115 +
  116 + roomShape : {
  117 + type : Array,
  118 + value : undefined
  119 + },
  120 +
78 121 body : {
79 122 type : String,
80 123 value : ""
... ... @@ -90,7 +133,7 @@
90 133 value : ""
91 134 },
92 135  
93   - openData : {
  136 + roomViews : {
94 137 type : Number,
95 138 value : undefined
96 139 },
... ... @@ -98,31 +141,31 @@
98 141 comments : {
99 142 type : Number,
100 143 value : undefined
  144 + },
  145 +
  146 + datasets : {
  147 + type : Number,
  148 + value : undefined
101 149 }
102 150  
103 151 },
104 152  
105 153 attached : function() {
106   - var room = document.getElementById(this.roomId);
107   - $(room).css('background', this.roomColor);
  154 + console.log(this.views);
108 155 },
109 156  
110 157 _showTooltip: function() {
111   -
112   - var room = document.getElementById(this.roomId);
113   - var pos = room.getBoundingClientRect();
114   - console.log(pos.top);
115   - console.log(pos.left);
116   -// $(this.$.pippo).css("top", 1000);
117   -// $(this.$.pippo).css("left", 100);
118   -// $("#pippo").css("top", pos.top - 4);
119   -// $("#pippo").css("left", pos.left - 4);
120   - this.$.pippo.open();
  158 + this.$.room_info.open();
121 159 },
122 160  
123 161 _hideTooltip: function() {
124   - this.$.pippo.close();
125   - console.log("eeeeeeeeeeeeeeeeee")
  162 + this.$.room_info.close();
  163 + },
  164 +
  165 + _howMany: function(A, i) {
  166 +// return this.roomShape[i];
  167 +// console.log(i);
  168 + return A[i];
126 169 }
127 170  
128 171 });
... ...
datalets/datasetexplorer-datalet/js/buildtreemap.js
  View file @88b60b9
... ... @@ -15,7 +15,6 @@ function build(root, meta, place_holder, select_listener, width, height) {
15 15  
16 16 var x = d3.scale.linear()
17 17 .domain([0, width])
18   - .domain([0, width])
19 18 .range([0, width]);
20 19  
21 20 var y = d3.scale.linear()
... ... @@ -247,8 +246,8 @@ function build(root, meta, place_holder, select_listener, width, height) {
247 246 line = [word],
248 247 lineNumber = 0,
249 248 lineHeight = 1.1, // ems
250   - x = parseFloat(text.attr("x")),
251   - y = parseFloat(text.attr("y")),
  249 + //x = parseFloat(text.attr("x")),
  250 + //y = parseFloat(text.attr("y")),
252 251 dy = parseFloat(text.attr("dy"));
253 252 text.selectAll("tspan").remove();
254 253  
... ...
demo.html
  View file @88b60b9
1 1 <!DOCTYPE html>
2 2 <html lang="en">
3 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 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 9 <link rel="import" href="bower_components/paper-item/paper-item.html">
8 10 <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
9 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 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 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 19 <script type="text/javascript">
34   - selected_component_url = "";
35   -
36 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 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 56 </script>
52 57  
53 58 <style>
  59 +
54 60 body {
55 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 64 #toolbar{
73 65 background: #2196F3 ;
74 66 }
  67 +
75 68 #logo{
76 69 width: 56px;
77 70 height: 56px;
... ... @@ -81,90 +74,10 @@
81 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 77 </style>
137 78  
138 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 82 <paper-toolbar id="toolbar">
170 83 <paper-menu-button>
... ... @@ -175,380 +88,71 @@
175 88 </paper-menu>
176 89 </paper-menu-button>
177 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 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 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 157 </body>
554 158 </html>
555 159 \ No newline at end of file
... ...