about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/packs
diff options
context:
space:
mode:
authorClaire <claire.github-309c@sitedethib.com>2022-10-30 18:15:28 +0100
committerClaire <claire.github-309c@sitedethib.com>2022-10-30 18:15:28 +0100
commiteee36267d627ae08898d2b3301f56ce729055e82 (patch)
treedae581a9867b8dcdd2c3ab0154794a1ff10ad98e /app/javascript/flavours/glitch/packs
parent26ff48ee48a5c03a2a4b0bd03fd322529e6bd960 (diff)
parentac9fb0d654440ce1179bab4071941450aa994d2c (diff)
Merge branch 'main' into glitch-soc/merge-upstream
Conflicts:
- `app/javascript/mastodon/locales/ja.json`:
  Upstream change too close to a glitch-soc-specific string.
  The glitch-soc-specific string should not have been in this file, so it
  has been moved to `app/javascript/flavours/glitch/locales/ja.js`.
- `app/javascript/packs/public.js`:
  Upstream refactored a part, that as usual is split and duplicated in various
  pack files. Updated those pack files accordingly.
- `app/views/layouts/application.html.haml`:
  Upstream fixed custom.css path in a different way than we did, went with
  upstream's change.
Diffstat (limited to 'app/javascript/flavours/glitch/packs')
-rw-r--r--app/javascript/flavours/glitch/packs/public.js25
-rw-r--r--app/javascript/flavours/glitch/packs/settings.js25
2 files changed, 48 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js
index 629ea32b7..843fd5163 100644
--- a/app/javascript/flavours/glitch/packs/public.js
+++ b/app/javascript/flavours/glitch/packs/public.js
@@ -139,8 +139,31 @@ function main() {
     });
   });
 
+  const toggleSidebar = () => {
+    const sidebar = document.querySelector('.sidebar ul');
+    const toggleButton = document.querySelector('.sidebar__toggle__icon');
+
+    if (sidebar.classList.contains('visible')) {
+      document.body.style.overflow = null;
+      toggleButton.setAttribute('aria-expanded', false);
+    } else {
+      document.body.style.overflow = 'hidden';
+      toggleButton.setAttribute('aria-expanded', true);
+    }
+
+    toggleButton.classList.toggle('active');
+    sidebar.classList.toggle('visible');
+  };
+
   delegate(document, '.sidebar__toggle__icon', 'click', () => {
-    document.querySelector('.sidebar ul').classList.toggle('visible');
+    toggleSidebar();
+  });
+
+  delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      toggleSidebar();
+    }
   });
 
   // Empty the honeypot fields in JS in case something like an extension
diff --git a/app/javascript/flavours/glitch/packs/settings.js b/app/javascript/flavours/glitch/packs/settings.js
index 4c85f6556..31c88b2b5 100644
--- a/app/javascript/flavours/glitch/packs/settings.js
+++ b/app/javascript/flavours/glitch/packs/settings.js
@@ -7,8 +7,31 @@ import 'cocoon-js-vanilla';
 function main() {
   const { delegate } = require('@rails/ujs');
 
+  const toggleSidebar = () => {
+    const sidebar = document.querySelector('.sidebar ul');
+    const toggleButton = document.querySelector('.sidebar__toggle__icon');
+
+    if (sidebar.classList.contains('visible')) {
+      document.body.style.overflow = null;
+      toggleButton.setAttribute('aria-expanded', false);
+    } else {
+      document.body.style.overflow = 'hidden';
+      toggleButton.setAttribute('aria-expanded', true);
+    }
+
+    toggleButton.classList.toggle('active');
+    sidebar.classList.toggle('visible');
+  };
+
   delegate(document, '.sidebar__toggle__icon', 'click', () => {
-    document.querySelector('.sidebar ul').classList.toggle('visible');
+    toggleSidebar();
+  });
+
+  delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      toggleSidebar();
+    }
   });
 }