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'); } show_first_tab(){ this.show_content_by_tab_name(this.opts.items[0].name); } show_content_by_tab_name(name){ this.toolbar.click(name); } 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); } show_tabcontent = async function(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