focus fix, shorter scoped variables

FrDH · Apr 2, 2022 · 51a1b82 · 51a1b82
1 parent fe19ccc
commit 51a1b82
Show file tree

Hide file tree

Showing 36 changed files with 133 additions and 127 deletions.
diff --git a/demo/default.html b/demo/default.html
@@ -60,11 +60,7 @@ <h1>This is a demo.</h1>
         <!-- mmenu scripts -->
         <script src="../dist/mmenu.js"></script>
         <script>
-            new Mmenu(document.querySelector("#menu"), {
-                offCanvas: {
-                    position: "left-front",
-                },
-            });
+            new Mmenu(document.querySelector("#menu"));
 
             document.addEventListener("click", function (evnt) {
                 var anchor = evnt.target.closest('a[href="#/"]');

diff --git a/dist/addons/sectionindexer/mmenu.sectionindexer.css b/dist/addons/sectionindexer/mmenu.sectionindexer.css
diff --git a/dist/core/offcanvas/configs.js b/dist/core/offcanvas/configs.js
@@ -1,7 +1,7 @@
 const configs = {
     clone: false,
     menu: {
-        insertMethod: 'prepend',
+        insertMethod: 'append',
         insertSelector: 'body'
     },
     page: {

diff --git a/dist/core/offcanvas/mmenu.offcanvas.css b/dist/core/offcanvas/mmenu.offcanvas.css
diff --git a/dist/core/offcanvas/mmenu.offcanvas.js b/dist/core/offcanvas/mmenu.offcanvas.js
@@ -25,21 +25,6 @@ export default function () {
     }
     //	Add methods to the API.
     this._api.push('open', 'close', 'setPage');
-    //	Setup the UI blocker.
-    if (!Mmenu.node.blck) {
-        this.bind('initMenu:before', () => {
-            /** The UI blocker node. */
-            const blocker = DOM.create('a.mm-wrapper__blocker.mm-blocker.mm-slideout');
-            blocker.id = uniqueId();
-            blocker.title = this.i18n(configs.screenReader.closeMenu);
-            //  Make the blocker able to receive focus.
-            blocker.setAttribute('tabindex', '-1');
-            //	Append the blocker node to the body.
-            document.querySelector(configs.menu.insertSelector).append(blocker);
-            //	Store the blocker node.
-            Mmenu.node.blck = blocker;
-        });
-    }
     //  Clone menu and prepend it to the <body>.
     this.bind('initMenu:before', () => {
         //	Clone if needed.
@@ -59,6 +44,21 @@ export default function () {
         //	Prepend to the <body>
         this.node.wrpr[configs.menu.insertMethod](this.node.menu);
     });
+    //	Setup the UI blocker.
+    if (!Mmenu.node.blck) {
+        this.bind('initMenu:before', () => {
+            /** The UI blocker node. */
+            const blocker = DOM.create('a.mm-wrapper__blocker.mm-blocker.mm-slideout');
+            blocker.id = uniqueId();
+            blocker.title = this.i18n(configs.screenReader.closeMenu);
+            //  Make the blocker able to receive focus.
+            blocker.tabIndex = 0;
+            //	Append the blocker node to the body.
+            document.querySelector(configs.menu.insertSelector).append(blocker);
+            //	Store the blocker node.
+            Mmenu.node.blck = blocker;
+        });
+    }
     this.bind('initMenu:after', () => {
         //	Setup the page.
         this.setPage(Mmenu.node.page);
@@ -142,8 +142,11 @@ Mmenu.prototype.close = function () {
     this.node.wrpr.classList.remove('mm-wrapper--opened');
     Mmenu.node.blck.classList.remove('mm-blocker--blocking');
     //  Focus opening link or page.
-    const focus = this.node.open || document.querySelector(`[href="#${this.node.menu.id}"]`) || this.node.page || null;
+    const focus = this.node.open || document.querySelector(`[href="#${this.node.menu.id}"]`) || Mmenu.node.page || null;
     (_a = focus) === null || _a === void 0 ? void 0 : _a.focus();
+    // Prevent html/body from scrolling due to focus.
+    document.documentElement.scrollLeft = 0;
+    document.body.scrollLeft = 0;
     //	Invoke "after" hook.
     this.trigger('close:after');
 };
@@ -180,7 +183,7 @@ Mmenu.prototype.setPage = function (page) {
     //	Invoke "before" hook.
     this.trigger('setPage:before', [page]);
     //  Make the page able to receive focus.
-    page.setAttribute('tabindex', '-1');
+    page.tabIndex = -1;
     //  Set the classes
     page.classList.add('mm-page', 'mm-slideout');
     //  Set the ID.