| 1 | "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var Util=_interopDefault(require("../util.js")),extendStatics=function(e,t){return(extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};function __extends(e,t){function r(){this.constructor=e}extendStatics(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var Component=function(){function e(e,t,r){var n=this;this.template="",this.id=null,this.eventHandlers=[],this.registeredElements=[],this.name=e;var i="string"==typeof r.element?document.querySelector(r.element):r.element,s={};if(i){var o=Util.Selector.attrConfig(i);o&&(s=o)}this.defaultProps=t,this.props=Object.assign(t,s,r,{element:i}),this.id=this.uid(),this.elementListener=function(e){return n.onBeforeElementEvent(e)},this.setEventsHandler()}return e.prototype.setTemplate=function(e){this.template=e},e.prototype.getTemplate=function(){return this.template},e.prototype.getElement=function(){return this.getProp("element")||null},e.prototype.setElement=function(e){this.props.element=e},e.prototype.getId=function(){return this.id},e.prototype.uid=function(){return Math.random().toString(36).substr(2,10)},e.prototype.getName=function(){return this.name},e.prototype.getProps=function(){return this.props},e.prototype.getProp=function(e){var t=this.defaultProps[e];return void 0!==this.props[e]?this.props[e]:t},e.prototype.setProps=function(e){var t=Object.assign({},e);this.props=Object.assign(this.props,t)},e.prototype.setProp=function(e,t){if(void 0===this.props[e])throw new Error("Cannot set an invalid prop");this.props[e]=t},e.prototype.registerElements=function(e){var t=this;e.forEach(function(e){return t.registerElement(e)})},e.prototype.registerElement=function(e){e.target.addEventListener(e.event,this.elementListener),this.registeredElements.push(e)},e.prototype.unregisterElements=function(){var t=this;this.registeredElements.forEach(function(e){t.unregisterElement(e)})},e.prototype.unregisterElement=function(t){var e=this.registeredElements.findIndex(function(e){return e.target===t.target&&e.event===t.event});-1<e?(t.target.removeEventListener(t.event,this.elementListener),this.registeredElements.splice(e,1)):console.error("Warning! Could not remove element: "+t.target+" with event: "+t.event+".")},e.prototype.triggerEvent=function(e,t,r){var n=this;void 0===t&&(t={}),void 0===r&&(r=!1);var i=e.split(".").reduce(function(e,t,r){return 0===r?t:e+t.charAt(0).toUpperCase()+t.slice(1)}),s="on"+i.charAt(0).toUpperCase()+i.slice(1),o=this.getProps();if(this.eventHandlers.forEach(function(e){"function"==typeof e[i]&&e[i].apply(n,[t]),"function"==typeof e[s]&&o[s].apply(n,[t])}),!r){var l=this.getElement();l?Util.Dispatch.elementEvent(l,e,this.name,t):Util.Dispatch.winDocEvent(e,this.name,t)}},e.prototype.preventClosable=function(){return!1},e.prototype.destroy=function(){this.unregisterElements()},e.prototype.onElementEvent=function(e){},e.prototype.setEventsHandler=function(){var r=this.getProps(),e=Object.keys(r).reduce(function(e,t){return"function"==typeof r[t]&&(e[t]=r[t]),e},{});0<Object.keys(e).length&&this.eventHandlers.push(e)},e.prototype.onBeforeElementEvent=function(e){this.preventClosable()||this.onElementEvent(e)},e}(),Selectbox=function(i){function r(e){var n=i.call(this,"selectbox",{name:null,selectable:!0,filterItems:null,multiple:!1,tag:!1},e)||this;if(!n.getProp("name")){var t=n.getElement().querySelector('input[type="hidden"]');t&&n.setProp("name",t.getAttribute("name"))}n.filterItemsHandler=function(e){var t=e.target;if(t){var r=t.value;""!==r?n.getItems().forEach(function(e){var t=n.getProp("filterItems");("function"==typeof t?t:n.filterItems)(r,e)?e.element.style.display="block":e.element.style.display="none"}):n.showItems()}},n.registerElement({target:n.getElement(),event:Util.Event.CLICK}),n.searchInputInContainer=null!==n.getElement().querySelector(".selectbox-input-container .input-select-one");var r=n.getItemData(n.getElement().querySelector("[data-selected]"));return r&&n.setSelected(r.value,r.text),n}return __extends(r,i),r.attachDOM=function(){Util.Observer.subscribe({componentClass:"selectbox",onAdded:function(e,t){t(new r({element:e}))},onRemoved:function(e,t){t("Selectbox",e)}})},r.prototype.getSearchInput=function(){return this.getElement().querySelector(".input-select-one")},r.prototype.filterItems=function(e,t){return void 0===e&&(e=""),-1<t.value.indexOf(e)||-1<t.text.indexOf(e)},r.prototype.showItems=function(){this.getItems().forEach(function(e){e.element.style.display="block"})},r.prototype.getItems=function(){var r=this;return Array.from(this.getElement().querySelectorAll(".selectbox-menu-item")||[]).map(function(e){var t=r.getItemData(e);return{text:t.text,value:t.value,element:e}})},r.prototype.setSelected=function(e,t){if(void 0===e&&(e=""),void 0===t&&(t=""),!this.getProp("selectable"))return!1;var r=this.getElement();this.getProp("multiple")?this.addItemSelection(e):0===Array.from(r.querySelectorAll(".selectbox-item-selection .item-selected")||[]).length&&this.addItemSelection(e);var n=r.querySelector(".selectbox-item-selection .item-selected:last-child"),i=n.querySelector("[data-value]");i?i.innerHTML=t:n.innerHTML=t;var s=Array.from(this.getElement().querySelectorAll('input[type="hidden"]')||[]).slice(-1).pop();s&&s.setAttribute("value",e),this.updateActiveList(),this.setSearchInputWidth();this.getSearchInput();return""===e?this.showPlaceholder():this.showPlaceholder(!1),!0},r.prototype.getSelected=function(){var e=Array.from(this.getElement().querySelectorAll('input[type="hidden"]')||[]);return this.getProp("multiple")?e.map(function(e){return e.value}):0<e.length?e[0].value:""},r.prototype.setSearchInputWidth=function(){if(this.searchInputInContainer){var e=this.getElement(),t=e.querySelector(".selectbox-item-selection"),r=e.offsetWidth-t.offsetWidth,n=this.getSearchInput();if(!n)throw new Error("Selectbox: search input is not defined");var i=Array.from(e.querySelectorAll(".item-selected")||[]).reduce(function(e,t){return e+t.offsetWidth},0);0<r&&(n.style.width="calc(100% - "+(i+15)+"px)"),n.style.left=i+"px"}},r.prototype.getItemData=function(e){void 0===e&&(e=null);var t="",r="";if(e){t=e.getAttribute("data-text")||e.innerHTML;var n=e.querySelector(".text");n&&(t=n.innerHTML),r=e.getAttribute("data-value")||""}return{text:t,value:r}},r.prototype.onElementEvent=function(e){var t=e.target;if(e.type===Util.Event.START){var r=Util.Selector.closest(t,".selectbox");r&&r===this.getElement()||this.hide()}else if(e.type===Util.Event.CLICK){var n=t.getAttribute("data-toggle");if(n&&"selectbox"===n)return void this.toggle();if(Util.Selector.closest(t,'[data-dismiss="selectbox"]'))return void this.hide();var i=Util.Selector.closest(t,".icon-close");if(i)return void this.removeSelected(i.parentNode);var s=Util.Selector.closest(t,".selectbox-menu-item");if(s&&!s.classList.contains("disabled")){var o=this.getItemData(s);if(this.getSelected()!==o.value){this.setSelected(o.value,o.text);this.getElement().querySelector(".input-select-one").value="";var l={item:s,text:o.text,value:o.value};this.triggerEvent(Util.Event.ITEM_SELECTED,l)}return void this.hide()}if(Util.Selector.closest(t,".selectbox-menu"))return;this.toggle()}else if("keyup"===e.type&&8===e.keyCode){if(""!==e.target.value)return;if(!this.searchInputInContainer)return;this.removeLastSelected()}},r.prototype.addItemSelection=function(e){var t=document.createElement("div");if(t.classList.add("item-selected"),this.getProp("tag")){t.classList.add("tag");var r=document.createElement("span");r.setAttribute("data-value","true"),t.appendChild(r);var n=document.createElement("button");n.setAttribute("type","button"),n.classList.add("icon-close");var i=document.createElement("span");i.setAttribute("class","icon"),i.setAttribute("aria-hidden","true"),n.appendChild(i),t.appendChild(n)}this.getElement().querySelector(".selectbox-item-selection").appendChild(t);var s=this.getElement(),o=Array.from(s.querySelectorAll('input[type="hidden"]')||[]),l=0<o.length?o[o.length-1]:null;if(!this.getProp("multiple")&&!l||this.getProp("multiple")){var a=document.createElement("input");a.setAttribute("type","hidden");var c=this.getProp("name");a.setAttribute("name",this.getProp("multiple")?c+"[]":c),a.setAttribute("value",e),s.insertBefore(a,l?l.nextSibling:s.firstChild)}},r.prototype.removeLastSelected=function(){var e=this.getElement(),t=Array.from(e.querySelectorAll(".selectbox-item-selection .item-selected")||[]);if(0!==t.length){var r=t[t.length-1];this.removeSelected(r)}},r.prototype.removeSelected=function(e){var t=this.getElement(),r=Array.from(t.querySelectorAll(".selectbox-item-selection .item-selected")||[]);if(0!==r.length){if(t.querySelector(".selectbox-item-selection").removeChild(e),this.getProp("multiple")){var n=this.getSelected(),i=t.querySelector('input[type="hidden"][value="'+n.slice(-1).pop()+'"]');this.getElement().removeChild(i)}else{i=t.querySelector('input[type="hidden"]');!this.getProp("multiple")&&i&&i.setAttribute("value","")}this.updateActiveList(),this.setSearchInputWidth(),1===r.length&&this.showPlaceholder()}},r.prototype.showPlaceholder=function(e){void 0===e&&(e=!0);var t=this.getSearchInput();t&&(e&&t.classList.contains("hide-placeholder")?t.classList.remove("hide-placeholder"):e||t.classList.contains("hide-placeholder")||t.classList.add("hide-placeholder"))},r.prototype.updateActiveList=function(){var r=this,e=this.getSelected(),n=Array.isArray(e)?e:[e];Array.from(this.getElement().querySelectorAll(".selectbox-menu-item")||[]).forEach(function(e){var t=r.getItemData(e);-1<n.indexOf(t.value)?e.classList.contains("selected")||e.classList.add("selected"):e.classList.contains("selected")&&e.classList.remove("selected")})},r.prototype.toggle=function(){return this.getElement().classList.contains("active")?this.hide():this.show()},r.prototype.show=function(){var e=this.getElement();if(e.classList.contains("active"))return!1;e.classList.add("active");var t=e.querySelector(".selectbox-menu"),r=this.getSearchInput();t.scrollTop=0,this.triggerEvent(Util.Event.SHOW),this.triggerEvent(Util.Event.SHOWN),this.registerElement({target:document.body,event:Util.Event.START}),r&&(this.registerElement({target:r,event:"keyup"}),r.addEventListener("keyup",this.filterItemsHandler),r.focus());var n=e.querySelector('[data-dismiss="selectbox"]');return n&&this.registerElement({target:n,event:Util.Event.CLICK}),!0},r.prototype.hide=function(){var e=this.getElement();if(!e.classList.contains("active"))return!1;e.classList.remove("active"),this.triggerEvent(Util.Event.HIDE),this.triggerEvent(Util.Event.HIDDEN),this.unregisterElement({target:document.body,event:Util.Event.START});var t=e.querySelector('[data-dismiss="selectbox"]');t&&this.unregisterElement({target:t,event:Util.Event.CLICK});var r=this.getSearchInput();return r&&(r.removeEventListener("keyup",this.filterItemsHandler),r.value="",this.unregisterElement({target:r,event:"keyup"})),this.showItems(),!0},r}(Component);Selectbox.attachDOM(),module.exports=Selectbox;
|