import {ExComponent} from '../ExComponent.js'
import {Attribute, Component, Element, Renders} from '../decorators.js'
export interface NavBarItem {
title: string,
name: string,
href?: string,
right?: boolean,
}
@Component('ex-nav')
export class NavBarComponent extends ExComponent {
protected static styles = `
`
protected static html = `
`
@Renders()
public items: NavBarItem[] = []
@Attribute()
public appName = ''
@Element('span.appName')
protected appNameEl!: HTMLSpanElement
@Element('ul')
protected list!: HTMLUListElement
render() {
super.render()
this.appNameEl.hidden = !this.appName
this.appNameEl.innerText = this.appName || ''
this.list.childNodes.forEach(x => x.remove())
for ( const item of this.getItems() ) {
const li = document.createElement('li')
const a = document.createElement('a')
li.appendChild(a)
a.setAttribute('href', item.href ?? '#')
a.innerText = item.title
a.addEventListener('click', () => this.dispatchItemClick(item.name))
if ( item.right ) {
li.classList.add('right')
}
this.list.append(li)
}
}
getItems(): NavBarItem[] {
const itemEls = this.querySelectorAll('ex-nav-item').values()
const items = []
for ( const itemEl of itemEls ) {
const title = itemEl.getAttribute('title')
const name = itemEl.getAttribute('name')
if ( title && name ) {
const item: NavBarItem = {
title,
name,
right: itemEl.hasAttribute('right'),
}
const href = itemEl.getAttribute('href')
if ( href ) {
item.href = href
}
items.push(item)
}
}
return items
}
dispatchItemClick(name: string) {
return this.dispatchCustom('onItemClick', { name })
}
}