bricks/bricks/toolbar.js
2024-06-29 20:01:09 +08:00

126 lines
3.0 KiB
JavaScript
Executable File

var bricks = window.bricks || {};
bricks.Toolbar = class extends bricks.Layout {
/* toolbar options
{
orientation:
target:
interval::
tools:
}
tool options
{
icon:
name:
label:
css:
}
*/
constructor(options){
super(options);
this.toolList = [];
if (this.opts.orientation == 'vertical'){
this.bar = new bricks.VScrollPanel(options);
this.dom_element.classList.add('vtoolbar')
} else {
this.bar = new bricks.HScrollPanel(options);
this.dom_element.classList.add('htoolbar')
}
this.add_widget(this.bar);
this.clicked_btn = null;
this.preffix_css = this.opts.css || 'toolbar';
schedule_once(this.createTools.bind(this), 0.01);
}
add_interval_box(){
if (this.opts.orientation == 'vertical'){
this.bar.add_widget(new bricks.JsWidget({
height:this.opts.interval || '10px'
}));
} else {
this.bar.add_widget(new bricks.JsWidget({
width:this.opts.interval || '10px'
}));
}
}
async createTools(){
var l = this.opts.tools.length;
for (var i=0;i<l; i++){
await this.createTool(this.opts.tools[i]);
if (i < l -1 ){
this.add_interval_box();
}
}
}
async createTool(desc){
var options = {
"widgettype":"Button",
"options":{
width:"auto",
orientation:"horizontal",
flexShrink:0,
icon:desc.icon,
label:desc.label,
name:desc.name,
css:desc.css
}
};
var w = await bricks.widgetBuild(options);
if (! w){
bricks.debug('Toolbar(): build widget failed', options);
return
}
w.bind('click', this.do_handle.bind(this, w));
w.tool_opts = desc;
this.add_removable(w);
this.toolList.push(w);
this.bar.add_widget(w);
return w;
}
remove_item(w, event){
this.bar.remove_widget(w);
this.toolList.remove(w);
w.unbind('click',this.do_handle.bind(this, w));
this.dispatch('remove', w.tool_opts);
event.preventDefault();
event.stopPropagation();
}
do_handle(tool, event){
// var tool = event.target;
bricks.debug('Toolbar() onclick,target=', event.target, tool);
var d = {};
bricks.extend(d, tool.tool_opts);
if (this.opts.target){
d.target = this.opts.target;
}
this.dispatch('command', d);
this.dispatch(tool.tool_opts.name, d);
bricks.debug('event ', tool.tool_opts.name, ' fired ...')
if (this.clicked_btn){
this.clicked_btn.set_css(this.preffix_css + '-button-active', true);
}
tool.set_css(this.preffix_css + '-button-active');
this.clicked_btn = tool;
}
add_removable(item){
if (! item.tool_opts.removable) return;
var img_src = bricks_resource('imgs/delete.png');
var image = new bricks.Icon({url:img_src});
if (image){
item.add_widget(image);
image.bind('click',this.remove_item.bind(this, item));
bricks.debug('Toolbar(): add_removable() for ', img_src);
} else {
bricks.debug('Toolbar(): Image create error', img_src);
}
}
click(name){
for (var i=0;i<this.toolList.length;i++){
if (name==this.toolList[i].tool_opts.name){
this.toolList[i].dom_element.click();
}
}
}
}
bricks.Factory.register('Toolbar', bricks.Toolbar);