From ac859533616e050bba0504f9ee87ddef5e4d929f Mon Sep 17 00:00:00 2001 From: STEINNI Date: Mon, 20 Oct 2025 14:33:13 +0000 Subject: [PATCH] bz-toggler --- buildoz.css | 79 +++++++++++++++++++++++++++++++++++++++++++- buildoz.js | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 167 insertions(+), 6 deletions(-) diff --git a/buildoz.css b/buildoz.css index 161bf18..25585b8 100644 --- a/buildoz.css +++ b/buildoz.css @@ -1,6 +1,13 @@ bz-select { display: block; margin: .5rem 0 .5rem 0; + position:relative; +} +bz-select[disabled] > button{ + opacity: 0.6; + cursor: not-allowed; + pointer-events: none; + filter: grayscale(30%); } bz-select > button{ width:100%; @@ -16,7 +23,7 @@ bz-select > button::after { content: "\00BB"; transform: rotate(90deg) translateX(-0.4rem); position: absolute; - right: 1.5rem; + right: 0.5rem; pointer-events: none; font-size: 1.5rem; color: #444; @@ -45,4 +52,74 @@ bz-select option.open{ bz-select option:hover{ background-color: #44F; color: #FFF; +} + + + + +bz-toggler{ + outline: none; + min-height: 1.5rem; + padding: 0.75rem !important; + display: inline-table; + max-width: fit-content; + transition: all 0.5s; +} +bz-toggler div.toggle-label-left{ + padding-right: 0.3rem; + display: table-cell; + vertical-align: middle; + text-align: right; + font-size:.8rem; +} +bz-toggler div.toggle-label-right{ + padding-left: 0.3rem; + display: table-cell; + vertical-align: middle; + text-align: left; + font-size:.8rem; +} +bz-toggler div.toggle-switch{ + user-select: none; + height: inherit; + cursor: pointer; + display: table-cell; + vertical-align: middle; + text-align: center; +} +bz-toggler div.toggle-switch span.toggle-bar { + display: inline-block; + position: relative; + background-color: #CCC; +} + +bz-toggler div.toggle-switch span.toggle-thumb { + display: inline-block; + border-radius: 50%; + background-color: white; + position: absolute; + z-index: 1; +} + +bz-toggler div.toggle-switch span.toggle-thumb:not(.turned-on) { + left: 0; + transition: all 0.4s; +} +bz-toggler div.toggle-switch span.toggle-thumb.turned-on { + transition: all 0.4s; +} +bz-toggler div.toggle-switch span.toggle-bar { + width: 2rem; + height: 0.75rem; + border-radius: .75rem; +} + +bz-toggler div.toggle-switch span.toggle-thumb { + height: 1rem; + width: 1rem; + top: -0.1rem; +} + +bz-toggler div.toggle-switch span.toggle-thumb.turned-on { + left : 1rem; } \ No newline at end of file diff --git a/buildoz.js b/buildoz.js index 207ed71..70555aa 100644 --- a/buildoz.js +++ b/buildoz.js @@ -32,6 +32,10 @@ class Buildoz extends HTMLElement { attributeChangedCallback(name, oldValue, newValue) { this.attrs[name] = newValue } + + getBZAttribute(attrName){ // Little helper for defaults + return(this.getAttribute(attrName) || this.defaultAttrs[attrName] ) + } } class BZselect extends Buildoz { @@ -47,7 +51,7 @@ class BZselect extends Buildoz { connectedCallback() { super.connectedCallback() this.button = document.createElement('button') - this.button.textContent = this.getAttribute('label') || this.defaultAttrs.label + this.button.textContent = this.getBZAttribute('label') this.prepend(this.button) this.button.addEventListener('click', this.toggle.bind(this)) this.options = this.querySelectorAll('option') @@ -58,9 +62,9 @@ class BZselect extends Buildoz { } // static get observedAttributes(){ // Only if you want actions on attr change - // return([...super.observedAttributes, 'myattr']) + // return([...super.observedAttributes, 'disabled']) // } - // + // attributeChangedCallback(name, oldValue, newValue) { // super.attributeChangedCallback(name, oldValue, newValue) // } @@ -79,11 +83,12 @@ class BZselect extends Buildoz { } onOption(value, silent=false){ + if(this.getAttribute('disabled') !== null) return 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 + else this.button.textContent = this.getBZAttribute('label') this.dispatchEvent(new Event('change', { bubbles: true, composed: false, @@ -109,5 +114,84 @@ class BZselect extends Buildoz { for(const opt of opts) this.addOption(opt.value, opt.markup) } } +Buildoz.define('select', BZselect) -Buildoz.define('select', BZselect) \ No newline at end of file + +class BZtoggler extends Buildoz { + constructor(){ + super() + this.value = null + this.open = false + this.defaultAttrs = { + labelLeft:'', + labelRight:'', + trueValue: 'yes', + falseValue: 'no', + classOn:'', + classOff:'', + tabindex:0, + disabled:false + } + } + + connectedCallback(){ + super.connectedCallback() + + this.labelRight = document.createElement('div') + this.labelRight.classList.add('toggle-label-right') + this.labelRight.innerHTML = this.getBZAttribute('labelRight') + + this.labelLeft = document.createElement('div') + this.labelLeft.classList.add('toggle-label-left') + this.labelLeft.innerHTML = this.getBZAttribute('labelLeft') + + this.switch = document.createElement('div') + this.switch.classList.add('toggle-switch') + + this.toggleBar = document.createElement('span') + this.toggleBar.classList.add('toggle-bar') + + this.thumb = document.createElement('span') + this.thumb.classList.add('toggle-thumb') + this.toggleBar.append(this.thumb) + + this.switch.append(this.toggleBar) + + this.appendChild(this.labelLeft) + this.appendChild(this.switch) + this.appendChild(this.labelRight) + this.setAttribute('tabindex', this.getBZAttribute('tabindex')) + + this.switch.addEventListener('click', this.toggle.bind(this)) + + } + + turnOn() { + if(this.getBZAttribute('classOff')) this.switch.classList.remove(this.getBZAttribute('classOff')) + if(this.getBZAttribute('classOn')) this.switch.classList.add(this.getBZAttribute('classOn')) + this.thumb.classList.add('turned-on') + this.value = this.getBZAttribute('trueValue') + this.focus() + } + + turnOff() { + if(this.getBZAttribute('classOn')) this.switch.classList.remove(this.getBZAttribute('classOn')) + if(this.getBZAttribute('classOff'))this.switch.classList.add(this.getBZAttribute('classOff')) + this.thumb.classList.remove('turned-on') + this.value = this.getBZAttribute('falseValue') + this.focus() + } + + toggle(event) { + if(event) { event.preventDefault(); event.stopPropagation(); } + if(this.getBZAttribute('disabled')) return + if(this.value == this.getBZAttribute('trueValue')) this.turnOff() + else this.turnOn() + this.dispatchEvent(new Event('change', { + bubbles: true, + composed: false, + cancelable: false + })) + } +} +Buildoz.define('toggler', BZtoggler)