<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<dom-module id="treeview-controllet">
<template>
<style is="custom-style">
:host ::content .list {
margin: .5rem;
display: block;
list-style-type: none;
}
:host ::content .list__item {
margin: 0 0 .5rem 0;
padding: 0;
}
:host ::content .label--checkbox {
position: relative;
margin: .5rem;
font-family: Arial, sans-serif;
line-height: 135%;
cursor: pointer;
padding-left: 30px;
padding-top: 0px;
}
:host ::content .checkbox + label {
/*text-indent: -5000px;
height: 20px;
width: auto;*/
}
:host ::content input[type="checkbox"]:not(:checked), :host ::content input[type="checkbox"]:checked {
position: relative;
left: 10px;
visibility: visible;
}
:host ::content .checkbox {
position: relative;
/*top: -0.375rem;*/
top: 3px;
margin: 0 1rem 0 0;
cursor: pointer;
min-height: 0;
max-height: 0;
}
:host ::content .checkbox:before {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
content: "";
position: absolute;
left: 0;
z-index: 1;
width: 1.2em;
height: 1.2em;
border: 2px solid #DDDDDD;
}
:host ::content .checkbox:checked:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
height: 1em;
border-color: var(--paper-blue-500);
border-top-style: none;
border-right-style: none;
}
:host ::content .checkbox:after {
content: "";
position: absolute;
top: -0.125em;
left: 0;
width: 1.4em;
height: 1.4em;
background: #fff;
cursor: pointer;
}
:host ::content .select-all{
position:relative;
float:left;
left: 20px;
top: -3px;
}
:host ::content div.hiding_panel{
width: 100%;
height: 15px;
/*padding: 3px;
height: 35px;
border: 1px;
background: #fff;
border-radius: 0.125rem;
box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);*/
}
:host ::content div.panel-title{
position: relative;
float: left;
padding-left: 10px;
font-weight: bolder;
color: #000000;
}
:host ::content iron-icon.panel-hide-trigger {
position: relative;
float: left;
height: 24px;
width: 24px;
border-radius: 50%;
/*background: var(--paper-pink-500);*/
background: #348ED5;
color: white;
line-height: 64px;
}
:host ::content iron-icon.panel-hide-trigger:hover {
/*color: var(--google-gray-700);*/
color : #000000;
}
:host ::content .items-list{
display: none;
}
</style>
<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
}
},
createFieldsContainer : function(id, heading, level){
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>' +
'<input id="'+ heading +'" type="checkbox" class="checkbox select-all">' +
'</div>' +
'<br>';
/*'<div class="items-list"></div>';*/
ul.innerHTML += (id.indexOf("records") != -1) ? '<div class="items-list" style="display:block;"></div>' : '<div class="items-list"></div>';
return ul;
},
createListItem : function(id, label) {
return '<li class="list__item">'
+ '<input id="'+ id +'" type="checkbox" class="checkbox">'
+ '<div class="label--checkbox">'+ label +'</div>'
+ '</li>';
},
analyzeObject : function(parent_list, curr_field, object) {
if(object == null) return;
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
this.fieldsMap[parent_list[parent_list.length - 2]].children[2].innerHTML += this.createListItem(parent_list.toString(), curr_field);
return;
}
}
if(object.constructor == Array || object.constructor == Object){
var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1], parent_list.length);
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
this.fieldsMap[parent_list[parent_list.length - 2]].children[2].innerHTML += this.createListItem(parent_list.toString(), curr_field);
}
}
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
var mainPanel = this.createFieldsContainer("root", "Data fields", 0);
//MATERIAL CHECKBOX UL
mainPanel.children[2].style.display = "block";
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){
if(Object.getPrototypeOf(e) !== CustomEvent.prototype) {
e = e[Object.keys(e)[0]];
}
if(!e.target.control) {
switch((e.target.className.indexOf("iron-icon") != -1) ? "panel-hide-trigger" : e.target.className){
case 'checkbox':
this.fireSelectedFields();
break;
case 'panel-hide-trigger':
if(e.target.parentNode.parentNode.children[2].style.display == "block") {
e.target.parentNode.parentNode.children[2].style.cssText = "display: none;";
e.target.icon = "chevron-right";
}else{
e.target.parentNode.parentNode.children[2].style.cssText = "display: block;";
e.target.icon = "expand-more";
}
break;
case 'checkbox select-all':
var childs = e.srcElement.parentNode.parentNode.children[2].childNodes;
for(var i=0; i < childs.length; i++){
childs[i].children[0].checked = e.srcElement.checked;
}
this.fireSelectedFields();
break;
}
}
}
});
</script>
</dom-module>