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.
84 lines
2.5 KiB
84 lines
2.5 KiB
import { gMainApp, gEventBus } from "./MainApp.js" ;
|
|
|
|
// --------------------------------------------------------------------
|
|
|
|
gMainApp.component( "accordian", {
|
|
|
|
props: [ "accordianId" ],
|
|
data() { return {
|
|
panes: [],
|
|
} ; },
|
|
|
|
template: `
|
|
<div class="accordian" :id="'accordian-'+accordianId" >
|
|
<slot />
|
|
</div>`,
|
|
|
|
mounted() {
|
|
|
|
// expand the specified pane
|
|
gEventBus.on( "expand-pane", (accordianId, paneKey, isClick) => {
|
|
if ( this.accordianId != accordianId )
|
|
return ;
|
|
// update the state for each child pane
|
|
this.panes.forEach( (pane) => {
|
|
let newIsExpanded = (paneKey != null && pane.paneKey == paneKey) ;
|
|
if ( pane.isExpanded && ! newIsExpanded )
|
|
pane.$emit( "pane-collapsed", pane.paneKey, isClick ) ;
|
|
else if ( ! pane.isExpanded && newIsExpanded )
|
|
pane.$emit( "pane-expanded", pane.paneKey, isClick ) ;
|
|
pane.isExpanded = newIsExpanded ;
|
|
} ) ;
|
|
} ) ;
|
|
|
|
},
|
|
|
|
} ) ;
|
|
|
|
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
|
|
|
gMainApp.component( "accordian-pane", {
|
|
|
|
props: [ "paneKey", "title", "entries", "getEntryKey", "iconUrl", "backgroundUrl", "borderClass" ],
|
|
data() { return {
|
|
isExpanded: false,
|
|
cssBackground: this.backgroundUrl ? "url(" + this.backgroundUrl + ")": null,
|
|
} ; },
|
|
|
|
template: `
|
|
<div class="accordian-pane">
|
|
<div class="title" :style="{background: cssBackground}" :class=borderClass @click=onToggleExpand >
|
|
<img v-if=iconUrl :src=iconUrl class="icon" />
|
|
{{title}}
|
|
</div>
|
|
<ul v-show=isExpanded :class="{entries: true}" >
|
|
<li v-for="e in entries" :key=e class="entry" :data-key=getEntryKey(e) :class="{disabled: !getEntryKey(e)}" >
|
|
<a v-if=getEntryKey(e) @click=onClickEntry(e) > {{e.caption}} </a>
|
|
<span v-else> {{e.caption}} </span>
|
|
</li>
|
|
</ul>
|
|
</div>`,
|
|
|
|
created() {
|
|
// notify the parent
|
|
this.$parent.panes.push( this ) ;
|
|
},
|
|
|
|
methods: {
|
|
|
|
onClickEntry( entry ) {
|
|
// notify the parent that an entry was clicked
|
|
this.$emit( "entry-clicked", this.paneKey, entry ) ;
|
|
},
|
|
|
|
onToggleExpand() {
|
|
// notify the parent
|
|
gEventBus.emit( "expand-pane", this.$parent.accordianId,
|
|
this.isExpanded ? null : this.paneKey,
|
|
true
|
|
) ;
|
|
},
|
|
|
|
},
|
|
|
|
} ) ;
|
|
|