@carry0987/check-box
Advanced tools
Comparing version 1.2.1 to 1.2.2
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).CheckBox=t()}(this,(function(){"use strict";class e{constructor(e){Object.assign(this,e)}static version="2.0.2";static stylesheetId="utils-style";static replaceRule={from:".utils",to:".utils-"};static setStylesheetId(t){e.stylesheetId=t}static setReplaceRule(t,n){e.replaceRule.from=t,e.replaceRule.to=n}static getElem(e,t,n){return"object"==typeof e?e:void 0===t&&void 0===n?isNaN(Number(e))?document.querySelector(e):document.getElementById(e):"all"===t||null===t?void 0===n?document.querySelectorAll(e):n.querySelectorAll(e):"object"==typeof t&&void 0===n?t.querySelector(e):null}static createElem(e,t={},n=""){let i=document.createElement(e);for(let e in t)t.hasOwnProperty(e)&&("innerText"===e?i.textContent=t[e]:i.setAttribute(e,t[e]));return n&&i.append(document.createTextNode(n)),i}static insertAfter(t,n){if("string"==typeof n){let t=e.createElem("div");t.innerHTML=n,n=t.firstChild}t.nextSibling?t.parentNode.insertBefore(n,t.nextSibling):t.parentNode.appendChild(n)}static insertBefore(t,n){if("string"==typeof n){let t=e.createElem("div");t.innerHTML=n,n=t.firstChild}t.parentNode.insertBefore(n,t)}static addClass(e,t){return e.classList.add(t),e}static removeClass(e,t){return e.classList.remove(t),e}static toggleClass(e,t){return e.classList.toggle(t),e}static hasClass(e,t){return e.classList.contains(t)}static isObject(e){return e&&"object"==typeof e&&!Array.isArray(e)}static deepMerge(t,...n){const i=n.shift();if(!i)return t;if(e.isObject(t)&&e.isObject(i))for(const n in i)e.isObject(i[n])?(t[n]||Object.assign(t,{[n]:{}}),e.deepMerge(t[n],i[n])):Object.assign(t,{[n]:i[n]});return e.deepMerge(t,...n)}static injectStylesheet(t,n=null){n=e.isEmpty(n)?"":n;let i=e.createElem("style");i.id=e.stylesheetId+n,i.textContent="",document.head.append(i);let l=i.sheet;for(let i in t)t.hasOwnProperty(i)&&e.compatInsertRule(l,i,e.buildRules(t[i]),n)}static buildRules(e){let t="";for(let[n,i]of Object.entries(e))n=n.replace(/([A-Z])/g,(e=>`-${e[0].toLowerCase()}`)),t+=`${n}:${i};`;return t}static compatInsertRule(t,n,i,l=null){l=e.isEmpty(l)?"":l;let c=n.replace(e.replaceRule.from,e.replaceRule.to+l);t.insertRule(c+"{"+i+"}",0)}static removeStylesheet(t=null){t=e.isEmpty(t)?"":t;let n=e.getElem("#"+e.stylesheetId+t);n&&n.parentNode.removeChild(n)}static isEmpty(e){return"number"!=typeof e&&!e?.length}static createEvent(e,t=null){return new CustomEvent(e,{detail:t})}static dispatchEvent(t,n=null){document.dispatchEvent(e.createEvent(t,n))}static generateRandom(e=8){return Math.random().toString(36).substring(2,2+e)}}Object.defineProperty(e,"version",{writable:!1,configurable:!0});e.setStylesheetId="checkbox-style",e.setReplaceRule(".check-box",".check-box-"),e.getTemplate=function(e){return`\n <div class="checkbox check-box-${e}">\n <span class="checkmark"></span>\n <label class="checkbox-label"></label>\n </div>\n `},e.handleCheckboxTitle=function(t,n){let i=!1,l=null,c=!1,o=t?.title||t?.dataset?.checkboxTitle;return n&&"LABEL"===n.tagName&&(c=n.cloneNode(!0),o=(()=>{if(!e.isEmpty(t.id)){if(n?.htmlFor===t.id)return i=!0,!0;if(n?.dataset?.checkboxFor===t.id)return!0}return t?.dataset?.checkboxId&&n?.dataset?.checkboxFor===t?.dataset?.checkboxId?(l=e.isEmpty(t.id)&&e.isEmpty(n.htmlFor)?"check-"+e.generateRandom(6):null,!0):null})()),[o,i,l,c]},e.insertCheckbox=function(t,n,i,l){let c=e.getTemplate(t),o=document.createElement("div");o.innerHTML=c.trim();let s=e.getElem(".checkmark",o),h=e.getElem("label",o),r=n.cloneNode(!0);return i&&(r.id=i),!0===l&&(h.htmlFor=r.id),s.addEventListener("click",(e=>{e.preventDefault(),r.click()})),s.parentNode.insertBefore(r,s),[r,o,h]},e.insertCheckboxTitle=function(e,t,n,i){e?(n.textContent=e,!0===t&&(n.classList.add("checkbox-labeled"),n.addEventListener("click",(e=>{e.preventDefault(),i.click()})))):n.parentNode.removeChild(n)},e.toggleCheckStatus=function(e,t){t?(e.checked=!0,e.setAttribute("checked","checked")):(e.checked=!1,e.removeAttribute("checked"))},e.toggleCheckAll=function(t,n){let i=e.getElem(t);i&&(n&&n.checked&&n.input?e.toggleCheckStatus(i,!1==(n.checked.length!==n.input.length||0===n.checked.length)):e.toggleCheckStatus(i,!1))},e.restoreElement=function(e){e.removeEventListener("change",e.checkBoxChange),e.checkBoxChange=null,e.removeAttribute("data-checkbox"),e.parentNode.replaceWith(e);let t=e.isValidLabel;t&&t.nodeType===Node.ELEMENT_NODE&&e.parentNode.insertBefore(t,e.nextSibling)};class t{constructor(e,n={}){void 0===t.firstLoad&&(t.firstLoad=!0),this.init(e,n,t.instance.length),t.instance.push(this),1===t.instance.length&&!0===t.firstLoad&&function(e,t=!1){!0===t?console.log("Data Type : "+typeof e,"\nValue : "+e):"boolean"!=typeof t?console.log(t):console.log(e)}("CheckBox is loaded, version:"+t.version)}static destroyAll(){t.instance.forEach((e=>{e.destroy()})),t.instance=[]}init(n,i,l){let c=e.getElem(n,"all");(!c||c.length<1)&&function(e){throw new Error(e)}("Cannot find elements : "+n),this.id=l,this.element=n,this.allElement=[],this.option=e.deepMerge({},t.defaultOption,i),this.total={checked:[],list:[],input:[]};let o={};if(this.option?.checkMark&&(o={".check-box input[type=checkbox] + .checkmark:after":{"background-image":"url("+this.option.checkMark+")"}}),this.option?.styles&&Object.keys(this.option.styles).length>0&&(o=e.deepMerge({},this.option.styles,o)),o&&e.injectStylesheet(o,this.id),this.onChange=(e,t)=>{this.option?.onChange&&this.option.onChange(e,t)},this.onCheckAll=e=>{this.option?.onCheckAll&&this.option.onCheckAll(e)},c.forEach(((t,n)=>{if("checkbox"!==t.type)return;if(t.hasAttribute("data-checkbox"))return;t.setAttribute("data-checkbox","true");let i=t.nextElementSibling,l=this.option.bindLabel,[o,s,h,r]=e.handleCheckboxTitle(t,i);l=!0===s||l,!0===o&&(o=i.textContent,i.parentNode.removeChild(i)),t.checked?e.toggleCheckStatus(t,!0):this.option?.checked&&("boolean"==typeof this.option.checked&&1===c.length&&e.toggleCheckStatus(t,!0),t?.value!==this.option.checked&&n!==this.option.checked||e.toggleCheckStatus(t,!0),"string"==typeof this.option.checked&&(this.option.checked=[this.option.checked]),Array.isArray(this.option.checked)&&(this.option.checked.includes(t.name)||this.option.checked.includes(t.id))&&e.toggleCheckStatus(t,!0));let[a,d,u]=e.insertCheckbox(this.id,t,h,s);t.parentNode.replaceChild(d.firstElementChild,t),e.insertCheckboxTitle(o,l,u,a);let p=this.checkBoxChange.bind(this,!0,a);a.addEventListener("change",p),a.checkBoxChange=p,a.isValidLabel=r,this.allElement.push(a)})),this.option?.checkAll){const t=e.getElem(this.option.checkAll);if(t&&"checkbox"===t?.type){if(t.hasAttribute("data-checkbox"))return;t.setAttribute("data-checkbox","true");let n=t.nextElementSibling,i=this.option?.bindLabel,[l,c,o,s]=e.handleCheckboxTitle(t,n);i=!0===c||i,!0===l&&(l=n.textContent,n.parentNode.removeChild(n));let[h,r,a]=e.insertCheckbox(this.id,t,o,c);t.parentNode.replaceChild(r.firstElementChild,t),e.insertCheckboxTitle(l,i,a,h);let d=(t=>{const n=t.target.checked;this.allElement.forEach((t=>{e.toggleCheckStatus(t,n)})),this.checkBoxChange(!1),this.onCheckAll(n)}).bind(this);h.addEventListener("change",d),h.checkAllChange=d,h.isValidLabel=s,this.checkAll=h}}return this}checkBoxChange(t,n=null){const i=this.total;i.list=[],i.input=[],i.checked=[],this.allElement.forEach((e=>{i.input.push(e),e.checked&&(i.list.push(e.value),i.checked.push(e))})),t&&e.toggleCheckAll(this.option.checkAll,i),this.onChange(i,n),n&&e.toggleCheckStatus(n,n.checked);const l=e.createEvent("checkbox-change");l.total=i,document.dispatchEvent(l)}getCheckBox(){return this.total}refresh(){this.init(this.element,this.option)}destroy(){return t.firstLoad=!1,this.allElement.forEach((t=>{e.restoreElement(t)})),this.checkAll&&(e.toggleCheckAll(this.checkAll,!1),e.restoreElement(this.checkAll)),this.allElement=[],this.total={},e.removeStylesheet(this.id),t.instance.splice(this.id,1),this}}return t.version="1.2.1",t.instance=[],t.defaultOption={checked:null,checkMark:null,checkAll:null,onChange:null,onCheckAll:null,bindLabel:!0,styles:{}},t})); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).CheckBox=t()}(this,(function(){"use strict";class e{constructor(e){Object.assign(this,e)}static version="2.0.2";static stylesheetId="utils-style";static replaceRule={from:".utils",to:".utils-"};static setStylesheetId(t){e.stylesheetId=t}static setReplaceRule(t,i){e.replaceRule.from=t,e.replaceRule.to=i}static getElem(e,t,i){return"object"==typeof e?e:void 0===t&&void 0===i?isNaN(Number(e))?document.querySelector(e):document.getElementById(e):"all"===t||null===t?void 0===i?document.querySelectorAll(e):i.querySelectorAll(e):"object"==typeof t&&void 0===i?t.querySelector(e):null}static createElem(e,t={},i=""){let n=document.createElement(e);for(let e in t)t.hasOwnProperty(e)&&("innerText"===e?n.textContent=t[e]:n.setAttribute(e,t[e]));return i&&n.append(document.createTextNode(i)),n}static insertAfter(t,i){if("string"==typeof i){let t=e.createElem("div");t.innerHTML=i,i=t.firstChild}t.nextSibling?t.parentNode.insertBefore(i,t.nextSibling):t.parentNode.appendChild(i)}static insertBefore(t,i){if("string"==typeof i){let t=e.createElem("div");t.innerHTML=i,i=t.firstChild}t.parentNode.insertBefore(i,t)}static addClass(e,t){return e.classList.add(t),e}static removeClass(e,t){return e.classList.remove(t),e}static toggleClass(e,t){return e.classList.toggle(t),e}static hasClass(e,t){return e.classList.contains(t)}static isObject(e){return e&&"object"==typeof e&&!Array.isArray(e)}static deepMerge(t,...i){const n=i.shift();if(!n)return t;if(e.isObject(t)&&e.isObject(n))for(const i in n)e.isObject(n[i])?(t[i]||Object.assign(t,{[i]:{}}),e.deepMerge(t[i],n[i])):Object.assign(t,{[i]:n[i]});return e.deepMerge(t,...i)}static injectStylesheet(t,i=null){i=e.isEmpty(i)?"":i;let n=e.createElem("style");n.id=e.stylesheetId+i,n.textContent="",document.head.append(n);let l=n.sheet;for(let n in t)t.hasOwnProperty(n)&&e.compatInsertRule(l,n,e.buildRules(t[n]),i)}static buildRules(e){let t="";for(let[i,n]of Object.entries(e))i=i.replace(/([A-Z])/g,(e=>`-${e[0].toLowerCase()}`)),t+=`${i}:${n};`;return t}static compatInsertRule(t,i,n,l=null){l=e.isEmpty(l)?"":l;let c=i.replace(e.replaceRule.from,e.replaceRule.to+l);t.insertRule(c+"{"+n+"}",0)}static removeStylesheet(t=null){t=e.isEmpty(t)?"":t;let i=e.getElem("#"+e.stylesheetId+t);i&&i.parentNode.removeChild(i)}static isEmpty(e){return"number"!=typeof e&&!e?.length}static createEvent(e,t=null){return new CustomEvent(e,{detail:t})}static dispatchEvent(t,i=null){document.dispatchEvent(e.createEvent(t,i))}static generateRandom(e=8){return Math.random().toString(36).substring(2,2+e)}}Object.defineProperty(e,"version",{writable:!1,configurable:!0});e.setStylesheetId="checkbox-style",e.setReplaceRule(".check-box",".check-box-"),e.getTemplate=function(e){return`\n <div class="checkbox check-box-${e}">\n <span class="checkmark"></span>\n <label class="checkbox-label"></label>\n </div>\n `},e.handleCheckboxTitle=function(t,i){let n=!1,l=null,c=!1,s=t?.title||t?.dataset?.checkboxTitle;return i&&"LABEL"===i.tagName&&(c=i.cloneNode(!0),s=(()=>{if(!e.isEmpty(t.id)){if(i?.htmlFor===t.id)return n=!0,!0;if(i?.dataset?.checkboxFor===t.id)return!0}return t?.dataset?.checkboxId&&i?.dataset?.checkboxFor===t?.dataset?.checkboxId?(l=e.isEmpty(t.id)&&e.isEmpty(i.htmlFor)?"check-"+e.generateRandom(6):null,!0):null})()),[s,n,l,c]},e.insertCheckbox=function(t,i,n,l){let c=e.getTemplate(t),s=document.createElement("div");s.innerHTML=c.trim();let o=e.getElem(".checkmark",s),a=e.getElem("label",s),h=i.cloneNode(!0);return n&&(h.id=n),!0===l&&(a.htmlFor=h.id),o.addEventListener("click",(e=>{e.preventDefault(),h.click()})),o.parentNode.insertBefore(h,o),[h,s,a]},e.insertCheckboxTitle=function(e,t,i,n){e?(i.textContent=e,!0===t&&(i.classList.add("checkbox-labeled"),i.addEventListener("click",(e=>{e.preventDefault(),n.click()})))):i.parentNode.removeChild(i)},e.toggleCheckStatus=function(e,t){t?(e.checked=!0,e.setAttribute("checked","checked")):(e.checked=!1,e.removeAttribute("checked"))},e.toggleCheckAll=function(t,i){let n=e.getElem(t);n&&(i&&i.checked&&i.input?e.toggleCheckStatus(n,!1==(i.checked.length!==i.input.length||0===i.checked.length)):e.toggleCheckStatus(n,!1))},e.restoreElement=function(e){e.removeEventListener("change",e.checkBoxChange),e.checkBoxChange=null,e.removeAttribute("data-checkbox"),e.parentNode.replaceWith(e);let t=e.isValidLabel;t&&t.nodeType===Node.ELEMENT_NODE&&e.parentNode.insertBefore(t,e.nextSibling)};class t{constructor(e,i={}){void 0===t.firstLoad&&(t.firstLoad=!0),this.init(e,i,t.instance.length),t.instance.push(this),1===t.instance.length&&!0===t.firstLoad&&function(e,t=!1){!0===t?console.log("Data Type : "+typeof e,"\nValue : "+e):"boolean"!=typeof t?console.log(t):console.log(e)}("CheckBox is loaded, version:"+t.version)}static destroyAll(){t.instance.forEach((e=>{e.destroy()})),t.instance=[]}init(i,n,l){let c=e.getElem(i,"all");(!c||c.length<1)&&function(e){throw new Error(e)}("Cannot find elements : "+i),this.id=l,this.element=i,this.allElement=[],this.option=e.deepMerge({},t.defaultOption,n),this.total={checked:[],list:[],input:[]};let s={};if(this.option?.checkMark&&(s={".check-box input[type=checkbox] + .checkmark:after":{"background-image":"url("+this.option.checkMark+")"}}),this.option?.styles&&Object.keys(this.option.styles).length>0&&(s=e.deepMerge({},this.option.styles,s)),s&&e.injectStylesheet(s,this.id),this.onChange=(e,t)=>{this.option?.onChange&&this.option.onChange(e,t)},this.onCheckAll=e=>{this.option?.onCheckAll&&this.option.onCheckAll(e)},c.forEach(((t,i)=>{if("checkbox"!==t.type)return;if(t.hasAttribute("data-checkbox"))return;t.setAttribute("data-checkbox","true");let n=t.nextElementSibling,l=this.option.bindLabel,[s,o,a,h]=e.handleCheckboxTitle(t,n);l=!0===o||l,!0===s&&(s=n.textContent,n.parentNode.removeChild(n)),t.checked?e.toggleCheckStatus(t,!0):this.option?.checked&&("boolean"==typeof this.option.checked&&1===c.length&&e.toggleCheckStatus(t,!0),t?.value!==this.option.checked&&i!==this.option.checked||e.toggleCheckStatus(t,!0),"string"==typeof this.option.checked&&(this.option.checked=[this.option.checked]),Array.isArray(this.option.checked)&&(this.option.checked.includes(t.name)||this.option.checked.includes(t.id))&&e.toggleCheckStatus(t,!0));let[r,d,u]=e.insertCheckbox(this.id,t,a,o);t.parentNode.replaceChild(d.firstElementChild,t),e.insertCheckboxTitle(s,l,u,r);let p=this.checkBoxChange.bind(this,!0,r);r.addEventListener("change",p),r.checkBoxChange=p,r.isValidLabel=h,this.allElement.push(r)})),this.option?.checkAll){const t=e.getElem(this.option.checkAll);if(t&&"checkbox"===t?.type){if(t.hasAttribute("data-checkbox"))return;t.setAttribute("data-checkbox","true");let i=t.nextElementSibling,n=this.option?.bindLabel,[l,c,s,o]=e.handleCheckboxTitle(t,i);n=!0===c||n,!0===l&&(l=i.textContent,i.parentNode.removeChild(i));let[a,h,r]=e.insertCheckbox(this.id,t,s,c);t.parentNode.replaceChild(h.firstElementChild,t),e.insertCheckboxTitle(l,n,r,a);let d=(t=>{const i=t.target.checked;this.allElement.forEach((t=>{e.toggleCheckStatus(t,i)})),this.checkBoxChange(!1),this.onCheckAll(i)}).bind(this);a.addEventListener("change",d),a.checkAllChange=d,a.isValidLabel=o,this.checkAll=a}}return this}checkBoxChange(t,i=null){const n=this.total;n.list=[],n.input=[],n.checked=[],this.allElement.forEach((e=>{n.input.push(e),e.checked&&(n.list.push(e.value),n.checked.push(e))})),t&&e.toggleCheckAll(this.option.checkAll,n),this.onChange(n,i),i&&e.toggleCheckStatus(i,i.checked);const l=e.createEvent("checkbox-change");l.total=n,document.dispatchEvent(l)}getCheckBox(){return this.total}refresh(){this.init(this.element,this.option)}destroy(){return t.firstLoad=!1,this.allElement.forEach((t=>{e.restoreElement(t)})),this.checkAll&&(e.toggleCheckAll(this.checkAll,!1),e.restoreElement(this.checkAll)),this.allElement=[],this.total={},e.removeStylesheet(this.id),t.instance.splice(this.id,1),this}}return t.version="1.2.2",t.instance=[],t.defaultOption={checked:null,checkMark:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT48L3N2Zz4=",checkAll:null,onChange:null,onCheckAll:null,bindLabel:!0,styles:{}},t})); |
{ | ||
"name": "@carry0987/check-box", | ||
"version": "1.2.1", | ||
"version": "1.2.2", | ||
"description": "A library for create and manage checkbox elements", | ||
@@ -5,0 +5,0 @@ "type": "module", |
Sorry, the diff of this file is not supported yet
12016
33