From 65e84f4470a2dd9190b291dd4909a00f063d1fc5 Mon Sep 17 00:00:00 2001 From: Kombie Date: Mon, 9 Mar 2020 08:39:25 +0000 Subject: [PATCH] [refactor] improve menu tab index --- src/css/menu.css | 12 +- src/html/menu/content/bookmarks/name.html | 4 +- src/html/menu/content/groups/names.html | 2 +- src/html/menu/content/header/coloraccent.html | 2 +- src/html/menu/content/header/editadd.html | 2 +- src/html/menu/content/header/search.html | 2 +- src/html/menu/content/theme/color.html | 2 +- src/html/menu/content/theme/fonts.html | 12 +- src/html/menu/nav.html | 16 +- src/js/menu.js | 310 ++++++++++++------ 10 files changed, 228 insertions(+), 136 deletions(-) diff --git a/src/css/menu.css b/src/css/menu.css index 04db062c..ec689b1d 100755 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -86,7 +86,7 @@ border-radius: 0; } -.menu-nav-body { +.menu-subnav { display: none; } @@ -115,7 +115,7 @@ } .menu-content-item { - padding: calc(var(--menu-space) * 1) calc(var(--menu-space) * 2); + padding: calc(var(--menu-space) * 3); position: relative; z-index: 1; } @@ -215,7 +215,7 @@ justify-content: flex-start; } - .menu-nav-body { + .menu-subnav { background-color: rgb(var(--theme-color-02)); display: flex; flex-direction: column; @@ -225,11 +225,11 @@ transition: height var(--layout-timing-extra-fast); } - .menu-nav-body.active { - height: var(--menu-nav-body-height); + .menu-subnav.active { + height: var(--menu-subnav-height); } - .is-edge .menu-nav-body { + .is-edge .menu-subnav { background-color: rgba(var(--theme-color-02), 0.5); } diff --git a/src/html/menu/content/bookmarks/name.html b/src/html/menu/content/bookmarks/name.html index 4b077538..11a9e403 100644 --- a/src/html/menu/content/bookmarks/name.html +++ b/src/html/menu/content/bookmarks/name.html @@ -5,12 +5,12 @@
- +
- +
diff --git a/src/html/menu/content/groups/names.html b/src/html/menu/content/groups/names.html index 79b8f03d..f3c847b2 100644 --- a/src/html/menu/content/groups/names.html +++ b/src/html/menu/content/groups/names.html @@ -10,7 +10,7 @@
- +
diff --git a/src/html/menu/content/header/coloraccent.html b/src/html/menu/content/header/coloraccent.html index b4643466..50559d4c 100644 --- a/src/html/menu/content/header/coloraccent.html +++ b/src/html/menu/content/header/coloraccent.html @@ -5,7 +5,7 @@
- +

Colour and Accent can also be found under Theme.

diff --git a/src/html/menu/content/header/editadd.html b/src/html/menu/content/header/editadd.html index a962b158..c4665222 100644 --- a/src/html/menu/content/header/editadd.html +++ b/src/html/menu/content/header/editadd.html @@ -5,7 +5,7 @@
- +
diff --git a/src/html/menu/content/header/search.html b/src/html/menu/content/header/search.html index c655768d..a780c332 100644 --- a/src/html/menu/content/header/search.html +++ b/src/html/menu/content/header/search.html @@ -10,7 +10,7 @@
- +
diff --git a/src/html/menu/content/theme/color.html b/src/html/menu/content/theme/color.html index 5d559f0e..769ea75a 100644 --- a/src/html/menu/content/theme/color.html +++ b/src/html/menu/content/theme/color.html @@ -5,7 +5,7 @@
-

Colour shades

+

Shades

diff --git a/src/html/menu/content/theme/fonts.html b/src/html/menu/content/theme/fonts.html index cfcb812f..7b52e930 100644 --- a/src/html/menu/content/theme/fonts.html +++ b/src/html/menu/content/theme/fonts.html @@ -4,7 +4,7 @@
- +
@@ -23,7 +23,7 @@
- +
@@ -42,7 +42,7 @@
- +
@@ -64,7 +64,7 @@
- +
@@ -84,7 +84,7 @@
- +
@@ -103,7 +103,7 @@
- +
diff --git a/src/html/menu/nav.html b/src/html/menu/nav.html index 57a6adeb..5a3a60ca 100644 --- a/src/html/menu/nav.html +++ b/src/html/menu/nav.html @@ -1,7 +1,7 @@
- -
+ +
Scaling Area Alignment @@ -12,7 +12,7 @@
-
+
Area Alignment Order @@ -31,7 +31,7 @@
-
+
Area Alignment Bookmarks @@ -48,7 +48,7 @@
-
+
Area Order Names @@ -58,7 +58,7 @@
-
+
Preset Saved Style @@ -72,14 +72,14 @@
-
+
Colour Image
-
+
Restore Backup Clear diff --git a/src/js/menu.js b/src/js/menu.js index 7bb4544d..5c3bb119 100644 --- a/src/js/menu.js +++ b/src/js/menu.js @@ -1,5 +1,31 @@ var menu = (function() { + var bind = {}; + + bind.focus = { + loop: function(event) { + var firstElement = helper.e(".control-menu-layout"); + var lastElement = helper.e(".menu-close-tab"); + if (event.keyCode == 9 && event.shiftKey) { + if (document.activeElement === firstElement) { + lastElement.focus(); + event.preventDefault(); + } + } else if (event.keyCode == 9) { + if (document.activeElement === lastElement) { + firstElement.focus(); + event.preventDefault(); + } + }; + }, + add: function() { + window.addEventListener("keydown", bind.focus.loop, false); + }, + remove: function() { + window.removeEventListener("keydown", bind.focus.loop, false); + } + }; + var mod = {}; mod.open = function() { @@ -18,85 +44,137 @@ var menu = (function() { }); }; - var render = {}; - - render.scrollToTop = function(name) { - if (window.innerWidth < 700) { - helper.e(".menu-area").scrollTop = 0; - } else { - if (name) { - helper.e(".menu-content-" + name).scrollTop = 0; - } else { - var allMenuContentArea = helper.eA(".menu-content"); - allMenuContentArea.forEach(function(arrayItem, index) { - arrayItem.scrollTop = 0; - }); - }; - }; - }; - - render.nav = function(name) { - var allMenuNavTab = helper.eA(".menu-nav-tab"); - var allMenuContentArea = helper.eA(".menu-content"); - - allMenuNavTab.forEach(function(arrayItem, index) { - helper.removeClass(arrayItem, "active"); - }); - allMenuContentArea.forEach(function(arrayItem, index) { - helper.addClass(arrayItem, "is-hidden"); - }); - - var control = helper.e(".control-menu-" + name); - var content = helper.e(".menu-content-" + name); - - if (control) { - helper.addClass(control, "active"); - }; - if (content) { - helper.removeClass(content, "is-hidden"); - }; - }; - - render.subnav = { - calculate: function() { - var allMenuNavBody = helper.eA(".menu-nav-body"); - allMenuNavBody.forEach(function(arrayItem, index) { - arrayItem.setAttribute("style", "--menu-nav-body-height:" + arrayItem.getBoundingClientRect().height + "px;"); - if (index > 0) { - helper.removeClass(arrayItem, "active"); - }; - }); + mod.nav = { + state: { + layout: true, + header: false, + bookmarks: false, + groups: false, + theme: false, + background: false, + data: false, + coffee: false, + nighttab: false }, toggle: function(name) { - var allMenuNavBody = helper.eA(".menu-nav-body"); - allMenuNavBody.forEach(function(arrayItem, index) { - helper.removeClass(arrayItem, "active"); + for (var key in mod.nav.state) { + mod.nav.state[key] = false; + }; + mod.nav.state[name] = true; + } + }; + + render = {}; + + render.panel = function() { + if (state.get.current().menu) { + helper.addClass(helper.e("html"), "is-menu-open"); + } else { + helper.removeClass(helper.e("html"), "is-menu-open"); + }; + }; + + render.nav = { + active: function() { + for (var key in mod.nav.state) { + if (mod.nav.state[key]) { + helper.removeClass(helper.e(".menu-content-" + key), "is-hidden"); + } else { + helper.addClass(helper.e(".menu-content-" + key), "is-hidden"); + }; + }; + }, + tabindex: function() { + var menu = helper.e(".menu"); + var menuCloseTab = helper.e(".menu-close-tab"); + var allMenuContent = helper.eA(".menu-content"); + allMenuContent.forEach(function(arrayItem, index) { + arrayItem.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) { + if (state.get.current().menu) { + arrayItem.tabIndex = 1; + } else { + arrayItem.tabIndex = -1; + }; + }); }); - var body = helper.e(".menu-nav-body-" + name); - if (body) { - helper.addClass(body, "active"); + if (state.get.current().menu) { + menu.tabIndex = 1; + menuCloseTab.tabIndex = 2; + } else { + menu.tabIndex = -1; + menuCloseTab.tabIndex = -1; + }; + }, + scroll: function() { + if (window.innerWidth < 700) { + helper.e(".menu-area").scrollTop = 0; + } else { + for (var key in mod.nav.state) { + if (mod.nav.state[key]) { + helper.e(".menu-content-" + key).scrollTop = 0; + }; + }; }; } }; - render.tabindex = { - toggle: function() { - var menu = helper.e(".menu"); - if (state.get.current().menu) { - menu.tabIndex = 1; - menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) { - if (arrayItem.tabIndex == -1) { - arrayItem.tabIndex = 1; - }; - }); - } else { - menu.tabIndex = -1; - menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) { - if (arrayItem.tabIndex == 1) { - arrayItem.tabIndex = -1; - }; - }); + render.tab = { + active: function() { + for (var key in mod.nav.state) { + var controlMenu = helper.e(".control-menu-" + key); + if (mod.nav.state[key]) { + helper.addClass(controlMenu, "active"); + } else { + helper.removeClass(controlMenu, "active"); + }; }; + }, + tabindex: function() { + var allMenuNavTab = helper.eA(".menu-nav-tab"); + allMenuNavTab.forEach(function(arrayItem, index) { + if (state.get.current().menu) { + arrayItem.tabIndex = 1; + } else { + arrayItem.tabIndex = -1; + }; + }); + } + }; + + render.subnav = { + active: function() { + for (var key in mod.nav.state) { + var menuSubnav = helper.e(".menu-subnav-" + key); + if (menuSubnav) { + if (mod.nav.state[key]) { + helper.addClass(menuSubnav, "active"); + } else { + helper.removeClass(menuSubnav, "active"); + }; + }; + }; + }, + tabindex: function() { + for (var key in mod.nav.state) { + var menuNavBody = helper.e(".menu-subnav-" + key); + if (menuNavBody) { + menuNavBody.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) { + if (mod.nav.state[key] && state.get.current().menu) { + arrayItem.tabIndex = 1; + } else { + arrayItem.tabIndex = -1; + }; + }); + }; + }; + }, + height: function() { + var allMenuNavBody = helper.eA(".menu-subnav"); + allMenuNavBody.forEach(function(arrayItem, index) { + helper.addClass(arrayItem, "active"); + arrayItem.setAttribute("style", "--menu-subnav-height:" + arrayItem.getBoundingClientRect().height + "px;"); + helper.removeClass(arrayItem, "active"); + }); } }; @@ -104,22 +182,62 @@ var menu = (function() { helper.e(".menu").focus(); }; - render.open = function() { - helper.addClass(helper.e("html"), "is-menu-open"); - }; - - render.close = function() { - helper.removeClass(helper.e("html"), "is-menu-open"); - }; - render.removeStyle = function() { helper.e(".menu").removeAttribute("style"); }; var nav = function(name) { - render.nav(name); - render.subnav.toggle(name); - render.scrollToTop(name); + mod.nav.toggle(name); + render.nav.active(); + render.nav.tabindex(); + render.tab.active(); + render.tab.tabindex(); + render.subnav.active(); + render.subnav.tabindex(); + render.nav.scroll(name); + }; + + var open = function() { + mod.open(); + render.panel(); + render.focus(); + render.nav.active(); + render.nav.tabindex(); + render.tab.active(); + render.tab.tabindex(); + render.subnav.active(); + render.subnav.tabindex(); + render.nav.scroll(name); + bind.focus.add(); + shade.open({ + action: function() { + mod.close(); + render.panel(); + render.nav.active(); + render.nav.tabindex(); + render.tab.active(); + render.tab.tabindex(); + render.subnav.active(); + render.subnav.tabindex(); + bind.focus.remove(); + pagelock.unlock(); + } + }); + pagelock.lock(); + }; + + var close = function() { + mod.close(); + render.panel(); + render.nav.active(); + render.nav.tabindex(); + render.tab.active(); + render.tab.tabindex(); + render.subnav.active(); + render.subnav.tabindex(); + bind.focus.remove(); + shade.close(); + pagelock.unlock(); }; var toggle = function() { @@ -130,36 +248,10 @@ var menu = (function() { }; }; - var open = function() { - mod.open(); - render.open(); - render.focus(); - render.scrollToTop(); - render.tabindex.toggle(); - shade.open({ - action: function() { - mod.close(); - render.close(); - render.tabindex.toggle(); - pagelock.unlock(); - } - }); - pagelock.lock(); - }; - - var close = function() { - mod.close(); - render.close(); - render.tabindex.toggle(); - shade.close(); - pagelock.unlock(); - }; - var init = function() { mod.close(); - render.close(); render.removeStyle(); - render.subnav.calculate(); + render.subnav.height(); }; return {