diff --git a/dist/bulmaselect.min.js b/dist/bulmaselect.min.js index 0902094..fe2dbba 100644 --- a/dist/bulmaselect.min.js +++ b/dist/bulmaselect.min.js @@ -1 +1 @@ -"use strict";const englishLocale={btnNoSelection:"Nothing selected",searchPlaceholder:"Filter"},defaultStyle=".ms-ul{padding:0;margin:0;list-style-type:none}.ms-li{padding:none}#ms > div > ul > label{width:100%;display:block;cursor:pointer}.ms-button{background-color:#363636;color:#fff;border-color:transparent;cursor:pointer;border-width:1px;border-radius:4px;border-radius:4px;border-style:solid;height:2.5em;line-height:1.5;width:185px}.ms-drop{background-color:#363636;position:absolute;margin-top:-1px;border:1px solid #aaa;width:183px;max-height:249px;font-weight:400;border-style:solid;border-color:transparent;border-top-color:#000;border-radius:4px;color:#fff;max-height:250px;overflow:auto}.ms-group{font-weight:700}",defaultConfig={isOpen:!1,keepOpen:!1,injectStyle:!0,btnMaxLabels:3,btnDelimiter:",",searchEnable:!1,locale:englishLocale,options:["a","b","c"]};class Bulmaselect{constructor(e,t=defaultConfig){if("string"==typeof e&&(e=document.getElementById(e)),!e)throw new Error("No parent element");if("SELECT"===e.nodeName){t.options=[],Array.from(e.children).forEach((e=>{e.innerText&&t.options.push(e.innerText)}));const o=document.createElement("div");e.parentNode.replaceChild(o,e),e=o}if((t={...defaultConfig,...t}).options=t.options.map((e=>"string"==typeof e?{label:e}:"group"===e.type?(e.children=e.children.map((e=>"string"==typeof e?{label:e}:e)),e):e)),t.injectStyle){const e=document.createElement("style");e.textContent=defaultStyle,document.head.append(e)}const o=document.createElement("button");o.classList="ms-button",o.innerText=t.label,e.appendChild(o);const n=document.createElement("div");n.classList="ms-drop",n.hidden=!t.isOpen&&!t.keepOpen;const s=document.createElement("ul");if(s.classList="ms-ul",e.appendChild(n),t.searchEnable){const e=document.createElement("input");e.classList="ms-textbox",e.placeholder=t.locale.searchPlaceholder,n.appendChild(e),e.addEventListener("input",(()=>this.updateFilter())),this.search=e}n.appendChild(s),s.addEventListener("click",(e=>this.updateButton())),o.addEventListener("click",(()=>t.keepOpen?null:n.hidden=!n.hidden)),t.options.forEach(((e,o)=>{const n=document.createElement("label");n.classList="ms-label";const i=document.createElement("span");i.classList="ms-span",i.innerText=e.label,s.appendChild(n);const r=document.createElement("input");r.type="checkbox",r.classList="ms-checkbox",n.appendChild(r),"group"===e.type?(e.children.forEach(((e,n)=>{const i=document.createElement("label");i.classList="ms-label";const r=document.createElement("span");r.classList="ms-span",r.innerText=e.label,s.appendChild(i);const a=document.createElement("input");a.type="checkbox",a.classList="ms-checkbox",Object.defineProperty(t.options[o].children[n],"state",{get:()=>a.checked,set:e=>{if("boolean"!=typeof e)throw new Error("You can't set this property to a non-boolean");a.checked=e,this.updateButton()}}),t.options[o].children[n].el=i,t.options[o].children[n].checkbox=a,i.appendChild(a),i.appendChild(r)})),Object.defineProperty(t.options[o],"state",{get:()=>!t.options[o].children.map((e=>e.state)).includes(!1),set:e=>{if("boolean"!=typeof e)throw new Error("You can't set this property to a non-boolean");t.options[o].children.forEach((t=>t.state=e)),r.checked=e,this.updateButton()}}),i.classList="ms-span ms-group",n.classList=r.classList+" ms-group-label",r.addEventListener("click",(e=>{t.options[o].state=!t.options[o].state}))):Object.defineProperty(t.options[o],"state",{get:()=>r.checked,set:e=>{if("boolean"!=typeof e)throw new Error("You can't set this property to a non-boolean");r.checked=e,this.updateButton()}}),n.appendChild(i),t.options[o].checkbox=r,t.options[o].el=n})),this.parent=e,this.config=t,this.options=t.options,this.button=o,this.dropdown=n,this.ul=s,this.updateButton()}getSelected(){this.updateSelections();const e=[];return this.options.map((e=>Object.create(Object.getPrototypeOf(e),Object.getOwnPropertyDescriptors(e)))).forEach((t=>{if("group"===t.type){const o=[];t.children.forEach((e=>e.state&&o.push(e))),o.length&&(t.children=o,e.push(t))}else t.state&&e.push(t)})),e}updateButton(){let e=this.getSelected();e.forEach(((t,o)=>{if("group"===t.type){if(e.splice(o,1),t.state)return e.push(t);e=e.concat(t.children)}})),e.length?this.button.innerText=`${e.slice(0,this.config.btnMaxLabels).map((e=>e.label)).join(this.config.btnDelimiter)}${e.length>this.config.btnMaxLabels?"...":""}`:this.button.innerText=this.config.locale.btnNoSelection}updateSelections(){this.options.forEach((e=>{"group"===e.type&&(e.checkbox.checked=e.state)}))}updateFilter(){if(!this.search&&!this.search.value.length)return;const e=this.search.value.toLowerCase();this.options.forEach((t=>{if("group"===t.type){t.children.forEach((t=>{const o=!t.label.toLowerCase().startsWith(e);Array.from(t.el.children).forEach((e=>e.hidden=o)),t.hidden=o}));const o=t.children.map((e=>e.hidden)).includes(!1);Array.from(t.el.children).forEach((e=>e.hidden=!o))}else{const o=!t.label.toLowerCase().startsWith(e);Array.from(t.el.children).forEach((e=>e.hidden=o))}}))}update(){this.updateSelections(),this.updateButton(),this.updateFilter()}} \ No newline at end of file +"use strict";const englishLocale={btnNoSelection:"Nothing selected",searchPlaceholder:"Search"},defaultStyle=".ms-textbox{width:270px;align-items:middle;justify-content:center;justify-self:center;text-align:center;display:block;margin-top:5px;margin-left:5px;margin-right:5px}.ms-ul{list-style-type:none;margin-left:5px!important;margin-top:3px!important;margin-bottom:3px}.ms-button{color:#fff;height:2.5em;line-height:1.5;width:300px;height:40px;text-align:left;font-size:1em;background-color:#fff;border-color:#dbdbdb;border-radius:4px;color:#363636;z-index:55}.ms-drop{background-color:#fff;position:absolute;color:#363636;width:300px;height:300px;max-width:300px;max-height:300px;overflow:auto!important;z-index:55}.select:after{z-index:0!important}.ms-group{font-weight:700}.ms-span{margin-left:5px}.ms-label{text-overflow:ellipsis!important;display:block}",defaultConfig={isOpen:!1,keepOpen:!1,injectStyle:!0,btnMaxLabels:3,btnDelimiter:",",searchEnable:!1,locale:englishLocale,options:["a","b","c"]};class Bulmaselect{constructor(e,t=defaultConfig){if("string"==typeof e&&(e=document.getElementById(e)),!e)throw new Error("No parent element");if("SELECT"===e.nodeName){t.options=[],Array.from(e.children).forEach((e=>{e.innerText&&t.options.push(e.innerText)}));const n=document.createElement("div");e.parentNode.replaceChild(n,e),e=n}if((t={...defaultConfig,...t}).options=t.options.map((e=>"string"==typeof e?{label:e}:"group"===e.type?(e.children=e.children.map((e=>"string"==typeof e?{label:e}:e)),e):e)),t.injectStyle){const e=document.createElement("style");e.textContent=defaultStyle,document.head.append(e)}const n=document.createElement("button");n.classList="ms-button",n.innerText=t.label,e.appendChild(n);const o=document.createElement("div");o.classList="ms-drop",o.hidden=!t.isOpen&&!t.keepOpen;const s=document.createElement("ul");if(s.classList="ms-ul",e.appendChild(o),t.searchEnable){const e=document.createElement("input");e.classList="ms-textbox",e.placeholder=t.locale.searchPlaceholder,o.appendChild(e),e.addEventListener("input",(()=>this.updateFilter())),this.search=e}o.appendChild(s),s.addEventListener("click",(e=>this.updateButton())),n.addEventListener("click",(()=>t.keepOpen?null:o.hidden=!o.hidden)),t.options.forEach(((e,n)=>{const o=document.createElement("label");o.classList="ms-label";const i=document.createElement("span");i.classList="ms-span",i.innerText=e.label,s.appendChild(o);const a=document.createElement("input");a.type="checkbox",a.classList="ms-checkbox",o.appendChild(a),"group"===e.type?(e.children.forEach(((e,o)=>{const i=document.createElement("label");i.classList="ms-label";const a=document.createElement("span");a.classList="ms-span",a.innerText=e.label,s.appendChild(i);const l=document.createElement("input");l.type="checkbox",l.classList="ms-checkbox",Object.defineProperty(t.options[n].children[o],"state",{get:()=>l.checked,set:e=>{if("boolean"!=typeof e)throw new Error("You can't set this property to a non-boolean");l.checked=e,this.updateButton()}}),t.options[n].children[o].el=i,t.options[n].children[o].checkbox=l,i.appendChild(l),i.appendChild(a)})),Object.defineProperty(t.options[n],"state",{get:()=>!t.options[n].children.map((e=>e.state)).includes(!1),set:e=>{if("boolean"!=typeof e)throw new Error("You can't set this property to a non-boolean");t.options[n].children.forEach((t=>t.state=e)),a.checked=e,this.updateButton()}}),i.classList="ms-span ms-group",o.classList=a.classList+" ms-group-label",a.addEventListener("click",(e=>{t.options[n].state=!t.options[n].state}))):Object.defineProperty(t.options[n],"state",{get:()=>a.checked,set:e=>{if("boolean"!=typeof e)throw new Error("You can't set this property to a non-boolean");a.checked=e,this.updateButton()}}),o.appendChild(i),t.options[n].checkbox=a,t.options[n].el=o})),this.parent=e,this.config=t,this.options=t.options,this.button=n,this.dropdown=o,this.ul=s,this.updateButton()}getSelected(){this.updateSelections();const e=[];return this.options.map((e=>Object.create(Object.getPrototypeOf(e),Object.getOwnPropertyDescriptors(e)))).forEach((t=>{if("group"===t.type){const n=[];t.children.forEach((e=>e.state&&n.push(e))),n.length&&(t.children=n,e.push(t))}else t.state&&e.push(t)})),e}updateButton(){let e=this.getSelected();e.forEach(((t,n)=>{if("group"===t.type){if(e.splice(n,1),t.state)return e.push(t);e=e.concat(t.children)}})),e.length?this.button.innerText=`${e.slice(0,this.config.btnMaxLabels).map((e=>e.label)).join(this.config.btnDelimiter)}${e.length>this.config.btnMaxLabels?"...":""}`:this.button.innerText=this.config.locale.btnNoSelection}updateSelections(){this.options.forEach((e=>{"group"===e.type&&(e.checkbox.checked=e.state)}))}updateFilter(){if(!this.search&&!this.search.value.length)return;const e=this.search.value.toLowerCase();this.options.forEach((t=>{if("group"===t.type){t.children.forEach((t=>{const n=!t.label.toLowerCase().startsWith(e);Array.from(t.el.children).forEach((e=>e.hidden=n)),t.hidden=n}));const n=t.children.map((e=>e.hidden)).includes(!1);Array.from(t.el.children).forEach((e=>e.hidden=!n))}else{const n=!t.label.toLowerCase().startsWith(e);Array.from(t.el.children).forEach((e=>e.hidden=n))}}))}update(){this.updateSelections(),this.updateButton(),this.updateFilter()}} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 562292f..d9f505a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "bulmaselect", - "version": "1.0.3", + "version": "1.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ab58956..d45f39b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bulmaselect", - "version": "1.0.3", + "version": "1.0.4", "description": "A fast Vanilla JavaScript multiselect library for the web.", "author": "resolv (https://github.com/resolvedxd)", "contributors": [