Blame view

controllets/treeview-controllet/treeview-controllet.html 13.8 KB
73bcce88   luigser   COMPONENTS
1
2
  <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...
3
  <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">

73bcce88   luigser   COMPONENTS
4
5
6
  

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

      <template>

74249687   Luigi Serra   Cross browser con...
7
  

73bcce88   luigser   COMPONENTS
8
9
          <style is="custom-style">

  

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

73bcce88   luigser   COMPONENTS
11
12
13
14
15
                  margin: .5rem;

                  display: block;

                  list-style-type: none;

              }

  

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

74249687   Luigi Serra   Cross browser con...
17
18
19
                  position: relative;

                  float: left;

                  width: 100%;

73bcce88   luigser   COMPONENTS
20
21
              }

  

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

73bcce88   luigser   COMPONENTS
23
                  position: relative;

74249687   Luigi Serra   Cross browser con...
24
25
                  float : left   ;

                  width: 100%;

73bcce88   luigser   COMPONENTS
26
27
              }

  

74249687   Luigi Serra   Cross browser con...
28
29
30
              ::content .list__item {

                  margin: 0 0 .5rem 0;

                  padding: 0;

73bcce88   luigser   COMPONENTS
31
32
              }

  

74249687   Luigi Serra   Cross browser con...
33
34
35
36
37
38
39
              ::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
40
  

74249687   Luigi Serra   Cross browser con...
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
              /* 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
61
                  position: relative;

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

73bcce88   luigser   COMPONENTS
63
              }

74249687   Luigi Serra   Cross browser con...
64
65
66
67
68
69
70
71
72
73
74
75
              ::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
76
77
              }

  

74249687   Luigi Serra   Cross browser con...
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
              /* 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
97
98
              }

  

74249687   Luigi Serra   Cross browser con...
99
100
101
102
103
104
105
106
107
108
109
110
111
              /* 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
112
113
              }

  

74249687   Luigi Serra   Cross browser con...
114
115
              ::content .select-all{

                 /* position:relative;

73bcce88   luigser   COMPONENTS
116
                  float:left;

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

73bcce88   luigser   COMPONENTS
118
119
              }

  

74249687   Luigi Serra   Cross browser con...
120
121
122
123
124
125
              ::content div.hiding_panel{

                  width: 100%;

                  height: 15px;

                  margin-bottom: 18px;

                  /*padding: 3px;

                  height: 35px;

73bcce88   luigser   COMPONENTS
126
127
128
                  border: 1px;

                  background: #fff;

                  border-radius: 0.125rem;

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

73bcce88   luigser   COMPONENTS
130
131
              }

  

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

73bcce88   luigser   COMPONENTS
133
134
135
                  position: relative;

                  float: left;

                  padding-left: 10px;

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

73bcce88   luigser   COMPONENTS
137
138
139
140
                  font-weight: bolder;

                  color: #000000;

              }

  

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

73bcce88   luigser   COMPONENTS
142
143
144
145
146
147
148
149
150
151
152
                  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...
153
              ::content iron-icon.panel-hide-trigger:hover {

73bcce88   luigser   COMPONENTS
154
155
156
157
                  /*color: var(--google-gray-700);*/

                  color : #000000;

              }

  

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

73bcce88   luigser   COMPONENTS
159
160
161
162
163
                  display: none;

              }

  

          </style>

  

dbc787cf   Luigi Serra   Controllet cross ...
164
165
  

  

73bcce88   luigser   COMPONENTS
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
          <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...
191
              createFieldsContainer : function(id, heading){

73bcce88   luigser   COMPONENTS
192
193
194
195
196
197
198
  

                  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...
199
200
201
202
203
204
205
206
207
208
                                              /*'<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
209
210
                                           /*'<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
211
212
213
214
215
216
  

                  return ul;

  

              },

  

              createListItem : function(id, label) {

74249687   Luigi Serra   Cross browser con...
217
218
219
220
221
222
223
224
225
226
227
228
  

                 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
229
230
231
              },

  

              analyzeObject : function(parent_list, curr_field, object) {

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

73bcce88   luigser   COMPONENTS
233
234
235
236
237
238
                  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...
239
                              this.fieldsMap[parent_list[parent_list.length - 2]].children[1].innerHTML += this.createListItem(parent_list.toString(), curr_field);

73bcce88   luigser   COMPONENTS
240
241
242
243
                              return;

                          }

                      }

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

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

73bcce88   luigser   COMPONENTS
245
246
247
248
249
                          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...
250
                          this.fieldsMap[parent_list[parent_list.length - 2]].children[1].innerHTML += this.createListItem(parent_list.toString(), curr_field);

73bcce88   luigser   COMPONENTS
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
                      }

                  }

                  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...
270
                  var mainPanel = this.createFieldsContainer("root", "Data fields");

73bcce88   luigser   COMPONENTS
271
                  //MATERIAL CHECKBOX UL

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

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

                  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...
296
297
298
299
                  if(Object.getPrototypeOf(e) !== CustomEvent.prototype) {

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

                  }

  

73bcce88   luigser   COMPONENTS
300
301
                  if(!e.target.control) {

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

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

73bcce88   luigser   COMPONENTS
303
  

74249687   Luigi Serra   Cross browser con...
304
305
306
307
308
309
310
311
                              /*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
312
313
314
315
316
                              this.fireSelectedFields();

  

                              break;

                          case 'panel-hide-trigger':

  

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

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

73bcce88   luigser   COMPONENTS
319
320
321
                                  e.target.icon = "chevron-right";

  

                              }else{

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

73bcce88   luigser   COMPONENTS
323
324
325
326
                                  e.target.icon = "expand-more";

                              }

                              break;

                          case 'checkbox select-all':

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

73bcce88   luigser   COMPONENTS
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
                                  for(var i=0; i < childs.length; i++){

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

                                  }

  

                                  this.fireSelectedFields();

  

                              break;

                      }

                  }

              }

          });

  

      </script>

  

  </dom-module>