[keyboard.js] Moved all keybindings to a separate javascript file and implemented vim-like navigation for headings

5 files changed, 70 insertions, 52 deletions

diff --git a/src/_footer.html b/src/_footer.html
index c19241c..0fa2f4b 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -3,8 +3,9 @@
 	<img id="scrollBtn" class="icon unzoomable btn" src="/img/chevrons-up.svg" alt="^">
 </body>
 
-<script type="text/javascript" src="/scripts/theme-changer.js" integrity="sha512-I3GOqvrnYTc/udoTm21ZmmyhIzFTP0FhE7odQO+xPeIdUau1eXiYU33XJZUqRt+W6SLck5vGJcPMjyFrausRPg==" crossorigin="anonymous" defer></script>
+<script type="text/javascript" src="/scripts/theme-changer.js" integrity="sha512-4p/NmUO9VMUBe7xPDGYEcZrZh9A96OebGs/3CZNcV98ZaouWSQ3WXlKfkcZLpWov/D/Vcf+6ZOtBtSQ0Caz2Jg==" crossorigin="anonymous" defer></script>
 <script type="text/javascript" src="/scripts/image-show.js" integrity="sha512-nvHl7jQO5YAE/K8KUPwF0m1Oq2mT6I8hNZYby4abaxIuJe6F60L1BDtYsJYB/1+A7iExW+i7YREL886qzCJt7A==" crossorigin="anonymous" defer></script>
 <script type="text/javascript" src="/scripts/back-to-top.js" integrity="sha512-yih1opqueA2DkNTsRo8JG7r/haDe3VaHpV08Vs79tDYI9Goe+QpDNSPjpZDszDBQOrIIX7ZKZA4QJ0J+fxkn5w==" crossorigin="anonymous" defer></script>
+<script type="text/javascript" src="/scripts/keyboard.js" integrity="sha512-YQsk/Hm5j43FKZGijHtQPmkiNrAGMXJcts5AVofxwftttTPU87+bY7qvXsBctWLUyfrZwaZF0StCefiAKTFaow==" crossorigin="anonymous" defer></script>
 
 </html>
diff --git a/src/regarding-js.md b/src/regarding-js.md
index 9e8f050..3e60967 100644
--- a/src/regarding-js.md
+++ b/src/regarding-js.md
@@ -11,11 +11,12 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |[image-show.js](/scripts/image-show.js)|Click to zoom on images|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/image-show.js)|551B|24|
 |[back-to-top.js](/scripts/back-to-top.js)|Automatically appearing button to scroll to top|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/back-to-top.js)|266B|13|
 |[theme-changer-preload.js](/scripts/theme-changer-preload.js)|"Load" the current theme as soon as possible|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer-preload.js)|129B|4|
-|[theme-changer.js](/scripts/theme-changer.js)|Change theme between light and dark (split in two files)|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer.js)|638B|31|
+|[theme-changer.js](/scripts/theme-changer.js)|Change theme between light and dark (split in two files)|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer.js)|463B|19|
 |[js-styling-preload.js](/scripts/js-styling-preload.js)|Show hidden elements (used solely by scripts) as soon as possible|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/js-styling-preload.js)|81B|3|
 |[page-width.js](/scripts/page-width.js)|Change whether text covers the whole width of the page or only the middle (applicable to wide screens)|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/page-width.js)|576B|20|
 |[expand-navbar.js](/scripts/expand-navbar.js)|Button to shrink and expand the sidebar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/expand-navbar.js)|713B|20|
-|[presentation.js](/scripts/presentation.js)|Adds presentation styles and is used for presentation navbar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js)|3.9KB|141|
+|[presentation.js](/scripts/presentation.js)|Adds presentation styles and is used for presentation navbar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js)|3.2KB|104|
+|[keyboard.js](/scripts/keyboard.js)|Implements keyboard shortcuts|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/keyboard.js)|1.5KB|65|
 
 ## Data in browser storage
 
diff --git a/src/scripts/keyboard.js b/src/scripts/keyboard.js
new file mode 100644
index 0000000..f618e45
--- /dev/null
+++ b/src/scripts/keyboard.js
@@ -0,0 +1,65 @@
+const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+var currentHeading = 0;
+
+document.addEventListener('keydown', function (e) {
+	if (e.ctrlKey) return;
+
+	switch (e.code) {
+		case 'KeyG':
+			currentHeading = (e.shiftKey) ? headings.length - 1 : 0;
+			headings[currentHeading].scrollIntoView();
+			break;
+
+		case 'KeyJ': case 'KeyL':
+			if (typeof presenting != 'undefined' && presenting) showSlide(+1);
+			else {
+				currentHeading = (headings.length + currentHeading + 1) % headings.length;
+				headings[currentHeading].scrollIntoView();
+			}
+			break;
+
+		case 'KeyK': case 'KeyH':
+			if (typeof presenting != 'undefined' && presenting) showSlide(-1);
+			else {
+				currentHeading = (headings.length + currentHeading - 1) % headings.length;
+				headings[currentHeading].scrollIntoView();
+			}
+			break;
+
+		/* theme-changer.js */
+
+		case 'KeyC':
+			themeBtn.click();
+			break;
+
+		/* presentation.js */
+
+		// Previous slide
+		case 'Backspace': case 'PageUp':
+		case 'ArrowLeft': case 'ArrowUp':
+			showSlide(-1);
+			break;
+		// Next slide
+		case 'Space': case 'Enter': case 'PageDown':
+		
+		case 'ArrowRight': case 'ArrowDown':
+			showSlide(+1);
+			break;
+		// Start (toggle) presenting
+		case 'KeyP': case 'KeyT':
+			presentBtn.click();
+			break;
+		// Exit presentation
+		case 'Escape':
+			if (presenting) presentBtn.click();
+			break;
+		// Go to first slide
+		case 'Home':
+			showSlide(-slideIndex);
+			break;
+		// Go to last slide
+		case 'End':
+			showSlide(-slideIndex -1);
+			break;
+	}
+});
diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js
index 70339e6..425815c 100644
--- a/src/scripts/presentation.js
+++ b/src/scripts/presentation.js
@@ -102,40 +102,3 @@ articleBtn.addEventListener('click', function() {
 	// Toggle presentation.css
 	document.styleSheets.item(3).disabled = !document.styleSheets.item(3).disabled;
 });
-
-/* Keyboard controls */
-
-document.addEventListener('keydown', function (e) {
-	if (e.ctrlKey) return;
-
-	switch (e.code) {
-		// Previous slide
-		case 'Backspace': case 'PageUp':
-		case 'KeyK': case 'KeyH':
-		case 'ArrowLeft': case 'ArrowUp':
-			showSlide(-1);
-			break;
-		// Next slide
-		case 'Space': case 'Enter': case 'PageDown':
-		case 'KeyJ': case 'KeyL':
-		case 'ArrowRight': case 'ArrowDown':
-			showSlide(+1);
-			break;
-		// Start (toggle) presenting
-		case 'KeyP': case 'KeyT':
-			presentBtn.click();
-			break;
-		// Exit presentation
-		case 'Escape':
-			if (presenting) presentBtn.click();
-			break;
-		// Go to first slide
-		case 'Home':
-			showSlide(-slideIndex);
-			break;
-		// Go to last slide
-		case 'End':
-			showSlide(-slideIndex -1);
-			break;
-	}
-});
diff --git a/src/scripts/theme-changer.js b/src/scripts/theme-changer.js
index 47c5dfe..39eedc9 100644
--- a/src/scripts/theme-changer.js
+++ b/src/scripts/theme-changer.js
@@ -17,15 +17,3 @@ themeBtn.onclick = function() {
 		localStorage.setItem('theme', 'dark');
 	}
 }
-
-/* Keyboard controls */
-
-document.addEventListener('keydown', function (e) {
-	if (e.ctrlKey) return;
-
-	switch (e.code) {
-		case 'KeyC':
-			themeBtn.click();
-			break;
-	}
-});