You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.6 KiB
80 lines
2.6 KiB
import { gMainApp, gEventBus } from "./MainApp.js" ;
|
|
|
|
// --------------------------------------------------------------------
|
|
|
|
gMainApp.component( "tabbed-pages", {
|
|
|
|
data: function() { return {
|
|
tabs: [],
|
|
activeTabId: null,
|
|
} ; },
|
|
|
|
template: `
|
|
<div class="tabbed-pages">
|
|
<slot />
|
|
<div class="tab-strip">
|
|
<div v-for="tab in tabs" :data-tabid=tab.tabId @click=onTabClicked class="tab" v-bind:class="{'active': tab.tabId == activeTabId}" >
|
|
{{tab.caption}}
|
|
</div>
|
|
</div>
|
|
</div>`,
|
|
|
|
created() {
|
|
// FUDGE! It's nice to have the parent manage the TabbedPage's, and we just show the content
|
|
// as a slot, but that makes it tricky for us to create the tab strip, since we don't know anything
|
|
// about the tabs themselves. We work around this by having each TabbedPage emit an event when
|
|
// they mount, but since we ourself mount only after all our children have mounted, it's tricky
|
|
// for us to catch these events ($on() was remove in Vue 3 :-/). So, we emit the event on the
|
|
// global event bus, and check if they're for one of our TabbedPage's when we receive them.
|
|
gEventBus.on( "tab-loaded", (tabbedPage) => {
|
|
if ( ! tabbedPage.$el.parentNode.isSameNode( this.$el ) )
|
|
return ;
|
|
// one of our TabbedPage's has just mounted - show it in our tab strip
|
|
this.tabs.push( {
|
|
tabId: tabbedPage.tabId, caption: tabbedPage.caption
|
|
} ) ;
|
|
} ) ;
|
|
},
|
|
|
|
mounted() {
|
|
// start with the first tab activated
|
|
if ( this.tabs.length > 0 )
|
|
this.activateTab( this.tabs[0].tabId ) ;
|
|
},
|
|
|
|
methods: {
|
|
|
|
onTabClicked: function( evt ) {
|
|
// activate the selected tab
|
|
this.activateTab( evt.target.dataset.tabid ) ;
|
|
},
|
|
|
|
activateTab: function( tabId ) {
|
|
// activate the specified tab
|
|
this.activeTabId = tabId ;
|
|
$( this.$el ).find( ".tabbed-page" ).each( function() {
|
|
let displayStyle = $(this).data("display") || "block" ;
|
|
$(this).css( "display", ($(this).data("tabid") == tabId) ? displayStyle : "none" ) ;
|
|
} ) ;
|
|
},
|
|
|
|
},
|
|
|
|
} ) ;
|
|
|
|
// --------------------------------------------------------------------
|
|
|
|
gMainApp.component( "tabbed-page", {
|
|
|
|
props: [ "tabId", "caption", "isActive" ],
|
|
|
|
template: `
|
|
<div :data-tabid=tabId v-show=isActive class="tabbed-page" >
|
|
<slot />
|
|
</div>`,
|
|
|
|
mounted() {
|
|
gEventBus.emit( "tab-loaded", this ) ;
|
|
},
|
|
|
|
} ) ;
|
|
|