sass-basis - npm Package Compare versions

Comparing version 13.0.2 to 14.0.0

CHANGELOG.md

 #Changelog
 
+## May 19, 2021 14.0.0
+* Refactoring JavaScript code.
+* `.c-drawer-close-zone` is generated automatically.
+* Remove event `clickDrawerCloseZone`.
+* Add event `closeDrawerCloseZone`.
+* Remove all static methods of `BasisDrawerCloseZone`.
+* Remove all static methods of `BasisDrawer`.
+
 ## April 29, 2021 13.0.2
@@ -4,0 +12,0 @@ * Update calculating line-height.

dist/js/basis.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";var e=function(e,t){0<e.length&&Array.prototype.slice.call(e,0).forEach((function(e,n){t(e,n)}))},t=function(e,t){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];try{n=new CustomEvent(t,{bubbles:o,cancelable:i,detail:r})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent(t,o,i,r)}e.dispatchEvent(n)};function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var o,i=function(){function o(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n(this,o),this.args=t,this.args.drawer=this.args.drawer||".c-drawer",e(document.querySelectorAll(this.args.drawer),(function(e){e.addEventListener("openDrawer",(function(){return o.createCloseZone(e)}),!1),e.addEventListener("closeDrawer",(function(){return o.removeCloseZone(e)}),!1)}))}var i,a;return i=o,a=[{key:"createCloseZone",value:function(e){if(null===o.getCloseZone(e)){var n=document.createElement("div");n.classList.add("c-drawer-close-zone"),e.classList.contains("c-drawer--fixed")&&n.classList.add("c-drawer-close-zone--fixed");var r=e.getAttribute("id");n.setAttribute("id",o.generateCloseZoneId(r)),n.setAttribute("aria-controls",r),n.addEventListener("click",(function(e){return t(n,"clickDrawerCloseZone")}),!1),e.parentNode.appendChild(n)}}},{key:"removeCloseZone",value:function(e){var t=o.getCloseZone(e);null!==t&&t.parentNode.removeChild(t)}},{key:"generateCloseZoneId",value:function(e){return"".concat(e,"-close-zone")}},{key:"getCloseZone",value:function(e){var t=e.getAttribute("id"),n=o.generateCloseZoneId(t);return document.getElementById(n)}}],null&&r(i.prototype,null),a&&r(i,a),o}(),a=function(e,t){var n;try{n=new CustomEvent(t)}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent(t,!1,!1,null)}e.dispatchEvent(n)},u=window.innerWidth,s=window.innerHeight;function c(e){e.setAttribute("aria-hidden","false")}function l(e){e.setAttribute("aria-hidden","true")}function f(e){e.setAttribute("aria-expanded","true")}function d(e){e.setAttribute("aria-expanded","false")}function h(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}o="inc2734/dispatch-custom-resize-event/dispatch",Boolean(sessionStorage.getItem(o))||window.addEventListener("resize",(function(){window.innerWidth!==u?(a(window,"resize:width"),u=window.innerWidth,s=window.innerHeight):function(){if(a(window,"resize:height"),window.innerHeight===s)a(window,"resize:height:undo");else{a(window,"resize:height:update");var e=/iP(hone|(o|a)d)/.test(navigator.userAgent);49<Math.abs(window.innerHeight-s)&&e&&a(window,"resize:height:ios")}}()}),!1),sessionStorage.setItem(o,!0),window.addEventListener("beforeunload",(function(){return sessionStorage.removeItem(o)}),!1);var g=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.btn=t,this.prefix=n,this._relation(),t.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),e.click(t.currentTarget)}),!1)}var t,n,r;return t=e,r=[{key:"click",value:function(t){"false"==t.getAttribute("aria-expanded")?e.open(t):e.close(t)}},{key:"open",value:function(t){var n=e.getMenu(t);n&&c(n),f(t)}},{key:"close",value:function(t){var n=e.getMenu(t);n&&l(n),d(t)}},{key:"getMenu",value:function(e){return document.getElementById(e.getAttribute("aria-controls"))}}],(n=[{key:"_relation",value:function(){var e,t,n,r=this.btn.nextElementSibling;if(r){var o=(e=this.prefix,t=Math.floor(8999999*Math.random()+1e6),n=(new Date).getTime(),"".concat(e,"-").concat(n).concat(t));r.setAttribute("id",o),this.btn.setAttribute("aria-controls","".concat(o))}}}])&&h(t.prototype,n),r&&h(t,r),e}();function v(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var b=document.activeElement,m=function(){function n(){var r=this,o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};v(this,n),this.args=o,this.args.drawer=this.args.drawer||".c-drawer",this.args.toggle=this.args.toggle||"".concat(this.args.drawer,"__toggle"),this.args.submenu=this.args.submenu||"".concat(this.args.drawer,"__submenu"),this.args.item=this.args.item||"".concat(this.args.drawer,"__item"),this.args.subitem=this.args.subitem||"".concat(this.args.drawer,"__subitem"),e(document.querySelectorAll(this.args.drawer),(function(o){window.addEventListener("resize:width",(function(){return r._resizeWindow(o)}),!1),o.addEventListener("closeDrawer",(function(){return r._closeAllSubmenus(o)}),!1),o.addEventListener("click",(function(e){return e.stopPropagation()}),!1),o.addEventListener("keydown",(function(e){return 27===e.keyCode&&n.close(o)}));var i=o.querySelectorAll("".concat(r.args.item," > a"));e(i,(function(e){return e.addEventListener("click",(function(){t(e,"clickDrawerItemLink"),n.close(o)}),!1)}));var a=o.querySelectorAll("".concat(r.args.subitem," > a"));e(a,(function(e){return e.addEventListener("click",(function(){t(e,"clickDrawerSubItemLink"),n.close(o)}),!1)}));var u=o.querySelectorAll("".concat(r.args.toggle));e(u,(function(e){new g(e,"drawer"),e.addEventListener("click",(function(e){e.preventDefault(),e.stopPropagation();var t=e.currentTarget.parentNode;r._closeOtherSubmenus(t)}),!1)}));var s=o.querySelectorAll([r.args.item,r.args.subitem].join(","));e(s,(function(e){e.addEventListener("focusin",(function(){var t=e.querySelector(r.args.toggle);t&&g.open(t),r._closeOtherSubmenus(e)}),!1)}))}))}var r,o,i;return r=n,i=[{key:"close",value:function(e){var n=e.parentNode,r=e.classList[0];e.classList.contains("".concat(r,"--fixed"))&&"body"===n.tagName.toLowerCase()&&n.classList.remove("u-noscroll"),t(e,"closeDrawer"),null!==b&&b.focus(),l(e)}},{key:"open",value:function(r){var o=r.parentNode,i=r.classList[0];e(o.children,(function(e){e.classList.contains(i)&&n.close(e)})),r.classList.contains("".concat(i,"--fixed"))&&"body"===o.tagName.toLowerCase()&&o.classList.add("u-noscroll"),t(r,"openDrawer"),c(r),b=document.activeElement;var a=r.querySelector('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [tabindex="-1"], [contenteditable]');null!==a&&a.focus(),r.scrollTop=0;var u=r.getAttribute("id"),s=document.querySelector('.c-drawer-close-zone[aria-controls="'.concat(u,'"]'));s&&s.addEventListener("clickDrawerCloseZone",(function(){return n.close(r)}),!1)}}],(o=[{key:"_resizeWindow",value:function(e){t(e,"resizeDrawer"),n.close(e)}},{key:"_closeOtherSubmenus",value:function(t){var n=this;e(t.parentNode.children,(function(r){var o=r.querySelectorAll(n.args.toggle);r!==t&&e(o,(function(e){return g.close(e)}))}))}},{key:"_closeAllSubmenus",value:function(t){var n=t.querySelectorAll(this.args.toggle);e(n,(function(e){return g.close(e)}))}}])&&p(r.prototype,o),i&&p(r,i),n}();function w(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function y(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var _=function(){function n(){var t=this,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};w(this,n),this.args=r,this.args.btn=this.args.btn||".c-hamburger-btn",e(document.querySelectorAll(this.args.btn),(function(e){e.addEventListener("click",(function(e){return t._click(e)}),!1);var r=document.getElementById(e.getAttribute("aria-controls"));null!==r&&(e.addEventListener("openHamburgerBtn",(function(){return m.open(r)}),!1),e.addEventListener("closeHamburgerBtn",(function(){return m.close(r)}),!1),r.addEventListener("closeDrawer",(function(){return n.close(e)}),!1),r.addEventListener("openDrawer",(function(){return n.open(e)}),!1))}))}var r,o,i;return r=n,i=[{key:"open",value:function(e){"true"!==e.getAttribute("aria-expanded")&&f(e)}},{key:"close",value:function(e){"false"!==e.getAttribute("aria-expanded")&&d(e)}}],(o=[{key:"_click",value:function(e){e.preventDefault(),e.stopPropagation();var n=e.currentTarget;"false"===n.getAttribute("aria-expanded")?t(n,"openHamburgerBtn"):t(n,"closeHamburgerBtn")}}])&&y(r.prototype,o),i&&y(r,i),n}();function E(e){return(E="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function S(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&k(e,t)}function k(e,t){return(k=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function A(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=C(e);if(t){var o=C(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return L(this,n)}}function L(e,t){return!t||"object"!==E(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function C(e){return(C=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function O(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function q(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function D(e,t,n){return t&&q(e.prototype,t),n&&q(e,n),e}var P=function(){function t(n,r){var o=this;O(this,t),this.wrapper=n,this.args=r,window.addEventListener("resize:width",(function(){o._closeAllSubmenus(),o._setSubmenuOpenDirection()}),!1),e(this.wrapper.querySelectorAll([this.args.item,this.args.subitem].join(",")),(function(e){return e.addEventListener("focusin",(function(){return o._closeOtherSubmenus(e)}),!1)})),this._setSubmenuOpenDirection(),this._init()}return D(t,[{key:"_setSubmenuOpenDirection",value:function(){var t=this;e(this.wrapper.querySelectorAll("".concat(this.args.item,'[aria-haspopup="true"]')),(function(e){var n=[].slice.call(e.querySelectorAll(t.args.submenu));if(!(1>n.length)){var r=e.getBoundingClientRect();if(!(r.left+r.width/2<window.innerWidth/2)){var o=n.slice(0)[0];o.classList.remove("c-navbar__submenu--turn-left");var i=n.slice(-1)[0].getBoundingClientRect();window.innerWidth<i.right&&o.classList.add("c-navbar__submenu--turn-left")}}}))}},{key:"_getItemsHasPopup",value:function(){return this.wrapper.querySelectorAll(["".concat(this.args.item,'[aria-haspopup="true"]'),"".concat(this.args.subitem,'[aria-haspopup="true"]')].join(","))}}]),t}(),j=function(t){S(r,t);var n=A(r);function r(e,t){return O(this,r),n.call(this,e,t)}return D(r,[{key:"_init",value:function(){var t=this;e(this._getItemsHasPopup(),(function(e){var n=e.querySelector(t.args.submenu);if(n){var r=function(n){c(n),t._closeOtherSubmenus(e)};e.addEventListener("mouseover",(function(){return r(n)}),!1),e.addEventListener("mouseleave",(function(){return function(e){return l(e)}(n)}),!1),e.addEventListener("focusin",(function(){return r(n)}),!1)}}))}},{key:"_closeAllSubmenus",value:function(){var t=this;e(this.wrapper.querySelectorAll(this.args.submenu),(function(e){return t._closeSubmenu(e)}))}},{key:"_closeOtherSubmenus",value:function(t){var n=this;e(t.parentNode.children,(function(r){r!==t&&e(r.querySelectorAll(n.args.submenu),(function(e){return n._closeSubmenu(e)}))}))}},{key:"_closeSubmenu",value:function(t){var n=this;l(t),e(t.querySelectorAll(this.args.submenu),(function(e){return n._closeSubmenu(e)}))}}]),r}(P),x=function(t){S(r,t);var n=A(r);function r(e,t){return O(this,r),n.call(this,e,t)}return D(r,[{key:"_init",value:function(){var t=this;e(this.wrapper.querySelectorAll(this.args.toggle),(function(e){new g(e,"navbar"),e.addEventListener("click",(function(e){e.preventDefault(),e.stopPropagation();var n=e.currentTarget.parentNode;t._closeOtherSubmenus(n)}),!1)})),e(this._getItemsHasPopup(),(function(e){e.addEventListener("focusin",(function(){var n=e.querySelector(t.args.toggle);n&&g.open(n),t._closeOtherSubmenus(e)}),!1)}))}},{key:"_closeAllSubmenus",value:function(){e(this.wrapper.querySelectorAll(this.args.toggle),(function(e){return g.close(e)}))}},{key:"_closeOtherSubmenus",value:function(t){var n=this;e(t.parentNode.children,(function(r){r!==t&&e(r.querySelectorAll(n.args.toggle),(function(e){return g.close(e)}))}))}}]),r}(P),z=function t(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};O(this,t),this.args=n,this.args.wrapper=this.args.wrapper||".c-navbar",this.args.item=this.args.item||"".concat(this.args.wrapper,"__item"),this.args.submenu=this.args.submenu||"".concat(this.args.wrapper,"__submenu"),this.args.subitem=this.args.subitem||"".concat(this.args.wrapper,"__subitem"),this.args.toggle=this.args.toggle||"".concat(this.args.wrapper,"__toggle"),e(document.querySelectorAll(this.args.wrapper),(function(e){"hover"===(e.getAttribute("data-popup-mode")||"hover")?new j(e,n):new x(e,n)}))};function I(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var T=function t(){var n=this,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};I(this,t),this.args=r,this.args.pageEffect=this.args.pageEffect||".c-page-effect",this.args.duration=this.args.duration||0===this.args.duration?this.args.duration:200;var o=document.querySelector(this.args.pageEffect),i=document.querySelectorAll('[data-page-effect-link="true"], a[href]:not([target="_blank"]):not([href^="#"]):not([href*="javascript"]):not([href*=".jpg"]):not([href*=".jpeg"]):not([href*=".gif"]):not([href*=".png"]):not([href*=".mov"]):not([href*=".swf"]):not([href*=".mp4"]):not([href*=".flv"]):not([href*=".avi"]):not([href*=".mp3"]):not([href*=".pdf"]):not([href*=".zip"]):not([href^="mailto:"]):not([data-page-effect-link="false"])');if(o){var a=function(){l(o),o.setAttribute("data-page-effect","fadein")},u=function(){c(o),o.setAttribute("data-page-effect","fadeout")},s=function(e){setTimeout((function(){return window.location.href=e}),n.args.duration)};window.addEventListener("load",(function(){return a()}),!1),window.addEventListener("pageshow",(function(){return a()}),!1),e(i,(function(e){e.addEventListener("click",(function(t){if(!(t.shiftKey||t.ctrlKey||t.metaKey)){if(e.hash&&window.location.pathname+window.location.search===e.pathname+e.search)return;t.preventDefault(),u(),s(e.getAttribute("href"))}}),!1)}))}};document.addEventListener("DOMContentLoaded",(function(){new i,new m({drawer:".c-drawer"}),new m({drawer:".c-dropdown"}),new _,new z,new T}),!1)}();
+!function(){"use strict";var e=function(e,t){0<e.length&&Array.prototype.slice.call(e,0).forEach((function(e,n){t(e,n)}))},t=function(e,t){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},s=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];try{n=new CustomEvent(t,{bubbles:s,cancelable:i,detail:r})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent(t,s,i,r)}e.dispatchEvent(n)};function n(e,n){e.addEventListener("click",(function(){return t(e,"closeDrawerCloseZone")}),!1);var r=e.getAttribute("aria-controls");r&&r.split(" ").forEach((function(e){var t=document.getElementById(e);t.addEventListener("closeDrawer",n.onCloseDrawer,!1),t.addEventListener("openDrawer",n.onOpenDrawer,!1)})),this.close=function(){return e.setAttribute("aria-hidden","true")},this.open=function(){return e.setAttribute("aria-hidden","false")}}var r,s=function t(){var r=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.drawerCloseZones=[],e(document.querySelectorAll(".c-drawer-close-zone"),(function(e,t){r.drawerCloseZones[t]=new n(e,{onCloseDrawer:function(){return r.drawerCloseZones[t].close()},onOpenDrawer:function(){return r.drawerCloseZones[t].open()}})}))},i=function(e,t){var n;try{n=new CustomEvent(t)}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent(t,!1,!1,null)}e.dispatchEvent(n)},o=window.innerWidth,a=window.innerHeight;function u(e){var t=Math.floor(8999999*Math.random()+1e6),n=(new Date).getTime();return"".concat(e,"-").concat(n).concat(t)}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}r="inc2734/dispatch-custom-resize-event/dispatch",Boolean(sessionStorage.getItem(r))||window.addEventListener("resize",(function(){window.innerWidth!==o?(i(window,"resize:width"),o=window.innerWidth,a=window.innerHeight):function(){if(i(window,"resize:height"),window.innerHeight===a)i(window,"resize:height:undo");else{i(window,"resize:height:update");var e=/iP(hone|(o|a)d)/.test(navigator.userAgent);49<Math.abs(window.innerHeight-a)&&e&&i(window,"resize:height:ios")}}()}),!1),sessionStorage.setItem(r,!0),window.addEventListener("beforeunload",(function(){return sessionStorage.removeItem(r)}),!1);var l=document.activeElement;function f(n,r){var s=this;window.addEventListener("resize:width",(function(e){t(n,"resizeDrawer"),r.onResize(e)}),!1),n.addEventListener("click",(function(e){return e.stopPropagation()}),!1),n.addEventListener("keydown",r.onKeydown,!1);var i=n.getAttribute("id");i&&document.querySelectorAll("[aria-controls~=".concat(i,"]")).forEach((function(e){e.addEventListener("closeHamburgerBtn",r.onCloseHamburgerBtn,!1),e.addEventListener("openHamburgerBtn",r.onOpenHamburgerBtn,!1),e.addEventListener("closeDrawerCloseZone",r.onCloseDrawerCloseZone,!1)})),this.items=[];var o=n.parentNode,a=n.classList[0];e(n.querySelectorAll(r.args.item),(function(e,t){s.items[t]=new d(e,{args:r.args,closeDrawer:r.closeDrawer,onFocusin:function(){s.items[t].open(),s.items.forEach((function(e){return e!==s.items[t]&&e.close()}))},onClose:function(){return s.items[t].close()},onOpen:function(){s.items[t].open(),s.items.forEach((function(e){return e!==s.items[t]&&e.close()}))}})})),this.close=function(){n.classList.contains("".concat(a,"--fixed"))&&"body"===o.tagName.toLowerCase()&&o.classList.remove("u-noscroll"),t(n,"closeDrawer"),null!==l&&l.focus(),n.setAttribute("aria-hidden","true"),s.items.forEach((function(e){return e.close()}))},this.open=function(){n.classList.contains("".concat(a,"--fixed"))&&"body"===o.tagName.toLowerCase()&&o.classList.add("u-noscroll"),t(n,"openDrawer"),n.setAttribute("aria-hidden","false"),l=document.activeElement;var e=n.querySelector('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [tabindex="-1"], [contenteditable]');e&&setTimeout((function(){return e.focus()}),200),n.scrollTop=0},this.toggle=function(){"true"===n.getAttribute("aria-hidden")?s.open():s.close()}}function d(t,n){var r=this;t.addEventListener("focusin",n.onFocusin,!1),this.toggleBtn=void 0,this.submenu=void 0;var s=u("drawer");e(t.children,(function(e){e.classList.contains(n.args.toggle.slice(1))?r.toggleBtn=new h(e,{args:n.args,ariaControls:!e.getAttribute("aria-controls")&&s,onClick:function(){"false"===e.getAttribute("aria-expanded")?n.onOpen():n.onClose()}}):e.classList.contains(n.args.submenu.slice(1))?r.submenu=new g(e,{args:n.args,id:!e.getAttribute("id")&&s,closeDrawer:n.closeDrawer}):"a"===e.tagName.toLowerCase()&&new m(e,{onClick:n.closeDrawer})})),this.close=function(){r.toggleBtn&&r.submenu&&(r.toggleBtn.close(),r.submenu.close(),r.submenu.subitems.forEach((function(e){return e.close()})))},this.open=function(){r.toggleBtn&&r.submenu&&(r.toggleBtn.open(),r.submenu.open())}}function h(e,t){e.addEventListener("click",(function(e){e.preventDefault(),e.stopPropagation(),t.onClick(e)}),!1),e.setAttribute("aria-controls",t.ariaControls),this.close=function(){return e.setAttribute("aria-expanded","false")},this.open=function(){return e.setAttribute("aria-expanded","true")}}function g(t,n){var r=this;t.setAttribute("id",n.id),this.subitems=[],e(t.children,(function(e,t){e.classList.contains(n.args.subitem.slice(1))&&(r.subitems[t]=new d(e,{args:n.args,closeDrawer:n.closeDrawer,onFocusin:function(){r.subitems[t].open(),r.subitems.forEach((function(e){return e!==r.subitems[t]&&e.close()}))},onClose:function(){return r.subitems[t].close()},onOpen:function(){r.subitems[t].open(),r.subitems.forEach((function(e){return e!==r.subitems[t]&&e.close()}))}}))})),this.close=function(){return t.setAttribute("aria-hidden","true")},this.open=function(){return t.setAttribute("aria-hidden","false")}}function m(e,t){e.addEventListener("click",t.onClick,!1)}var w=function t(){var n=this,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};c(this,t),this.args=r,this.args.drawer=this.args.drawer||".c-drawer",this.args.toggle=this.args.toggle||"".concat(this.args.drawer,"__toggle"),this.args.submenu=this.args.submenu||"".concat(this.args.drawer,"__submenu"),this.args.item=this.args.item||"".concat(this.args.drawer,"__item"),this.args.subitem=this.args.subitem||"".concat(this.args.drawer,"__subitem"),this.drawers={},e(document.querySelectorAll(this.args.drawer),(function(e,t){var s=e.getAttribute("id")||t;n.drawers[s]=new f(e,{args:r,closeDrawer:function(){return n.drawers[s].close()},onResize:function(){return n.drawers[s].close()},onKeydown:function(e){return 27===e.keyCode&&n.drawers[s].close()},onCloseHamburgerBtn:function(){return n.drawers[s].close()},onOpenHamburgerBtn:function(){return n.drawers[s].open()},onCloseDrawerCloseZone:function(){return n.drawers[s].close()}})}));var s=function(e){var t=e.target.getAttribute("data-basis-drawer-toggle-btn");t&&n.drawers[t]&&n.drawers[t].toggle()};document.removeEventListener("click",s,!1),document.addEventListener("click",s,!1)};function b(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,n){e.addEventListener("click",(function(n){n.preventDefault(),n.stopPropagation(),"false"===e.getAttribute("aria-expanded")?t(e,"openHamburgerBtn"):t(e,"closeHamburgerBtn")}),!1);var r=e.getAttribute("aria-controls");r&&r.split(" ").forEach((function(e){var t=document.getElementById(e);t&&(t.addEventListener("closeDrawer",n.onCloseDrawer,!1),t.addEventListener("openDrawer",n.onOpenDrawer,!1))})),this.close=function(){return e.setAttribute("aria-expanded","false")},this.open=function(){return e.setAttribute("aria-expanded","true")}}var v=function t(){var n=this,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};b(this,t),this.args=r,this.args.btn=this.args.btn||".c-hamburger-btn",this.hamburgerBtns=[],e(document.querySelectorAll(this.args.btn),(function(e,t){n.hamburgerBtns[t]=new p(e,{onCloseDrawer:function(){return n.hamburgerBtns[t].close()},onOpenDrawer:function(){return n.hamburgerBtns[t].open()}})}))};function E(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function C(t,n){t.addEventListener("focusin",(function(e){e.stopPropagation(),n.onFocusin(e)}),!1),e(t.querySelectorAll(n.args.submenu),(function(e){new A(e,{useTurnLeft:function(){var t=e.getBoundingClientRect();return!(t.left+t.width/2<window.innerWidth/2)}})}))}function A(e,t){var n=function(){t.useTurnLeft()?e.classList.add("c-navbar__submenu--turn-left"):e.classList.remove("c-navbar__submenu--turn-left")};n(),window.addEventListener("resize:width",n,!1)}function L(t,n){var r=this;this.items=[],e(t.querySelectorAll("".concat(n.args.item)),(function(e,t){r.items[t]=new D(e,{args:n.args,onFocusin:function(){r.items[t].open(),r.items.forEach((function(e){return e!==r.items[t]&&e.close()}))},onMouseleave:function(){return r.items[t].close()},onMouseover:function(){r.items[t].open(),r.items.forEach((function(e){return e!==r.items[t]&&e.close()}))}})}))}function D(t,n){var r=this;new C(t,{args:n.args,onFocusin:n.onFocusin}),t.addEventListener("mouseover",(function(e){e.stopPropagation(),n.onMouseover(e)}),!1),t.addEventListener("mouseleave",(function(e){e.stopPropagation(),n.onMouseleave(e)}),!1),this.submenu=void 0,e(t.children,(function(e){e.classList.contains(n.args.submenu.slice(1))&&(r.submenu=new y(e,{args:n.args}))})),this.close=function(){r.submenu&&(r.submenu.close(),r.submenu.subitems.forEach((function(e){return e.close()})))},this.open=function(){r.submenu&&r.submenu.open()}}function y(t,n){var r=this;this.subitems=[],e(t.children,(function(e,t){e.classList.contains(n.args.subitem.slice(1))&&(r.subitems[t]=new D(e,{args:n.args,onFocusin:function(){r.subitems[t].open(),r.subitems.forEach((function(e){return e!==r.subitems[t]&&e.close()}))},onMouseleave:function(){return r.subitems[t].close()},onMouseover:function(){r.subitems[t].open(),r.subitems.forEach((function(e){return e!==r.subitems[t]&&e.close()}))}}))})),this.close=function(){return t.setAttribute("aria-hidden","true")},this.open=function(){return t.setAttribute("aria-hidden","false")}}function B(t,n){var r=this;this.items=[],e(t.querySelectorAll(n.args.item),(function(e,t){r.items[t]=new k(e,{args:n.args,onFocusin:function(){r.items[t].open(),r.items.forEach((function(e){return e!==r.items[t]&&e.close()}))},onClose:function(){return r.items[t].close()},onOpen:function(){r.items[t].open(),r.items.forEach((function(e){return e!==r.items[t]&&e.close()}))}})}))}function k(t,n){var r=this;new C(t,{args:n.args,onFocusin:n.onFocusin}),this.toggleBtn=void 0,this.submenu=void 0;var s=u("navbar");e(t.children,(function(e){e.classList.contains(n.args.toggle.slice(1))?r.toggleBtn=new _(e,{args:n.args,ariaControls:!e.getAttribute("aria-controls")&&s,onClick:function(){"false"===e.getAttribute("aria-expanded")?n.onOpen():n.onClose()},onResize:function(){return n.onClose()}}):e.classList.contains(n.args.submenu.slice(1))&&(r.submenu=new z(e,{args:n.args,id:!e.getAttribute("id")&&s}))})),this.close=function(){r.toggleBtn&&r.submenu&&(r.toggleBtn.close(),r.submenu.close(),r.submenu.subitems.forEach((function(e){return e.close()})))},this.open=function(){r.toggleBtn&&r.submenu&&(r.toggleBtn.open(),r.submenu.open())}}function _(e,t){e.addEventListener("click",(function(e){e.preventDefault(),e.stopPropagation(),t.onClick(e)}),!1),window.addEventListener("resize:width",t.onResize,!1),e.setAttribute("aria-controls",t.ariaControls),this.close=function(){return e.setAttribute("aria-expanded","false")},this.open=function(){return e.setAttribute("aria-expanded","true")}}function z(t,n){var r=this;t.setAttribute("id",n.id),this.subitems=[],e(t.children,(function(e,t){e.classList.contains(n.args.subitem.slice(1))&&(r.subitems[t]=new k(e,{args:n.args,onFocusin:function(){r.subitems[t].open(),r.subitems.forEach((function(e){return e!==r.subitems[t]&&e.close()}))},onClose:function(){return r.subitems[t].close()},onOpen:function(){r.subitems[t].open(),r.subitems.forEach((function(e){return e!==r.subitems[t]&&e.close()}))}}))})),this.close=function(){return t.setAttribute("aria-hidden","true")},this.open=function(){return t.setAttribute("aria-hidden","false")}}var F=function t(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};E(this,t),this.args=n,this.args.wrapper=this.args.wrapper||".c-navbar",this.args.item=this.args.item||"".concat(this.args.wrapper,"__item"),this.args.submenu=this.args.submenu||"".concat(this.args.wrapper,"__submenu"),this.args.subitem=this.args.subitem||"".concat(this.args.wrapper,"__subitem"),this.args.toggle=this.args.toggle||"".concat(this.args.wrapper,"__toggle"),e(document.querySelectorAll(this.args.wrapper),(function(e){"hover"===(e.getAttribute("data-popup-mode")||"hover")?new L(e,{args:n}):new B(e,{args:n})}))};function O(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function S(e,t){window.addEventListener("load",t.onLoad,!1),this.close=function(){e.setAttribute("aria-hidden","true"),e.setAttribute("data-page-effect","fadein")},this.open=function(){e.setAttribute("aria-hidden","false"),e.setAttribute("data-page-effect","fadeout")}}function x(e,t){e.addEventListener("click",(function(n){if(!(n.shiftKey||n.ctrlKey||n.metaKey)){if(e.hash&&window.location.pathname+window.location.search===e.pathname+e.search)return;n.preventDefault(),t.onClick(n)}}),!1)}var q=function t(){var n=this,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};O(this,t),this.args=r,this.args.pageEffect=this.args.pageEffect||".c-page-effect",this.args.duration=this.args.duration||0===this.args.duration?this.args.duration:200;var s=document.querySelector(this.args.pageEffect);if(s){this.pageEffect=new S(s,{onLoad:function(){return n.pageEffect.close()}});var i=document.querySelectorAll('[data-page-effect-link="true"], a[href]:not([target="_blank"]):not([href^="#"]):not([href*="javascript"]):not([href*=".jpg"]):not([href*=".jpeg"]):not([href*=".gif"]):not([href*=".png"]):not([href*=".mov"]):not([href*=".swf"]):not([href*=".mp4"]):not([href*=".flv"]):not([href*=".avi"]):not([href*=".mp3"]):not([href*=".pdf"]):not([href*=".zip"]):not([href^="mailto:"]):not([data-page-effect-link="false"])');this.elementsFireFadeOut=[],e(i,(function(e,t){n.elementsFireFadeOut[t]=new x(e,{onClick:function(){n.pageEffect.open(),setTimeout((function(){return window.location.href=e.getAttribute("href")}),n.args.duration)}})}))}};document.addEventListener("DOMContentLoaded",(function(){new s,new w({drawer:".c-drawer"}),new w({drawer:".c-dropdown"}),new v,new F,new q}),!1)}();

package.json

 {
   "name": "sass-basis",
-  "version": "13.0.2",
+  "version": "14.0.0",
   "main": "src/css/basis.scss",
@@ -35,5 +35,5 @@ "author": "inc2734",
   "devDependencies": {
-    "@babel/core": "^7.13.16",
-    "@babel/preset-env": "^7.13.15",
-    "@wordpress/browserslist-config": "^3.0.3",
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@wordpress/browserslist-config": "^4.0.0",
     "autoprefixer": "^10.2.5",
@@ -43,13 +43,13 @@ "babel-loader": "^8.2.2",
     "cpy-cli": "^3.1.1",
-    "cssnano": "^5.0.1",
+    "cssnano": "^5.0.2",
     "node-aigis": "^1.4.1",
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.0",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.10",
+    "postcss": "^8.2.15",
     "postcss-cli": "^8.3.1",
-    "postcss-import": "^14.0.1",
+    "postcss-import": "^14.0.2",
     "postcss-mq-optimize": "^1.1.0",
-    "webpack": "^5.35.0",
-    "webpack-cli": "^4.6.0"
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0"
   },
@@ -56,0 +56,0 @@ "scripts": {

src/js/_drawer-close-zone.js

@@ -1,16 +0,15 @@
-'use strict';
-
 import forEachHtmlNodes from '@inc2734/for-each-html-nodes';
 import addCustomEvent from '@inc2734/add-custom-event';
 
-export default class BasisDrawerCloseZone {
-  constructor(args = {}) {
-    this.args = args;
-    this.args.drawer = this.args.drawer || '.c-drawer';
+function DrawerCloseZoneComponent(element, props) {
+  element.addEventListener('click', () => addCustomEvent(element, 'closeDrawerCloseZone'), false);
 
-    forEachHtmlNodes(
-      document.querySelectorAll(this.args.drawer),
-      (drawer) => {
-        drawer.addEventListener('openDrawer', () => BasisDrawerCloseZone.createCloseZone(drawer), false);
-        drawer.addEventListener('closeDrawer', () => BasisDrawerCloseZone.removeCloseZone(drawer), false);
+  const controlsValue = element.getAttribute('aria-controls');
+  if (!! controlsValue) {
+    const controls = controlsValue.split(' ');
+    controls.forEach(
+      (control) => {
+        const target = document.getElementById(control);
+        target.addEventListener('closeDrawer', props.onCloseDrawer, false);
+        target.addEventListener('openDrawer', props.onOpenDrawer, false);
       }
@@ -20,42 +19,23 @@ );
 
-  static createCloseZone(drawer) {
-    if (null !== BasisDrawerCloseZone.getCloseZone(drawer)) {
-      return;
-    }
+  this.close = () => element.setAttribute('aria-hidden', 'true');
+  this.open = () => element.setAttribute('aria-hidden', 'false');
+}
 
-    const closeZone = document.createElement('div');
-    closeZone.classList.add('c-drawer-close-zone');
+export default class BasisDrawerCloseZone {
+  constructor() {
+    this.drawerCloseZones = [];
 
-    if (drawer.classList.contains('c-drawer--fixed')) {
-      closeZone.classList.add('c-drawer-close-zone--fixed');
-    }
-
-    const drawerId = drawer.getAttribute('id');
-    closeZone.setAttribute('id', BasisDrawerCloseZone.generateCloseZoneId(drawerId));
-    closeZone.setAttribute('aria-controls', drawerId);
-
-    closeZone.addEventListener('click', (event) => addCustomEvent(closeZone, 'clickDrawerCloseZone'), false);
-
-    drawer.parentNode.appendChild(closeZone);
+    forEachHtmlNodes(
+      document.querySelectorAll('.c-drawer-close-zone'),
+      (element, index) => {
+        this.drawerCloseZones[ index ] = new DrawerCloseZoneComponent(
+          element,
+          {
+            onCloseDrawer: () => this.drawerCloseZones[ index ].close(),
+            onOpenDrawer: () => this.drawerCloseZones[ index ].open(),
+          }
+        );
+      }
+    );
   }
-
-  static removeCloseZone(drawer) {
-    const closeZone = BasisDrawerCloseZone.getCloseZone(drawer);
-    if (null === closeZone) {
-      return;
-    }
-
-    closeZone.parentNode.removeChild(closeZone);
-  }
-
-  static generateCloseZoneId(drawerId) {
-    return `${drawerId}-close-zone`;
-  }
-
-  static getCloseZone(drawer) {
-    const drawerId    = drawer.getAttribute('id');
-    const closeZoneId = BasisDrawerCloseZone.generateCloseZoneId(drawerId);
-
-    return document.getElementById(closeZoneId);
-  }
 }

src/js/_drawer.js

@@ -1,168 +0,273 @@
-'use strict';
-
 import forEachHtmlNodes from '@inc2734/for-each-html-nodes';
 import addCustomEvent from '@inc2734/add-custom-event';
 import '@inc2734/dispatch-custom-resize-event';
-import { show, hide } from './_helper';
-import BasisToggleBtn from './_toggle-btn';
+import { uniqueId } from './_helper';
 
 let lastActiveElement = document.activeElement;
 
-export default class BasisDrawer {
-  constructor(args = {}) {
-    this.args = args;
-    this.args.drawer  = this.args.drawer || '.c-drawer';
-    this.args.toggle  = this.args.toggle || `${this.args.drawer}__toggle`;
-    this.args.submenu = this.args.submenu || `${this.args.drawer}__submenu`;
-    this.args.item    = this.args.item || `${this.args.drawer}__item`;
-    this.args.subitem = this.args.subitem || `${this.args.drawer}__subitem`;
+const focusableSelector = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [tabindex="-1"], [contenteditable]';
 
-    forEachHtmlNodes(
-      document.querySelectorAll(this.args.drawer),
-      (drawer) => {
-        window.addEventListener('resize:width', () => this._resizeWindow(drawer), false);
+function DrawerComponent(element, props) {
+  window.addEventListener(
+    'resize:width',
+    (event) => {
+      addCustomEvent(element, 'resizeDrawer');
+      props.onResize(event);
+    },
+    false
+  );
+  element.addEventListener('click', (event) => event.stopPropagation(), false);
+  element.addEventListener('keydown', props.onKeydown, false );
 
-        drawer.addEventListener('closeDrawer', () => this._closeAllSubmenus(drawer), false);
-        drawer.addEventListener('click', (event) => event.stopPropagation(), false);
-        drawer.addEventListener('keydown', (event) => 27 === event.keyCode && BasisDrawer.close(drawer));
+  const id = element.getAttribute('id');
+  if (id) {
+    const controls = document.querySelectorAll(`[aria-controls~=${ id }]`);
+    controls.forEach(
+      (control) => {
+        control.addEventListener('closeHamburgerBtn', props.onCloseHamburgerBtn, false);
+        control.addEventListener('openHamburgerBtn', props.onOpenHamburgerBtn, false);
+        control.addEventListener('closeDrawerCloseZone', props.onCloseDrawerCloseZone, false);
+      }
+    );
+  }
 
-        const drawerItemLinks = drawer.querySelectorAll(`${this.args.item} > a`);
-        forEachHtmlNodes(
-          drawerItemLinks,
-          (element) => element.addEventListener(
-            'click',
-            () => {
-              addCustomEvent(element, 'clickDrawerItemLink');
-              BasisDrawer.close(drawer);
-            },
-            false
-          )
-        );
+  this.items = [];
 
-        const drawerSubItemLinks = drawer.querySelectorAll(`${this.args.subitem} > a`);
-        forEachHtmlNodes(
-          drawerSubItemLinks,
-          (element) => element.addEventListener(
-            'click',
-            () => {
-              addCustomEvent(element, 'clickDrawerSubItemLink');
-              BasisDrawer.close(drawer);
+  const wrapper   = element.parentNode;
+  const mainClass = element.classList[0];
+
+  const preventBodyScroll = () => {
+    if (element.classList.contains(`${ mainClass }--fixed`) && 'body' === wrapper.tagName.toLowerCase()) {
+      wrapper.classList.add('u-noscroll');
+    }
+  };
+
+  const approvalBodyScroll = () => {
+    if (element.classList.contains(`${mainClass}--fixed`) && 'body' === wrapper.tagName.toLowerCase()) {
+      wrapper.classList.remove('u-noscroll');
+    }
+  };
+
+  forEachHtmlNodes(
+    element.querySelectorAll(props.args.item),
+    (item, index) => {
+      this.items[ index ] = new DrawerItemComponent(
+        item,
+        {
+          args: props.args,
+          closeDrawer: props.closeDrawer,
+          onFocusin: () => {
+            this.items[ index ].open();
+            this.items.forEach((item) => item !== this.items[ index ] && item.close());
+          },
+          onClose: () => this.items[ index ].close(),
+          onOpen: () => {
+            this.items[ index ].open();
+            this.items.forEach((item) => item !== this.items[ index ] && item.close());
+          },
+        }
+      );
+    }
+  );
+
+  this.close = () => {
+    approvalBodyScroll();
+
+    addCustomEvent(element, 'closeDrawer');
+
+    if (null !== lastActiveElement) {
+      lastActiveElement.focus();
+    }
+
+    element.setAttribute('aria-hidden', 'true');
+
+    this.items.forEach((item) => item.close());
+  };
+
+  this.open = () => {
+    preventBodyScroll();
+
+    addCustomEvent(element, 'openDrawer');
+    element.setAttribute('aria-hidden', 'false');
+
+    lastActiveElement = document.activeElement;
+    const focusableItem = element.querySelector(focusableSelector);
+    if (!! focusableItem) {
+      // Addresses the fact that other drawers may be affected by the transition of this drawer.
+      setTimeout(() => focusableItem.focus(), 200);
+    }
+
+    element.scrollTop = 0;
+  };
+
+  this.toggle = () => {
+    'true' === element.getAttribute('aria-hidden')
+      ? this.open()
+      : this.close();
+  };
+}
+
+function DrawerItemComponent(element, props) {
+  element.addEventListener('focusin', props.onFocusin, false);
+
+  this.toggleBtn = undefined;
+  this.submenu = undefined;
+
+  const id = uniqueId('drawer');
+
+  forEachHtmlNodes(
+    element.children,
+    (child) => {
+      // Toggle Button
+      if (child.classList.contains(props.args.toggle.slice(1))) {
+        this.toggleBtn = new DrawerToggleBtnComponent(
+          child,
+          {
+            args: props.args,
+            ariaControls: ! child.getAttribute('aria-controls') && id,
+            onClick: () => {
+              'false' === child.getAttribute('aria-expanded')
+                ? props.onOpen()
+                : props.onClose();
             },
-            false
-          )
+          }
         );
 
-        const toggleBtns = drawer.querySelectorAll(`${this.args.toggle}`);
-        forEachHtmlNodes(
-          toggleBtns,
-          (toggleBtn) => {
-            new BasisToggleBtn(toggleBtn, 'drawer');
-            toggleBtn.addEventListener(
-              'click',
-              (event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                const item = event.currentTarget.parentNode;
-                this._closeOtherSubmenus(item);
-              },
-              false
-            );
+      // Submenu
+      } else if (child.classList.contains(props.args.submenu.slice(1))) {
+        this.submenu = new DrawerSubmenuComponent(
+          child,
+          {
+            args: props.args,
+            id: ! child.getAttribute('id') && id,
+            closeDrawer: props.closeDrawer,
           }
         );
 
-        const items = drawer.querySelectorAll([this.args.item, this.args.subitem].join(','));
-        forEachHtmlNodes(
-          items,
-          (item) => {
-             item.addEventListener(
-              'focusin',
-              () => {
-                const toggleBtn = item.querySelector(this.args.toggle);
-                toggleBtn && BasisToggleBtn.open(toggleBtn);
-                this._closeOtherSubmenus(item);
-              },
-              false
-            );
+      // Link
+      } else if ('a' === child.tagName.toLowerCase()) {
+        new DrawerItemLinkComponent(
+          child,
+          {
+            onClick: props.closeDrawer,
           }
         );
       }
-    );
-  }
+    }
+  );
 
-  static close(drawer) {
-    // Approval body scroll
-    const wrapper   = drawer.parentNode;
-    const mainClass = drawer.classList[0];
-    if (drawer.classList.contains(`${mainClass}--fixed`) && 'body' === wrapper.tagName.toLowerCase()) {
-      wrapper.classList.remove('u-noscroll');
+  this.close = () => {
+    if (!! this.toggleBtn && !! this.submenu) {
+      this.toggleBtn.close();
+      this.submenu.close();
+      this.submenu.subitems.forEach((subitem) => subitem.close());
     }
+  };
 
-    addCustomEvent(drawer, 'closeDrawer');
-
-    if (null !== lastActiveElement) {
-      lastActiveElement.focus();
+  this.open = () => {
+    if (!! this.toggleBtn && !! this.submenu) {
+      this.toggleBtn.open();
+      this.submenu.open();
     }
+  };
+}
 
-    hide(drawer);
-  }
+function DrawerToggleBtnComponent(element, props) {
+  element.addEventListener(
+    'click',
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
 
-  static open(drawer) {
-    const wrapper   = drawer.parentNode;
-    const mainClass = drawer.classList[0];
+      props.onClick(event);
+    },
+    false
+  );
 
-    // All sibling drawer close
-    forEachHtmlNodes(
-      wrapper.children,
-      (child) => {
-        if (child.classList.contains(mainClass)) {
-          BasisDrawer.close(child);
-        }
-      }
-    );
+  element.setAttribute('aria-controls', props.ariaControls);
 
-    // Prevent body scroll
-    if (drawer.classList.contains(`${mainClass}--fixed`) && 'body' === wrapper.tagName.toLowerCase()) {
-      wrapper.classList.add('u-noscroll');
-    }
+  this.close = () => element.setAttribute('aria-expanded', 'false');
+  this.open = () => element.setAttribute('aria-expanded', 'true');
+}
 
-    addCustomEvent(drawer, 'openDrawer');
-    show(drawer);
+function DrawerSubmenuComponent(element, props) {
+  element.setAttribute('id', props.id);
 
-    lastActiveElement = document.activeElement;
+  this.subitems = [];
 
-    const focusableSelector = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [tabindex="-1"], [contenteditable]';
-    const focusableItem = drawer.querySelector(focusableSelector);
-
-    if (null !== focusableItem) {
-      focusableItem.focus();
+  forEachHtmlNodes(
+    element.children,
+    (child, index) => {
+      // Subitem
+      if (child.classList.contains(props.args.subitem.slice(1))) {
+        this.subitems[ index ] = new DrawerItemComponent(
+          child,
+          {
+            args: props.args,
+            closeDrawer: props.closeDrawer,
+            onFocusin: () => {
+              this.subitems[ index ].open();
+              this.subitems.forEach((subitem) => subitem !== this.subitems[ index ] && subitem.close());
+            },
+            onClose: () => this.subitems[ index ].close(),
+            onOpen: () => {
+              this.subitems[ index ].open();
+              this.subitems.forEach((subitem) => subitem !== this.subitems[ index ] && subitem.close());
+            },
+          }
+        );
+      }
     }
+  );
 
-    drawer.scrollTop = 0;
+  this.close = () => element.setAttribute('aria-hidden', 'true');
+  this.open = () => element.setAttribute('aria-hidden', 'false');
+}
 
-    const drawerId  = drawer.getAttribute('id');
-    const closeZone = document.querySelector(`.c-drawer-close-zone[aria-controls="${drawerId}"]`);
-    if (!! closeZone) {
-      closeZone.addEventListener('clickDrawerCloseZone', () => BasisDrawer.close(drawer), false);
-    }
-  }
+function DrawerItemLinkComponent(element, props) {
+  element.addEventListener('click', props.onClick, false);
+}
 
-  _resizeWindow(drawer) {
-    addCustomEvent(drawer, 'resizeDrawer');
-    BasisDrawer.close(drawer);
-  }
+export default class BasisDrawer {
 
-  _closeOtherSubmenus(item) {
+  constructor(args = {}) {
+    this.args = args;
+    this.args.drawer  = this.args.drawer || '.c-drawer';
+    this.args.toggle  = this.args.toggle || `${this.args.drawer}__toggle`;
+    this.args.submenu = this.args.submenu || `${this.args.drawer}__submenu`;
+    this.args.item    = this.args.item || `${this.args.drawer}__item`;
+    this.args.subitem = this.args.subitem || `${this.args.drawer}__subitem`;
+
+    this.drawers = {};
+
     forEachHtmlNodes(
-      item.parentNode.children,
-      (child) => {
-        const toggleBtns = child.querySelectorAll(this.args.toggle);
-        child !== item && forEachHtmlNodes(toggleBtns, (toggleBtn) => BasisToggleBtn.close(toggleBtn));
+      document.querySelectorAll(this.args.drawer),
+      (element, index) => {
+        const id = element.getAttribute('id');
+        const key = id || index;
+
+        this.drawers[ key ] = new DrawerComponent(
+          element,
+          {
+            args,
+            closeDrawer: () => this.drawers[ key ].close(),
+            onResize: () => this.drawers[ key ].close(),
+            onKeydown: (event) => 27 === event.keyCode && this.drawers[ key ].close(),
+            onCloseHamburgerBtn: () => this.drawers[ key ].close(),
+            onOpenHamburgerBtn: () => this.drawers[ key ].open(),
+            onCloseDrawerCloseZone: () => this.drawers[ key ].close(),
+          }
+        );
       }
     );
-  }
 
-  _closeAllSubmenus(drawer) {
-    const toggleBtns = drawer.querySelectorAll(this.args.toggle);
-    forEachHtmlNodes(toggleBtns, (toggleBtn) => BasisToggleBtn.close(toggleBtn));
+    const onToggleLinkClick = (event) => {
+      const drawerId = event.target.getAttribute('data-basis-drawer-toggle-btn');
+      if (!! drawerId && !! this.drawers[ drawerId ]) {
+        this.drawers[ drawerId ].toggle();
+      }
+    };
+    document.removeEventListener('click', onToggleLinkClick, false);
+    document.addEventListener('click', onToggleLinkClick, false);
   }
 }

src/js/_hamburger-btn.js

@@ -1,24 +0,27 @@
-'use strict';
-
 import forEachHtmlNodes from '@inc2734/for-each-html-nodes';
 import addCustomEvent from '@inc2734/add-custom-event';
-import BasisDrawer from './_drawer.js';
-import { open, close } from './_helper';
 
-export default class BasisHamburgerBtn {
-  constructor(args = {}) {
-    this.args = args;
-    this.args.btn = this.args.btn || '.c-hamburger-btn';
+function HamburgerBtnComponent(element, props) {
+  element.addEventListener(
+    'click',
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
 
-    forEachHtmlNodes(
-      document.querySelectorAll(this.args.btn),
-      (element) => {
-        element.addEventListener('click', (event) => this._click(event), false);
+      'false' === element.getAttribute('aria-expanded')
+        ? addCustomEvent(element, 'openHamburgerBtn')
+        : addCustomEvent(element, 'closeHamburgerBtn');
+    },
+    false
+  );
 
-        const drawer = document.getElementById(element.getAttribute('aria-controls'));
-        if (null !== drawer) {
-          element.addEventListener('openHamburgerBtn', () => BasisDrawer.open(drawer), false);
-          element.addEventListener('closeHamburgerBtn', () => BasisDrawer.close(drawer), false);
-          drawer.addEventListener('closeDrawer', () => BasisHamburgerBtn.close(element), false);
-          drawer.addEventListener('openDrawer', () => BasisHamburgerBtn.open(element), false);
+  const controlsValue = element.getAttribute('aria-controls');
+  if (!! controlsValue ) {
+    const controls = controlsValue.split(' ');
+    controls.forEach(
+      (control) => {
+        const target = document.getElementById(control);
+        if (!! target) {
+          target.addEventListener('closeDrawer', props.onCloseDrawer, false);
+          target.addEventListener('openDrawer', props.onOpenDrawer, false);
         }
@@ -29,30 +32,26 @@ }
 
-  static open(hamburgerBtn) {
-    if ('true' === hamburgerBtn.getAttribute('aria-expanded')) {
-      return;
-    }
+  this.close = () => element.setAttribute('aria-expanded', 'false');
+  this.open = () => element.setAttribute('aria-expanded', 'true');
+}
 
-    open(hamburgerBtn);
-  }
+export default class BasisHamburgerBtn {
+  constructor(args = {}) {
+    this.args = args;
+    this.args.btn = this.args.btn || '.c-hamburger-btn';
 
-  static close(hamburgerBtn) {
-    if ('false' === hamburgerBtn.getAttribute('aria-expanded')) {
-      return;
-    }
+    this.hamburgerBtns = [];
 
-    close(hamburgerBtn);
+    forEachHtmlNodes(
+      document.querySelectorAll(this.args.btn),
+      (element, index) => {
+        this.hamburgerBtns[ index ] = new HamburgerBtnComponent(
+          element,
+          {
+            onCloseDrawer: () => this.hamburgerBtns[ index ].close(),
+            onOpenDrawer: () => this.hamburgerBtns[ index ].open(),
+          }
+        );
+      }
+    );
   }
-
-  _click(event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const hamburgerBtn = event.currentTarget;
-
-    if ('false' === hamburgerBtn.getAttribute('aria-expanded')) {
-      addCustomEvent(hamburgerBtn, 'openHamburgerBtn');
-    } else {
-      addCustomEvent(hamburgerBtn, 'closeHamburgerBtn');
-    }
-  }
 }

src/js/_helper.js

@@ -1,24 +0,5 @@
-'use strict';
-
-export function show(element) {
-  element.setAttribute('aria-hidden', 'false');
-}
-
-export function hide(element) {
-  element.setAttribute('aria-hidden', 'true');
-}
-
-export function open(element) {
-  element.setAttribute('aria-expanded', 'true');
-}
-
-export function close(element) {
-  element.setAttribute('aria-expanded', 'false');
-}
-
 export function uniqueId(prefix) {
   const random = Math.floor((Math.random() * (9999999 - 1000000)) + 1000000);
   const time   = new Date().getTime();
-  const id     = `${prefix}-${time}${random}`;
-  return id;
+  return `${ prefix }-${ time }${ random }`;
 }

src/js/_navbar.js

@@ -1,184 +0,297 @@
-'use strict';
-
 import forEachHtmlNodes from '@inc2734/for-each-html-nodes';
 import '@inc2734/dispatch-custom-resize-event';
-import { show, hide, open, close, uniqueId } from './_helper';
-import BasisToggleBtn from './_toggle-btn';
+import { uniqueId } from './_helper';
 
-class BasisNavbarBase {
-  constructor(wrapper, args) {
-    this.wrapper = wrapper;
-    this.args = args;
+function NavbarBaseItemComponent(element, props) {
+  element.addEventListener(
+    'focusin',
+    (event) => {
+      event.stopPropagation();
+      props.onFocusin(event);
+    },
+    false
+  );
 
-    window.addEventListener(
-      'resize:width',
-      () => {
-        this._closeAllSubmenus();
-        this._setSubmenuOpenDirection();
-      },
-      false
-    );
+  forEachHtmlNodes(
+    element.querySelectorAll(props.args.submenu),
+    (submenu) => {
+      const useTurnLeft = () => {
+        const rect = submenu.getBoundingClientRect();
+        const submenuCenter = rect.left + rect.width / 2;
+        const windowCenter = window.innerWidth / 2
+        return submenuCenter < windowCenter
+          ? false
+          : true;
+      };
 
-    forEachHtmlNodes(
-      this.wrapper.querySelectorAll([this.args.item, this.args.subitem].join(',')),
-      (item) => item.addEventListener('focusin', () => this._closeOtherSubmenus(item), false)
-    );
+      new NavbarBaseSubmenuComponent(
+        submenu,
+        {
+          useTurnLeft,
+        }
+      );
+    }
+  );
+}
 
-    this._setSubmenuOpenDirection();
-    this._init();
-  }
+function NavbarBaseSubmenuComponent(element, props) {
+  const init = () => {
+    props.useTurnLeft()
+      ? element.classList.add('c-navbar__submenu--turn-left')
+      : element.classList.remove('c-navbar__submenu--turn-left');
+  };
 
-  _setSubmenuOpenDirection() {
-    forEachHtmlNodes(
-      this.wrapper.querySelectorAll(`${this.args.item}[aria-haspopup="true"]`),
-      (item) => {
-        const allsubmenus = [].slice.call(item.querySelectorAll(this.args.submenu));
-        if (1 > allsubmenus.length) {
-          return;
-        }
+  init();
+  window.addEventListener('resize:width', init, false);
+}
 
-        const itemRect = item.getBoundingClientRect();
-        const itemCenterX = itemRect.left + itemRect.width / 2;
-        const windowCenterX = window.innerWidth / 2
-        if (itemCenterX < windowCenterX) {
-          return;
+function NavbarHoverComponent(element, props) {
+  this.items = [];
+
+  forEachHtmlNodes(
+    element.querySelectorAll(`${ props.args.item }`),
+    (item, index) => {
+      this.items[ index ] = new NavbarHoverItemComponent(
+        item,
+        {
+          args: props.args,
+          onFocusin: () => {
+            this.items[ index ].open();
+            this.items.forEach((item) => item !== this.items[ index ] && item.close());
+          },
+          onMouseleave: () => this.items[ index ].close(),
+          onMouseover: () => {
+            this.items[ index ].open();
+            this.items.forEach((item) => item !== this.items[ index ] && item.close());
+          },
         }
+      );
+    }
+  );
+}
 
-        const firstSubmenu = allsubmenus.slice(0)[0];
-        firstSubmenu.classList.remove('c-navbar__submenu--turn-left')
+function NavbarHoverItemComponent(element, props) {
+  new NavbarBaseItemComponent(
+    element,
+    {
+      args: props.args,
+      onFocusin: props.onFocusin,
+    }
+  );
 
-        const lastSubmenu = allsubmenus.slice(-1)[0];
-        const rect = lastSubmenu.getBoundingClientRect();
-        const overRight = window.innerWidth < rect.right;
-        if (! overRight) {
-          return;
-        }
+  element.addEventListener(
+    'mouseover',
+    (event) => {
+      event.stopPropagation();
+      props.onMouseover(event)
+    },
+    false
+  );
 
-        firstSubmenu.classList.add('c-navbar__submenu--turn-left');
+  element.addEventListener(
+    'mouseleave',
+    (event) => {
+      event.stopPropagation();
+      props.onMouseleave(event)
+    },
+    false
+  );
+
+  this.submenu = undefined;
+
+  forEachHtmlNodes(
+    element.children,
+    (child) => {
+      if (child.classList.contains(props.args.submenu.slice(1))) {
+        this.submenu = new NavbarHoverSubmenuComponent(
+          child,
+          {
+            args: props.args,
+          }
+        );
       }
-    );
-  }
+    }
+  );
 
-  _getItemsHasPopup() {
-    return this.wrapper.querySelectorAll(
-      [
-        `${this.args.item}[aria-haspopup="true"]`,
-        `${this.args.subitem}[aria-haspopup="true"]`,
-      ].join(',')
-    );
-  }
+  this.close = () => {
+    if (!! this.submenu) {
+      this.submenu.close();
+      this.submenu.subitems.forEach((subitem) => subitem.close());
+    }
+  };
+
+  this.open = () => {
+    if (!! this.submenu) {
+      this.submenu.open();
+    }
+  };
 }
 
-class BasisNavbarHover extends BasisNavbarBase {
-  constructor(wrapper, args) {
-    super(wrapper, args);
-  }
+function NavbarHoverSubmenuComponent(element, props) {
+  this.subitems = [];
 
-  _init() {
-    forEachHtmlNodes(
-      this._getItemsHasPopup(),
-      (item) => {
-        const submenu = item.querySelector(this.args.submenu);
-        if (! submenu) {
-          return;
+  forEachHtmlNodes(
+    element.children,
+    (child, index) => {
+      if (child.classList.contains(props.args.subitem.slice(1))) {
+        this.subitems[ index ] = new NavbarHoverItemComponent(
+          child,
+          {
+            args: props.args,
+            onFocusin: () => {
+              this.subitems[ index ].open();
+              this.subitems.forEach((subitem) => subitem !== this.subitems[ index ] && subitem.close());
+            },
+            onMouseleave: () => this.subitems[ index ].close(),
+            onMouseover: () => {
+              this.subitems[ index ].open();
+              this.subitems.forEach((subitem) => subitem !== this.subitems[ index ] && subitem.close());
+            },
+          }
+        );
+      }
+    }
+  );
+
+  this.close = () => element.setAttribute('aria-hidden', 'true');
+  this.open = () => element.setAttribute('aria-hidden', 'false');
+}
+
+function NavbarClickComponent(element, props) {
+  this.items = [];
+
+  forEachHtmlNodes(
+    element.querySelectorAll(props.args.item),
+    (item, index) => {
+      this.items[ index ] = new NavbarClickItemComponent(
+        item,
+        {
+          args: props.args,
+          onFocusin: () => {
+            this.items[ index ].open();
+            this.items.forEach((item) => item !== this.items[ index ] && item.close());
+          },
+          onClose: () => this.items[ index ].close(),
+          onOpen: () => {
+            this.items[ index ].open();
+            this.items.forEach((item) => item !== this.items[ index ] && item.close());
+          },
         }
+      );
+    }
+  );
+}
 
-        const mouseover = (submenu) => {
-          show(submenu);
-          this._closeOtherSubmenus(item);
-        };
-        const mouseleave = (submenu) => hide(submenu);
+function NavbarClickItemComponent(element, props) {
+  new NavbarBaseItemComponent(
+    element,
+    {
+      args: props.args,
+      onFocusin: props.onFocusin,
+    }
+  );
 
-        item.addEventListener('mouseover', () => mouseover(submenu), false);
-        item.addEventListener('mouseleave', () => mouseleave(submenu), false);
-        item.addEventListener('focusin', () => mouseover(submenu), false);
-      }
-    );
-  }
+  this.toggleBtn = undefined;
+  this.submenu = undefined;
 
-  _closeAllSubmenus() {
-    forEachHtmlNodes(
-      this.wrapper.querySelectorAll(this.args.submenu),
-      (submenu) => this._closeSubmenu(submenu)
-    );
-  }
+  const id = uniqueId('navbar');
 
-  _closeOtherSubmenus(item) {
-    forEachHtmlNodes(
-      item.parentNode.children,
-      (child) => {
-        child !== item && forEachHtmlNodes(
-          child.querySelectorAll(this.args.submenu),
-          (submenu) => this._closeSubmenu(submenu)
+  forEachHtmlNodes(
+    element.children,
+    (child) => {
+      // Toggle Button
+      if (child.classList.contains(props.args.toggle.slice(1))) {
+        this.toggleBtn = new NavbarClickToggleBtnComponent(
+          child,
+          {
+            args: props.args,
+            ariaControls: ! child.getAttribute('aria-controls') && id,
+            onClick: () => {
+              'false' === child.getAttribute('aria-expanded')
+                ? props.onOpen()
+                : props.onClose();
+            },
+            onResize: () => props.onClose(),
+          }
         );
+
+      // Submenu
+      } else if (child.classList.contains(props.args.submenu.slice(1))) {
+        this.submenu = new NavbarClickSubmenuComponent(
+          child,
+          {
+            args: props.args,
+            id: ! child.getAttribute('id') && id,
+          }
+        );
       }
-    );
-  }
+    }
+  );
 
-  _closeSubmenu(submenu) {
-    hide(submenu);
-    forEachHtmlNodes(
-      submenu.querySelectorAll(this.args.submenu),
-      (element) => this._closeSubmenu(element)
-    );
+  this.close = () => {
+    if (!! this.toggleBtn && !! this.submenu) {
+      this.toggleBtn.close();
+      this.submenu.close();
+      this.submenu.subitems.forEach((subitem) => subitem.close());
+    }
   };
+
+  this.open = () => {
+    if (!! this.toggleBtn && !! this.submenu) {
+      this.toggleBtn.open();
+      this.submenu.open();
+    }
+  };
 }
 
-class BasisNavbarClick extends BasisNavbarBase {
-  constructor(wrapper, args) {
-    super(wrapper, args);
-  }
+function NavbarClickToggleBtnComponent(element, props) {
+  element.addEventListener(
+    'click',
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      props.onClick(event);
+    },
+    false
+  );
 
-  _init() {
-    forEachHtmlNodes(
-      this.wrapper.querySelectorAll(this.args.toggle),
-      (toggleBtn) => {
-        new BasisToggleBtn(toggleBtn, 'navbar');
-        toggleBtn.addEventListener(
-          'click',
-          (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            const item = event.currentTarget.parentNode;
-            this._closeOtherSubmenus(item);
-          },
-          false
-        );
-      }
-    );
+  window.addEventListener('resize:width', props.onResize, false);
 
-    forEachHtmlNodes(
-      this._getItemsHasPopup(),
-      (item) => {
-        item.addEventListener(
-          'focusin',
-          () => {
-            const toggleBtn = item.querySelector(this.args.toggle);
-            toggleBtn && BasisToggleBtn.open(toggleBtn);
-            this._closeOtherSubmenus(item);
-          },
-          false
-        );
-      }
-    );
-  }
+  element.setAttribute('aria-controls', props.ariaControls);
 
-  _closeAllSubmenus() {
-    forEachHtmlNodes(
-      this.wrapper.querySelectorAll(this.args.toggle),
-      (toggleBtn) => BasisToggleBtn.close(toggleBtn)
-    );
-  }
+  this.close = () => element.setAttribute('aria-expanded', 'false');
+  this.open = () => element.setAttribute('aria-expanded', 'true');
+}
 
-  _closeOtherSubmenus(item) {
-    forEachHtmlNodes(
-      item.parentNode.children,
-      (child) => {
-        child !== item && forEachHtmlNodes(
-          child.querySelectorAll(this.args.toggle),
-          (toggleBtn) => BasisToggleBtn.close(toggleBtn)
+function NavbarClickSubmenuComponent(element, props) {
+  element.setAttribute('id', props.id);
+
+  this.subitems = [];
+
+  forEachHtmlNodes(
+    element.children,
+    (child, index) => {
+      // Subitem
+      if (child.classList.contains(props.args.subitem.slice(1))) {
+        this.subitems[ index ] = new NavbarClickItemComponent(
+          child,
+          {
+            args: props.args,
+            onFocusin: () => {
+              this.subitems[ index ].open();
+              this.subitems.forEach((subitem) => subitem !== this.subitems[ index ] && subitem.close());
+            },
+            onClose: () => this.subitems[ index ].close(),
+            onOpen: () => {
+              this.subitems[ index ].open();
+              this.subitems.forEach((subitem) => subitem !== this.subitems[ index ] && subitem.close());
+            },
+          }
         );
       }
-    );
-  }
+    }
+  );
+
+  this.close = () => element.setAttribute('aria-hidden', 'true');
+  this.open = () => element.setAttribute('aria-hidden', 'false');
 }
@@ -197,8 +310,18 @@
       document.querySelectorAll(this.args.wrapper),
-      (wrapper) => {
-        const popupMode = wrapper.getAttribute('data-popup-mode') || 'hover';
+      (element) => {
+        const popupMode = element.getAttribute('data-popup-mode') || 'hover';
 
         'hover' === popupMode
-          ? new BasisNavbarHover(wrapper, args)
-          : new BasisNavbarClick(wrapper, args);
+          ? new NavbarHoverComponent(
+            element,
+            {
+              args,
+            }
+          )
+          : new NavbarClickComponent(
+            element,
+            {
+              args,
+            }
+          );
       }
@@ -205,0 +328,0 @@ );

src/js/_page-effect.js

@@ -1,6 +0,41 @@
-'use strict';
-
 import forEachHtmlNodes from '@inc2734/for-each-html-nodes';
-import { show, hide } from './_helper';
 
+function PageEffectComponent(element, props) {
+  window.addEventListener('load', props.onLoad, false);
+
+  this.close = () => {
+    element.setAttribute('aria-hidden', 'true');
+    element.setAttribute('data-page-effect', 'fadein');
+  };
+
+  this.open = () => {
+    element.setAttribute('aria-hidden', 'false');
+    element.setAttribute('data-page-effect', 'fadeout');
+  }
+}
+
+function elementFireFadeOutComponent(element, props) {
+  element.addEventListener(
+    'click',
+    (event) => {
+      if (event.shiftKey || event.ctrlKey || event.metaKey) {
+        return;
+      }
+
+      if (element.hash) {
+        const _location = window.location.pathname + window.location.search;
+        const _link = element.pathname + element.search;
+        if (_location === _link) {
+          return;
+        }
+      }
+
+      event.preventDefault();
+
+      props.onClick(event);
+    },
+    false
+  );
+}
+
 export default class BasisPageEffect {
@@ -12,49 +47,29 @@ constructor(args = {}) {
 
-    const container      = document.querySelector(this.args.pageEffect);
-    const pageOutObjects = document.querySelectorAll('[data-page-effect-link="true"], a[href]:not([target="_blank"]):not([href^="#"]):not([href*="javascript"]):not([href*=".jpg"]):not([href*=".jpeg"]):not([href*=".gif"]):not([href*=".png"]):not([href*=".mov"]):not([href*=".swf"]):not([href*=".mp4"]):not([href*=".flv"]):not([href*=".avi"]):not([href*=".mp3"]):not([href*=".pdf"]):not([href*=".zip"]):not([href^="mailto:"]):not([data-page-effect-link="false"])');
-
-    if (! container) {
+    const element = document.querySelector(this.args.pageEffect);
+    if (! element) {
       return;
     }
 
-    const fadeInPage = () => {
-      hide(container);
-      container.setAttribute('data-page-effect', 'fadein');
-    }
+    this.pageEffect = new PageEffectComponent(
+      element,
+      {
+        onLoad: () => this.pageEffect.close(),
+      }
+    );
 
-    const fadeOutPage = () => {
-      show(container);
-      container.setAttribute('data-page-effect', 'fadeout');
-    }
+    const elementsFireFadeOut = document.querySelectorAll('[data-page-effect-link="true"], a[href]:not([target="_blank"]):not([href^="#"]):not([href*="javascript"]):not([href*=".jpg"]):not([href*=".jpeg"]):not([href*=".gif"]):not([href*=".png"]):not([href*=".mov"]):not([href*=".swf"]):not([href*=".mp4"]):not([href*=".flv"]):not([href*=".avi"]):not([href*=".mp3"]):not([href*=".pdf"]):not([href*=".zip"]):not([href^="mailto:"]):not([data-page-effect-link="false"])');
 
-    const moveLocation = (url) => {
-      setTimeout(() => window.location.href = url, this.args['duration']);
-    }
+    this.elementsFireFadeOut = [];
 
-    window.addEventListener('load', () => fadeInPage(), false);
-    window.addEventListener('pageshow', () => fadeInPage(), false);
-
     forEachHtmlNodes(
-      pageOutObjects,
-      (link) => {
-        link.addEventListener(
-          'click',
-          (event) => {
-            if (event.shiftKey || event.ctrlKey || event.metaKey) {
-              return;
-            }
-
-            if (link.hash) {
-              const _location = window.location.pathname + window.location.search;
-              const _link = link.pathname + link.search;
-              if (_location === _link) {
-                return;
-              }
-            }
-
-            event.preventDefault();
-            fadeOutPage();
-            moveLocation(link.getAttribute('href'));
-          },
-          false
+      elementsFireFadeOut,
+      (elementFireFadeOut, index) => {
+        this.elementsFireFadeOut[ index ] = new elementFireFadeOutComponent(
+          elementFireFadeOut,
+          {
+            onClick: () => {
+              this.pageEffect.open();
+              setTimeout(() => window.location.href = elementFireFadeOut.getAttribute('href'), this.args.duration);
+            },
+          }
         );
@@ -61,0 +76,0 @@ }

src/js/basis.js

@@ -1,3 +0,1 @@
-'use strict';
-
 import BasisDrawerCloseZone from './_drawer-close-zone.js';
@@ -4,0 +2,0 @@ import BasisDrawer from './_drawer.js';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

381970

increased by1.24%

Lines of code

1277

increased by12.81%

Worsened metrics

Number of package files

197

decreased by-0.51%

No dependency changes