From 44b75663548dde96fa817bff316ecd2ff426a075 Mon Sep 17 00:00:00 2001
From: Wolfgang Faust <wolfgang42@git>
Date: Sun, 21 Mar 2021 16:55:51 -0700
Subject: [PATCH 1/3] Properly handle modifiers in collection keyboard
 shortcuts

Previously, keyboard modifiers (Ctrl/Alt/Meta) were ignored when looking
up keyboard shortcuts. This made it impossible to use the browser's native
ArrowLeftAlt/ArrowRightAlt shortcuts for history navigation, since the
plugin would also perform navigation of its own on the same shortcuts.

This commit fixes that problem by suffixing the `key` string with all
possible modifiers, so it won't match shortcuts with extra modifiers.
---
 src/js/collection/common.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/js/collection/common.js b/src/js/collection/common.js
index 0aa76ff..7189ab1 100644
--- a/src/js/collection/common.js
+++ b/src/js/collection/common.js
@@ -115,7 +115,18 @@
 
 		if ( ! container ) {
 			return;
-		} else if ( event.shiftKey ) {
+		}
+
+		if ( event.ctrlKey ) {
+			key += 'Ctrl';
+		}
+		if ( event.altKey ) {
+			key += 'Alt';
+		}
+		if ( event.metaKey ) {
+			key += 'Meta';
+		}
+		if ( event.shiftKey ) {
 			key += 'Shift';
 		}
 

From 5dea012ec50f73d84729f1e2e991e65d7e27eaf2 Mon Sep 17 00:00:00 2001
From: Wolfgang Faust <wolfgang42@git>
Date: Sun, 21 Mar 2021 17:23:57 -0700
Subject: [PATCH 2/3] Run keyboard navigation on keydown event rather than
 keyup

* Navigation starts slightly sooner, for improved perceived performance.
* When typing rapidly, users may roll over and release the modifier before
  releasing the modified key (but will never press the modified key before
  its modifier, since that doesn't work). Using keyup means that we may see
  the event after the user has already released the modifier; with keydown
  this is not the case.
* The browser also performs actions during the keydown event, so if we use
  the same event they can be intercepted to prevent the browser from taking
  actions of its own (this will be done in the next commit).
---
 src/js/collection/common.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/collection/common.js b/src/js/collection/common.js
index 7189ab1..b42a052 100644
--- a/src/js/collection/common.js
+++ b/src/js/collection/common.js
@@ -27,7 +27,7 @@
 	function webcomicCommonEvents() {
 		window.addEventListener( 'scroll', webcomicInfiniteScroll );
 		document.addEventListener( 'change', webcomicSelectNavigation );
-		document.addEventListener( 'keyup', webcomicKeyboardNavigation );
+		document.addEventListener( 'keydown', webcomicKeyboardNavigation );
 		document.addEventListener( 'click', webcomicDynamicComicLoading );
 		document.documentElement.addEventListener( 'touchstart', webcomicTouchNavigationStart, false );
 		document.documentElement.addEventListener( 'touchend', webcomicTouchNavigationEnd );

From 2ffaa7983e9de118b2914ad448e5a9f5aba61309 Mon Sep 17 00:00:00 2001
From: Wolfgang Faust <wolfgang42@git>
Date: Sun, 21 Mar 2021 17:26:36 -0700
Subject: [PATCH 3/3] Prevent default action after handling keyboard shortcut

We fixed the problem for the default browser keybindings by checking for
all modifiers, but there's still the possibility that the user's browser
has some custom keybindings that conflict with ours. In this situation it
would probably be undesirable for the browser to also take its action, so
tell it that we've already handled the situation.
---
 src/js/collection/common.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/js/collection/common.js b/src/js/collection/common.js
index b42a052..b94bee8 100644
--- a/src/js/collection/common.js
+++ b/src/js/collection/common.js
@@ -130,7 +130,9 @@
 			key += 'Shift';
 		}
 
-		webcomicShortcut( key, container );
+		if ( webcomicShortcut( key, container ) ) {
+			event.preventDefault();
+		}
 	}
 
 	/**
@@ -264,13 +266,15 @@
 		const anchor = container.querySelector( `.${classes[shortcut]}[href]` );
 
 		if ( ! shortcut || ! container || ! anchor ) {
-			return;
+			return false;
 		}
 
 		anchor.dispatchEvent( new MouseEvent( 'click', {
 			bubbles: true,
 			cancelable: true
 		}) );
+
+		return true;
 	}
 
 	/**