Commit 0173197e53ea553c12f1969ae1803ffb254ec238

Authored by Luigi Serra
2 parents 0e9a5727 ffd617ec

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

controllets/create-card-controllet/create-card-controllet.html
@@ -50,7 +50,14 @@ @@ -50,7 +50,14 @@
50 } 50 }
51 51
52 p { 52 p {
53 - margin: 16px 8px 0px 8px; 53 + padding: 16px 0px 0px 8px;
  54 + margin: 0px;
  55 + }
  56 +
  57 + #create_card_text {
  58 + width: 100%;
  59 + height: 100%;
  60 + background-color: #FFFFCC;
54 } 61 }
55 62
56 #create_card_title { 63 #create_card_title {
@@ -62,11 +69,6 @@ @@ -62,11 +69,6 @@
62 #create_card_description { 69 #create_card_description {
63 font-style: italic; 70 font-style: italic;
64 color: #727272; 71 color: #727272;
65 - text-align: center;  
66 - }  
67 -  
68 - #create_card_text {  
69 -  
70 } 72 }
71 73
72 paper-input, paper-textarea { 74 paper-input, paper-textarea {
@@ -138,6 +140,7 @@ @@ -138,6 +140,7 @@
138 </paper-material> 140 </paper-material>
139 141
140 <paper-material id="create_card_content" elevation="5"> 142 <paper-material id="create_card_content" elevation="5">
  143 +
141 <div class="input_header">PREVIEW</div> 144 <div class="input_header">PREVIEW</div>
142 145
143 <template is="dom-if" if="{{_checkType(type, 'link')}}"> 146 <template is="dom-if" if="{{_checkType(type, 'link')}}">
@@ -148,9 +151,11 @@ @@ -148,9 +151,11 @@
148 151
149 <template is="dom-if" if="{{_checkType(type, 'text')}}"> 152 <template is="dom-if" if="{{_checkType(type, 'text')}}">
150 153
151 - <p id ="create_card_title">{{cardTitle}}</p>  
152 - <p id ="create_card_description">{{description}}</p>  
153 - <p id ="create_card_text">{{text}}</p> 154 + <div id="create_card_text">
  155 + <p id ="create_card_title">{{cardTitle}}</p>
  156 + <p id ="create_card_description">{{description}}</p>
  157 + <p>{{text}}</p>
  158 + </div>
154 159
155 </template> 160 </template>
156 161
@@ -216,6 +221,7 @@ @@ -216,6 +221,7 @@
216 221
217 if(!link.invalid && value.length > 16) { 222 if(!link.invalid && value.length > 16) {
218 iframe.setAttribute("src", value); 223 iframe.setAttribute("src", value);
  224 + this.link = value;
219 this._resize(); 225 this._resize();
220 } 226 }
221 } 227 }
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
@@ -38,7 +38,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -38,7 +38,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
38 <div id="fixed" class="fixed" style$="background-color:{{color}}"></div> 38 <div id="fixed" class="fixed" style$="background-color:{{color}}"></div>
39 <div id="card" class="card" style$="background-color:{{color}}"> 39 <div id="card" class="card" style$="background-color:{{color}}">
40 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}"> 40 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
41 - <iframe id="public_room_iframe" src="public-room/{{publicRoom}}" width="100%" height="100%"></iframe> 41 + <iframe id="public_room_iframe" src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
42 </template> 42 </template>
43 </div> 43 </div>
44 44
@@ -122,6 +122,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -122,6 +122,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
122 122
123 _computeFixedBackgroundClass: function(color) { 123 _computeFixedBackgroundClass: function(color) {
124 this.$.fixed = color; 124 this.$.fixed = color;
  125 + },
  126 +
  127 + attached: function()
  128 + {
  129 + this.fire('fullsize-page-with-card-controllet_attached');
125 } 130 }
126 131
127 }); 132 });
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
@@ -91,6 +91,14 @@ Example: @@ -91,6 +91,14 @@ Example:
91 display: none; 91 display: none;
92 } 92 }
93 93
  94 + ::content .card_grid .modify{
  95 + display: none;
  96 + }
  97 +
  98 + ::content .card_grid .open{
  99 + display: none;
  100 + }
  101 +
94 ::content .empty{ 102 ::content .empty{
95 position: absolute; 103 position: absolute;
96 right: 0; 104 right: 0;
controllets/paper-card-controllet/paper-card-controllet.html
@@ -2,6 +2,8 @@ @@ -2,6 +2,8 @@
2 <link rel="import" href="../../bower_components/paper-material/paper-material.html"/> 2 <link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
3 <link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/> 3 <link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
4 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/> 4 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  5 +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
  6 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
5 7
6 <dom-module id="paper-card-controllet"> 8 <dom-module id="paper-card-controllet">
7 9
@@ -9,191 +11,147 @@ @@ -9,191 +11,147 @@
9 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> 11 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
10 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 12 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
11 <style> 13 <style>
12 - :host {  
13 - display: inline-block;  
14 - margin: 0 8px 8px ;  
15 - font-size: 14px;  
16 - text-align: justify;  
17 - line-height: 10px;  
18 - --paper-fab-background: var(--accent-color);  
19 - font-family: 'Roboto', sans-serif;  
20 - padding-bottom: 30px;  
21 - }  
22 14
23 - paper-material { 15 + #paper_card_container {
  16 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  17 + font-size: 16px;
24 background-color: white; 18 background-color: white;
25 - border-width: 1em;  
26 } 19 }
27 20
28 - .footer {  
29 - position: relative;  
30 - height: 21px; 21 + #content {
  22 + padding: 4px 4px 0px 4px;
  23 + position:relative;
31 } 24 }
32 25
33 .legend { 26 .legend {
34 position: relative; 27 position: relative;
35 - top: -50px; 28 + top: -48px;
  29 + height: 32px;
  30 + padding: 16px 0px 0px 8px;
  31 + z-index: 1000;
36 background: rgba(0,0,0,0.8); 32 background: rgba(0,0,0,0.8);
37 - bottom: 0;  
38 color: white; 33 color: white;
39 - height: 50px;  
40 - padding: 0 16px;  
41 - left: 0; right: 0;  
42 - z-index: 1000; 34 + font-weight: 700;
43 word-wrap: break-word; 35 word-wrap: break-word;
44 } 36 }
45 - paper-fab {  
46 - position: absolute;  
47 - right: 10px;  
48 - bottom: -18px;  
49 - z-index: 10;  
50 - --paper-fab-background:#2196F3;  
51 - }  
52 37
53 - #content ::content {  
54 - /*padding: 0 16px 8px;*/  
55 - padding: 0 16px 8px;  
56 - font-weight: 300;  
57 - color: var(--secondary-text-color);  
58 - line-height: 24px;  
59 - max-height: 400px;  
60 - position:relative;  
61 - overflow: auto; 38 + .footer {
  39 + height: 16px;
62 } 40 }
63 41
64 - ::content.buttons {  
65 - margin-top: 8px; 42 + .comment {
  43 + position: relative;
  44 + top: -50px;
  45 + height: 50px;
  46 + background-color: white;
  47 + padding: 8px;
  48 + font-size: small;
  49 + color: #727272;
  50 + word-wrap: break-word;
  51 + overflow: hidden;
66 } 52 }
67 53
68 - ::content paper-button, ::content paper-icon-button {  
69 - font-weight: 500;  
70 - color: var(--accent-color); 54 + paper-fab {
  55 + position: absolute;
  56 + z-index: 10;
  57 + --paper-fab-background:#2196F3;
71 } 58 }
72 59
73 - #comment{  
74 - position:relative;  
75 - top: -50px;  
76 - min-height: 50px;  
77 - height: auto;  
78 - padding: 8px 8px 8px 8px;  
79 - font-size: 10px;  
80 - color: rgba(0,0,0,0.4);  
81 - font-family: 'Roboto', sans-serif;  
82 - word-wrap: break-word; 60 + paper-fab.open {
  61 + /*bottom: 28px;*/
  62 + bottom: -20px;
  63 + right: 8px;
83 } 64 }
84 65
85 - .delete{  
86 - position: absolute; 66 + paper-fab.modify {
87 top: -12px; 67 top: -12px;
88 - left: -12px; 68 + right: 20px;
89 --iron-icon-height: 18px; 69 --iron-icon-height: 18px;
90 --iron-icon-width: 18px; 70 --iron-icon-width: 18px;
91 width: 24px; 71 width: 24px;
92 height: 24px; 72 height: 24px;
93 - --paper-fab-background:#cccccc; 73 + --paper-fab-background:#B6B6B6;
94 } 74 }
95 75
96 - .fullscreen{  
97 - position: absolute;  
98 - top: 36px;  
99 - right: 54px; 76 + paper-fab.delete {
  77 + top: -12px;
  78 + right: -12px;
100 --iron-icon-height: 18px; 79 --iron-icon-height: 18px;
101 --iron-icon-width: 18px; 80 --iron-icon-width: 18px;
102 width: 24px; 81 width: 24px;
103 height: 24px; 82 height: 24px;
104 - --paper-fab-background:#cccccc; 83 + --paper-fab-background:#B6B6B6;
105 } 84 }
106 85
107 - #fullscreen_container{ 86 + paper-dialog {
  87 + margin: 0px;
  88 + padding: 0px;
  89 + }
  90 +
  91 + #fullscreen_container {
  92 + display: inline;
108 position: fixed; 93 position: fixed;
109 width: 80%; 94 width: 80%;
110 - /*height: 60%;*/ 95 + height: 70vh;
111 right: 0; 96 right: 0;
112 left: 0; 97 left: 0;
113 - top: 5%; 98 + top: 64px;
114 margin-right: auto; 99 margin-right: auto;
115 margin-left: auto; 100 margin-left: auto;
116 z-index: 1100; 101 z-index: 1100;
117 - display: none;  
118 - padding: 40px;  
119 - line-height: 20px; 102 + padding: 8px;
  103 + background-color: white;
120 } 104 }
121 105
122 - .close_fullscreen{  
123 - position: absolute;  
124 - top: 5px;  
125 - right: 1vw;  
126 - --iron-icon-height: 18px;  
127 - --iron-icon-width: 18px;  
128 - width: 24px;  
129 - height: 24px;  
130 - --paper-fab-background:#cccccc; 106 + #fullscreen_content {
  107 + margin: 0px;
131 } 108 }
132 -  
133 - #fullscreen_content{  
134 - position: relative;  
135 - height: 100%;  
136 - width: 100%;  
137 - z-index: 1000;  
138 - }  
139 -  
140 </style> 109 </style>
141 110
142 111
143 - <paper-material animated elevation="{{elevation}}" flex>  
144 -  
145 - <paper-fab class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>  
146 -  
147 - <div class="vertical layout">  
148 - <div id="content">  
149 - <content></content>  
150 - </div>  
151 -  
152 - <div class="legend horizontal layout center">  
153 - <span>{{cardTitle}}</span> 112 + <paper-material id="paper_card_container" elevation="{{elevation}}">
154 113
155 - <paper-fab class="fullscreen" mini icon="fullscreen" on-click="_handleFullscreenClick"></paper-fab> 114 + <paper-fab class="modify" mini icon="create" on-click="_handleModifyClick"></paper-fab>
156 115
157 - <!-- Adding icon based on card type --> 116 + <paper-fab class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>
158 117
159 - <template is="dom-if" if="{{checkType(cardType, 'text')}}"> 118 + <div id="content">
  119 + <content></content>
  120 + </div>
160 121
161 - <paper-fab class="modify" mini icon="create" on-click="_handleDetailsClick"></paper-fab> 122 + <div class="legend">
162 123
163 - </template> 124 + {{cardTitle}}
164 125
165 - <template is="dom-if" if="{{checkType(cardType, 'image')}}"> 126 + <template is="dom-if" if="{{checkType(cardType, 'link')}}">
166 127
167 - <paper-fab class="modify" mini icon="perm-media" on-click="_handleDetailsClick"></paper-fab> 128 + <paper-fab class="open" mini icon="link" on-click="_handleOpenClick"></paper-fab>
168 129
169 - </template> 130 + </template>
170 131
171 - <template is="dom-if" if="{{checkType(cardType, 'datalet')}}"> 132 + <template is="dom-if" if="{{checkType(cardType, 'text')}}">
172 133
173 - <paper-fab class="modify" mini icon="assessment" on-click="_handleDetailsClick"></paper-fab> 134 + <paper-fab class="open" mini icon="text-format" on-click="_handleOpenClick"></paper-fab>
174 135
175 - </template> 136 + </template>
176 137
177 - <template is="dom-if" if="{{checkType(cardType, 'link')}}"> 138 + <template is="dom-if" if="{{checkType(cardType, 'datalet')}}">
178 139
179 - <paper-fab class="modify" mini icon="link" on-click="_handleDetailsClick"></paper-fab> 140 + <paper-fab class="open" mini icon="assessment" on-click="_handleOpenClick"></paper-fab>
180 141
181 - </template> 142 + </template>
182 143
183 - </div> 144 + </div>
184 145
185 - <div class="footer">  
186 - <template is="dom-if" if="{{comment}}">  
187 - <div id="comment">{{comment}}</div>  
188 - </template>  
189 - </div> 146 + <div class="footer">
  147 + <div class="comment">{{comment}}</div>
  148 + </div>
190 149
191 - <paper-material elevation="4" id="fullscreen_container">  
192 - <paper-fab class="close_fullscreen" mini icon="close" on-click="_handleCloseFullscreenClick"></paper-fab>  
193 - <div id="fullscreen_content"></div>  
194 - </paper-material> 150 + <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  151 + <!--with-backdrop-->
  152 + <div id="fullscreen_content"></div>
  153 + </paper-dialog>
195 154
196 - </div>  
197 </paper-material> 155 </paper-material>
198 156
199 </template> 157 </template>
@@ -204,49 +162,54 @@ @@ -204,49 +162,54 @@
204 Polymer({ 162 Polymer({
205 is: "paper-card-controllet", 163 is: "paper-card-controllet",
206 properties: { 164 properties: {
  165 +
207 width: { 166 width: {
208 type: Number, 167 type: Number,
209 observer: "_changeWidth" 168 observer: "_changeWidth"
210 }, 169 },
  170 +
211 height: { 171 height: {
212 type: Number, 172 type: Number,
213 observer: "_changeHeight" 173 observer: "_changeHeight"
214 }, 174 },
  175 +
  176 + elevation:{
  177 + type: Number,
  178 + value: 3
  179 + },
  180 +
215 cardType:{ 181 cardType:{
216 type: String, 182 type: String,
217 value: "text" 183 value: "text"
218 }, 184 },
219 - comment:{  
220 - cardType: String,  
221 - value: ""  
222 - }, 185 +
223 cardTitle:{ 186 cardTitle:{
224 type: String, 187 type: String,
225 value: "" 188 value: ""
226 }, 189 },
227 - elevation:{  
228 - type: Number,  
229 - value: 3 190 +
  191 + comment:{//cardDescription
  192 + cardType: String,
  193 + value: ""
230 } 194 }
231 195
232 }, 196 },
233 197
234 attached: function(){ 198 attached: function(){
235 if(this.cardType == "text"){ 199 if(this.cardType == "text"){
236 - this.$.content.style.backgroundColor = "#ffc"; 200 + this.$.content.style.backgroundColor = "#FFFFCC";
237 } 201 }
  202 + $(this.$.fullscreen_container).perfectScrollbar();
238 }, 203 },
239 204
240 - _changeWidth: function(data){  
241 - this.style.width = data + "px";  
242 - //this.$.content.style.width = data + "px";  
243 - //$(this.$.content).perfectScrollbar(); 205 + _changeWidth: function(){
  206 + this.style.width = this.width + "px";
  207 + this.$.content.style.width = this.width - 8 + "px";
244 }, 208 },
245 209
246 - _changeHeight: function(data){  
247 - this.style.height = (data) + "px";  
248 - this.$.content.style.height = data + "px";  
249 - this.style.height = (this.height + ((this.text != "") ? 50 : 0)) + "px"; 210 + _changeHeight: function(){
  211 + this.style.height = this.height + 64 + "px";
  212 + this.$.content.style.height = this.height - 4 + "px";
250 $(this.$.content).perfectScrollbar(); 213 $(this.$.content).perfectScrollbar();
251 }, 214 },
252 215
@@ -254,40 +217,32 @@ @@ -254,40 +217,32 @@
254 return (type == check); 217 return (type == check);
255 }, 218 },
256 219
257 - _handleDetailsClick: function(e){  
258 - this.fire('paper-card-controllet_details-clicked', {data : this});  
259 - },  
260 -  
261 - _handleDeleteClick: function(e){ 220 + _handleDeleteClick: function(){
262 this.fire('paper-card-controllet_delete-clicked', {data : this}); 221 this.fire('paper-card-controllet_delete-clicked', {data : this});
263 }, 222 },
264 223
265 - _handleFullscreenClick: function(e){ 224 + _handleModifyClick: function(){
  225 + this.fire('paper-card-controllet_details-clicked', {data : this});
  226 + },
266 227
  228 + _handleOpenClick: function(){
  229 + var html;
267 switch(this.cardType){ 230 switch(this.cardType){
268 case 'text': 231 case 'text':
269 - this.$.fullscreen_content.style.backgroundColor = "#ffc"; 232 + this.$.fullscreen_container.style.backgroundColor = "#ffc";
270 break; 233 break;
271 case 'link': 234 case 'link':
272 - window.open(this.getAttribute('card-link'),'_blank'); 235 + window.open(this.getAttribute('card-link'), '_blank');
273 return; 236 return;
274 } 237 }
275 238
276 var html = this.$.content.innerHTML; 239 var html = this.$.content.innerHTML;
277 - this.$.content.innerHTML = "";  
278 this.$.fullscreen_content.innerHTML = html; 240 this.$.fullscreen_content.innerHTML = html;
279 241
280 - this.$.fullscreen_container.style.display = "inline-block";  
281 - },  
282 -  
283 - _handleCloseFullscreenClick: function(e){  
284 -  
285 - var html = this.$.fullscreen_content.innerHTML;  
286 - this.$.fullscreen_content.innerHTML = "";  
287 - this.$.content.innerHTML = html;  
288 -  
289 - this.$.fullscreen_container.style.display = "none"; 242 + this.$.fullscreen_container.open();
  243 + this.$.fullscreen_container.style.display = "inline";//datalet resize in chrome
290 } 244 }
  245 +
291 }) 246 })
292 </script> 247 </script>
293 248
controllets/paper-card-controllet/paper-card-controllet_old.html 0 → 100755
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  3 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  4 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  5 +
  6 +<dom-module id="paper-card-controllet">
  7 +
  8 + <template>
  9 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  10 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  11 + <style>
  12 + :host {
  13 + display: inline-block;
  14 + margin: 0 8px 8px ;
  15 + font-size: 14px;
  16 + text-align: justify;
  17 + line-height: 10px;
  18 + --paper-fab-background: var(--accent-color);
  19 + font-family: 'Roboto', sans-serif;
  20 + padding-bottom: 30px;
  21 + }
  22 +
  23 + paper-material {
  24 + background-color: white;
  25 + border-width: 1em;
  26 + }
  27 +
  28 + .footer {
  29 + position: relative;
  30 + height: 21px;
  31 + }
  32 +
  33 + .legend {
  34 + position: relative;
  35 + top: -50px;
  36 + background: rgba(0,0,0,0.8);
  37 + bottom: 0;
  38 + color: white;
  39 + height: 50px;
  40 + padding: 0 16px;
  41 + left: 0; right: 0;
  42 + z-index: 1000;
  43 + word-wrap: break-word;
  44 + }
  45 + paper-fab {
  46 + position: absolute;
  47 + right: 10px;
  48 + bottom: -18px;
  49 + z-index: 10;
  50 + --paper-fab-background:#2196F3;
  51 + }
  52 +
  53 + #content ::content {
  54 + /*padding: 0 16px 8px;*/
  55 + padding: 0 16px 8px;
  56 + font-weight: 300;
  57 + color: var(--secondary-text-color);
  58 + line-height: 24px;
  59 + max-height: 400px;
  60 + position:relative;
  61 + overflow: auto;
  62 + }
  63 +
  64 + ::content.buttons {
  65 + margin-top: 8px;
  66 + }
  67 +
  68 + ::content paper-button, ::content paper-icon-button {
  69 + font-weight: 500;
  70 + color: var(--accent-color);
  71 + }
  72 +
  73 + #comment{
  74 + position:relative;
  75 + top: -50px;
  76 + min-height: 50px;
  77 + height: auto;
  78 + padding: 8px 8px 8px 8px;
  79 + font-size: 10px;
  80 + color: rgba(0,0,0,0.4);
  81 + font-family: 'Roboto', sans-serif;
  82 + word-wrap: break-word;
  83 + }
  84 +
  85 + .delete{
  86 + position: absolute;
  87 + top: -12px;
  88 + left: -12px;
  89 + --iron-icon-height: 18px;
  90 + --iron-icon-width: 18px;
  91 + width: 24px;
  92 + height: 24px;
  93 + --paper-fab-background:#cccccc;
  94 + }
  95 +
  96 + .fullscreen{
  97 + position: absolute;
  98 + top: 36px;
  99 + right: 54px;
  100 + --iron-icon-height: 18px;
  101 + --iron-icon-width: 18px;
  102 + width: 24px;
  103 + height: 24px;
  104 + --paper-fab-background:#cccccc;
  105 + }
  106 +
  107 + #fullscreen_container{
  108 + position: fixed;
  109 + width: 80%;
  110 + /*height: 60%;*/
  111 + right: 0;
  112 + left: 0;
  113 + top: 5%;
  114 + margin-right: auto;
  115 + margin-left: auto;
  116 + z-index: 1100;
  117 + display: none;
  118 + padding: 40px;
  119 + line-height: 20px;
  120 + }
  121 +
  122 + .close_fullscreen{
  123 + position: absolute;
  124 + top: 5px;
  125 + right: 1vw;
  126 + --iron-icon-height: 18px;
  127 + --iron-icon-width: 18px;
  128 + width: 24px;
  129 + height: 24px;
  130 + --paper-fab-background:#cccccc;
  131 + }
  132 +
  133 + #fullscreen_content{
  134 + position: relative;
  135 + height: 100%;
  136 + width: 100%;
  137 + z-index: 1000;
  138 + }
  139 +
  140 + </style>
  141 +
  142 +
  143 + <paper-material animated elevation="{{elevation}}" flex>
  144 +
  145 + <paper-fab class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>
  146 +
  147 + <div class="vertical layout">
  148 + <div id="content">
  149 + <content></content>
  150 + </div>
  151 +
  152 + <div class="legend horizontal layout center">
  153 + <span>{{cardTitle}}</span>
  154 +
  155 + <paper-fab class="fullscreen" mini icon="fullscreen" on-click="_handleFullscreenClick"></paper-fab>
  156 +
  157 + <!-- Adding icon based on card type -->
  158 +
  159 + <template is="dom-if" if="{{checkType(cardType, 'text')}}">
  160 +
  161 + <paper-fab class="modify" mini icon="create" on-click="_handleDetailsClick"></paper-fab>
  162 +
  163 + </template>
  164 +
  165 + <template is="dom-if" if="{{checkType(cardType, 'image')}}">
  166 +
  167 + <paper-fab class="modify" mini icon="perm-media" on-click="_handleDetailsClick"></paper-fab>
  168 +
  169 + </template>
  170 +
  171 + <template is="dom-if" if="{{checkType(cardType, 'datalet')}}">
  172 +
  173 + <paper-fab class="modify" mini icon="assessment" on-click="_handleDetailsClick"></paper-fab>
  174 +
  175 + </template>
  176 +
  177 + <template is="dom-if" if="{{checkType(cardType, 'link')}}">
  178 +
  179 + <paper-fab class="modify" mini icon="link" on-click="_handleDetailsClick"></paper-fab>
  180 +
  181 + </template>
  182 +
  183 + </div>
  184 +
  185 + <div class="footer">
  186 + <template is="dom-if" if="{{comment}}">
  187 + <div id="comment">{{comment}}</div>
  188 + </template>
  189 + </div>
  190 +
  191 + <paper-material elevation="3" id="fullscreen_container">
  192 + <paper-fab class="close_fullscreen" mini icon="close" on-click="_handleCloseFullscreenClick"></paper-fab>
  193 + <div id="fullscreen_content"></div>
  194 + </paper-material>
  195 +
  196 + </div>
  197 + </paper-material>
  198 +
  199 + </template>
  200 +
  201 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  202 +
  203 + <script>
  204 + Polymer({
  205 + is: "paper-card-controllet",
  206 + properties: {
  207 + width: {
  208 + type: Number,
  209 + observer: "_changeWidth"
  210 + },
  211 + height: {
  212 + type: Number,
  213 + observer: "_changeHeight"
  214 + },
  215 + cardType:{
  216 + type: String,
  217 + value: "text"
  218 + },
  219 + comment:{
  220 + cardType: String,
  221 + value: ""
  222 + },
  223 + cardTitle:{
  224 + type: String,
  225 + value: ""
  226 + },
  227 + elevation:{
  228 + type: Number,
  229 + value: 3
  230 + }
  231 +
  232 + },
  233 +
  234 + attached: function(){
  235 + if(this.cardType == "text"){
  236 + this.$.content.style.backgroundColor = "#ffc";
  237 + }
  238 + },
  239 +
  240 + _changeWidth: function(data){
  241 + this.style.width = data + "px";
  242 + //this.$.content.style.width = data + "px";
  243 + //$(this.$.content).perfectScrollbar();
  244 + },
  245 +
  246 + _changeHeight: function(data){
  247 + this.style.height = (data) + "px";
  248 + this.$.content.style.height = data + "px";
  249 + this.style.height = (this.height + ((this.text != "") ? 50 : 0)) + "px";
  250 + $(this.$.content).perfectScrollbar();
  251 + },
  252 +
  253 + checkType: function(type, check){
  254 + return (type == check);
  255 + },
  256 +
  257 + _handleDetailsClick: function(e){
  258 + this.fire('paper-card-controllet_details-clicked', {data : this});
  259 + },
  260 +
  261 + _handleDeleteClick: function(e){
  262 + this.fire('paper-card-controllet_delete-clicked', {data : this});
  263 + },
  264 +
  265 + _handleFullscreenClick: function(e){
  266 +
  267 + switch(this.cardType){
  268 + case 'text':
  269 + this.$.fullscreen_content.style.backgroundColor = "#ffc";
  270 + break;
  271 + case 'link':
  272 + window.open(this.getAttribute('card-link'),'_blank');
  273 + return;
  274 + }
  275 +
  276 + var html = this.$.content.innerHTML;
  277 + this.$.content.innerHTML = "";
  278 + this.$.fullscreen_content.innerHTML = html;
  279 +
  280 + this.$.fullscreen_container.style.display = "inline-block";
  281 + },
  282 +
  283 + _handleCloseFullscreenClick: function(e){
  284 +
  285 + var html = this.$.fullscreen_content.innerHTML;
  286 + this.$.fullscreen_content.innerHTML = "";
  287 + this.$.content.innerHTML = html;
  288 +
  289 + this.$.fullscreen_container.style.display = "none";
  290 + }
  291 + })
  292 + </script>
  293 +
  294 +</dom-module>
0 \ No newline at end of file 295 \ No newline at end of file
datalets/base-datalet/base-datalet.html
@@ -169,6 +169,11 @@ Example : @@ -169,6 +169,11 @@ Example :
169 }); 169 });
170 } 170 }
171 } 171 }
  172 +
  173 + else {
  174 + this.hideFooter();
  175 + this.$.base_datalet_spin.remove();
  176 + }
172 }, 177 },
173 178
174 attached: function(){ 179 attached: function(){
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
@@ -187,12 +187,38 @@ Example: @@ -187,12 +187,38 @@ Example:
187 var xyz = function(url) { 187 var xyz = function(url) {
188 me.selectResource(url); 188 me.selectResource(url);
189 } 189 }
190 - build(this.map, "treemap_placeholder", xyz, this._component.width, this._component.height); 190 + build(this.map, this.meta, "treemap_placeholder", xyz, this._component.width, this._component.height);
191 }, 191 },
192 192
193 selectResource: function(url) { 193 selectResource: function(url) {
194 this._component.fire("datasetexplorer-datalet_data-url", { url: url }); 194 this._component.fire("datasetexplorer-datalet_data-url", { url: url });
195 - } 195 + },
  196 +
  197 + selectData : function() {
  198 + this.data = [];
  199 + this.meta = this.properties.json_results.value.result.providers;
  200 +
  201 + //Deal the fields with "'" char
  202 + //this._component.fields = this._component.fields.replace(/#/g,"'");
  203 +
  204 + this._component.fields = JSON.parse(this._component.fields);
  205 +
  206 + for (var i = 0; i < this._component.fields.length; i++) {
  207 + var query = "$";
  208 + var query_elements = this._component.fields[i].split(',');
  209 + for (var j = 0; j < query_elements.length; j++) {
  210 + query += "['" + query_elements[j] + "']";
  211 + if (this.isFieldArray(query_elements.slice(0, j + 1))) {
  212 + query += "[*]";
  213 + }
  214 + }
  215 + this.data.push({
  216 + name: query_elements[query_elements.length - 1],
  217 + data: jsonPath(this.properties.json_results.value, query)
  218 + });
  219 + }
  220 + this.deleteWaitImage();
  221 + },
196 }; 222 };
197 223
198 224
@@ -214,12 +240,12 @@ Example: @@ -214,12 +240,12 @@ Example:
214 240
215 width : { 241 width : {
216 type : Number, 242 type : Number,
217 - value: -1 243 + value: 968
218 }, 244 },
219 245
220 height : { 246 height : {
221 type : Number, 247 type : Number,
222 - value: -1 248 + value: 700
223 } 249 }
224 }, 250 },
225 251
datalets/datasetexplorer-datalet/js/buildtreemap.js
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 * Created by Utente on 17/07/2015. 2 * Created by Utente on 17/07/2015.
3 */ 3 */
4 4
5 -function build(root, place_holder, select_listener, width, height) { 5 +function build(root, meta, place_holder, select_listener, width, height) {
6 6
7 var plwidth = width >= 0 ? width : $("#" + place_holder).width(), 7 var plwidth = width >= 0 ? width : $("#" + place_holder).width(),
8 plheight = height >= 0 ? height : $("#" + place_holder).height(); 8 plheight = height >= 0 ? height : $("#" + place_holder).height();
@@ -223,6 +223,17 @@ function build(root, place_holder, select_listener, width, height) { @@ -223,6 +223,17 @@ function build(root, place_holder, select_listener, width, height) {
223 text.call(wrap); 223 text.call(wrap);
224 } 224 }
225 225
  226 + function checkProviderName(name) {
  227 + console.log(name);
  228 + if (name.substr(0, 2) == 'p:') {
  229 + console.log("in");
  230 + var pid = name.substr(2);
  231 + name = meta[pid].title;
  232 + }
  233 + console.log(name);
  234 + return name;
  235 + }
  236 +
226 function wrap(d) { 237 function wrap(d) {
227 var wwidth = width; 238 var wwidth = width;
228 var hheight = height; 239 var hheight = height;
@@ -230,7 +241,7 @@ function build(root, place_holder, select_listener, width, height) { @@ -230,7 +241,7 @@ function build(root, place_holder, select_listener, width, height) {
230 d.each(function(){ 241 d.each(function(){
231 var text = d3.select(this), 242 var text = d3.select(this),
232 d = text[0][0].__data__, 243 d = text[0][0].__data__,
233 - name = d.name.trim(), 244 + name = checkProviderName(d.name.trim());
234 words = name.search(/\s+/) >= 0 ? name.split(/\s+/).reverse() : [name], 245 words = name.search(/\s+/) >= 0 ? name.split(/\s+/).reverse() : [name],
235 word = words.pop(), 246 word = words.pop(),
236 line = [word], 247 line = [word],
datalets/leafletjs-datalet/leafletjs-datalet.html
@@ -52,7 +52,7 @@ Example: @@ -52,7 +52,7 @@ Example:
52 <template> 52 <template>
53 <link rel="stylesheet" href="leafletsjs/leaflet.css" /> 53 <link rel="stylesheet" href="leafletsjs/leaflet.css" />
54 <style> 54 <style>
55 - #leafletjs { height: 600px; } 55 + #leafletjs {height: 600px;}
56 </style> 56 </style>
57 57
58 <div id="leafletjs"></div> 58 <div id="leafletjs"></div>
@@ -73,32 +73,45 @@ Example: @@ -73,32 +73,45 @@ Example:
73 * @method transformData 73 * @method transformData
74 */ 74 */
75 presentData: function(){ 75 presentData: function(){
76 -  
77 - var coordinates = [];  
78 - var isArray = (this.data[0].data[0].constructor === Array) ? true : false;  
79 76
80 - for(var i=0; i<this.data[0].data.length; i++)  
81 - {  
82 - if(isArray)  
83 - coordinates.push([parseFloat(this.data[0].data[i][0]), parseFloat(this.data[0].data[i][1])]);  
84 - else  
85 - coordinates.push([parseFloat(this.data[0].data[i]), parseFloat(this.data[1].data[i])]); 77 + var t = this;
  78 + this._component.map = L.map(this._component.$.leafletjs).setView([0, 0], 13, {reset:true});
  79 +
  80 + L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  81 + maxZoom: 18,
  82 + attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
  83 + }).addTo(this._component.map);
  84 +
  85 + setTimeout(function() {
86 86
87 - var marker = L.marker([coordinates[i][0], coordinates[i][1]]).addTo(this._component.map); 87 + L.Icon.Default.imagePath = 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images';
88 88
89 - if(this.data.length > 2) 89 + var coordinates = [];
  90 + var isArray = t.data[0].data[0].constructor === Array;
  91 +
  92 + for(var i=0; i<t.data[0].data.length; i++)
90 { 93 {
91 - if(this.data[this.data.length - 1].data[i].match(new RegExp("^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?")))  
92 - var popup = L.popup().setContent('<image height="100" width="100" src="' + this.data[this.data.length - 1].data[i] + '" />'); 94 + if(isArray)
  95 + coordinates.push([parseFloat(t.data[0].data[i][0]), parseFloat(t.data[0].data[i][1])]);
93 else 96 else
94 - var popup = L.popup().setContent('<span>' + this.data[this.data.length - 1].data[i] + '</span>');  
95 - marker.bindPopup(popup); 97 + coordinates.push([parseFloat(t.data[0].data[i]), parseFloat(t.data[1].data[i])]);
  98 +
  99 + var marker = L.marker([coordinates[i][0], coordinates[i][1]]).addTo(t._component.map);
  100 +
  101 + if(t.data.length > 2)
  102 + {
  103 + if(t.data[t.data.length - 1].data[i].match(new RegExp("^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?")))
  104 + var popup = L.popup().setContent('<image height="100" width="100" src="' + t.data[t.data.length - 1].data[i] + '" />');
  105 + else
  106 + var popup = L.popup().setContent('<span>' + t.data[t.data.length - 1].data[i] + '</span>');
  107 + marker.bindPopup(popup);
  108 + }
96 } 109 }
97 - }  
98 110
99 - this._component.map.invalidateSize();  
100 - this._component.map.fitBounds(coordinates);  
101 - 111 + t._component.map._onResize();
  112 + t._component.map.invalidateSize(false);
  113 + t._component.map.fitBounds(coordinates);
  114 + }, 1000)
102 } 115 }
103 }; 116 };
104 117
@@ -148,19 +161,9 @@ Example: @@ -148,19 +161,9 @@ Example:
148 * 161 *
149 * @method ready 162 * @method ready
150 */ 163 */
151 - ready: function(){  
152 -  
153 - this.map = L.map(this.$.leafletjs).setView([0, 0], 13);  
154 -  
155 - L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {  
156 - maxZoom: 18,  
157 - attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'  
158 - }).addTo(this.map);  
159 -  
160 - L.Icon.Default.imagePath = 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images';  
161 - 164 + attached: function(){
162 this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, leafletjsBehavior); 165 this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, leafletjsBehavior);
163 - this.async(function(){this.behavior.init(this)},0); 166 + this.behavior.init(this);
164 } 167 }
165 }); 168 });
166 </script> 169 </script>
datalets/preview-datalet/preview-datalet.html
@@ -47,55 +47,49 @@ Example: @@ -47,55 +47,49 @@ Example:
47 --> 47 -->
48 48
49 <dom-module id="preview-datalet"> 49 <dom-module id="preview-datalet">
  50 +
50 <template> 51 <template>
  52 +
51 <style is="custom-style"> 53 <style is="custom-style">
52 - .content {  
53 - /*width: 50%;*/  
54 - margin: 0px auto; 54 + #preview_datalet_container {
  55 + height: 432px
55 } 56 }
56 57
57 - .embed-container {  
58 - height: 0;  
59 - /*width: 100vw;*/  
60 - padding-bottom: 56.25%;  
61 - overflow: hidden;  
62 - position: relative;  
63 -  
64 - 58 + #preview_datalet_link {
  59 + padding: 8px 0px 8px 0px;
65 } 60 }
66 61
67 - .embed-container iframe {  
68 - width: 100%;  
69 - height: 100%;  
70 - position: absolute;  
71 - top: 0;  
72 - left: 0; 62 + #preview_datalet_iframe {
  63 + width: 200%;
  64 + height: calc((100% - 32px) * 2);
  65 +
  66 + /*zoom:0.75;*/
  67 + /*width:1280px;*/
  68 + /*height:800px;*/
  69 + /*border:none;*/
  70 + -ms-transform: scale(0.50);
  71 + -moz-transform: scale(0.50);
  72 + -o-transform: scale(0.50);
  73 + -webkit-transform: scale(0.50);
  74 + transform: scale(0.50);
  75 + -ms-transform-origin: 0 0;
  76 + -moz-transform-origin: 0 0;
  77 + -o-transform-origin: 0 0;
  78 + -webkit-transform-origin: 0 0;
  79 + transform-origin: 0 0;
73 } 80 }
  81 +
74 </style> 82 </style>
75 - <div class="content">  
76 - <a href="{{url}}" target="_blank">{{url}}</a>  
77 - <div class="embed-container" style="height:300px;padding:0px;overflow:hidden;">  
78 - <iframe style="zoom:0.75;  
79 - width:1280px;  
80 - height:786px;  
81 - border:none;  
82 - -ms-transform: scale(0.50);  
83 - -moz-transform: scale(0.50);  
84 - -o-transform: scale(0.50);  
85 - -webkit-transform: scale(0.50);  
86 - transform: scale(0.50);  
87 - -ms-transform-origin: 0 0;  
88 - -moz-transform-origin: 0 0;  
89 - -o-transform-origin: 0 0;  
90 - -webkit-transform-origin: 0 0;  
91 - transform-origin: 0 0;"  
92 - src="{{url}}"  
93 - scrolling="yes">  
94 - </iframe>  
95 - </div> 83 +
  84 + <div id="preview_datalet_container">
  85 +
  86 + <div id="preview_datalet_link"><b>link:</b> <a href="{{url}}" target="_blank">{{url}}</a></div>
  87 +
  88 + <iframe id="preview_datalet_iframe" src="{{url}}"></iframe>
  89 +
96 </div> 90 </div>
97 91
98 - <base-datalet id="base" data-url="{{dataUrl}}"></base-datalet> 92 + <base-datalet></base-datalet>
99 93
100 </template> 94 </template>
101 95
@@ -103,35 +97,8 @@ Example: @@ -103,35 +97,8 @@ Example:
103 97
104 Polymer({ 98 Polymer({
105 is : 'preview-datalet', 99 is : 'preview-datalet',
106 -  
107 - properties: {  
108 - /**  
109 - * It's the url for the preview  
110 - *  
111 - * @attribute url  
112 - * @type Strig  
113 - * @default ''  
114 - */  
115 - url : {  
116 - type : String,  
117 - value : ""  
118 - }  
119 - },  
120 -  
121 - /**  
122 - * It is called after the element’s template has been stamped and all elements inside the element’s local  
123 - * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)  
124 - * and had their ready method called.  
125 - *  
126 - * Extract the dataset domain from the entire URL and set the text content of the datalet footer.  
127 - *  
128 - * @method ready  
129 - *  
130 - */  
131 - ready: function(){  
132 - //this.$.base.setDomain(this.url.split("/")[0] + "//" + this.url.split("/")[2]);  
133 - }  
134 }); 100 });
  101 +
135 </script> 102 </script>
136 </dom-module> 103 </dom-module>
137 104
datalets/preview-datalet/preview-datalet_old.html 0 → 100755
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +
  32 +<link rel="import" href="../base-datalet/base-datalet.html">
  33 +
  34 +<!--
  35 +`preview-datalet` is a datalet that allow user to preview the content of a web page. It creates a thumbnail of the site using the data-url attribute passed as input.
  36 +
  37 +Example:
  38 +
  39 + <preview-datalet data-url="http://spod.routetopa.eu"
  40 + </preview-datalet>
  41 +
  42 +
  43 +@element preview-datalet
  44 +@status beta
  45 +@homepage
  46 +@group datalets
  47 +-->
  48 +
  49 +<dom-module id="preview-datalet">
  50 + <template>
  51 + <style is="custom-style">
  52 + .content {
  53 + /*width: 50%;*/
  54 + margin: 0px auto;
  55 + }
  56 +
  57 + .embed-container {
  58 + height: 0;
  59 + /*width: 100vw;*/
  60 + padding-bottom: 56.25%;
  61 + overflow: hidden;
  62 + position: relative;
  63 +
  64 +
  65 + }
  66 +
  67 + .embed-container iframe {
  68 + width: 100%;
  69 + height: 100%;
  70 + position: absolute;
  71 + top: 0;
  72 + left: 0;
  73 + }
  74 + </style>
  75 + <div class="content">
  76 + <a href="{{url}}" target="_blank">{{url}}</a>
  77 + <div class="embed-container" style="height:300px;padding:0px;overflow:hidden;">
  78 + <iframe style="zoom:0.75;
  79 + width:1280px;
  80 + height:786px;
  81 + border:none;
  82 + -ms-transform: scale(0.50);
  83 + -moz-transform: scale(0.50);
  84 + -o-transform: scale(0.50);
  85 + -webkit-transform: scale(0.50);
  86 + transform: scale(0.50);
  87 + -ms-transform-origin: 0 0;
  88 + -moz-transform-origin: 0 0;
  89 + -o-transform-origin: 0 0;
  90 + -webkit-transform-origin: 0 0;
  91 + transform-origin: 0 0;"
  92 + src="{{url}}"
  93 + scrolling="yes">
  94 + </iframe>
  95 + </div>
  96 + </div>
  97 +
  98 + <base-datalet id="base" data-url="{{dataUrl}}"></base-datalet>
  99 +
  100 + </template>
  101 +
  102 + <script>
  103 +
  104 + Polymer({
  105 + is : 'preview-datalet',
  106 +
  107 + properties: {
  108 + /**
  109 + * It's the url for the preview
  110 + *
  111 + * @attribute url
  112 + * @type Strig
  113 + * @default ''
  114 + */
  115 + url : {
  116 + type : String,
  117 + value : ""
  118 + }
  119 + },
  120 +
  121 + /**
  122 + * It is called after the element’s template has been stamped and all elements inside the element’s local
  123 + * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
  124 + * and had their ready method called.
  125 + *
  126 + * Extract the dataset domain from the entire URL and set the text content of the datalet footer.
  127 + *
  128 + * @method ready
  129 + *
  130 + */
  131 + ready: function(){
  132 + //this.$.base.setDomain(this.url.split("/")[0] + "//" + this.url.split("/")[2]);
  133 + }
  134 + });
  135 + </script>
  136 +</dom-module>
  137 +