bz-toggler

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;
 }

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)
+
+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)