diff options
Diffstat (limited to 'app/javascript/flavours')
-rw-r--r-- | app/javascript/flavours/glitch/locales/ja.js | 1 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/packs/public.js | 25 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/packs/settings.js | 25 |
3 files changed, 49 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/locales/ja.js b/app/javascript/flavours/glitch/locales/ja.js index 0ca5e5fc7..52aeed3d6 100644 --- a/app/javascript/flavours/glitch/locales/ja.js +++ b/app/javascript/flavours/glitch/locales/ja.js @@ -8,6 +8,7 @@ const messages = { 'layout.single': 'モバイル', 'navigation_bar.app_settings': 'アプリ設定', 'navigation_bar.featured_users': '紹介しているアカウント', + 'navigation_bar.misc': 'その他', 'getting_started.onboarding': '解説を表示', 'onboarding.page_one.federation': '{domain}はMastodonのインスタンスです。Mastodonとは、独立したサーバが連携して作るソーシャルネットワークです。これらのサーバーをインスタンスと呼びます。', 'onboarding.page_one.welcome': '{domain}へようこそ!', 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(); + } }); } |