| 1 | "use strict";function _interopDefault(t){return t&&"object"==typeof t&&"default"in t?t.default:t}var Util=_interopDefault(require("../util.js")),extendStatics=function(t,e){return(extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function __extends(t,e){function n(){this.constructor=t}extendStatics(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function __awaiter(s,o,a,c){return new(a||(a=Promise))(function(t,e){function n(t){try{r(c.next(t))}catch(t){e(t)}}function i(t){try{r(c.throw(t))}catch(t){e(t)}}function r(e){e.done?t(e.value):new a(function(t){t(e.value)}).then(n,i)}r((c=c.apply(s,o||[])).next())})}function __generator(n,i){var r,s,o,t,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return t={next:e(0),throw:e(1),return:e(2)},"function"==typeof Symbol&&(t[Symbol.iterator]=function(){return this}),t;function e(e){return function(t){return function(e){if(r)throw new TypeError("Generator is already executing.");for(;a;)try{if(r=1,s&&(o=2&e[0]?s.return:e[0]?s.throw||((o=s.return)&&o.call(s),0):s.next)&&!(o=o.call(s,e[1])).done)return o;switch(s=0,o&&(e=[2&e[0],o.value]),e[0]){case 0:case 1:o=e;break;case 4:return a.label++,{value:e[1],done:!1};case 5:a.label++,s=e[1],e=[0];continue;case 7:e=a.ops.pop(),a.trys.pop();continue;default:if(!(o=0<(o=a.trys).length&&o[o.length-1])&&(6===e[0]||2===e[0])){a=0;continue}if(3===e[0]&&(!o||e[1]>o[0]&&e[1]<o[3])){a.label=e[1];break}if(6===e[0]&&a.label<o[1]){a.label=o[1],o=e;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(e);break}o[2]&&a.ops.pop(),a.trys.pop();continue}e=i.call(n,a)}catch(t){e=[6,t],s=0}finally{r=o=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([e,t])}}}var Component=function(){function t(t,e,n){var i=this;this.template="",this.id=null,this.eventHandlers=[],this.registeredElements=[],this.name=t;var r="string"==typeof n.element?document.querySelector(n.element):n.element,s={};if(r){var o=Util.Selector.attrConfig(r);o&&(s=o)}this.defaultProps=e,this.props=Object.assign(e,s,n,{element:r}),this.id=this.uid(),this.elementListener=function(t){return i.onBeforeElementEvent(t)},this.setEventsHandler()}return t.prototype.setTemplate=function(t){this.template=t},t.prototype.getTemplate=function(){return this.template},t.prototype.getElement=function(){return this.getProp("element")||null},t.prototype.setElement=function(t){this.props.element=t},t.prototype.getId=function(){return this.id},t.prototype.uid=function(){return Math.random().toString(36).substr(2,10)},t.prototype.getName=function(){return this.name},t.prototype.getProps=function(){return this.props},t.prototype.getProp=function(t){var e=this.defaultProps[t];return void 0!==this.props[t]?this.props[t]:e},t.prototype.setProps=function(t){var e=Object.assign({},t);this.props=Object.assign(this.props,e)},t.prototype.setProp=function(t,e){if(void 0===this.props[t])throw new Error("Cannot set an invalid prop");this.props[t]=e},t.prototype.registerElements=function(t){var e=this;t.forEach(function(t){return e.registerElement(t)})},t.prototype.registerElement=function(t){t.target.addEventListener(t.event,this.elementListener),this.registeredElements.push(t)},t.prototype.unregisterElements=function(){var e=this;this.registeredElements.forEach(function(t){e.unregisterElement(t)})},t.prototype.unregisterElement=function(e){var t=this.registeredElements.findIndex(function(t){return t.target===e.target&&t.event===e.event});-1<t?(e.target.removeEventListener(e.event,this.elementListener),this.registeredElements.splice(t,1)):console.error("Warning! Could not remove element: "+e.target+" with event: "+e.event+".")},t.prototype.triggerEvent=function(t,e,n){var i=this;void 0===e&&(e={}),void 0===n&&(n=!1);var r=t.split(".").reduce(function(t,e,n){return 0===n?e:t+e.charAt(0).toUpperCase()+e.slice(1)}),s="on"+r.charAt(0).toUpperCase()+r.slice(1),o=this.getProps();if(this.eventHandlers.forEach(function(t){"function"==typeof t[r]&&t[r].apply(i,[e]),"function"==typeof t[s]&&o[s].apply(i,[e])}),!n){var a=this.getElement();a?Util.Dispatch.elementEvent(a,t,this.name,e):Util.Dispatch.winDocEvent(t,this.name,e)}},t.prototype.preventClosable=function(){return!1},t.prototype.destroy=function(){this.unregisterElements()},t.prototype.onElementEvent=function(t){},t.prototype.setEventsHandler=function(){var n=this.getProps(),t=Object.keys(n).reduce(function(t,e){return"function"==typeof n[e]&&(t[e]=n[e]),t},{});0<Object.keys(t).length&&this.eventHandlers.push(t)},t.prototype.onBeforeElementEvent=function(t){this.preventClosable()||this.onElementEvent(t)},t}(),OffCanvas=function(o){function n(t){var e=o.call(this,"off-canvas",{toggle:!1,closableKeyCodes:[27],container:document.body,setupContainer:!0,aside:{md:!1,lg:!0,xl:!0}},t)||this;e.currentWidthName=null,e.animate=!0,e.showAside=!1,e.directions=["left","right"],e.direction=null,e.sizes=[],e.backdropSelector="offcanvas-backdrop";var n={name:"sm",media:window.matchMedia("(min-width: 1px)")},i={name:"md",media:window.matchMedia("(min-width: 768px)")},r={name:"lg",media:window.matchMedia("(min-width: 992px)")},s={name:"xl",media:window.matchMedia("(min-width: 1200px)")};return e.sizes=[n,i,r,s].reverse(),e.checkDirection(),e.getProp("setupContainer")&&e.checkWidth(),e.getProp("toggle")&&e.toggle(),window.addEventListener("resize",function(){return e.checkWidth()},!1),e}return __extends(n,o),n.attachDOM=function(){var o="offcanvas";Util.Observer.subscribe({componentClass:o,onAdded:function(t,e){e(new n({element:t}))},onRemoved:function(t,e){e("OffCanvas",t)}}),document.addEventListener(Util.Event.CLICK,function(t){var e=t.target;if(e){var n=Util.Selector.closest(e,'[data-toggle="'+o+'"]');if(n){var i=n.getAttribute("data-target");if(!i)return;var r=document.querySelector(i);if(!r)return;var s=Util.Observer.getComponent(o,{element:r});if(!s)return;e.blur(),s.toggle()}}})},n.prototype.checkDirection=function(){var e=this,n=this.getElement();this.directions.every(function(t){return!n.classList.contains("offcanvas-"+t)||(e.direction=t,!1)})},n.prototype.checkWidth=function(){if("matchMedia"in window){var t=this.sizes.find(function(t){var e=t.media;return!(!e.media.match(/[a-z]?-width:\s?([0-9]+)/)||!e.matches)});t&&this.setAside(t.name)}},n.prototype.setAside=function(t){var e=this.getContainer();if(this.currentWidthName!==t&&e){this.currentWidthName=t;var n=this.getProp("aside");if(this.showAside=!0===n[t],!0===n[t]){e.classList.contains("offcanvas-aside-"+this.direction)||e.classList.add("offcanvas-aside-"+this.direction),this.animate=!1,this.getBackdrop()&&this.removeBackdrop();var i=this.getShowClass();this.isVisible()&&!e.classList.contains(i)?e.classList.add(i):!this.isVisible()&&e.classList.contains(i)&&e.classList.remove(i)}else e.classList.contains("offcanvas-aside-"+this.direction)&&e.classList.remove("offcanvas-aside-"+this.direction),this.animate=!0,this.hide()}},n.prototype.onElementEvent=function(e){var t=this.getProp("closableKeyCodes");"keyup"===e.type&&!t.find(function(t){return t===e.keyCode})||this.hide()},n.prototype.isVisible=function(){return this.getElement().classList.contains("show")},n.prototype.show=function(){var t=this;return!this.getElement().classList.contains("show")&&(this.triggerEvent(Util.Event.SHOW),this.showAside||this.createBackdrop(),__awaiter(t,void 0,void 0,function(){var e,n,i,r,s=this;return __generator(this,function(t){switch(t.label){case 0:return[4,Util.sleep(20)];case 1:return t.sent(),this.attachEvents(),e=function(){if(s.triggerEvent(Util.Event.SHOWN),s.animate){var t=s.getElement();t.removeEventListener(Util.Event.TRANSITION_END,e),t.classList.remove("animate")}},this.showAside&&(n=this.getContainer(),i=this.getShowClass(),n&&!n.classList.contains(i)&&n.classList.add(i)),r=this.getElement(),this.animate?(r.addEventListener(Util.Event.TRANSITION_END,e),r.classList.add("animate")):e(),r.classList.add("show"),[2]}})}),!0)},n.prototype.hide=function(){var t=this,e=this.getElement();if(!e.classList.contains("show"))return!1;if(this.triggerEvent(Util.Event.HIDE),this.detachEvents(),this.animate&&e.classList.add("animate"),e.classList.remove("show"),this.showAside){var n=this.getContainer(),i=this.getShowClass();n&&n.classList.contains(i)&&n.classList.remove(i)}if(!this.showAside){var r=this.getBackdrop();if(!r)return!0;var s=function(){t.animate&&e.classList.remove("animate"),r.removeEventListener(Util.Event.TRANSITION_END,s),t.triggerEvent(Util.Event.HIDDEN),t.removeBackdrop()};r&&(r.addEventListener(Util.Event.TRANSITION_END,s),r.classList.add("fadeout"))}return!0},n.prototype.toggle=function(){return this.isVisible()?this.hide():this.show()},n.prototype.createBackdrop=function(){var t=document.createElement("div"),e=this.getId();e&&t.setAttribute("data-id",e),t.classList.add(this.backdropSelector);var n=this.getContainer();n&&n.appendChild(t)},n.prototype.getBackdrop=function(){return document.querySelector("."+this.backdropSelector+'[data-id="'+this.getId()+'"]')},n.prototype.removeBackdrop=function(){var t=this.getBackdrop();t&&t.parentNode&&t.parentNode.removeChild(t)},n.prototype.attachEvents=function(){var e=this,t=this.getElement();Array.from(t.querySelectorAll("[data-dismiss]")||[]).forEach(function(t){return e.registerElement({target:t,event:Util.Event.CLICK})});var n=this.getBackdrop();!this.showAside&&n&&this.registerElement({target:n,event:Util.Event.START}),this.registerElement({target:document,event:"keyup"})},n.prototype.detachEvents=function(){var e=this,t=this.getElement().querySelectorAll("[data-dismiss]");t&&Array.from(t).forEach(function(t){return e.unregisterElement({target:t,event:Util.Event.CLICK})});var n=this.getBackdrop();!this.showAside&&n&&this.unregisterElement({target:n,event:Util.Event.START}),this.unregisterElement({target:document,event:"keyup"})},n.prototype.getContainer=function(){var t=this.getProp("container");return"string"==typeof t&&(t=document.querySelector(t)),t},n.prototype.getShowClass=function(){return"show-"+this.direction},n}(Component);OffCanvas.attachDOM(),module.exports=OffCanvas;
|