(function ($) {
|
|
Toolbar = $.fm.Toolbar = Control.subClass({
|
|
items: true,
|
|
init: function(config) {
|
this.selectable = config.selectable;
|
this.selectedItem = null;
|
|
config.css = $.fm.combine(config.css, {
|
container: null,
|
item: null,
|
itemSelected: null,
|
itemImage: null,
|
itemIcon: null,
|
itemText: null,
|
itemDown: null
|
});
|
|
Control.call(this, config);
|
},
|
|
getContainerTemplate: function() {
|
var template = this.getTemplate("Toolbar", "container");
|
return template;
|
},
|
|
beforeCreateItems: function(config) {
|
|
},
|
|
addItem: function(option) {
|
this.doAddItem(this, this.container, option, 1);
|
},
|
|
createItem: function(container, option) {
|
var config = this.config; var me = this;
|
|
//1. item
|
var template = this.getTemplate("Toolbar", "item");
|
var item = $(template);
|
|
item.body = $("#body", item);
|
if (!item.body.length) {
|
item.body = item;
|
}
|
|
this.addClass(item.body, config.css.item);
|
|
//2. text
|
var text = item.text = $("#text", item);
|
this.setText(text, option.text, config.css.itemText);
|
|
//3. image and icon
|
var image = item.image = $("#image", item);
|
this.setImage(image, option.image, config.css.itemImage);
|
|
var icon = item.icon = $("#icon", item);
|
this.setIcon(icon, option.icon, config.css.itemIcon);
|
|
//4. click
|
item.click(function() {
|
if (me.selectable) {
|
me.focusItem(item);
|
}
|
|
if (option.action) {
|
var onGet = config.onGet;
|
if (!onGet) {
|
return;
|
}
|
|
Action.exec({
|
operator: option.action,
|
dataName: onGet("dataname"),
|
record: onGet("record"),
|
observer: onGet("observer")
|
});
|
}
|
|
if (option.onSelect) {
|
option.onSelect.call(this, item, option);
|
}
|
});
|
|
//5. link
|
if (option.menu) {
|
this.addDownButton(item);
|
var menu = new $.fm.PopMenu(option.menu);
|
this.linkControl(item, menu, option.menu);
|
}
|
else if (option.tree) {
|
this.addDownButton(item);
|
var tree = new $.fm.Tree(option.tree);
|
this.linkControl(item, tree, option.menu);
|
}
|
else if (option.panel) {
|
this.addDownButton(item);
|
var panel = new $.fm.Panel(option.panel);
|
this.linkControl(item, panel, option.menu);
|
}
|
|
return item;
|
},
|
|
addDownButton: function(item) {
|
var config = this.config;
|
|
var template = this.getTemplate("Toolbar", "item_down");
|
var down = item.down = $(template);
|
this.addClass(down, config.css.itemDown);
|
item.append(down);
|
},
|
|
linkControl: function(item, childCtrl) {
|
var trigger = this.config.trigger || "hover";
|
|
if ("hover" == trigger) {
|
item.mouseenter(function() {
|
childCtrl.setVisible(true);
|
});
|
item.mouseleave(function() {
|
childCtrl.setVisible(false);
|
});
|
}
|
else {
|
item.click(function() {
|
childCtrl.changeVisible();
|
});
|
}
|
|
item.append(childCtrl.container);
|
},
|
|
focusItem: function(item) {
|
if (item.selected) {
|
return;
|
}
|
|
if (this.selectedItem) {
|
this.selectedItem.removeClass(this.config.css.itemSelected);
|
}
|
|
this.selectedItem = item;
|
item.addClass(this.config.css.itemSelected);
|
},
|
|
focusByIndex: function(idx) {
|
var item = this.items[idx];
|
|
if (!item) {
|
return;
|
}
|
|
this.focusItem(item);
|
},
|
|
selectItem: function(item) {
|
item.click();
|
},
|
|
selectByIndex: function(idx) {
|
var item = this.items[idx];
|
this.selectItem(item);
|
}
|
|
});
|
|
|
//*************************************
|
Toolbar_TemplateA = {};
|
Toolbar_TemplateB = {};
|
Toolbar_TemplateC = {};
|
|
|
Toolbar_TemplateA.container = [
|
'<div class="toolbar-A">',
|
'</div>'
|
];
|
|
Toolbar_TemplateA.director = [
|
'<div class="toolbar-A-director"><div>'
|
];
|
|
Toolbar_TemplateA.item = [
|
'<a href="#" class="toolbar-A-btn-outer">',
|
'<span id="body" class="toolbar-A-btn">',
|
'<span id="icon" class="toolbar-A-btn-icon iconfont"></span>',
|
'<span id="text" class="toolbar-A-btn-content"></span>',
|
'</span>',
|
'</a>'
|
];
|
|
//*************************************
|
Toolbar_TemplateB.container = [
|
'<div id="container" class="toolbar-B">'
|
];
|
|
Toolbar_TemplateB.item = [
|
'<div class="toolbar-B-btn" style="left: 0px; width: 110px" >',
|
'<span id="icon" class="iconfont"></span>',
|
'<span id="text" class="toolbar-B-btn-text"></span>',
|
'</div>'
|
];
|
|
Toolbar_TemplateB.item_down = [
|
'<img class="photo-preview">',
|
];
|
|
//*************************************
|
Toolbar_TemplateC.container = [
|
'<div id="container" class="toolbar-C">'
|
];
|
|
Toolbar_TemplateC.item = [
|
'<div class="toolbar-C-btn">',
|
'<div id="icon" class="toolbar-C-btn-icon iconfont"></div>',
|
'<div id="text" class="toolbar-C-btn-text"></div>',
|
'</div>'
|
];
|
|
Toolbar_TemplateC.item_down = [
|
'<img class="photo-preview">',
|
];
|
|
})(jQuery);
|
