41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
import {html, css, LitElement} from 'lit'
|
|
|
|
export class ProjectsSelector extends LitElement {
|
|
static style=css`
|
|
slot {
|
|
display: none;
|
|
}
|
|
`
|
|
|
|
static properties = {
|
|
frame: {type: String},
|
|
_options: {type: Array, state: true}
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<slot @slotchange=${this._handleUpdatedElements} style="display: none"></slot>
|
|
<select @change=${this._handleSelect}>
|
|
${(this._options || []).map(option => this._renderOption(option))}
|
|
</select>
|
|
`
|
|
}
|
|
|
|
_handleUpdatedElements(e) {
|
|
const childNodes = e.target.assignedElements({flatten: true})
|
|
this._options = childNodes.map(e => {
|
|
return {name: e.innerText, href: e.getAttribute('href'), selected: !!e.getAttribute('selected')}
|
|
})
|
|
}
|
|
|
|
_renderOption(option) {
|
|
const {name, href, selected} = option
|
|
return html`<option value="${href}" ?selected="${selected}">${name}</option>`
|
|
}
|
|
|
|
_handleSelect(e) {
|
|
const href = e.target.value
|
|
Turbo.visit(href, {action: 'advance', frame: this.frame})
|
|
}
|
|
}
|