forked from miket-dev/multiselect
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmultiselect.min.js
1 lines (1 loc) · 10.7 KB
/
multiselect.min.js
1
(()=>{if(!e)var e={removeNode:function(e){var t=document.getElementById(e);t&&t.parentNode.removeChild(t)},insertAfter:function(e,t){var i=t.parentNode;t.nextElementSibling?i.insertBefore(e,t.nextElementSibling):i.appendChild(e)},hide:function(e){e.style.display="none"},hideAll:function(e){for(var t=0;t<e.length;t++)this.hide(e[t])},show:function(e){e.style.display="block"},showAll:function(e){for(var t=0;t<e.length;t++)this.show(e[t])},parent:function(e,t){for(var i=e.parentElement;i&&"BODY"!=i.tagName;){if(i.id==t)return i;i=i.parentElement}return null},create:function(e){var t=document.createElement(e.tag);if(e.id&&(t.id=e.id),e.class&&(t.className=e.class),e.attributes)for(var i in e.attributes)t.setAttribute(i,e.attributes[i]);if(e.data)for(var i in e.data)t.dataset[i]=e.data[i];return t},div:function(e){return e||(e=new Object),e.tag="div",this.create(e)},label:function(e){return e||(e=new Object),e.tag="label",this.create(e)},textField:function(e){return e||(e=new Object),e.tag="input",e.attributes||(e.attributes=new Object),e.attributes.type="text",this.create(e)},checkbox:function(e){return e||(e=new Object),e.tag="input",e.attributes||(e.attributes=new Object),e.attributes.type="checkbox",this.create(e)},each:function(e,t){for(var i=0;i<e.length;i++)t(e[i])},setActive:function(e){e.classList.add("active")},setUnactive:function(e){e.classList.remove("active")},select:function(e){e.selected=!0,e.setAttribute("selected","selected")},deselect:function(e){e.selected=!1,e.removeAttribute("selected")},check:function(e){e.checked=!0},uncheck:function(e){e.checked=!1},click:function(e){if(e.fireEvent)el.fireEvent("onclick");else{var t=document.createEvent("Events");t.initEvent("click",!0,!1),e.dispatchEvent(t)}},setDisabled:function(e,t){e.disabled=t}};function t(e,t){if("undefined"!=typeof $&&!$(e).is("select")||"undefined"==typeof $&&"SELECT"!=e.tagName)throw"Multiselect: passed object must be a select";if("undefined"!=typeof $&&!$(e).attr("multiple")||"undefined"==typeof $&&!e.hasAttribute("multiple"))throw"Multiselect: passed object should contain 'multiple' attribute";this._item=e,this._createUI(),this._appendEvents(),this._initSelectedFields(),this._initIsEnabled()}t.prototype={_createUI:function(){e.removeNode(this._getIdentifier());var t=this._createWrapper();e.insertAfter(t,this._item),t.appendChild(this._createInputField()),t.appendChild(this._createItemList()),e.hide(this._item)},_createWrapper:function(){var e=document.createElement("div");return e.className="multiselect-wrapper",e.id=this._getIdentifier(),e},_createInputField:function(){var t=e.textField({id:this._getInputFieldIdentifier(),class:"multiselect-input",attributes:{autocomplete:"off"}}),i=e.label({id:this._getInputBadgeIdentifier(),class:"multiselect-count",attributes:{for:this._getInputFieldIdentifier()}}),n=e.label({class:"multiselect-dropdown-arrow",attributes:{for:this._getInputFieldIdentifier()}}),l=e.div({class:"multiselect-input-div"});return i.style.visibility="hidden",i.innerHTML=0,l.appendChild(t),l.appendChild(i),l.appendChild(n),l},_createItemList:function(){var t=e.create({tag:"ul"}),i=this;e.each(this._getItems(this._item),(function(e){var n=i._createItem("li",e.id,e.text,e.selected);t.appendChild(n);var l=n.querySelector("input[type=checkbox]");e.multiselectElement=l,l.dataset.multiselectElement=JSON.stringify(e)}));var n=this._createItem("span",-1,"Select all"),l=e.div({id:this._getItemListIdentifier(),class:"multiselect-list"});return l.appendChild(n),l.appendChild(e.create({tag:"hr"})),l.appendChild(t),l},_createItem:function(t,i,n,l){var c=e.checkbox({class:"multiselect-checkbox",data:{val:i}}),s=e.create({tag:"span",class:"multiselect-text"}),r=e.create({tag:t}),d=e.label();return s.className="multiselect-text",s.innerHTML=n,d.appendChild(c),d.appendChild(s),d.tabIndex=-1,r.appendChild(d),r},_initSelectedFields:function(){var t=this._getItems().filter((function(e){return e.selected}));if(0!=t.length){var i=this;e.each(t,(function(e){i.select(e.id)}))}},_initIsEnabled:function(){this.setIsEnabled(!this._item.disabled)},destroy(){e.removeNode(this._getIdentifier()),e.show(this._item);var t=window.multiselects._items.indexOf(this._item);t>-1&&(window.multiselects._items.splice(t,1),window.multiselects.splice(t,1))},select:function(e){this._toggle(e,!0)},deselect:function(e){this._toggle(e,!1)},setIsEnabled(t){if(this._isEnabled!==t){var i=document.getElementById(this._getIdentifier());t?i.classList.remove("disabled"):i.classList.add("disabled"),e.setDisabled(this._item,!t),e.setDisabled(document.getElementById(this._getInputFieldIdentifier()),!t),this._isEnabled=t}},_toggle:function(t,i){var n=this;t&&(e.each(document.getElementById(this._getIdentifier()).querySelectorAll(".multiselect-checkbox"),(function(l){l.dataset.val==t&&(i&&!l.checked?(e.check(l),n._onCheckBoxChange(l,n)):!i&&l.checked&&(e.uncheck(l),n._onCheckBoxChange(l,n)))})),n._updateText(n))},selectAll:function(t){var i=document.querySelector("#"+this._getIdentifier()+" .multiselect-checkbox");e.check(i),this._onCheckBoxChange(i,this),this._updateText(this)},deselectAll:function(){var t=document.querySelector("#"+this._getIdentifier()+" .multiselect-checkbox");e.uncheck(t),this._onCheckBoxChange(t,this),this._updateText(this)},_checkboxClickEvents:{},setCheckBoxClick(e,t){return"function"==typeof t?this._checkboxClickEvents[e]=t:console.error("Checkbox click handler for checkbox value="+e+" is not a function"),this},_appendEvents:function(){var t=this;document.getElementById(t._getInputFieldIdentifier()).addEventListener("click",(function(){document.getElementById(t._getInputFieldIdentifier()).value=""})),document.getElementById(t._getIdentifier()).addEventListener("click",(function(i){var n=(i=i||window.event).target||i.srcElement;e.parent(n,t._getIdentifier())&&i.stopPropagation()})),e.each(document.getElementById(t._getIdentifier()).querySelectorAll(".multiselect-checkbox"),(function(e){e.addEventListener("change",(function(i){t._onCheckBoxChange(e,t,i)}))}));var i=function(){var i=this.value.toLowerCase();if(i&&""!=i){e.hide(document.querySelector("#"+t._getItemListIdentifier()+" > span")),e.hide(document.querySelector("#"+t._getItemListIdentifier()+" > hr"));var n=Array.prototype.filter.call(document.querySelectorAll("#"+t._getItemListIdentifier()+" li span"),(function(e){return e.innerHTML.toLowerCase().indexOf(i)>-1}));e.hideAll(document.querySelectorAll("#"+t._getItemListIdentifier()+" li")),e.each(n,(function(t){e.show(t.parentElement.parentElement)}))}else e.show(document.querySelector("#"+t._getItemListIdentifier()+" > span")),e.show(document.querySelector("#"+t._getItemListIdentifier()+" > hr")),e.showAll(document.querySelectorAll("#"+t._getItemListIdentifier()+" li"))};document.getElementById(t._getInputFieldIdentifier()).addEventListener("propertychange",i),document.getElementById(t._getInputFieldIdentifier()).addEventListener("input",i),document.getElementById(t._getInputFieldIdentifier()).addEventListener("blur",t._updateText.bind(null,t))},_onCheckBoxChange:function(e,t,i){if(e.dataset.multiselectElement)n=t._performSelectItem(e,t),"function"==typeof t._checkboxClickEvents[n.id]&&t._checkboxClickEvents[n.id](e,n),t._updateSelectAll(t);else{var n=t._performSelectAll(e,t);"function"==typeof t._checkboxClickEvents.checkboxAll&&t._checkboxClickEvents.checkboxAll(e,{checked:n})}t._updateText(t),t._forceUpdate()},_performSelectItem:function(t,i){var n=JSON.parse(t.dataset.multiselectElement);return t.checked?(i._itemCounter++,e.select(this._item.options[n.index]),e.setActive(t.parentElement.parentElement),{id:n.id,checked:!0}):(i._itemCounter--,e.deselect(this._item.options[n.index]),e.setUnactive(t.parentElement.parentElement),{id:n.id,checked:!1})},_performSelectAll:function(t,i){var n=i._getItems();return t.checked?(i._itemCounter=n.length,e.each(n,(function(t){e.setActive(t.multiselectElement.parentElement.parentElement),e.select(i._item.options[t.index]),e.check(t.multiselectElement)})),!0):(i._itemCounter=0,e.each(n,(function(t){t.multiselectElement.parentElement.parentElement.classList.remove("active"),e.deselect(i._item.options[t.index]),e.uncheck(t.multiselectElement)})),!1)},_updateSelectAll:function(e){var t=document.getElementById(e._getItemListIdentifier()).querySelector("input[type=checkbox]");e._itemCounter==e._getItems().length?t.checked=!0:t.checked&&(t.checked=!1)},_updateText:function(e){var t=document.getElementById(e._getItemListIdentifier()).querySelectorAll("ul .active");if(t.length>0){for(var i="",n=0;n<(t.length<5?t.length:5);n++)i+=String(t[n].innerText).trim()+", ";(i=i.substr(0,i.length-2)).length>20&&(i=i.substr(0,17)+"...")}t.length==document.getElementById(e._getItemListIdentifier()).querySelectorAll("ul li").length&&(i="All selected"),document.getElementById(e._getInputFieldIdentifier()).value=i||""},_forceUpdate:function(){var e=document.getElementById(this._getInputBadgeIdentifier());if(e.style.visibility="hidden",0!=this._itemCounter){e.innerHTML=this._itemCounter,e.style.visibility="visible";var t=e.nextElementSibling;this._itemCounter<10?(e.style.left="-45px",t.style.marginLeft="-42px"):this._itemCounter<100?(e.style.left="-50px",t.style.marginLeft="-47px"):this._itemCounter<1e3?(e.style.left="-55px",t.style.marginLeft="-52px"):this._itemCounter<1e4&&(e.style.left="-60px",t.style.marginLeft="-57px")}},_items:void 0,_itemCounter:0,_isEnabled:!0,_getItems:function(){if(null==this._items){for(var e=[],t=this._item.options,i=0;i<t.length;i++){var n={id:t[i].value,index:i,text:t[i].innerHTML,selected:!!t[i].selected,selectElement:t[i]};e.push(n)}this._items=e}return this._items},_getItemUniqueIdentifier:function(){var e=this._item.getAttribute("id"),t=this._item.getAttribute("name");if(!e&&!t)throw"Multiselect: object does not contain any identifier (id or name)";return e||t},_getIdentifier:function(){return this._getItemUniqueIdentifier()+"_multiSelect"},_getInputFieldIdentifier:function(){return this._getItemUniqueIdentifier()+"_input"},_getItemListIdentifier:function(){return this._getItemUniqueIdentifier()+"_itemList"},_getInputBadgeIdentifier:function(){return this._getItemUniqueIdentifier()+"_inputCount"}},window.multiselects=[],"undefined"!=typeof $?$.fn.multiselect=function(){var e=[];return window.multiselects._items||(window.multiselects._items=[]),0!=this.length&&$(this).each((function(i,n){var l=window.multiselects._items.indexOf(n);if(-1==l){var c=new t(n);window.multiselects.push(c),window.multiselects._items.push(n),e.push(c)}else e.push(window.multiselects[l])})),1==e.length?e[0]:$(e)}:document.multiselect=function(i){var n=[];return window.multiselects._items||(window.multiselects._items=[]),e.each(document.querySelectorAll(i),(function(e){var i=window.multiselects._items.indexOf(e);if(-1==i){var l=new t(e);window.multiselects.push(l),window.multiselects._items.push(e),n.push(l)}else n.push(window.multiselects[i])})),1==n.length?n[0]:n}})();