nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bz-select closes his bros

Browse Source
This commit is contained in:
STEINNI
2025-10-21 10:09:09 +00:00
parent 3b3127b5f2
commit 1635823627
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
buildoz.css
View File

@@ -30,12 +30,17 @@ bz-select > button::after {
color: #444; color: #444;
} }
bz-select > div.options-container{ bz-select > div.options-container{
pointer-events: none;
position: absolute; position: absolute;
top: 100%; top: 2em;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 99; 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{ bz-select option{
background-color: #DDD; background-color: #DDD;
border: 1px solid black; border: 1px solid black;

16
buildoz.js
View File

@@ -47,6 +47,7 @@ class BZselect extends Buildoz {
this.value = null this.value = null
this.open = false this.open = false
this.value = null this.value = null
this.generalClickEvent = null
this.defaultAttrs = { this.defaultAttrs = {
label: 'Select...', label: 'Select...',
} }
@@ -64,11 +65,13 @@ class BZselect extends Buildoz {
this.options = this.querySelectorAll('option') this.options = this.querySelectorAll('option')
if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !! if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
for(const opt of this.options){ for(const opt of this.options){
this.optionscontainer.append(opt) // Will move is to the right parent
opt.addEventListener('click', this.onClick.bind(this)) opt.addEventListener('click', this.onClick.bind(this))
if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true) if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
} }
this.#fillFromMarkup = false this.#fillFromMarkup = false
} }
} }
// static get observedAttributes(){ // Only if you want actions on attr change // static get observedAttributes(){ // Only if you want actions on attr change
@@ -97,13 +100,22 @@ class BZselect extends Buildoz {
toggle(){ toggle(){
for(const opt of this.options){ for(const opt of this.options){
if(this.open) opt.classList.remove('open') if(this.open) {
else opt.classList.add('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 this.open = !this.open
} }
onClick(evt){ onClick(evt){
evt.stopPropagation()
const opt = evt.target.closest('option') const opt = evt.target.closest('option')
if(opt && opt.value) this.onOption(opt.value) if(opt && opt.value) this.onOption(opt.value)
} }