MDL-66477 javascript: add toggle functionality to drawer

lib/amd/build/drawer.min.js

@@ -1,2 +1,2 @@
-define ("core/drawer",["exports","jquery","core/pubsub","core/drawer_events"],function(a,b,c,d){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=e(b);c=function(a){if(a&&a.__esModule){return a}else{var b={};if(null!=a){for(var c in a){if(Object.prototype.hasOwnProperty.call(a,c)){var d=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(a,c):{};if(d.get||d.set){Object.defineProperty(b,c,d)}else{b[c]=a[c]}}}}b.default=a;return b}}(c);d=e(d);function e(a){return a&&a.__esModule?a:{default:a}}var f=function(a){a.removeClass("hidden");a.attr("aria-expanded",!0);a.attr("aria-hidden",!1);c.publish(d.default.DRAWER_SHOWN,a)},g=function(a){a.addClass("hidden");a.attr("aria-expanded",!1);a.attr("aria-hidden",!0);c.publish(d.default.DRAWER_HIDDEN,a)},h=function(a){a=(0,b.default)(a);return a.closest("[data-region=\"right-hand-drawer\"]")};a.default={hide:g,show:f,isVisible:function isVisible(a){var b=a.hasClass("hidden");return!b},getDrawerRoot:h};return a.default});
+define ("core/drawer",["exports","jquery","core/pubsub","core/drawer_events"],function(a,b,c,d){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=e(b);c=function(a){if(a&&a.__esModule){return a}else{var b={};if(null!=a){for(var c in a){if(Object.prototype.hasOwnProperty.call(a,c)){var d=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(a,c):{};if(d.get||d.set){Object.defineProperty(b,c,d)}else{b[c]=a[c]}}}}b.default=a;return b}}(c);d=e(d);function e(a){return a&&a.__esModule?a:{default:a}}var f=function(a){a.removeClass("hidden");a.attr("aria-expanded",!0);a.attr("aria-hidden",!1);a.focus();c.publish(d.default.DRAWER_SHOWN,a)},g=function(a){a.addClass("hidden");a.attr("aria-expanded",!1);a.attr("aria-hidden",!0);c.publish(d.default.DRAWER_HIDDEN,a)},h=function(a){var b=a.hasClass("hidden");return!b},i=function(a){if(h(a)){g(a)}else{f(a)}},j=function(a){a=(0,b.default)(a);return a.closest("[data-region=\"right-hand-drawer\"]")};a.default={hide:g,show:f,isVisible:h,toggle:i,registerToggles:function registerToggles(a,b){var c=null;b.attr("aria-expanded",h(a));b.on("click",function(d){d.preventDefault();var e=h(a);i(a);b.attr("aria-expanded",!e);if(!e){c=b.filter(function(a,b){return b==d.target||b.contains(d.target)})}else if(c){c.focus();c=null}})},getDrawerRoot:j};return a.default});
 //# sourceMappingURL=drawer.min.js.map

lib/amd/src/drawer.js

@@ -33,6 +33,8 @@ const show = (root) => {
     root.removeClass('hidden');
     root.attr('aria-expanded', true);
     root.attr('aria-hidden', false);
+    root.focus();
+
     PubSub.publish(DrawerEvents.DRAWER_SHOWN, root);
 };
 
@@ -59,6 +61,49 @@ const isVisible = (root) => {
     return !isHidden;
 };
 
+/**
+ * Toggle the drawer visibility.
+ *
+ * @param {Object} root The drawer container.
+ */
+const toggle = (root) => {
+    if (isVisible(root)) {
+        hide(root);
+    } else {
+        show(root);
+    }
+};
+
+/**
+ * Add event listeners to toggle the drawer.
+ *
+ * @param {Object} root The drawer container.
+ * @param {Object} toggleElements The toggle elements.
+ */
+const registerToggles = (root, toggleElements) => {
+    let openTrigger = null;
+    toggleElements.attr('aria-expanded', isVisible(root));
+
+    toggleElements.on('click', (e) => {
+        e.preventDefault();
+        const wasVisible = isVisible(root);
+        toggle(root);
+        toggleElements.attr('aria-expanded', !wasVisible);
+
+        if (!wasVisible) {
+            // Remember which trigger element opened the drawer.
+            openTrigger = toggleElements.filter((index, element) => {
+                return element == e.target || element.contains(e.target);
+            });
+        } else if (openTrigger) {
+            // The drawer has gone from open to close so we need to set the focus back
+            // to the element that openend it.
+            openTrigger.focus();
+            openTrigger = null;
+        }
+    });
+};
+
 /**
  * Find the root element of the drawer based on the using the drawer content root's ID.
  *
@@ -74,5 +119,7 @@ export default {
     hide: hide,
     show: show,
     isVisible: isVisible,
+    toggle: toggle,
+    registerToggles: registerToggles,
     getDrawerRoot: getDrawerRoot
 };

lib/templates/drawer.mustache

@@ -38,6 +38,7 @@
     aria-hidden="true"
     data-region="right-hand-drawer"
     role="region"
+    tabindex="-1"
 >
     {{$drawercontent}}{{/drawercontent}}
 </div>

theme/boost/scss/moodle/drawer.scss

@@ -100,7 +100,7 @@ $right-drawer-width: 320px;
 [data-region=right-hand-drawer] {
     display: flex;
     flex-direction: column;
-    @include transition();
+    @include transition(right .2s ease-in-out);
 
     &.drawer {
         z-index: $zindex-sticky;
@@ -111,11 +111,19 @@ $right-drawer-width: 320px;
         width: $right-drawer-width;
         box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
         padding: 0;
+        visibility: visible;
+        opacity: 1;
     }
 
     &.hidden {
         display: block;
         right: $right-drawer-width * -1;
+        // Turn off visibility so that nothing in the drawer can receive focus when
+        // it is hidden.
+        visibility: hidden;
+        opacity: 0;
+        // Delay visibility changes until after the slide right animation has completed.
+        @include transition(right .2s ease-in-out, visibility 0s ease-in-out .2s, opacity 0s ease-in-out .2s);
     }
 }
 .dir-rtl {

theme/boost/style/moodle.css

@@ -13600,7 +13600,7 @@ body.drawer-ease {
 [data-region=right-hand-drawer] {
   display: flex;
   flex-direction: column;
-  transition: all 0.2s ease-in-out; }
+  transition: right 0.2s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
     [data-region=right-hand-drawer] {
       transition: none; } }
@@ -13612,10 +13612,18 @@ body.drawer-ease {
     height: calc(100% - 50px);
     width: 320px;
     box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
-    padding: 0; }
+    padding: 0;
+    visibility: visible;
+    opacity: 1; }
   [data-region=right-hand-drawer].hidden {
     display: block;
-    right: -320px; }
+    right: -320px;
+    visibility: hidden;
+    opacity: 0;
+    transition: right 0.2s ease-in-out, visibility 0s ease-in-out 0.2s, opacity 0s ease-in-out 0.2s; }
+    @media (prefers-reduced-motion: reduce) {
+      [data-region=right-hand-drawer].hidden {
+        transition: none; } }
 
 .dir-rtl [data-region=right-hand-drawer] {
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }

theme/classic/style/moodle.css

@@ -13861,7 +13861,7 @@ body.drawer-ease {
 [data-region=right-hand-drawer] {
   display: flex;
   flex-direction: column;
-  transition: all 0.2s ease-in-out; }
+  transition: right 0.2s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
     [data-region=right-hand-drawer] {
       transition: none; } }
@@ -13873,10 +13873,18 @@ body.drawer-ease {
     height: calc(100% - 50px);
     width: 320px;
     box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
-    padding: 0; }
+    padding: 0;
+    visibility: visible;
+    opacity: 1; }
   [data-region=right-hand-drawer].hidden {
     display: block;
-    right: -320px; }
+    right: -320px;
+    visibility: hidden;
+    opacity: 0;
+    transition: right 0.2s ease-in-out, visibility 0s ease-in-out 0.2s, opacity 0s ease-in-out 0.2s; }
+    @media (prefers-reduced-motion: reduce) {
+      [data-region=right-hand-drawer].hidden {
+        transition: none; } }
 
 .dir-rtl [data-region=right-hand-drawer] {
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }