Blame view

controllets/treeview-controllet/treeview-controllet.html 14.9 KB
938d1928   Luigi Serra   Update documentat...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <!--

  The MIT License (MIT)

  

  Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM

  

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

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

      in the Software without restriction, including without limitation the rights

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

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

      furnished to do so, subject to the following conditions:

  

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

      all copies or substantial portions of the Software.

  

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

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

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

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

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

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

      THE SOFTWARE.

  -->

  

73bcce88   luigser   COMPONENTS
25
26
  <link rel="import" href="../../bower_components/polymer/polymer.html">

  <link rel="import" href="../../bower_components/paper-styles/color.html">

74249687   Luigi Serra   Cross browser con...
27
  <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">

73bcce88   luigser   COMPONENTS
28
29
30
  

  <dom-module id="treeview-controllet">

      <template>

74249687   Luigi Serra   Cross browser con...
31
  

73bcce88   luigser   COMPONENTS
32
33
          <style is="custom-style">

  

74249687   Luigi Serra   Cross browser con...
34
              ::content .list {

73bcce88   luigser   COMPONENTS
35
36
37
38
39
                  margin: .5rem;

                  display: block;

                  list-style-type: none;

              }

  

835a711f   Luigi Serra   Controllet cross ...
40
              ::content li.list__item{

74249687   Luigi Serra   Cross browser con...
41
42
43
                  position: relative;

                  float: left;

                  width: 100%;

73bcce88   luigser   COMPONENTS
44
45
              }

  

835a711f   Luigi Serra   Controllet cross ...
46
              ::content ul.list{

73bcce88   luigser   COMPONENTS
47
                  position: relative;

74249687   Luigi Serra   Cross browser con...
48
49
                  float : left   ;

                  width: 100%;

73bcce88   luigser   COMPONENTS
50
51
              }

  

74249687   Luigi Serra   Cross browser con...
52
53
54
              ::content .list__item {

                  margin: 0 0 .5rem 0;

                  padding: 0;

73bcce88   luigser   COMPONENTS
55
56
              }

  

74249687   Luigi Serra   Cross browser con...
57
58
59
60
61
62
63
              ::content main   { font-size:16px; }

              ::content .stuff { padding-top:60px; }

  

              /* basic css */

              ::content input[type=checkbox]   { display:none; position:absolute; left:0;}

              ::content label, p               { padding-left:10px; }

              ::content .check-awesome         { position:relative; float:left; }

73bcce88   luigser   COMPONENTS
64
  

74249687   Luigi Serra   Cross browser con...
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
              /* checkbox css */

              ::content label                  { cursor:pointer; }

              ::content label span             { display:block; position:absolute; left:0;

                  -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; transition-duration:0.3s;

              }

              ::content label .circle          {

                  background:#FFF;

                  left:-30px;

                  top:-30px;

                  height:80px;

                  width:80px;

                  z-index:-1;

                  border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;

              }

              ::content label .box     {

                  border:2px solid #DDDDDD;

                  height:16px;

                  width:16px;

                  z-index:888;

                  -webkit-transition-delay:0.1s; -moz-transition-delay:0.1s; transition-delay:0.1s;

73bcce88   luigser   COMPONENTS
85
                  position: relative;

74249687   Luigi Serra   Cross browser con...
86
                  float: left;

73bcce88   luigser   COMPONENTS
87
              }

74249687   Luigi Serra   Cross browser con...
88
89
90
91
92
93
94
95
96
97
98
99
              ::content label .check         {

                  top: -7px;

                  left: 6px;

                  width: 11px;

                  height: 16px;

                  border:2px solid #2196f3;

                  border-top: none;

                  border-left: none;

                  opacity:0;

                  z-index:888;

                  -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);

                  -webkit-transition-delay:0.1s; -moz-transition-delay:0.1s; transition-delay:0.1s;

73bcce88   luigser   COMPONENTS
100
101
              }

  

74249687   Luigi Serra   Cross browser con...
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
              /* handling click events */

  

              /* when checkbox is checked */

              ::content label .circle {

                  -webkit-animation   :growCircle 0.3s ease;

                  -moz-animation      :growCircle 0.3s ease;

                  animation           :growCircle 0.3s ease;

              }

              ::content input[type=checkbox]:checked ~ label .box {

                  opacity:0;

                  -webkit-transform   :scale(0) rotate(-180deg);

                  -moz-transform        :scale(0) rotate(-180deg);

                  transform                 :scale(0) rotate(-180deg);

              }

              ::content input[type=checkbox]:checked ~ label .check {

                  opacity:1;

                  -webkit-transform   :scale(1) rotate(45deg);

                  -moz-transform      :scale(1) rotate(45deg);

                  transform           :scale(1) rotate(45deg);

73bcce88   luigser   COMPONENTS
121
122
              }

  

74249687   Luigi Serra   Cross browser con...
123
124
125
126
127
128
129
130
131
132
133
134
135
              /* bubble animation */

  

              ::content @-webkit-keyframes growCircle {

                  0%, 100%   { -webkit-transform:scale(0); }

                  70%        { background:#DDD; -webkit-transform:scale(1.25); }

              }

              ::content @-moz-keyframes growCircle {

                  0%, 100%   { -moz-transform:scale(0); }

                  70%        { background:#DDD; -moz-transform:scale(1.25); }

              }

              ::content @keyframes growCircle {

                  0%, 100%   { transform:scale(0); }

                  70%        { background:#DDD; transform:scale(1.25); }

73bcce88   luigser   COMPONENTS
136
137
              }

  

74249687   Luigi Serra   Cross browser con...
138
139
              ::content .select-all{

                 /* position:relative;

73bcce88   luigser   COMPONENTS
140
                  float:left;

74249687   Luigi Serra   Cross browser con...
141
                  left: 20px;*/

73bcce88   luigser   COMPONENTS
142
143
              }

  

74249687   Luigi Serra   Cross browser con...
144
145
146
147
148
149
              ::content div.hiding_panel{

                  width: 100%;

                  height: 15px;

                  margin-bottom: 18px;

                  /*padding: 3px;

                  height: 35px;

73bcce88   luigser   COMPONENTS
150
151
152
                  border: 1px;

                  background: #fff;

                  border-radius: 0.125rem;

74249687   Luigi Serra   Cross browser con...
153
                  box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);*/

73bcce88   luigser   COMPONENTS
154
155
              }

  

74249687   Luigi Serra   Cross browser con...
156
              ::content div.panel-title{

73bcce88   luigser   COMPONENTS
157
158
159
                  position: relative;

                  float: left;

                  padding-left: 10px;

74249687   Luigi Serra   Cross browser con...
160
                  padding-right: 10px;

73bcce88   luigser   COMPONENTS
161
162
163
164
                  font-weight: bolder;

                  color: #000000;

              }

  

74249687   Luigi Serra   Cross browser con...
165
              ::content iron-icon.panel-hide-trigger {

73bcce88   luigser   COMPONENTS
166
167
168
169
170
171
172
173
174
175
176
                  position: relative;

                  float: left;

                  height: 24px;

                  width: 24px;

                  border-radius: 50%;

                  /*background: var(--paper-pink-500);*/

                  background: #348ED5;

                  color: white;

                  line-height: 64px;

              }

  

74249687   Luigi Serra   Cross browser con...
177
              ::content iron-icon.panel-hide-trigger:hover {

73bcce88   luigser   COMPONENTS
178
179
180
181
                  /*color: var(--google-gray-700);*/

                  color : #000000;

              }

  

74249687   Luigi Serra   Cross browser con...
182
              ::content .items-list{

73bcce88   luigser   COMPONENTS
183
184
185
186
187
                  display: none;

              }

  

          </style>

  

dbc787cf   Luigi Serra   Controllet cross ...
188
189
  

  

73bcce88   luigser   COMPONENTS
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
          <div class="vertical-section">

              <div id="treeview_placeholder" class="horizontal-section"></div>

          </div>

  

      </template>

  

      <script>

  

          Polymer({

  

              is : 'treeview-controllet',

  

              listeners : {

                  'tap' : '_clickHandler'

              },

  

              properties : {

  

                  fieldsMap : {

                      type : Map,

                      value : null

                  }

  

              },

  

74249687   Luigi Serra   Cross browser con...
215
              createFieldsContainer : function(id, heading){

73bcce88   luigser   COMPONENTS
216
217
218
219
220
221
222
  

                  var ul = document.createElement('ul');

                  ul.className     = "list";

                  ul.id                  = id;

                  ul.innerHTML           = '<div class="hiding_panel">' +

                                              '<iron-icon icon="chevron-right" class="panel-hide-trigger"></iron-icon>' +

                                              '<div class="panel-title">' + heading + '</div>' +

74249687   Luigi Serra   Cross browser con...
223
224
225
226
227
228
229
230
231
232
                                              /*'<input id="'+ heading +'" type="checkbox" class="checkbox select-all" style="display:block;">' +*/

                                              /*'<div class="check-awesome">' +

                                                  '<input class="checkbox select-all" type="checkbox" id="'+ heading + '">' +

                                                      '<label for="'+ heading + '"class="label">' +

                                                      '<span></span>' +

                                                      '<span class="check"></span>' +

                                                      '<span class="box"></span>'+

                                                  '</label>' +

                                              '</div>' +*/

                                           '</div>';

cb1aab91   Luigi Serra   Controllets update
233
234
                                           /*'<div class="items-list"></div>';*/

                  ul.innerHTML += (id.indexOf("records") != -1)  ?  '<div class="items-list" style="display:block;"></div>' : '<div class="items-list"></div>';

73bcce88   luigser   COMPONENTS
235
236
237
238
239
240
  

                  return ul;

  

              },

  

              createListItem : function(id, label) {

74249687   Luigi Serra   Cross browser con...
241
242
243
244
245
246
247
248
249
250
251
252
  

                 return '<li class="list__item">' +

                           '<div class="check-awesome">' +

                              '<input class="checkbox" type="checkbox" id="'+ id + '">' +

                              '<label for="'+ id + '" style="padding-left:10px;">' +

                                  '<span></span>' +

                                  '<span class="check"></span>' +

                                  '<span class="box"></span>' +

                                     label +

                              '</label>' +

                           '</div>' +

                        '</li>';

73bcce88   luigser   COMPONENTS
253
254
255
              },

  

              analyzeObject : function(parent_list, curr_field, object) {

0b818d7e   Luigi Serra   Selection control...
256
                  if(object == null) return;

73bcce88   luigser   COMPONENTS
257
258
259
260
261
262
                  if(curr_field != null){

                      if(object == null) object = "";

  

                      if(object.constructor == Array){//Deal with flat array case

                          if(object[0].constructor != Object){

                              //MATERIAL CHECKBOX UL

74249687   Luigi Serra   Cross browser con...
263
                              this.fieldsMap[parent_list[parent_list.length - 2]].children[1].innerHTML += this.createListItem(parent_list.toString(), curr_field);

73bcce88   luigser   COMPONENTS
264
265
266
267
                              return;

                          }

                      }

                      if(object.constructor == Array || object.constructor == Object){

74249687   Luigi Serra   Cross browser con...
268
                          var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);

73bcce88   luigser   COMPONENTS
269
270
271
272
273
                          this.fieldsMap[curr_field] = panel;

                          //MATERIAL CHECKBOX UL

                          this.fieldsMap[parent_list[parent_list.length - 2]].appendChild(this.fieldsMap[curr_field]);

                      }else{

                          //MATERIAL CHECKBOX UL

74249687   Luigi Serra   Cross browser con...
274
                          this.fieldsMap[parent_list[parent_list.length - 2]].children[1].innerHTML += this.createListItem(parent_list.toString(), curr_field);

73bcce88   luigser   COMPONENTS
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
                      }

                  }

                  if(object.constructor == Array || object.constructor == Object) {

                      var obj = (object.constructor == Array) ? object[0] : object;

                      if(Object.prototype.toString.call(obj) === '[object String]') return;//Deal with flat array case

                      for (var field in obj) {

                          var parents = new Array();

                          parent_list.every(function (element, index, array) {

                              parents.push(element);

                              return true;

                          });

                          parents.push(field);

                          this.analyzeObject(parents, field, obj[field]);

                      }

                  }

              },

  

              init : function(data){

                  //crete root node and insert it in to shadow dom

74249687   Luigi Serra   Cross browser con...
294
                  var mainPanel = this.createFieldsContainer("root", "Data fields");

73bcce88   luigser   COMPONENTS
295
                  //MATERIAL CHECKBOX UL

74249687   Luigi Serra   Cross browser con...
296
                  mainPanel.children[1].style.display = "block";

73bcce88   luigser   COMPONENTS
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
  

                  this.$.treeview_placeholder.innerHTML = "";

                  this.$.treeview_placeholder.appendChild(mainPanel);

                  this.fieldsMap = new Map;

                  this.fieldsMap["root"] = mainPanel;

                  //call recursive analyze function for current json to get all fields user can select

                  this.analyzeObject(new Array("root"), null, data);

  

              },

  

              fireSelectedFields : function(){

  

                  var cbs = Polymer.dom(this.$.treeview_placeholder).querySelectorAll('input[type=checkbox]:checked');

                  var fields = Array();

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

                      if(cbs[i].className.includes("select-all")) continue;

                      fields.push(cbs[i].id.replace("root,",""));

                  }

  

                  this.fire('treeview-controllet-fileds-selected', {fields : fields});

              },

  

              _clickHandler : function(e){

74249687   Luigi Serra   Cross browser con...
320
321
322
323
                  if(Object.getPrototypeOf(e) !== CustomEvent.prototype) {

                      e = e[Object.keys(e)[0]];

                  }

  

73bcce88   luigser   COMPONENTS
324
325
                  if(!e.target.control) {

                      switch((e.target.className.indexOf("iron-icon") != -1) ? "panel-hide-trigger" : e.target.className){

74249687   Luigi Serra   Cross browser con...
326
                          case 'box':

73bcce88   luigser   COMPONENTS
327
  

74249687   Luigi Serra   Cross browser con...
328
329
330
331
332
333
334
335
                              /*var el = e.target.previousSibling.previousSibling;

                              el.classList = 'circle';

                              var newone = el.clone(true);

                              el.before(newone);

                              $("." + el.attr("class") + ":last").remove();*/

  

                              break;

                          case 'checkbox':

73bcce88   luigser   COMPONENTS
336
337
338
339
340
                              this.fireSelectedFields();

  

                              break;

                          case 'panel-hide-trigger':

  

74249687   Luigi Serra   Cross browser con...
341
342
                              if(e.target.parentNode.parentNode.children[1].style.display == "block") {

                                  e.target.parentNode.parentNode.children[1].style.cssText = "display: none;";

73bcce88   luigser   COMPONENTS
343
344
345
                                  e.target.icon = "chevron-right";

  

                              }else{

74249687   Luigi Serra   Cross browser con...
346
                                  e.target.parentNode.parentNode.children[1].style.cssText = "display: block;";

73bcce88   luigser   COMPONENTS
347
348
349
350
                                  e.target.icon = "expand-more";

                              }

                              break;

                          case 'checkbox select-all':

74249687   Luigi Serra   Cross browser con...
351
                                  var childs = e.srcElement.parentNode.parentNode.children[1].childNodes;

73bcce88   luigser   COMPONENTS
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
                                  for(var i=0; i < childs.length; i++){

                                      childs[i].children[0].checked = e.srcElement.checked;

                                  }

  

                                  this.fireSelectedFields();

  

                              break;

                      }

                  }

              }

          });

  

      </script>

  

  </dom-module>