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

bz-select improvements

Browse Source
This commit is contained in:
STEINNI
2025-10-21 08:37:47 +00:00
parent a5733361b9
commit 3b3127b5f2
2 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
buildoz.css
View File

@@ -29,9 +29,16 @@ bz-select > button::after {
font-size: 1.5em; font-size: 1.5em;
color: #444; color: #444;
} }
bz-select > div.options-container{
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 99;
}
bz-select option{ bz-select option{
background-color: #DDD; background-color: #DDD;
border: 1px solid black;
color: #000; color: #000;
padding: 0.2em .2em .3em .5em; padding: 0.2em .2em .3em .5em;
margin: -1em 0 0 0; margin: -1em 0 0 0;
@@ -46,7 +53,7 @@ bz-select option{
opacity 0.3s ease; opacity 0.3s ease;
} }
bz-select option.open{ bz-select option.open{
margin: 2px 0 0 0; margin: 0;
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }

12
buildoz.js
View File

@@ -55,9 +55,12 @@ class BZselect extends Buildoz {
connectedCallback() { connectedCallback() {
super.connectedCallback() super.connectedCallback()
this.button = document.createElement('button') this.button = document.createElement('button')
this.button.textContent = this.getBZAttribute('label') this.button.textContent = this.getBZAttribute('label')
this.prepend(this.button) this.prepend(this.button)
this.button.addEventListener('click', this.toggle.bind(this)) this.button.addEventListener('click', this.toggle.bind(this))
if(!this.optionscontainer) this.optionscontainer = document.createElement('div')
this.optionscontainer.classList.add('options-container')
this.append(this.optionscontainer)
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){
@@ -112,18 +115,19 @@ class BZselect extends Buildoz {
} }
addOption(value, markup){ addOption(value, markup){
// Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM
const opt = document.createElement('option') const opt = document.createElement('option')
opt.setAttribute('value', value) opt.setAttribute('value', value)
opt.innerHTML = markup opt.innerHTML = markup
opt.addEventListener('click',this.onClick.bind(this)) opt.addEventListener('click',this.onClick.bind(this))
this.append(opt) if(!this.optionscontainer) this.optionscontainer = document.createElement('div')
this.optionscontainer.append(opt)
this.options = this.querySelectorAll('option') this.options = this.querySelectorAll('option')
this.#fillFromMarkup = false this.#fillFromMarkup = false
} }
fillOptions(opts, erase = true){ fillOptions(opts, erase = true){
// Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM
if(erase){ if(erase){
this.options = this.querySelectorAll('option') this.options = this.querySelectorAll('option')
this.options.forEach(node => { node.remove() }) this.options.forEach(node => { node.remove() })