@vrembem/drawer - npm Package Compare versions

Comparing version 1.8.3 to 1.9.0

dist/scripts.cjs.js

@@ -86,2 +86,3 @@ 'use strict';
     dataToggle: 'drawer-toggle',
+    dataOpen: 'drawer-open',
     dataClose: 'drawer-close',
@@ -108,5 +109,4 @@ dataBreakpoint: 'drawer-breakpoint',
     breakpointInit();
-    document.addEventListener('click', run, false);
-    document.addEventListener('touchend', run, false);
-    document.addEventListener('keyup', escape, false);
+    document.addEventListener('click', handler, false);
+    document.addEventListener('keyup', handlerEscape, false);
   };
@@ -120,22 +120,7 @@
     localStorage.removeItem(api.settings.saveKey);
-    document.removeEventListener('click', run, false);
-    document.removeEventListener('touchend', run, false);
-    document.removeEventListener('keyup', escape, false);
+    document.removeEventListener('click', handler, false);
+    document.removeEventListener('keyup', handlerEscape, false);
   };
 
-  api.toggle = function (drawerKey, callback) {
-    toggle(drawerKey, callback);
-  };
-
-  api.open = function (drawerKey, callback) {
-    var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(drawerKey, "\"]"));
-    if (drawer) open(drawer, callback);
-  };
-
-  api.close = function (drawerKey, callback) {
-    var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(drawerKey, "\"]"));
-    if (drawer) close(drawer, callback);
-  };
-
-  var run = function run(event) {
+  var handler = function handler(event) {
     var trigger = event.target.closest("[data-".concat(api.settings.dataToggle, "]"));
@@ -146,20 +131,41 @@
       saveTrigger(trigger);
-      toggle(selector);
+      api.toggle(selector);
       event.preventDefault();
-    } else {
-      trigger = event.target.closest("[data-".concat(api.settings.dataClose, "]"));
+      return;
+    }
 
-      if (trigger) {
+    trigger = event.target.closest("[data-".concat(api.settings.dataOpen, "]"));
+
+    if (trigger) {
+      var _selector = trigger.dataset[camelCase(api.settings.dataOpen)];
+      saveTrigger(trigger);
+      api.open(_selector);
+      event.preventDefault();
+      return;
+    }
+
+    trigger = event.target.closest("[data-".concat(api.settings.dataClose, "]"));
+
+    if (trigger) {
+      var _selector2 = trigger.dataset[camelCase(api.settings.dataClose)];
+
+      if (_selector2) {
+        saveTrigger(trigger);
+        api.close(_selector2);
+      } else {
         var target = event.target.closest("[data-".concat(api.settings.dataDrawer, "]"));
-        close(target);
-        event.preventDefault();
+        if (target) api.close(target);
       }
 
-      if (event.target.dataset[camelCase(api.settings.dataDrawer)]) {
-        close(event.target);
-      }
+      event.preventDefault();
+      return;
     }
+
+    if (event.target.dataset[camelCase(api.settings.dataDrawer)]) {
+      api.close(event.target);
+      return;
+    }
   };
 
-  var escape = function escape(event) {
+  var handlerEscape = function handlerEscape(event) {
     if (event.keyCode == 27) {
@@ -169,3 +175,3 @@ var target = document.querySelector(".".concat(api.settings.classModal, ".").concat(api.settings.stateOpened));
       if (target) {
-        close(target);
+        api.close(target);
       }
@@ -175,5 +181,13 @@ }
 
-  var toggle = function toggle(drawerKey, callback) {
-    var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(drawerKey, "\"]"));
+  var drawerKeyCheck = function drawerKeyCheck(drawerKey) {
+    if (typeof drawerKey === 'string') {
+      return document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(drawerKey, "\"]"));
+    } else {
+      return drawerKey;
+    }
+  };
 
+  api.toggle = function (drawerKey, callback) {
+    var drawer = drawerKeyCheck(drawerKey);
+
     if (drawer) {
@@ -183,5 +197,5 @@ var isOpen = hasClass(drawer, api.settings.stateOpened);
       if (!isOpen) {
-        open(drawer, callback);
+        api.open(drawer, callback);
       } else {
-        close(drawer, callback);
+        api.close(drawer, callback);
       }
@@ -191,4 +205,6 @@ }
 
-  var open = function open(drawer, callback) {
-    if (!hasClass(drawer, api.settings.stateOpened)) {
+  api.open = function (drawerKey, callback) {
+    var drawer = drawerKeyCheck(drawerKey);
+
+    if (drawer && !hasClass(drawer, api.settings.stateOpened)) {
       saveTarget(drawer);
@@ -209,7 +225,12 @@ addClass(drawer, api.settings.stateOpening);
       }, true);
+    } else if (drawer && hasClass(drawer, api.settings.stateOpened)) {
+      saveTarget(drawer);
+      setFocus();
     }
   };
 
-  var close = function close(drawer, callback) {
-    if (hasClass(drawer, api.settings.stateOpened)) {
+  api.close = function (drawerKey, callback) {
+    var drawer = drawerKeyCheck(drawerKey);
+
+    if (drawer && hasClass(drawer, api.settings.stateOpened)) {
       addClass(drawer, api.settings.stateClosing);
@@ -216,0 +237,0 @@ removeClass(drawer, api.settings.stateOpened);

dist/scripts.js

@@ -85,2 +85,3 @@ (function (exports) {
       dataToggle: 'drawer-toggle',
+      dataOpen: 'drawer-open',
       dataClose: 'drawer-close',
@@ -107,5 +108,4 @@ dataBreakpoint: 'drawer-breakpoint',
       breakpointInit();
-      document.addEventListener('click', run, false);
-      document.addEventListener('touchend', run, false);
-      document.addEventListener('keyup', escape, false);
+      document.addEventListener('click', handler, false);
+      document.addEventListener('keyup', handlerEscape, false);
     };
@@ -119,22 +119,7 @@
       localStorage.removeItem(api.settings.saveKey);
-      document.removeEventListener('click', run, false);
-      document.removeEventListener('touchend', run, false);
-      document.removeEventListener('keyup', escape, false);
+      document.removeEventListener('click', handler, false);
+      document.removeEventListener('keyup', handlerEscape, false);
     };
 
-    api.toggle = function (drawerKey, callback) {
-      toggle(drawerKey, callback);
-    };
-
-    api.open = function (drawerKey, callback) {
-      var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(drawerKey, "\"]"));
-      if (drawer) open(drawer, callback);
-    };
-
-    api.close = function (drawerKey, callback) {
-      var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(drawerKey, "\"]"));
-      if (drawer) close(drawer, callback);
-    };
-
-    var run = function run(event) {
+    var handler = function handler(event) {
       var trigger = event.target.closest("[data-".concat(api.settings.dataToggle, "]"));
@@ -145,20 +130,41 @@
         saveTrigger(trigger);
-        toggle(selector);
+        api.toggle(selector);
         event.preventDefault();
-      } else {
-        trigger = event.target.closest("[data-".concat(api.settings.dataClose, "]"));
+        return;
+      }
 
-        if (trigger) {
+      trigger = event.target.closest("[data-".concat(api.settings.dataOpen, "]"));
+
+      if (trigger) {
+        var _selector = trigger.dataset[camelCase(api.settings.dataOpen)];
+        saveTrigger(trigger);
+        api.open(_selector);
+        event.preventDefault();
+        return;
+      }
+
+      trigger = event.target.closest("[data-".concat(api.settings.dataClose, "]"));
+
+      if (trigger) {
+        var _selector2 = trigger.dataset[camelCase(api.settings.dataClose)];
+
+        if (_selector2) {
+          saveTrigger(trigger);
+          api.close(_selector2);
+        } else {
           var target = event.target.closest("[data-".concat(api.settings.dataDrawer, "]"));
-          close(target);
-          event.preventDefault();
+          if (target) api.close(target);
         }
 
-        if (event.target.dataset[camelCase(api.settings.dataDrawer)]) {
-          close(event.target);
-        }
+        event.preventDefault();
+        return;
       }
+
+      if (event.target.dataset[camelCase(api.settings.dataDrawer)]) {
+        api.close(event.target);
+        return;
+      }
     };
 
-    var escape = function escape(event) {
+    var handlerEscape = function handlerEscape(event) {
       if (event.keyCode == 27) {
@@ -168,3 +174,3 @@ var target = document.querySelector(".".concat(api.settings.classModal, ".").concat(api.settings.stateOpened));
         if (target) {
-          close(target);
+          api.close(target);
         }
@@ -174,5 +180,13 @@ }
 
-    var toggle = function toggle(drawerKey, callback) {
-      var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(drawerKey, "\"]"));
+    var drawerKeyCheck = function drawerKeyCheck(drawerKey) {
+      if (typeof drawerKey === 'string') {
+        return document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(drawerKey, "\"]"));
+      } else {
+        return drawerKey;
+      }
+    };
 
+    api.toggle = function (drawerKey, callback) {
+      var drawer = drawerKeyCheck(drawerKey);
+
       if (drawer) {
@@ -182,5 +196,5 @@ var isOpen = hasClass(drawer, api.settings.stateOpened);
         if (!isOpen) {
-          open(drawer, callback);
+          api.open(drawer, callback);
         } else {
-          close(drawer, callback);
+          api.close(drawer, callback);
         }
@@ -190,4 +204,6 @@ }
 
-    var open = function open(drawer, callback) {
-      if (!hasClass(drawer, api.settings.stateOpened)) {
+    api.open = function (drawerKey, callback) {
+      var drawer = drawerKeyCheck(drawerKey);
+
+      if (drawer && !hasClass(drawer, api.settings.stateOpened)) {
         saveTarget(drawer);
@@ -208,7 +224,12 @@ addClass(drawer, api.settings.stateOpening);
         }, true);
+      } else if (drawer && hasClass(drawer, api.settings.stateOpened)) {
+        saveTarget(drawer);
+        setFocus();
       }
     };
 
-    var close = function close(drawer, callback) {
-      if (hasClass(drawer, api.settings.stateOpened)) {
+    api.close = function (drawerKey, callback) {
+      var drawer = drawerKeyCheck(drawerKey);
+
+      if (drawer && hasClass(drawer, api.settings.stateOpened)) {
         addClass(drawer, api.settings.stateClosing);
@@ -215,0 +236,0 @@ removeClass(drawer, api.settings.stateOpened);

dist/scripts.min.js

@@ -1,1 +0,1 @@
-!function(t){"use strict";var e=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t},n=function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),s=1;s<e;s++)n[s-1]=arguments[s];(t=t.forEach?t:[t]).forEach((function(t){var e;(e=t.classList).add.apply(e,n)}))},s=function(t){return t.replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()}))},a=function(t){t=t.forEach?t:[t],t=[].slice.call(t);for(var e=arguments.length,n=new Array(e>1?e-1:0),s=1;s<e;s++)n[s-1]=arguments[s];return n.some((function(e){return t.some((function(t){if(t.classList.contains(e))return!0}))}))},r=function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),s=1;s<e;s++)n[s-1]=arguments[s];(t=t.forEach?t:[t]).forEach((function(t){var e;(e=t.classList).remove.apply(e,n)}))},o={xs:"480px",sm:"620px",md:"760px",lg:"990px",xl:"1380px"};function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,s)}return n}function c(t){for(var n=1;n<arguments.length;n++){var s=null!=arguments[n]?arguments[n]:{};n%2?i(Object(s),!0).forEach((function(n){e(t,n,s[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):i(Object(s)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(s,e))}))}return t}t.Drawer=function(t){var e={},i={autoInit:!1,dataDrawer:"drawer",dataToggle:"drawer-toggle",dataClose:"drawer-close",dataBreakpoint:"drawer-breakpoint",dataFocus:"drawer-focus",stateOpened:"is-opened",stateOpening:"is-opening",stateClosing:"is-closing",stateClosed:"is-closed",classModal:"drawer_modal",breakpoints:o,customEventPrefix:"drawer:",focus:!0,saveState:!0,saveKey:"DrawerState"};e.settings=c(c({},i),t),e.breakpoint={},e.state={},e.init=function(){w(),h(),document.addEventListener("click",u,!1),document.addEventListener("touchend",u,!1),document.addEventListener("keyup",d,!1)},e.destroy=function(){O(),e.memoryTrigger=null,e.memoryTarget=null,e.state={},localStorage.removeItem(e.settings.saveKey),document.removeEventListener("click",u,!1),document.removeEventListener("touchend",u,!1),document.removeEventListener("keyup",d,!1)},e.toggle=function(t,e){g(t,e)},e.open=function(t,n){var s=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]'));s&&l(s,n)},e.close=function(t,n){var s=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]'));s&&f(s,n)};var u=function(t){var n=t.target.closest("[data-".concat(e.settings.dataToggle,"]"));if(n){var a=n.dataset[s(e.settings.dataToggle)];v(n),g(a),t.preventDefault()}else{if(n=t.target.closest("[data-".concat(e.settings.dataClose,"]"))){var r=t.target.closest("[data-".concat(e.settings.dataDrawer,"]"));f(r),t.preventDefault()}t.target.dataset[s(e.settings.dataDrawer)]&&f(t.target)}},d=function(t){if(27==t.keyCode){var n=document.querySelector(".".concat(e.settings.classModal,".").concat(e.settings.stateOpened));n&&f(n)}},g=function(t,n){var s=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]'));s&&(a(s,e.settings.stateOpened)?f(s,n):l(s,n))},l=function(t,s){a(t,e.settings.stateOpened)||(m(t),n(t,e.settings.stateOpening),r(t,e.settings.stateClosed),t.addEventListener("transitionend",(function a(){n(t,e.settings.stateOpened),r(t,e.settings.stateOpening),b(t),p(),"function"==typeof s&&s(),this.removeEventListener("transitionend",a,!0);var o=new CustomEvent(e.settings.customEventPrefix+"opened",{bubbles:!0});t.dispatchEvent(o)}),!0))},f=function(t,s){a(t,e.settings.stateOpened)&&(n(t,e.settings.stateClosing),r(t,e.settings.stateOpened),t.addEventListener("transitionend",(function a(){n(t,e.settings.stateClosed),r(t,e.settings.stateClosing),b(t),y(),"function"==typeof s&&s(),this.removeEventListener("transitionend",a,!0);var o=new CustomEvent(e.settings.customEventPrefix+"closed",{bubbles:!0});t.dispatchEvent(o)}),!0))},m=function(t){e.settings.focus&&(e.memoryTarget=t)},v=function(t){e.settings.focus&&(e.memoryTrigger=t)},p=function(){if(e.settings.focus&&e.memoryTarget){var t=e.memoryTarget.querySelector("[data-".concat(e.settings.dataFocus,"]"));t?t.focus():e.memoryTarget.focus(),e.memoryTarget=null}},y=function(){e.settings.focus&&e.memoryTrigger&&(e.memoryTrigger.focus(),e.memoryTrigger=null)},b=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(e.settings.saveState){var n=t?[t]:document.querySelectorAll("[data-".concat(e.settings.dataDrawer,"]"));n.forEach((function(t){a(t,e.settings.classModal)||(e.state[t.dataset[s(e.settings.dataDrawer)]]=a(t,e.settings.stateOpened)?e.settings.stateOpened:e.settings.stateClosed)})),localStorage.setItem(e.settings.saveKey,JSON.stringify(e.state))}},w=function(){e.settings.saveState?localStorage.getItem(e.settings.saveKey)?(e.state=JSON.parse(localStorage.getItem(e.settings.saveKey)),Object.keys(e.state).forEach((function(t){var s=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]'));s&&(e.state[t]==e.settings.stateOpened?n(s,e.settings.stateOpened):r(s,e.settings.stateOpened))}))):b():localStorage.getItem(e.settings.saveKey)&&localStorage.removeItem(e.settings.saveKey)};e.breakpoint.init=function(){h()},e.breakpoint.destroy=function(){O()},e.breakpoint.check=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;E(t)},e.switchToModal=function(t){var n=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]'));n&&D(n)},e.switchToDefault=function(t){var n=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]'));n&&L(n)};var h=function(){e.mediaQueryLists=[],document.querySelectorAll("[data-".concat(e.settings.dataBreakpoint,"]")).forEach((function(t){var n=t.dataset[s(e.settings.dataDrawer)],a=t.dataset[s(e.settings.dataBreakpoint)],r=e.settings.breakpoints[a]?e.settings.breakpoints[a]:a,o=window.matchMedia("(min-width:"+r+")");S(o,t),o.addListener(E),e.mediaQueryLists.push({mql:o,drawer:n})}))},O=function(){e.mediaQueryLists&&e.mediaQueryLists.length&&e.mediaQueryLists.forEach((function(t){t.mql.removeListener(E)})),e.mediaQueryLists=null},E=function(t){if(e.mediaQueryLists&&e.mediaQueryLists.length){e.mediaQueryLists.forEach((function(n){if(!t||t.media==n.mql.media){var s=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(n.drawer,'"]'));s&&S(n.mql,s)}}));var n=new CustomEvent(e.settings.customEventPrefix+"breakpoint",{bubbles:!0});document.dispatchEvent(n)}},S=function(t,e){t.matches?L(e):D(e)},D=function(t){n(t,e.settings.classModal),n(t,e.settings.stateClosed),r(t,e.settings.stateOpened);var s=new CustomEvent(e.settings.customEventPrefix+"toModal",{bubbles:!0});t.dispatchEvent(s)},L=function(t){r(t,e.settings.classModal);var a=t.dataset[s(e.settings.dataDrawer)];e.state[a]==e.settings.stateOpened&&(n(t,e.settings.stateOpened),r(t,e.settings.stateClosed));var o=new CustomEvent(e.settings.customEventPrefix+"toDefault",{bubbles:!0});t.dispatchEvent(o)};return e.settings.autoInit&&e.init(),e}}(this.vrembem=this.vrembem||{});
+!function(t){"use strict";var e=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t},n=function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),s=1;s<e;s++)n[s-1]=arguments[s];(t=t.forEach?t:[t]).forEach((function(t){var e;(e=t.classList).add.apply(e,n)}))},s=function(t){return t.replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()}))},a=function(t){t=t.forEach?t:[t],t=[].slice.call(t);for(var e=arguments.length,n=new Array(e>1?e-1:0),s=1;s<e;s++)n[s-1]=arguments[s];return n.some((function(e){return t.some((function(t){if(t.classList.contains(e))return!0}))}))},r=function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),s=1;s<e;s++)n[s-1]=arguments[s];(t=t.forEach?t:[t]).forEach((function(t){var e;(e=t.classList).remove.apply(e,n)}))},o={xs:"480px",sm:"620px",md:"760px",lg:"990px",xl:"1380px"};function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,s)}return n}function c(t){for(var n=1;n<arguments.length;n++){var s=null!=arguments[n]?arguments[n]:{};n%2?i(Object(s),!0).forEach((function(n){e(t,n,s[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):i(Object(s)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(s,e))}))}return t}t.Drawer=function(t){var e={},i={autoInit:!1,dataDrawer:"drawer",dataToggle:"drawer-toggle",dataOpen:"drawer-open",dataClose:"drawer-close",dataBreakpoint:"drawer-breakpoint",dataFocus:"drawer-focus",stateOpened:"is-opened",stateOpening:"is-opening",stateClosing:"is-closing",stateClosed:"is-closed",classModal:"drawer_modal",breakpoints:o,customEventPrefix:"drawer:",focus:!0,saveState:!0,saveKey:"DrawerState"};e.settings=c(c({},i),t),e.breakpoint={},e.state={},e.init=function(){y(),b(),document.addEventListener("click",d,!1),document.addEventListener("keyup",u,!1)},e.destroy=function(){w(),e.memoryTrigger=null,e.memoryTarget=null,e.state={},localStorage.removeItem(e.settings.saveKey),document.removeEventListener("click",d,!1),document.removeEventListener("keyup",u,!1)};var d=function(t){var n=t.target.closest("[data-".concat(e.settings.dataToggle,"]"));if(n){var a=n.dataset[s(e.settings.dataToggle)];return f(n),e.toggle(a),void t.preventDefault()}if(n=t.target.closest("[data-".concat(e.settings.dataOpen,"]"))){var r=n.dataset[s(e.settings.dataOpen)];return f(n),e.open(r),void t.preventDefault()}if(n=t.target.closest("[data-".concat(e.settings.dataClose,"]"))){var o=n.dataset[s(e.settings.dataClose)];if(o)f(n),e.close(o);else{var i=t.target.closest("[data-".concat(e.settings.dataDrawer,"]"));i&&e.close(i)}t.preventDefault()}else t.target.dataset[s(e.settings.dataDrawer)]&&e.close(t.target)},u=function(t){if(27==t.keyCode){var n=document.querySelector(".".concat(e.settings.classModal,".").concat(e.settings.stateOpened));n&&e.close(n)}},g=function(t){return"string"==typeof t?document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]')):t};e.toggle=function(t,n){var s=g(t);s&&(a(s,e.settings.stateOpened)?e.close(s,n):e.open(s,n))},e.open=function(t,s){var o=g(t);o&&!a(o,e.settings.stateOpened)?(l(o),n(o,e.settings.stateOpening),r(o,e.settings.stateClosed),o.addEventListener("transitionend",(function t(){n(o,e.settings.stateOpened),r(o,e.settings.stateOpening),p(o),m(),"function"==typeof s&&s(),this.removeEventListener("transitionend",t,!0);var a=new CustomEvent(e.settings.customEventPrefix+"opened",{bubbles:!0});o.dispatchEvent(a)}),!0)):o&&a(o,e.settings.stateOpened)&&(l(o),m())},e.close=function(t,s){var o=g(t);o&&a(o,e.settings.stateOpened)&&(n(o,e.settings.stateClosing),r(o,e.settings.stateOpened),o.addEventListener("transitionend",(function t(){n(o,e.settings.stateClosed),r(o,e.settings.stateClosing),p(o),v(),"function"==typeof s&&s(),this.removeEventListener("transitionend",t,!0);var a=new CustomEvent(e.settings.customEventPrefix+"closed",{bubbles:!0});o.dispatchEvent(a)}),!0))};var l=function(t){e.settings.focus&&(e.memoryTarget=t)},f=function(t){e.settings.focus&&(e.memoryTrigger=t)},m=function(){if(e.settings.focus&&e.memoryTarget){var t=e.memoryTarget.querySelector("[data-".concat(e.settings.dataFocus,"]"));t?t.focus():e.memoryTarget.focus(),e.memoryTarget=null}},v=function(){e.settings.focus&&e.memoryTrigger&&(e.memoryTrigger.focus(),e.memoryTrigger=null)},p=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(e.settings.saveState){var n=t?[t]:document.querySelectorAll("[data-".concat(e.settings.dataDrawer,"]"));n.forEach((function(t){a(t,e.settings.classModal)||(e.state[t.dataset[s(e.settings.dataDrawer)]]=a(t,e.settings.stateOpened)?e.settings.stateOpened:e.settings.stateClosed)})),localStorage.setItem(e.settings.saveKey,JSON.stringify(e.state))}},y=function(){e.settings.saveState?localStorage.getItem(e.settings.saveKey)?(e.state=JSON.parse(localStorage.getItem(e.settings.saveKey)),Object.keys(e.state).forEach((function(t){var s=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]'));s&&(e.state[t]==e.settings.stateOpened?n(s,e.settings.stateOpened):r(s,e.settings.stateOpened))}))):p():localStorage.getItem(e.settings.saveKey)&&localStorage.removeItem(e.settings.saveKey)};e.breakpoint.init=function(){b()},e.breakpoint.destroy=function(){w()},e.breakpoint.check=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;O(t)},e.switchToModal=function(t){var n=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]'));n&&E(n)},e.switchToDefault=function(t){var n=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(t,'"]'));n&&D(n)};var b=function(){e.mediaQueryLists=[],document.querySelectorAll("[data-".concat(e.settings.dataBreakpoint,"]")).forEach((function(t){var n=t.dataset[s(e.settings.dataDrawer)],a=t.dataset[s(e.settings.dataBreakpoint)],r=e.settings.breakpoints[a]?e.settings.breakpoints[a]:a,o=window.matchMedia("(min-width:"+r+")");h(o,t),o.addListener(O),e.mediaQueryLists.push({mql:o,drawer:n})}))},w=function(){e.mediaQueryLists&&e.mediaQueryLists.length&&e.mediaQueryLists.forEach((function(t){t.mql.removeListener(O)})),e.mediaQueryLists=null},O=function(t){if(e.mediaQueryLists&&e.mediaQueryLists.length){e.mediaQueryLists.forEach((function(n){if(!t||t.media==n.mql.media){var s=document.querySelector("[data-".concat(e.settings.dataDrawer,'="').concat(n.drawer,'"]'));s&&h(n.mql,s)}}));var n=new CustomEvent(e.settings.customEventPrefix+"breakpoint",{bubbles:!0});document.dispatchEvent(n)}},h=function(t,e){t.matches?D(e):E(e)},E=function(t){n(t,e.settings.classModal),n(t,e.settings.stateClosed),r(t,e.settings.stateOpened);var s=new CustomEvent(e.settings.customEventPrefix+"toModal",{bubbles:!0});t.dispatchEvent(s)},D=function(t){r(t,e.settings.classModal);var a=t.dataset[s(e.settings.dataDrawer)];e.state[a]==e.settings.stateOpened&&(n(t,e.settings.stateOpened),r(t,e.settings.stateClosed));var o=new CustomEvent(e.settings.customEventPrefix+"toDefault",{bubbles:!0});t.dispatchEvent(o)};return e.settings.autoInit&&e.init(),e}}(this.vrembem=this.vrembem||{});

index.js

@@ -18,2 +18,3 @@ import {
     dataToggle: 'drawer-toggle',
+    dataOpen: 'drawer-open',
     dataClose: 'drawer-close',
@@ -50,5 +51,4 @@ dataBreakpoint: 'drawer-breakpoint',
     breakpointInit();
-    document.addEventListener('click', run, false);
-    document.addEventListener('touchend', run, false);
-    document.addEventListener('keyup', escape, false);
+    document.addEventListener('click', handler, false);
+    document.addEventListener('keyup', handlerEscape, false);
   };
@@ -62,27 +62,8 @@
     localStorage.removeItem(api.settings.saveKey);
-    document.removeEventListener('click', run, false);
-    document.removeEventListener('touchend', run, false);
-    document.removeEventListener('keyup', escape, false);
+    document.removeEventListener('click', handler, false);
+    document.removeEventListener('keyup', handlerEscape, false);
   };
 
-  api.toggle = (drawerKey, callback) => {
-    toggle(drawerKey, callback);
-  };
-
-  api.open = (drawerKey, callback) => {
-    const drawer = document.querySelector(
-      `[data-${api.settings.dataDrawer}="${drawerKey}"]`
-    );
-    if (drawer) open(drawer, callback);
-  };
-
-  api.close = (drawerKey, callback) => {
-    const drawer = document.querySelector(
-      `[data-${api.settings.dataDrawer}="${drawerKey}"]`
-    );
-    if (drawer) close(drawer, callback);
-  };
-
-  const run = (event) => {
-    // Trigger click
+  const handler = (event) => {
+    // Toggle data trigger
     let trigger = event.target.closest(`[data-${api.settings.dataToggle}]`);
@@ -92,20 +73,40 @@ if (trigger) {
       saveTrigger(trigger);
-      toggle(selector);
+      api.toggle(selector);
       event.preventDefault();
-    } else {
-      // Close click
-      trigger = event.target.closest(`[data-${api.settings.dataClose}]`);
-      if (trigger) {
+      return;
+    }
+
+    // Open data trigger
+    trigger = event.target.closest(`[data-${api.settings.dataOpen}]`);
+    if (trigger) {
+      const selector = trigger.dataset[camelCase(api.settings.dataOpen)];
+      saveTrigger(trigger);
+      api.open(selector);
+      event.preventDefault();
+      return;
+    }
+
+    // Close data trigger
+    trigger = event.target.closest(`[data-${api.settings.dataClose}]`);
+    if (trigger) {
+      const selector = trigger.dataset[camelCase(api.settings.dataClose)];
+      if (selector) {
+        saveTrigger(trigger);
+        api.close(selector);
+      } else {
         const target = event.target.closest(`[data-${api.settings.dataDrawer}]`);
-        close(target);
-        event.preventDefault();
+        if (target) api.close(target);
       }
-      // Root click
-      if (event.target.dataset[camelCase(api.settings.dataDrawer)]) {
-        close(event.target);
-      }
+      event.preventDefault();
+      return;
     }
+
+    // Screen modal trigger
+    if (event.target.dataset[camelCase(api.settings.dataDrawer)]) {
+      api.close(event.target);
+      return;
+    }
   };
 
-  const escape = (event) => {
+  const handlerEscape = (event) => {
     if (event.keyCode == 27) {
@@ -116,3 +117,3 @@ const target = document.querySelector(
       if (target) {
-        close(target);
+        api.close(target);
       }
@@ -122,12 +123,20 @@ }
 
-  const toggle = (drawerKey, callback) => {
-    const drawer = document.querySelector(
-      `[data-${api.settings.dataDrawer}="${drawerKey}"]`
-    );
+  const drawerKeyCheck = (drawerKey) => {
+    if (typeof drawerKey === 'string') {
+      return document.querySelector(
+        `[data-${api.settings.dataDrawer}="${drawerKey}"]`
+      );
+    } else {
+      return drawerKey;
+    }
+  };
+
+  api.toggle = (drawerKey, callback) => {
+    const drawer = drawerKeyCheck(drawerKey);
     if (drawer) {
       const isOpen = hasClass(drawer, api.settings.stateOpened);
       if (!isOpen) {
-        open(drawer, callback);
+        api.open(drawer, callback);
       } else {
-        close(drawer, callback);
+        api.close(drawer, callback);
       }
@@ -137,4 +146,5 @@ }
 
-  const open = (drawer, callback) => {
-    if (!hasClass(drawer, api.settings.stateOpened)) {
+  api.open = (drawerKey, callback) => {
+    const drawer = drawerKeyCheck(drawerKey);
+    if (drawer && !hasClass(drawer, api.settings.stateOpened)) {
       saveTarget(drawer);
@@ -155,7 +165,11 @@ addClass(drawer, api.settings.stateOpening);
       }, true);
+    } else if (drawer && hasClass(drawer, api.settings.stateOpened)) {
+      saveTarget(drawer);
+      setFocus();
     }
   };
 
-  const close = (drawer, callback) => {
-    if (hasClass(drawer, api.settings.stateOpened)) {
+  api.close = (drawerKey, callback) => {
+    const drawer = drawerKeyCheck(drawerKey);
+    if (drawer && hasClass(drawer, api.settings.stateOpened)) {
       addClass(drawer, api.settings.stateClosing);
@@ -162,0 +176,0 @@ removeClass(drawer, api.settings.stateOpened);

package.json

 {
   "name": "@vrembem/drawer",
   "description": "A container component that slides in from the left or right. Typically containing menus, search or other content.",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "license": "MIT",
@@ -42,3 +42,3 @@ "keywords": [
   },
-  "gitHead": "406c97be7a2993d92d081d63ec41b19536987d03"
+  "gitHead": "ea5fdfbfaf0c7e879aac982b5c908c3455f27228"
 }

README.md

@@ -30,7 +30,8 @@ # Drawer
 
-Drawers are composed using classes for styling and data attributes for JavaScript functionality. To link a drawer toggle to a drawer, use a unique identifier as the values for both of their respective data attributes. Close buttons are left value-less and should be placed inside the drawer element they’re meant to close.
+Drawers are composed using classes for styling and data attributes for JavaScript functionality. To link a drawer toggle, open or close trigger to a drawer, use a unique identifier as the values for both the trigger and drawer's respective data attributes. Close buttons can be left value-less if placed inside a drawer element they're meant to close.
 
 - `data-drawer="[unique-id]"`
 - `data-drawer-toggle="[unique-id]"`
-- `data-drawer-close`
+- `data-drawer-open="[unique-id]"`
+- `data-drawer-close="[unique-id]"` (or value-less if inside drawer)
 
@@ -46,2 +47,4 @@ ```html
     <button data-drawer-toggle="[unique-id]">...</button>
+    <button data-drawer-open="[unique-id]">...</button>
+    <button data-drawer-close="[unique-id]">...</button>
   </div>
@@ -88,3 +91,3 @@ </div>
 
-If a drawer has the attribute `tabindex="-1"`, it will be given focus when it's opened. If focus on a specific element inside a drawer is prefered, give it the `data-drawer-focus` attribute. The focus in either case is returned to the trigger element once the drawer is closed. Focus handling can be disabled using the `{ focus: false }` setting.
+If a drawer has the attribute `tabindex="-1"`, it will be given focus when it's opened. If focus on a specific element inside a drawer is preferred, give it the `data-drawer-focus` attribute. The focus in either case is returned to the trigger element once the drawer is closed. Focus handling can be disabled using the `{ focus: false }` setting.
 
@@ -187,10 +190,2 @@ ```html
 
-### JavaScript Events
-
-- `drawer:opened` Emits when the drawer has opened.
-- `drawer:closed` Emits when the drawer has closed.
-- `drawer:breakpoint` Emits when the drawer has hit a breakpoint.
-- `drawer:toModal` Emits when the drawer is switched to it's modal state.
-- `drawer:toDefault` Emits when the drawer is switched to it's default state.
-
 ### JavaScript Options
@@ -217,6 +212,14 @@
 
-### JavaScript API
+## Events
 
-#### `drawer.init()`
+- `drawer:opened` Emits when the drawer has opened.
+- `drawer:closed` Emits when the drawer has closed.
+- `drawer:breakpoint` Emits when the drawer has hit a breakpoint.
+- `drawer:toModal` Emits when the drawer is switched to it's modal state.
+- `drawer:toDefault` Emits when the drawer is switched to it's default state.
 
+## API
+
+### `drawer.init()`
+
 Initializes the drawer instance.
@@ -229,3 +232,3 @@
 
-#### `drawer.destroy()`
+### `drawer.destroy()`
 
@@ -241,3 +244,3 @@ Destroys and cleans up the drawer instantiation.
 
-#### `drawer.toggle(key, callback)`
+### `drawer.toggle(key, callback)`
 
@@ -248,4 +251,4 @@ Toggles a drawer when provided the drawer key and optional callback.
 
-- `key` A unique key to a drawer HTML element.
-- `callback` (optional) A callback function to be run after the toggle is completed.
+- `key [String]` A unique key that matches the value of a drawer `data-drawer` attribute.
+- `callback [Function]` (optional) A callback function to be run after the toggle process is completed.
 
@@ -262,3 +265,3 @@ ```html
 
-#### `drawer.open(key, callback)`
+### `drawer.open(key, callback)`
 
@@ -269,4 +272,4 @@ Opens a drawer when provided the drawer key and optional callback.
 
-- `key` A unique key to a drawer HTML element.
-- `callback` (optional) A callback function to be run after the open is completed.
+- `key [String]` A unique key that matches the value of a drawer `data-drawer` attribute.
+- `callback [Function]` (optional) A callback function to be run after the open process is completed.
 
@@ -283,3 +286,3 @@ ```html
 
-#### `drawer.close(key, callback)`
+### `drawer.close(key, callback)`
 
@@ -290,4 +293,4 @@ Closes a drawer when provided the drawer key and optional callback.
 
-- `key` A unique key to a drawer HTML element.
-- `callback` (optional) A callback function to be run after the close is completed.
+- `key [String]` A unique key that matches the value of a drawer `data-drawer` attribute.
+- `callback [Function]` (optional) A callback function to be run after the close process is completed.
 
@@ -304,15 +307,15 @@ ```html
 
-#### `drawer.breakpoint.init()`
+### `drawer.breakpoint.init()`
 
 Initializes the drawer breakpoint feature.
 
-#### `drawer.breakpoint.destroy()`
+### `drawer.breakpoint.destroy()`
 
 Destroys the drawer breakpoint feature.
 
-#### `drawer.breakpoint.check()`
+### `drawer.breakpoint.check()`
 
 Force a check of any drawers that meet their breakpoint condition. If their state doesn't match the current breakpoint condition, they'll be updated.
 
-#### `drawer.switchToModal(key)`
+### `drawer.switchToModal(key)`
 
@@ -323,3 +326,3 @@ Switches a drawer to it's modal state.
 
-- `key` A unique key to a drawer HTML element.
+- `key [String]` A unique key that matches the value of a drawer `data-drawer` attribute.
 
@@ -334,3 +337,3 @@ ```html
 
-#### `drawer.switchToDefault(key)`
+### `drawer.switchToDefault(key)`
 
@@ -341,6 +344,6 @@ Switches a drawer to it's default state.
 
-- `key` A unique key to a drawer HTML element.
+- `key [String]` A unique key that matches the value of a drawer `data-drawer` attribute.
 
 ```html
-<div class="drawer" data-drawer="drawer-key">...</div>
+<div class="drawer drawer_modal" data-drawer="drawer-key">...</div>
 ```
@@ -347,0 +350,0 @@

tests/focus.test.js

@@ -28,2 +28,5 @@ import { Drawer } from '../index.js';
       </button>
+      <button class="toggle-three" data-drawer-open="drawer-two">
+        Drawer Open
+      </button>
     </div>
@@ -127,1 +130,19 @@ </div>
 });
+
+test('should re-focus the target if open triggers while drawer is already opened', () => {
+  document.body.innerHTML = markup;
+  drawer = new Drawer({ autoInit: true });
+  const el = document.querySelector('[data-drawer="drawer-two"]');
+  const elFocus = el.querySelector('[data-drawer-focus]');
+  const btn = document.querySelector('.toggle-three');
+
+  btn.click();
+  el.dispatchEvent(ev);
+  expect(elFocus).toHaveFocus();
+
+  elFocus.blur();
+
+  btn.click();
+  el.dispatchEvent(ev);
+  expect(elFocus).toHaveFocus();
+});

tests/transition.test.js

@@ -16,2 +16,5 @@ import { Drawer } from '../index.js';
       <button data-drawer-toggle="drawer-default">Drawer Toggle</button>
+      <button data-drawer-open="drawer-default">Drawer Open</button>
+      <button data-drawer-close="drawer-default">Drawer Close</button>
+      <button class="drawer-close-empty" data-drawer-close>Drawer Close</button>
     </div>
@@ -81,2 +84,46 @@ </div>
 
+test('should open and close drawer using data attribute triggers', () => {
+  document.body.innerHTML = markup;
+  drawer = new Drawer();
+  const el = document.querySelector('[data-drawer]');
+  const btnOpen = document.querySelector('[data-drawer-open="drawer-default"]');
+  const btnClose = document.querySelector('[data-drawer-close="drawer-default"]');
+
+  drawer.init();
+  expect(el).toHaveClass('drawer is-closed');
+
+  btnOpen.click();
+  expect(el).toHaveClass('is-opening');
+
+  el.dispatchEvent(ev);
+  expect(el).toHaveClass('is-opened');
+
+  btnClose.click();
+  expect(el).toHaveClass('is-closing');
+
+  el.dispatchEvent(ev);
+  expect(el).toHaveClass('drawer is-closed');
+  expect(el).not.toHaveClass('is-opening is-opened is-closing');
+});
+
+test('should not throw error if drawer close button doesn\'t find a drawer', () => {
+  document.body.innerHTML = markup;
+  drawer = new Drawer();
+  const el = document.querySelector('[data-drawer]');
+  const btnOpen = document.querySelector('[data-drawer-open="drawer-default"]');
+  const btnClose = document.querySelector('.drawer-close-empty');
+
+  drawer.init();
+  expect(el).toHaveClass('drawer is-closed');
+
+  btnOpen.click();
+  expect(el).toHaveClass('is-opening');
+
+  el.dispatchEvent(ev);
+  expect(el).toHaveClass('is-opened');
+
+  btnClose.click();
+  expect(el).not.toHaveClass('is-closing');
+});
+
 test('should apply state classes with custom data attributes', () => {
@@ -83,0 +130,0 @@ document.body.innerHTML = markupCustomAttr;

No alert changes

Improved metrics

Total package byte prevSize

121055

increased by4.47%

Lines of code

2461

increased by4.19%

Number of lines in readme file

338

increased by0.9%

No dependency changes