SGH / COMPONENTS

Commit 0173197e53ea553c12f1969ae1803ffb254ec238

Authored by Luigi Serra
2 parents 0e9a5727 ffd617ec

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

Inline Side-by-side
Showing 11 changed files with 687 additions and 270 deletions
controllets/create-card-controllet/create-card-controllet.html
  View file @0173197
... ... @@ -50,7 +50,14 @@
50 50 }
51 51  
52 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 63 #create_card_title {
... ... @@ -62,11 +69,6 @@
62 69 #create_card_description {
63 70 font-style: italic;
64 71 color: #727272;
65   - text-align: center;
66   - }
67   -
68   - #create_card_text {
69   -
70 72 }
71 73  
72 74 paper-input, paper-textarea {
... ... @@ -138,6 +140,7 @@
138 140 </paper-material>
139 141  
140 142 <paper-material id="create_card_content" elevation="5">
  143 +
141 144 <div class="input_header">PREVIEW</div>
142 145  
143 146 <template is="dom-if" if="{{_checkType(type, 'link')}}">
... ... @@ -148,9 +151,11 @@
148 151  
149 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 160 </template>
156 161  
... ... @@ -216,6 +221,7 @@
216 221  
217 222 if(!link.invalid && value.length > 16) {
218 223 iframe.setAttribute("src", value);
  224 + this.link = value;
219 225 this._resize();
220 226 }
221 227 }
... ...
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
  View file @0173197
... ... @@ -38,7 +38,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
38 38 <div id="fixed" class="fixed" style$="background-color:{{color}}"></div>
39 39 <div id="card" class="card" style$="background-color:{{color}}">
40 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 42 </template>
43 43 </div>
44 44  
... ... @@ -122,6 +122,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
122 122  
123 123 _computeFixedBackgroundClass: function(color) {
124 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
  View file @0173197
... ... @@ -91,6 +91,14 @@ Example:
91 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 102 ::content .empty{
95 103 position: absolute;
96 104 right: 0;
... ...
controllets/paper-card-controllet/paper-card-controllet.html
  View file @0173197
... ... @@ -2,6 +2,8 @@
2 2 <link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
3 3 <link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
4 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 8 <dom-module id="paper-card-controllet">
7 9  
... ... @@ -9,191 +11,147 @@
9 11 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
10 12 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
11 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 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 26 .legend {
34 27 position: relative;
35   - top: -50px;
  28 + top: -48px;
  29 + height: 32px;
  30 + padding: 16px 0px 0px 8px;
  31 + z-index: 1000;
36 32 background: rgba(0,0,0,0.8);
37   - bottom: 0;
38 33 color: white;
39   - height: 50px;
40   - padding: 0 16px;
41   - left: 0; right: 0;
42   - z-index: 1000;
  34 + font-weight: 700;
43 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 67 top: -12px;
88   - left: -12px;
  68 + right: 20px;
89 69 --iron-icon-height: 18px;
90 70 --iron-icon-width: 18px;
91 71 width: 24px;
92 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 79 --iron-icon-height: 18px;
101 80 --iron-icon-width: 18px;
102 81 width: 24px;
103 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 93 position: fixed;
109 94 width: 80%;
110   - /*height: 60%;*/
  95 + height: 70vh;
111 96 right: 0;
112 97 left: 0;
113   - top: 5%;
  98 + top: 64px;
114 99 margin-right: auto;
115 100 margin-left: auto;
116 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 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 155 </paper-material>
198 156  
199 157 </template>
... ... @@ -204,49 +162,54 @@
204 162 Polymer({
205 163 is: "paper-card-controllet",
206 164 properties: {
  165 +
207 166 width: {
208 167 type: Number,
209 168 observer: "_changeWidth"
210 169 },
  170 +
211 171 height: {
212 172 type: Number,
213 173 observer: "_changeHeight"
214 174 },
  175 +
  176 + elevation:{
  177 + type: Number,
  178 + value: 3
  179 + },
  180 +
215 181 cardType:{
216 182 type: String,
217 183 value: "text"
218 184 },
219   - comment:{
220   - cardType: String,
221   - value: ""
222   - },
  185 +
223 186 cardTitle:{
224 187 type: String,
225 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 198 attached: function(){
235 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 213 $(this.$.content).perfectScrollbar();
251 214 },
252 215  
... ... @@ -254,40 +217,32 @@
254 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 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 230 switch(this.cardType){
268 231 case 'text':
269   - this.$.fullscreen_content.style.backgroundColor = "#ffc";
  232 + this.$.fullscreen_container.style.backgroundColor = "#ffc";
270 233 break;
271 234 case 'link':
272   - window.open(this.getAttribute('card-link'),'_blank');
  235 + window.open(this.getAttribute('card-link'), '_blank');
273 236 return;
274 237 }
275 238  
276 239 var html = this.$.content.innerHTML;
277   - this.$.content.innerHTML = "";
278 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 247 </script>
293 248  
... ...
controllets/paper-card-controllet/paper-card-controllet_old.html 0 → 100755
  View file @0173197
  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 295 \ No newline at end of file
... ...
datalets/base-datalet/base-datalet.html
  View file @0173197
... ... @@ -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 179 attached: function(){
... ...
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
  View file @0173197
... ... @@ -187,12 +187,38 @@ Example:
187 187 var xyz = function(url) {
188 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 193 selectResource: function(url) {
194 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 240  
215 241 width : {
216 242 type : Number,
217   - value: -1
  243 + value: 968
218 244 },
219 245  
220 246 height : {
221 247 type : Number,
222   - value: -1
  248 + value: 700
223 249 }
224 250 },
225 251  
... ...
datalets/datasetexplorer-datalet/js/buildtreemap.js
  View file @0173197
... ... @@ -2,7 +2,7 @@
2 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 7 var plwidth = width >= 0 ? width : $("#" + place_holder).width(),
8 8 plheight = height >= 0 ? height : $("#" + place_holder).height();
... ... @@ -223,6 +223,17 @@ function build(root, place_holder, select_listener, width, height) {
223 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 237 function wrap(d) {
227 238 var wwidth = width;
228 239 var hheight = height;
... ... @@ -230,7 +241,7 @@ function build(root, place_holder, select_listener, width, height) {
230 241 d.each(function(){
231 242 var text = d3.select(this),
232 243 d = text[0][0].__data__,
233   - name = d.name.trim(),
  244 + name = checkProviderName(d.name.trim());
234 245 words = name.search(/\s+/) >= 0 ? name.split(/\s+/).reverse() : [name],
235 246 word = words.pop(),
236 247 line = [word],
... ...
datalets/leafletjs-datalet/leafletjs-datalet.html
  View file @0173197
... ... @@ -52,7 +52,7 @@ Example:
52 52 <template>
53 53 <link rel="stylesheet" href="leafletsjs/leaflet.css" />
54 54 <style>
55   - #leafletjs { height: 600px; }
  55 + #leafletjs {height: 600px;}
56 56 </style>
57 57  
58 58 <div id="leafletjs"></div>
... ... @@ -73,32 +73,45 @@ Example:
73 73 * @method transformData
74 74 */
75 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 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 161 *
149 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 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 169 </script>
... ...
datalets/preview-datalet/preview-datalet.html
  View file @0173197
... ... @@ -47,55 +47,49 @@ Example:
47 47 -->
48 48  
49 49 <dom-module id="preview-datalet">
  50 +
50 51 <template>
  52 +
51 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 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 90 </div>
97 91  
98   - <base-datalet id="base" data-url="{{dataUrl}}"></base-datalet>
  92 + <base-datalet></base-datalet>
99 93  
100 94 </template>
101 95  
... ... @@ -103,35 +97,8 @@ Example:
103 97  
104 98 Polymer({
105 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 102 </script>
136 103 </dom-module>
137 104  
... ...
datalets/preview-datalet/preview-datalet_old.html 0 → 100755
  View file @0173197
  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 +
... ...