bz-select closes his bros
This commit is contained in:
@@ -30,12 +30,17 @@ bz-select > button::after {
|
||||
color: #444;
|
||||
}
|
||||
bz-select > div.options-container{
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
top: 2em;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
max-height: 0;
|
||||
overflow: auto;
|
||||
transition: max-height 0.4s ease;
|
||||
}
|
||||
bz-select > div.options-container.open{ pointer-events: auto; max-height: 10em;}
|
||||
bz-select option{
|
||||
background-color: #DDD;
|
||||
border: 1px solid black;
|
||||
|
||||
16
buildoz.js
16
buildoz.js
@@ -47,6 +47,7 @@ class BZselect extends Buildoz {
|
||||
this.value = null
|
||||
this.open = false
|
||||
this.value = null
|
||||
this.generalClickEvent = null
|
||||
this.defaultAttrs = {
|
||||
label: 'Select...',
|
||||
}
|
||||
@@ -64,11 +65,13 @@ class BZselect extends Buildoz {
|
||||
this.options = this.querySelectorAll('option')
|
||||
if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
|
||||
for(const opt of this.options){
|
||||
this.optionscontainer.append(opt) // Will move is to the right parent
|
||||
opt.addEventListener('click', this.onClick.bind(this))
|
||||
if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
|
||||
}
|
||||
this.#fillFromMarkup = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// static get observedAttributes(){ // Only if you want actions on attr change
|
||||
@@ -97,13 +100,22 @@ class BZselect extends Buildoz {
|
||||
|
||||
toggle(){
|
||||
for(const opt of this.options){
|
||||
if(this.open) opt.classList.remove('open')
|
||||
else opt.classList.add('open')
|
||||
if(this.open) {
|
||||
opt.classList.remove('open')
|
||||
this.optionscontainer.classList.remove('open')
|
||||
} else {
|
||||
document.querySelectorAll('bz-select').forEach((sel) => {
|
||||
if((sel!==this) && sel.open) sel.toggle()
|
||||
})
|
||||
opt.classList.add('open')
|
||||
this.optionscontainer.classList.add('open')
|
||||
}
|
||||
}
|
||||
this.open = !this.open
|
||||
}
|
||||
|
||||
onClick(evt){
|
||||
evt.stopPropagation()
|
||||
const opt = evt.target.closest('option')
|
||||
if(opt && opt.value) this.onOption(opt.value)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user