lc-switch/lc_switch.min.js

Superlight vanilla javascript plugin improving forms look and functionality

/**
 * LC Switch - superlight pure javascript plugin improving forms look and functionality
 * @version: 2.1.0
 * @author: Luca Montanari (LCweb)
 * @website: https://lcweb.it
 * Licensed under the MIT license
*/
!function(){"use strict";if(void 0!==Element.prototype.lc_switch)return!1;let t=!1;const e={on_txt:"ON",off_txt:"OFF",on_color:!1,compact_mode:!1};let n=!1;window.lc_switch=function(t,s){s="object"!=typeof s?e:Object.assign({},e,s),c(t).forEach(function(t){if("INPUT"!=t.tagName||"INPUT"==t.tagName&&"checkbox"!=t.getAttribute("type")&&"radio"!=t.getAttribute("type"))return;if(t.parentNode.classList.length&&t.parentNode.classList.contains("lcs_wrap"))return;const e=s.on_txt?'<div class="lcs_label lcs_label_on">'+s.on_txt+"</div>":"",n=s.off_txt?'<div class="lcs_label lcs_label_off">'+s.off_txt+"</div>":"";let c="lcs_"+t.getAttribute("type");c+=t.checked?" lcs_on":" lcs_off",t.disabled&&(c+=" lcs_disabled");const o=s.on_color&&t.checked?'style="background: '+s.on_color+';"':"",i=s.on_color?'data-on-color="'+s.on_color+'"':"",a=document.createElement("div");a.classList.add("lcs_wrap"),a.innerHTML='<div class="lcs_switch '+c+'" role="button" tabindex="0" '+i+" "+o+'><div class="lcs_cursor"></div>'+e+n+"</div>",s.compact_mode&&a.classList.add("lcs_compact"),t.parentNode.insertBefore(a,t),a.appendChild(t),a.querySelector(".lcs_switch").addEventListener("click",e=>{(e.target.classList.contains("lcs_switch")?e.target:l(e.target,".lcs_switch")).classList.contains("lcs_disabled")||lcs_toggle(t)}),a.querySelector(".lcs_switch").addEventListener("keydown",t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.target.click())}),t.addEventListener("change",e=>{lcs_update(t)}),null!==t.closest("label")&&t.closest("label").addEventListener("click",t=>{t.preventDefault()})}),(()=>{if(n)return!0;n=!0;const t='\n.lcs_wrap,\n.lcs_wrap * {\n    user-select: none;\n}\n.lcs_wrap {\n\tdisplay: inline-block;\t\n\tdirection: ltr;\n\theight: 28px;\n    width: 73px;\n    vertical-align: middle;\n}\n.lcs_wrap input {\n\tdisplay: none !important;\t\n}\n.lcs_switch {\n\tdisplay: inline-block;\t\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 30px;\n\tbackground: #ddd;\n\toverflow: hidden;\n\tcursor: pointer;\n\ttransition: all .2s ease-in-out; \n}\n.lcs_cursor {\n\tdisplay: inline-block;\n\tposition: absolute;\n\ttop: 50%;\t\n    margin-top: -11px;\n\twidth: 22px;\n\theight: 22px;\n\tborder-radius: 100%;\n\tbackground: #fff;\n\tbox-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .1);\n\tz-index: 10;\n\ttransition: all .2s linear; \n}\n.lcs_label {\n\tfont-family: "Trebuchet MS", Helvetica, sans-serif;\n    font-size: 12px;\n\tletter-spacing: 1px;\n\tline-height: 18px;\n\tcolor: #fff;\n\tfont-weight: bold;\n\tposition: absolute;\n\twidth: 33px;\n\ttop: 5px;\n\toverflow: hidden;\n\ttext-align: center;\n\topacity: 0;\n    text-shadow: 0 0 2px rgba(0,0,0, .1);\n\ttransition: all .2s ease-in-out .1s;   \n}\n.lcs_label.lcs_label_on {\n\tleft: -70px;\n\tz-index: 6;\t\n}\n.lcs_label.lcs_label_off {\n\tright: -70px;\n\tz-index: 5;\t\n}\n.lcs_switch.lcs_on {\n\tbackground: #75b936;\n}\n.lcs_switch.lcs_on .lcs_cursor {\n\tleft: 48px;\n}\n.lcs_switch.lcs_on .lcs_label_on {\n\tleft: 10px;\t\n\topacity: 1;\n}\n.lcs_switch.lcs_off {\n\tbackground: #b2b2b2;\n\tbox-shadow: 0px 0px 2px #a4a4a4 inset; \t\n}\n.lcs_switch.lcs_off .lcs_cursor {\n\tleft: 3px;\n}\n.lcs_switch.lcs_off .lcs_label_off {\n\tright: 10px;\n\topacity: 1;\t\n}\n.lcs_switch.lcs_disabled {\n\topacity: 0.65;\n\tcursor: default;\n}\n.lcs_compact {\n    height: 22px;\n    width: 47px;\n}\n.lcs_compact .lcs_label {\n    display: none;\n}\n.lcs_compact .lcs_cursor {\n\tmargin-top: -8px;\n\twidth: 16px;\n\theight: 16px;\n}\n.lcs_compact .lcs_switch.lcs_on .lcs_cursor {\n\tleft: 28px;\n}';if("adoptedStyleSheets"in document){const e=new CSSStyleSheet;e.replaceSync(t),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}else{const e=document.createElement("style");e.textContent=t,document.head.appendChild(e)}})()},window.lcs_destroy=function(t){c(t).forEach(function(t){s(t)&&t.parentNode.replaceWith(t)})},window.lcs_on=function(e){c(e).forEach(function(e){if(!s(e)||e.checked&&!t)return;"radio"==e.getAttribute("type")&&lcs_off(l(e,"form").querySelectorAll('input[name="'+e.getAttribute("name")+'"]'),!0),e.checked=!0;const n=e.previousElementSibling;if(n.classList.add("lcs_on"),n.classList.remove("lcs_off"),n.getAttribute("data-on-color")&&(n.style.background=n.getAttribute("data-on-color")),!t){const t=new Event("lcs-on",{bubbles:!0}),n=new Event("lcs-statuschange",{bubbles:!0});e.dispatchEvent(t),e.dispatchEvent(n)}})},window.lcs_off=function(e,n){c(e).forEach(function(e){if(!s(e)||!e.checked&&!t)return;if("radio"==e.getAttribute("type")&&!n&&!t)return;e.checked=!1;const c=e.previousElementSibling;if(c.classList.add("lcs_off"),c.classList.remove("lcs_on"),c.getAttribute("data-on-color")&&(c.style.background=null),!t){const t=new Event("lcs-off",{bubbles:!0}),n=new Event("lcs-statuschange",{bubbles:!0});e.dispatchEvent(t),e.dispatchEvent(n)}})},window.lcs_toggle=function(t){c(t).forEach(function(t){s(t)&&("radio"==t.getAttribute("type")&&t.checked||(t.checked?lcs_off(t):lcs_on(t)))})},window.lcs_disable=function(e){c(e).forEach(function(e){if(!s(e)||e.disabled&&!t)return;e.disabled=!0,e.previousElementSibling.classList.add("lcs_disabled");const n=new Event("lcs-disabled",{bubbles:!0}),c=new Event("lcs-statuschange",{bubbles:!0});e.dispatchEvent(n),e.dispatchEvent(c)})},window.lcs_enable=function(e){c(e).forEach(function(e){if(!s(e)||!e.disabled&&!t)return;e.disabled=!1,e.previousElementSibling.classList.remove("lcs_disabled");const n=new Event("lcs-enabled",{bubbles:!0}),c=new Event("lcs-statuschange",{bubbles:!0});e.dispatchEvent(n),e.dispatchEvent(c)})},window.lcs_update=function(e){c(e).forEach(function(e){s(e)&&(t=!0,e.checked?lcs_on(e):lcs_off(e),e.disabled?lcs_disable(e):lcs_enable(e),t=!1)})};const c=t=>{if("string"!=typeof t){if(t instanceof Element)return[t];{let e=[];for(const n of t)n instanceof Element&&e.push(n);return e}}return(t.match(/(#[0-9][^\s:,]*)/g)||[]).forEach(function(e){t=t.replace(e,'[id="'+e.replace("#","")+'"]')}),document.querySelectorAll(t)},s=t=>"INPUT"==t.tagName&&("INPUT"!=t.tagName||"checkbox"==t.getAttribute("type")||"radio"==t.getAttribute("type"))&&!(!t.parentNode.classList.length||t.parentNode.classList.length&&!t.parentNode.classList.contains("lcs_wrap")),l=(t,e)=>{let n=t;for(;null!=n.parentNode&&!n.matches(e);)n=n.parentNode;return n}}();