+
+
@@ -39,12 +47,12 @@
dataType: "json",
success: function(data){
tree.setAttribute("json-data", JSON.stringify(data));
- tree.init();//chrome
+ tree.ready();//chrome
}
});
- tree.addEventListener("click", function () {
- fields.innerHTML = tree.getFlatFields();
+ tree.addEventListener("tree-view-controllet_selected-fields", function (e) {
+ fields.innerHTML = e.detail.fields;
console.log(tree.getFlatFields());
console.log(tree.getFields());//firefox console.log does not recognize associative array?
});
diff --git a/controllets/tree-view-controllet/tree-view-controllet.html b/controllets/tree-view-controllet/tree-view-controllet.html
index 5665618..c9b6707 100644
--- a/controllets/tree-view-controllet/tree-view-controllet.html
+++ b/controllets/tree-view-controllet/tree-view-controllet.html
@@ -20,8 +20,13 @@
font-weight: 700;
}
+ paper-item.menu-trigger.iron-selected {
+ background-color: #B6B6B6;
+ }
+
paper-item:not(.menu-trigger).iron-selected {
background-color: #2196F3;
+ color: #FFFFFF;
}
.sublist {
@@ -29,11 +34,16 @@
padding-right: 20px;
}
+ :host{
+ --paper-menu-focused-item-after: {
+ opacity: 0;
+ };
+ }
-
+
@@ -46,12 +56,12 @@
rootName : {
type : String,
- value : "Data"
+ value : "root"
},
jsonData : {
type : Object,
- value : null
+ value : undefined
},
selectedFields : {
@@ -59,9 +69,14 @@
value : []
},
+ preselectedFields : {
+ type : Array,
+ value : []
+ },
+
openedPath : {
type : String,
- value : ""
+ value : undefined
}
},
@@ -73,16 +88,30 @@
ready : function() {
if(this.jsonData)
- this.init();
+ this._init();
+ },
+
+ getFields : function() {
+ return this.selectedFields;
+ },
+
+ getFlatFields : function() {
+ var fields = [];
+
+ for(var A in this.selectedFields)
+ for(var e in this.selectedFields[A])
+ fields.push(this.selectedFields[A][e]);
+
+ return fields;
},
- init : function() {
- var tree = document.getElementById('paper-tree');
- this.injectBoundHTML(createTree(this.rootName, this.jsonData), tree);
- this.openPath();
+ _init : function() {
+ this._injectBoundHTML(this._initCreateTree(this.rootName, this.jsonData), this.$.paper_tree);
+ this._preselectFields();
+ this._openPath();
},
- injectBoundHTML : function(html, element) {
+ _injectBoundHTML : function(html, element) {
var template = document.createElement('template');
template.innerHTML = html;
var fragment = this.instanceTemplate(template);
@@ -93,39 +122,121 @@
return fragment;
},
- openPath : function() {
- var openedPath;
+ _initCreateTree : function(nodeName, node) {
+ var list = new Array();
+ for(var child in node)
+ list.push(this._createTree(child, node[child]));
+ return this._paper_submenu(nodeName, list);
+ },
- if (this.openedPath == "")
- openedPath = this.rootName;
- else
- openedPath = this.openedPath;
+ _createTree : function(nodeName, node) {
+ var html = "";
+ if(node.constructor == Object){
+ var list = new Array();
+ for(var child in node)
+ list.push(this._createTree(nodeName+","+child, node[child]));
+ html = this._paper_submenu(nodeName, list);
+ }
+ else if (node.constructor == Array){
+ var list = new Array();
+ if(node[0].constructor == Object){
+ for(var child in node[0])
+ list.push(this._createTree(nodeName+","+child, node[0][child]));
+ html = this._paper_submenu(nodeName, list);
+ }
+ else{
+ html = nodeName;
+ }
+ }
+ else{
+ html = nodeName;
+ }
+ return html;
+ },
- var nodes = openedPath.split(",");
+ _paper_submenu : function(str, list) {
+ var submenu = "
";
- openedPath = "";
+ submenu += "" + "" + "";
+
+ return submenu;
},
- _onSelect : function(e) {
- //this.updateSelectedFields(e);
- this.fire('treeview-controllet_fileds-selected', {fields : this.getFlatFields()});
+ _paper_item : function(str){
+ return "
"+this._getName(str)+"";
+ },
+
+ _getName : function (str){
+ str = str.split(",");
+ return str[str.length-1];
+ },
+
+ _preselectFields : function() {
+ if (this.preselectedFields){
+ for(var field in this.preselectedFields){
+ var path = this.preselectedFields[field];
+
+ if (path.lastIndexOf(",") != -1)
+ path = path.substring(0, path.lastIndexOf(","));
+ else
+ path = this.rootName;
+
+ var menu = document.getElementById(path);
+ var item = document.getElementById(this.preselectedFields[field]);
+ var index = menu.items.indexOf(item);
+
+ if (menu.selectedValues == undefined){
+ menu.selectedValues = [index];
+ }
+ else{
+ var selectedValues = [];
+ for (var i in menu.selectedValues)
+ selectedValues.push(menu.selectedValues[i]);
+ selectedValues.push(index);
+ menu.selectedValues = selectedValues;
+ }
+ }
+ }
+ },
+
+ _openPath : function() {
+ this.$.paper_tree.firstChild.open();
+
+ if (this.openedPath) {
+ var openedPath = this.openedPath;
+ var nodes = openedPath.split(",");
+ openedPath = "";
+
+ while (nodes.length != 0) {
+ openedPath += nodes.splice(0, 1);
+
+ var menu = document.getElementById(openedPath);
+ var submenu = menu.parentNode.parentNode;
+ submenu.open();
+
+ openedPath += ",";
+ }
+ }
+ },
+ _onSelect : function(e) {
+ this._updateSelectedFields(e);
},
_onDeselect : function(e) {
- this.updateSelectedFields(e);
- this.fire('treeview-controllet_fileds-selected', {fields : this.getFlatFields()});
+ this._updateSelectedFields(e);
},
- updateSelectedFields : function(e) {
+ _updateSelectedFields : function(e) {
var menuId = e.target.id;
var selectedIds = [];
@@ -140,79 +251,12 @@
this.selectedFields[menuId] = selectedIds;
else
delete this.selectedFields[menuId];
- },
-
- getFields : function() {
- return this.selectedFields;
- },
-
- getFlatFields : function() {
- var fields = [];
- for(var A in this.selectedFields)
- for(var e in this.selectedFields[A])
- fields.push(this.selectedFields[A][e].replace(this.rootName + ",",""));
-
- return fields;
+ this.fire('tree-view-controllet_selected-fields', {fields : this.getFlatFields()});
}
});
-
-
\ No newline at end of file
diff --git a/datalets/datatable-datalet/datatable-datalet.html b/datalets/datatable-datalet/datatable-datalet.html
index 32171ac..fb7a1e2 100755
--- a/datalets/datatable-datalet/datatable-datalet.html
+++ b/datalets/datatable-datalet/datatable-datalet.html
@@ -63,7 +63,7 @@ Example:
var DatatableBehavior = {
presentData: function(){
- if(!this.data || this.data == undefined) return;
+ if(!this.data || this.data[0] == undefined) return;
html = "";
html += '
'+
'';