From ec567337dc21962996362c3917f6652a81bbd8e7 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Mon, 4 Nov 2019 04:03:09 -0800 Subject: [PATCH] [Glitch] fix: support KaiOS arrow navigation on public pages Port 1e232e455cfa75621264a0b90b783b21ebd5ea87 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/packs/public.js | 10 +++++++--- app/javascript/flavours/glitch/packs/settings.js | 10 +++++++--- .../glitch/util/load_keyboard_extensions.js | 16 ++++++++++++++++ 3 files changed, 30 insertions(+), 6 deletions(-) create mode 100644 app/javascript/flavours/glitch/util/load_keyboard_extensions.js diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js index 767fb023c..973d6ee46 100644 --- a/app/javascript/flavours/glitch/packs/public.js +++ b/app/javascript/flavours/glitch/packs/public.js @@ -1,5 +1,6 @@ import loadPolyfills from 'flavours/glitch/util/load_polyfills'; import ready from 'flavours/glitch/util/ready'; +import loadKeyboardExtensions from 'flavours/glitch/util/load_keyboard_extensions'; function main() { const IntlMessageFormat = require('intl-messageformat').default; @@ -118,6 +119,9 @@ function main() { }); } -loadPolyfills().then(main).catch(error => { - console.error(error); -}); +loadPolyfills() + .then(main) + .then(loadKeyboardExtensions) + .catch(error => { + console.error(error); + }); diff --git a/app/javascript/flavours/glitch/packs/settings.js b/app/javascript/flavours/glitch/packs/settings.js index b32f38226..edf1b82e0 100644 --- a/app/javascript/flavours/glitch/packs/settings.js +++ b/app/javascript/flavours/glitch/packs/settings.js @@ -1,5 +1,6 @@ import loadPolyfills from 'flavours/glitch/util/load_polyfills'; import ready from 'flavours/glitch/util/ready'; +import loadKeyboardExtensions from 'flavours/glitch/util/load_keyboard_extensions'; function main() { const { delegate } = require('rails-ujs'); @@ -15,6 +16,9 @@ function main() { }); } -loadPolyfills().then(main).catch(error => { - console.error(error); -}); +loadPolyfills() + .then(main) + .then(loadKeyboardExtensions) + .catch(error => { + console.error(error); + }); diff --git a/app/javascript/flavours/glitch/util/load_keyboard_extensions.js b/app/javascript/flavours/glitch/util/load_keyboard_extensions.js new file mode 100644 index 000000000..2dd0e45fa --- /dev/null +++ b/app/javascript/flavours/glitch/util/load_keyboard_extensions.js @@ -0,0 +1,16 @@ +// On KaiOS, we may not be able to use a mouse cursor or navigate using Tab-based focus, so we install +// special left/right focus navigation keyboard listeners, at least on public pages (i.e. so folks +// can at least log in using KaiOS devices). + +function importArrowKeyNavigation() { + return import(/* webpackChunkName: "arrow-key-navigation" */ 'arrow-key-navigation'); +} + +export default function loadKeyboardExtensions() { + if (/KAIOS/.test(navigator.userAgent)) { + return importArrowKeyNavigation().then(arrowKeyNav => { + arrowKeyNav.register(); + }); + } + return Promise.resolve(); +}