132 lines
3.1 KiB
JavaScript
Executable File
132 lines
3.1 KiB
JavaScript
Executable File
var bricks = window.bricks || {};
|
|
bricks.TabPanel = class extends bricks.Layout {
|
|
/*
|
|
options
|
|
{
|
|
css:
|
|
tab_long: 100%
|
|
tab_pos:"top"
|
|
items:[
|
|
{
|
|
name:
|
|
label:"tab1",
|
|
icon:
|
|
removable:
|
|
refresh:false,
|
|
content:{
|
|
"widgettype":...
|
|
}
|
|
}
|
|
]
|
|
}
|
|
css:
|
|
tab
|
|
tab-button
|
|
tab-button-active
|
|
tab-button-hover
|
|
tab-content
|
|
*/
|
|
constructor(options){
|
|
super(options);
|
|
this.content_buffer = {};
|
|
this.cur_tab_name = '';
|
|
this.content_container = new bricks.Filler({});
|
|
if (this.opts.tab_pos == 'top' || this.opts.tab_pos == 'bottom'){
|
|
this.set_css('vbox');
|
|
this.tab_container = new bricks.VBox({
|
|
height:'auto',
|
|
width:'auto'
|
|
});
|
|
} else {
|
|
this.set_css('hbox');
|
|
this.tab_container = new bricks.VBox({
|
|
width:'auto',
|
|
height:'auto'
|
|
});
|
|
}
|
|
if (this.opts.tab_pos == 'top' || this.opts.tab_pos == 'left'){
|
|
this.add_widget(this.tab_container);
|
|
this.add_widget(this.content_container);
|
|
} else {
|
|
this.add_widget(this.content_container);
|
|
this.add_widget(this.tab_container);
|
|
}
|
|
this.createToolbar();
|
|
this.set_css('tabpanel');
|
|
this.content_container.set_css('tabpanel-content');
|
|
this.show_first_tab();
|
|
}
|
|
show_first_tab(){
|
|
this.toolbar.dispatch('command', this.opts.items[0]);
|
|
}
|
|
createToolbar(){
|
|
var desc = {
|
|
tools:this.opts.items
|
|
};
|
|
var orient;
|
|
if (this.opts.tab_pos == 'top' || this.opts.tab_pos == 'bottom'){
|
|
orient = 'horizontal';
|
|
} else {
|
|
orient = 'vertical';
|
|
}
|
|
desc.orientation = orient;
|
|
this.toolbar = new bricks.Toolbar(desc);
|
|
this.toolbar.bind('command', this.show_tabcontent.bind(this));
|
|
this.toolbar.bind('remove', this.tab_removed.bind(this));
|
|
this.toolbar.bind('ready', this.show_first_tab.bind(this));
|
|
this.tab_container.add_widget(this.toolbar);
|
|
}
|
|
async show_tabcontent(event){
|
|
var tdesc = event.params;
|
|
var items = this.opts.items;
|
|
if (tdesc.name == this.cur_tab_name){
|
|
bricks.debug('TabPanel(): click duplication click on same tab', tdesc)
|
|
return;
|
|
}
|
|
for (var i=0;i<items.length;i++){
|
|
if (tdesc.name == items[i].name){
|
|
var w = objget(this.content_buffer, tdesc.name);
|
|
if (w && ! items[i].refresh){
|
|
this.content_container.clear_widgets();
|
|
this.content_container.add_widget(w);
|
|
this.cur_tab_name = name;
|
|
return;
|
|
}
|
|
try {
|
|
w = await bricks.widgetBuild(items[i].content, this, {});
|
|
if (! w){
|
|
bricks.debug('TabPanel():create content error', items[i].content);
|
|
return;
|
|
}
|
|
this.content_buffer[tdesc.name] = w;
|
|
this.content_container.clear_widgets();
|
|
this.content_container.add_widget(w);
|
|
this.cur_tab_name = tdesc.name;
|
|
return;
|
|
}
|
|
catch (e) {
|
|
console.log('except ', e)
|
|
}
|
|
}
|
|
}
|
|
bricks.debug('TabPanel(): click event handled but noting to do', tdesc)
|
|
}
|
|
add_tab(desc){
|
|
var item = this.toolbar.createTool(desc);
|
|
if (desc.removable){
|
|
this.add_removeable(item);
|
|
}
|
|
}
|
|
tab_removed(event){
|
|
var desc = event.params;
|
|
if (this.content_buffer.hasOwnProperty(desc.name))
|
|
delete this.content_buffer[desc.name];
|
|
|
|
if (desc.name == this.cur_tab_name){
|
|
this.show_first_tab();
|
|
}
|
|
}
|
|
}
|
|
|
|
bricks.Factory.register('TabPanel', bricks.TabPanel);
|