diff --git a/dist/radioBox.min.js b/dist/radioBox.min.js index dd14708..790e0cf 100644 --- a/dist/radioBox.min.js +++ b/dist/radioBox.min.js @@ -1 +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).RadioBox=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 s=n.sheet;for(let n in t)t.hasOwnProperty(n)&&e.compatInsertRule(s,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,s=null){s=e.isEmpty(s)?"":s;let r=i.replace(e.replaceRule.from,e.replaceRule.to+s);t.insertRule(r+"{"+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="radiobox-style",e.setReplaceRule(".radio-box",".radio-box-"),e.getTemplate=function(e){return`\n
\n \n
\n `},e.getChecked=function(){return this.ele.checked};let t=function(e){throw new Error(e)};class i{constructor(e,t={}){this.init(e,t,i.instance.length),i.instance.push(this),1===i.instance.length&&function(e,t=!1){!0===t?console.log("Data Type : "+typeof e,"\nValue : "+e):"boolean"!=typeof t?console.log(t):console.log(e)}("RadioBox is loaded, version:"+i.version)}get value(){let e=this.elements.find((e=>e.checked));return e?e.value:null}init(n,s,r){let o,l=e.getElem(n,"all");if(l.length<1&&t("Elements not found"),this.id=r,this.option=e.deepMerge({},i.defaultOption,s),this.elements=[],this.option?.styles&&Object.keys(this.option.styles).length>0){let t=e.deepMerge({},this.option.styles);e.injectStylesheet(t,this.id)}return this.onChange=(e,t)=>{this.option.onChange&&this.option.onChange(e,t)},l.forEach(((i,n)=>{if("radio"!==i.type&&t("Element must be radio"),i.hasAttribute("data-radiobox"))return;i.setAttribute("data-radiobox","true"),o||(o=i.name),i.name!==o&&t("All radioboxes must belong to the same group");let s=i.nextElementSibling,r=i?.title||i?.dataset?.radioTitle,a=this.option.bindLabel,c=!1;s&&"LABEL"===s.tagName&&(r=(()=>{if(!e.isEmpty(i.id)){if(s.htmlFor===i.id)return a=c=!0,!0;if(s.dataset?.radioFor===i.id)return!0}return!(!i.dataset?.radioId||s.dataset?.radioFor!==i.dataset?.radioId)||null})(),!0===r&&(r=s.textContent,s.parentNode.removeChild(s))),(this.option.checked&&i?.value===this.option.checked||n===this.option?.checked)&&(l.forEach((e=>e!==i&&(e.checked=!1,e.removeAttribute("checked")))),i.checked=!0,i.setAttribute("checked","checked"));let d=e.getTemplate(this.id),h=document.createElement("div");h.innerHTML=d.trim();let u=e.getElem("label",h),p=i.cloneNode(!0);!0===c&&(u.htmlFor=i.id),u.parentNode.insertBefore(p,u),i.parentNode.replaceChild(h.firstElementChild,i),null===r?u.parentNode.removeChild(u):(u.textContent=r,a&&(u.classList.add("radio-labeled"),u.addEventListener("click",(e=>{e.preventDefault(),p.click()})))),p.addEventListener("change",(e=>{const t=e.target.checked;this.elements.forEach((t=>{t!==e.target&&t.removeAttribute("checked")})),e.target.setAttribute("checked",t?"checked":""),this.onChange(e,p)})),this.elements.push(p)})),this}empty(){return this.elements.forEach((e=>{e.checked=!1,e.removeAttribute("checked")})),this}destroy(){return this.elements.forEach((e=>{e.removeEventListener("change",this.onChange),e.removeEventListener("change",this.option.onChange)})),e.removeStylesheet(this.id),i.instance.splice(this.id,1),this}}return i.version="1.5.7",i.instance=[],i.defaultOption={checked:null,onChange:null,bindLabel:!0,styles:{}},i.destroyAll=()=>{i.instance.forEach(((e,t)=>{e.destroy()})),i.instance=[]},i})); +!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).RadioBox=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 s=n.sheet;for(let n in t)t.hasOwnProperty(n)&&e.compatInsertRule(s,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,s=null){s=e.isEmpty(s)?"":s;let o=i.replace(e.replaceRule.from,e.replaceRule.to+s);t.insertRule(o+"{"+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="radiobox-style",e.setReplaceRule(".radio-box",".radio-box-"),e.getTemplate=function(e){return`\n
\n \n
\n `},e.getChecked=function(){return this.ele.checked};let t=function(e){throw new Error(e)};class i{constructor(e,t={}){this.init(e,t,i.instance.length),i.instance.push(this),1===i.instance.length&&function(e,t=!1){!0===t?console.log("Data Type : "+typeof e,"\nValue : "+e):"boolean"!=typeof t?console.log(t):console.log(e)}("RadioBox is loaded, version:"+i.version)}get value(){let e=this.elements.find((e=>e.checked));return e?e.value:null}init(n,s,o){let r,l=e.getElem(n,"all");if(l.length<1&&t("Elements not found"),this.id=o,this.option=e.deepMerge({},i.defaultOption,s),this.elements=[],this.option?.styles&&Object.keys(this.option.styles).length>0){let t=e.deepMerge({},this.option.styles);e.injectStylesheet(t,this.id)}return this.onChange=(e,t)=>{this.option.onChange&&this.option.onChange(e,t)},l.forEach(((i,n)=>{if("radio"!==i.type&&t("Element must be radio"),i.hasAttribute("data-radiobox"))return;i.setAttribute("data-radiobox","true"),r||(r=i.name),i.name!==r&&t("All radioboxes must belong to the same group");let s=i.nextElementSibling,o=i?.title||i?.dataset?.radioTitle,a=this.option.bindLabel,c=!1;s&&"LABEL"===s.tagName&&(o=(()=>{if(!e.isEmpty(i.id)){if(s.htmlFor===i.id)return a=c=!0,!0;if(s.dataset?.radioFor===i.id)return!0}return!(!i.dataset?.radioId||s.dataset?.radioFor!==i.dataset?.radioId)||null})(),!0===o&&(o=s.textContent,s.parentNode.removeChild(s))),(this.option.checked&&i?.value===this.option.checked||n===this.option?.checked)&&(l.forEach((e=>e!==i&&(e.checked=!1,e.removeAttribute("checked")))),i.checked=!0,i.setAttribute("checked","checked"));let d=e.getTemplate(this.id),h=document.createElement("div");h.innerHTML=d.trim();let u=e.getElem("label",h),p=i.cloneNode(!0);!0===c&&(u.htmlFor=i.id),u.parentNode.insertBefore(p,u),i.parentNode.replaceChild(h.firstElementChild,i),null===o?u.parentNode.removeChild(u):(u.textContent=o,a&&(u.classList.add("radio-labeled"),u.addEventListener("click",(e=>{e.preventDefault(),p.click()})))),p.addEventListener("change",(e=>{const t=e.target.checked;this.elements.forEach((t=>{t!==e.target&&t.removeAttribute("checked")})),e.target.setAttribute("checked",t?"checked":""),this.onChange(e,p)})),this.elements.push(p)})),this.option.loaded&&this.option.loaded(this),this}empty(){return this.elements.forEach((e=>{e.checked=!1,e.removeAttribute("checked")})),this}destroy(){return this.elements.forEach((e=>{e.removeEventListener("change",this.onChange),e.removeEventListener("change",this.option.onChange)})),e.removeStylesheet(this.id),i.instance.splice(this.id,1),this}}return i.version="1.5.8",i.instance=[],i.defaultOption={checked:null,loaded:null,onChange:null,bindLabel:!0,styles:{}},i.destroyAll=()=>{i.instance.forEach(((e,t)=>{e.destroy()})),i.instance=[]},i})); diff --git a/index.html b/index.html index 07582a5..3999577 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,9 @@

Other Radio Input

'.radio-box': { 'margin-bottom': '5px' } + }, + loaded: (radioBox) => { + console.log(radioBox.value); } }); radioBox2.onChange = (e) => { diff --git a/package.json b/package.json index 0d693c9..2f9cd1f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@carry0987/radio-box", - "version": "1.5.7", + "version": "1.5.8", "description": "A library for create radio type check box", "type": "module", "main": "dist/radioBox.min.js", diff --git a/src/radioBox.js b/src/radioBox.js index 41394d5..19c3370 100644 --- a/src/radioBox.js +++ b/src/radioBox.js @@ -118,6 +118,9 @@ class RadioBox { this.elements.push(cloneEle); // Store each radio input box }); + // Handle radio loaded + if (this.option.loaded) this.option.loaded(this); + return this; } @@ -150,6 +153,7 @@ RadioBox.version = '__version__'; RadioBox.instance = []; RadioBox.defaultOption = { checked: null, + loaded: null, onChange: null, bindLabel: true, styles: {}