feat: Nativize "No distraction" theme as "Focus Mode" (#758)

Co-authored-by: Mo Bitar <me@bitar.io>
2021-12-02 22:34:57 +05:30
parent fbafc136e8
commit 9730006cba
17 changed files with 488 additions and 141 deletions
--- a/app/assets/javascripts/components/QuickSettingsMenu/eventHandlers.ts
+++ b/app/assets/javascripts/components/QuickSettingsMenu/eventHandlers.ts
@@ -0,0 +1,77 @@
+import { RefObject } from 'preact';
+import { StateUpdater } from 'preact/hooks';
+import { JSXInternal } from 'preact/src/jsx';
+
+export const quickSettingsKeyDownHandler = (
+  closeQuickSettingsMenu: () => void,
+  event: JSXInternal.TargetedKeyboardEvent<HTMLDivElement>,
+  quickSettingsMenuRef: RefObject<HTMLDivElement>,
+  themesMenuOpen: boolean
+) => {
+  if (quickSettingsMenuRef?.current) {
+    const items: NodeListOf<HTMLButtonElement> =
+      quickSettingsMenuRef.current.querySelectorAll(':scope > button');
+    const currentFocusedIndex = Array.from(items).findIndex(
+      (btn) => btn === document.activeElement
+    );
+
+    if (!themesMenuOpen) {
+      switch (event.key) {
+        case 'Escape':
+          closeQuickSettingsMenu();
+          break;
+        case 'ArrowDown':
+          if (items[currentFocusedIndex + 1]) {
+            items[currentFocusedIndex + 1].focus();
+          } else {
+            items[0].focus();
+          }
+          break;
+        case 'ArrowUp':
+          if (items[currentFocusedIndex - 1]) {
+            items[currentFocusedIndex - 1].focus();
+          } else {
+            items[items.length - 1].focus();
+          }
+          break;
+      }
+    }
+  }
+};
+
+export const themesMenuKeyDownHandler = (
+  event: React.KeyboardEvent<HTMLDivElement>,
+  themesMenuRef: RefObject<HTMLDivElement>,
+  setThemesMenuOpen: StateUpdater<boolean>,
+  themesButtonRef: RefObject<HTMLButtonElement>
+) => {
+  if (themesMenuRef?.current) {
+    const themes = themesMenuRef.current.querySelectorAll('button');
+    const currentFocusedIndex = Array.from(themes).findIndex(
+      (themeBtn) => themeBtn === document.activeElement
+    );
+
+    switch (event.key) {
+      case 'Escape':
+      case 'ArrowLeft':
+        event.stopPropagation();
+        setThemesMenuOpen(false);
+        themesButtonRef.current?.focus();
+        break;
+      case 'ArrowDown':
+        if (themes[currentFocusedIndex + 1]) {
+          themes[currentFocusedIndex + 1].focus();
+        } else {
+          themes[0].focus();
+        }
+        break;
+      case 'ArrowUp':
+        if (themes[currentFocusedIndex - 1]) {
+          themes[currentFocusedIndex - 1].focus();
+        } else {
+          themes[themes.length - 1].focus();
+        }
+        break;
+    }
+  }
+};