Workbook = Control.subClass({
|
|
items: true,
|
|
init: function(config) {
|
config.css = util.combine(config.css, {
|
container: null,
|
item: null,
|
openItem: null,
|
selectedItem: "band-tree-itemBody",
|
itemArrow : "icon-jiantouarrow486",
|
openItemArrow: "icon-jiantou",
|
icon: null,
|
selectedItemIcon: null
|
});
|
|
this.selected = {};
|
this.itemIndent = 10;
|
|
Control.call(this, config);
|
|
if (config.itemIndex !== undefined) {
|
this.setItemSelected(this.items[0]);
|
}
|
},
|
|
getContainerTemplate: function() {
|
var template = $(BandTree_Template.container.join(""));
|
return template;
|
},
|
|
load: function(itemOptions) {
|
this.container.empty();
|
this.createItems(this, this.container, itemOptions, 1);
|
},
|
|
createItem: function(container, option, level) {
|
var me = this, config = this.config;
|
|
//1. item
|
var template = BandTree_Template.item.join("");
|
var item = $(template);
|
|
if (level == 1) {
|
item.addClass("band-tree-bucket");
|
}
|
else {
|
item.addClass("band-tree-band");
|
}
|
|
item.body = $("#body", item);
|
item.body.css({"padding-left": level * this.itemIndent + "px"});
|
this.addClass(item.body, config.css.item);
|
|
//2. text
|
var text = item.text = $("#text", item);
|
this.setText(text, option.name, config.css.itemText);
|
|
//3. image
|
var image = item.image = $("#image", item);
|
this.setImage(image, option.image, config.css.itemImage);
|
|
//4. icon
|
var icon = item.icon = $("#icon", item);
|
this.setIcon(icon, option.icon, config.css.itemIcon);
|
|
//5. sub tree
|
if (option.children) {
|
this.addSubTree(option, item, option.children, level + 1);
|
}
|
|
//6. item click event
|
item.body.click(function() {
|
me.setItemSelected(item);
|
if (me.onSelect) {
|
me.onSelect.call(me, item, option);
|
}
|
});
|
|
return item;
|
},
|
|
addSubTree: function(option, item, children, level) {
|
var config = this.config;
|
|
//1. arrow icon
|
var arrow = item.arrow = $(BandTree_Template.item_arrow.join(""));
|
arrow.addClass(config.css.itemArrow);
|
item.body.append(arrow);
|
|
//2. sub tree
|
var visible = level <= 2;
|
var container = item.subContainer = this.createContainer(visible);
|
this.createItems(item, container, children, level + 1);
|
item.append(container);
|
},
|
|
setSelectIndex: function(idx) {
|
var item = this.items[idx];
|
this.setItemSelected(item);
|
},
|
|
getSelectOperator: function(item, option) {
|
//1. type
|
if ("leaf" == option.nodetype) {
|
return "select";
|
}
|
else if ("branch" == option.nodetype) {
|
return "open";
|
}
|
|
//2. URL
|
if (option.url) {
|
return "select";
|
}
|
else {
|
return "open";
|
}
|
},
|
|
setItemSelected: function(selected) {
|
if (!selected) { return; }
|
var operator = this.getSelectOperator(selected, selected.option);
|
|
//1. open branch
|
if ("open" == operator) {
|
var old = this.selected.branch;
|
|
if (selected == old) {
|
return;
|
}
|
|
if (old) {
|
this.changeItemCss(old, "item-close");
|
this.selected.branch = null;
|
|
if (old.subContainer) {
|
old.subContainer.hide();
|
}
|
}
|
|
if (selected) {
|
this.changeItemCss(selected, "item-open");
|
this.selected.branch = selected;
|
|
if (selected.subContainer) {
|
selected.subContainer.show();
|
}
|
}
|
}
|
|
//2. select leaf
|
if ("select" == operator) {
|
var old = this.selected.leaf;
|
|
if (selected == old) {
|
return;
|
}
|
|
if (old) {
|
this.changeItemCss(old, "item-unselected");
|
this.selected.leaf = null;
|
}
|
|
if (selected) {
|
this.changeItemCss(selected, "item-selected");
|
this.selected.leaf = selected;
|
|
if (this.onItemSelected) {
|
this.onItemSelected(selected, selected.option);
|
}
|
}
|
}
|
},
|
|
changeItemCss: function(item, event) {
|
var config = this.config;
|
|
//1. branch event
|
if ("item-open" == event && item) {
|
item.body.addClass(config.css.openItem);
|
|
if (item.arrow) {
|
item.arrow.removeClass(config.css.itemArrow);
|
item.arrow.addClass(config.css.openItemArrow);
|
}
|
|
return;
|
}
|
|
if ("item-close" == event && item) {
|
item.body.removeClass(config.css.openItem);
|
|
if (item.arrow) {
|
item.arrow.removeClass(config.css.openItemArrow);
|
item.arrow.addClass(config.css.itemArrow);
|
}
|
|
return;
|
}
|
|
//2. leaf event
|
if ("item-select" == event && item) {
|
item.body.addClass(config.css.selectedItem);
|
|
item.arrow.removeClass(config.css.itemArrow);
|
item.arrow.addClass(config.css.activeItemArrow);
|
|
return;
|
}
|
|
if ("item-unselect" == event && item) {
|
item.body.removeClass(config.css.selectedItem);
|
|
item.arrow.removeClass(config.css.activeItemArrow);
|
item.arrow.addClass(config.css.itemArrow);
|
|
return;
|
}
|
if ("item-selected" == event && item) {
|
item.addClass(config.css.selectedItem);
|
|
return;
|
}
|
|
if ("item-unselected" == event && item) {
|
item.removeClass(config.css.selectedItem);
|
|
return;
|
}
|
}
|
|
});
|
|
|
//*************************************
|
BandTree_Template = {};
|
|
BandTree_Template.container = [
|
'<ul class="band-tree"></ul>'
|
];
|
|
BandTree_Template.item = [
|
'<li class="band-tree-item">',
|
'<div id="body">',
|
'<i id="icon" class="iconfont"></i> ',
|
'<span id="text" class="band-tree-text"></span>',
|
'</div>',
|
'</li>'
|
];
|
|
BandTree_Template.item_arrow = [
|
'<i id="icon" class="band-tree-body-arrow iconfont"></i> '
|
];
|
