bz-toggler

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)