113 lines
3.4 KiB
JavaScript
113 lines
3.4 KiB
JavaScript
|
|
|
|
class Buildoz extends HTMLElement {
|
|
constructor(){
|
|
super() // always call super() first!
|
|
this.attrs = {}
|
|
}
|
|
|
|
static get observedAttributes(){ //observable attributes triggering attributeChangedCallback
|
|
// anything added here will be observed for all buildoz tags
|
|
// in your child, add you local 'color' observable attr with :
|
|
// return([...super.observedAttributes, 'color'])
|
|
return([])
|
|
}
|
|
|
|
static define(name, cls){
|
|
const tag = `bz-${name}`
|
|
if(!customElements.get(tag)) { // no wild redefinition
|
|
customElements.define(tag, cls)
|
|
}
|
|
return cls
|
|
}
|
|
|
|
connectedCallback(){ // added to the DOM
|
|
this.classList.add('buildoz')
|
|
}
|
|
|
|
disconnectedCallback(){ // removed from the DOM
|
|
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
this.attrs[name] = newValue
|
|
}
|
|
}
|
|
|
|
class BZselect extends Buildoz {
|
|
constructor(){
|
|
super()
|
|
this.value = null
|
|
this.open = false
|
|
this.defaultAttrs = {
|
|
label: 'Select...',
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback()
|
|
this.button = document.createElement('button')
|
|
this.button.textContent = this.getAttribute('label') || this.defaultAttrs.label
|
|
this.prepend(this.button)
|
|
this.button.addEventListener('click', this.toggle.bind(this))
|
|
this.options = this.querySelectorAll('option')
|
|
for(const opt of this.options){
|
|
opt.addEventListener('click', this.onClick.bind(this))
|
|
if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
|
|
}
|
|
}
|
|
|
|
// static get observedAttributes(){ // Only if you want actions on attr change
|
|
// return([...super.observedAttributes, 'myattr'])
|
|
// }
|
|
//
|
|
// attributeChangedCallback(name, oldValue, newValue) {
|
|
// super.attributeChangedCallback(name, oldValue, newValue)
|
|
// }
|
|
|
|
toggle(){
|
|
for(const opt of this.options){
|
|
if(this.open) opt.classList.remove('open')
|
|
else opt.classList.add('open')
|
|
}
|
|
this.open = !this.open
|
|
}
|
|
|
|
onClick(evt){
|
|
const opt = evt.target.closest('option')
|
|
if(opt && opt.value) this.onOption(opt.value)
|
|
}
|
|
|
|
onOption(value, silent=false){
|
|
this.value = value
|
|
if(!silent) this.toggle()
|
|
const opt = Array.from(this.options).find(opt => opt.value==value)
|
|
if(value || (opt && opt.textContent)) this.button.textContent = opt.textContent
|
|
else this.button.textContent = this.getAttribute('label') || this.defaultAttrs.label
|
|
this.dispatchEvent(new Event('change', {
|
|
bubbles: true,
|
|
composed: false,
|
|
cancelable: false
|
|
}))
|
|
}
|
|
|
|
addOption(value, markup){
|
|
const opt = document.createElement('option')
|
|
opt.setAttribute('value', value)
|
|
opt.innerHTML = markup
|
|
opt.addEventListener('click',this.onClick.bind(this))
|
|
this.append(opt)
|
|
this.options = this.querySelectorAll('option')
|
|
}
|
|
|
|
fillOptions(opts, erase = true){
|
|
if(erase){
|
|
this.options.forEach(node => { node.remove() })
|
|
this.options = this.querySelectorAll('option')
|
|
this.onOption('', true) // unselect last
|
|
}
|
|
for(const opt of opts) this.addOption(opt.value, opt.markup)
|
|
}
|
|
}
|
|
|
|
Buildoz.define('select', BZselect) |