Adds keyboard shortcuts to portfolio and reference templates

davidmerfield · Sep 3, 2022 · fcad4d4 · fcad4d4
1 parent 4ceeac1
commit fcad4d4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/app/templates/latest/portfolio/entry.html b/app/templates/latest/portfolio/entry.html
@@ -26,6 +26,29 @@
   {{#entry}}
     {{{html}}}
     {{> pluginHTML}}
+
+
+    <script type="text/javascript">
+
+document.onkeydown = checkKey;
+
+function checkKey(e) {
+
+    e = e || window.event;
+
+    var nextURL = "{{{entry.next.url}}}";
+    var previousURL = "{{{entry.previous.url}}}";
+
+    if (previousURL && e.keyCode == '39') {
+      window.location = previousURL
+    }
+
+     if (nextURL && e.keyCode == '37') {
+      window.location = nextURL
+    }
+
+}
+    </script>    
   {{/entry}}
   </div>
 

diff --git a/app/templates/latest/reference/_entry_layout.html b/app/templates/latest/reference/_entry_layout.html
@@ -5,11 +5,12 @@
 
   <div class="top">
     <a class="close" style="float:right" href="/" onclick="return lastIndexPage()"></a>
-    <a class="right" style="margin-left:0;{{^previous}}visibility:hidden{{/previous}}" href="{{{previous.url}}}"> </a>
-    <a class="left" style="{{^next}}visibility:hidden{{/next}}" href="{{{next.url}}}"></a>
+    <a class="right" data-previous style="margin-left:0;{{^previous}}visibility:hidden{{/previous}}" href="{{{previous.url}}}"> </a>
+    <a class="left" data-next style="{{^next}}visibility:hidden{{/next}}" href="{{{next.url}}}"></a>
 
   </div>
 
+
   <div class="main" style="display:flex;">
 
     <style type="text/css">
@@ -181,13 +182,10 @@ <h1 style="margin:0.7rem 0 0">{{title}}</h1>
 
   {{/titleTag}}
 
+
+
   {{/entry}}
 
   {{/entry.page}}
 
-  <script type="text/javascript">
-  document.onkeydown = function(e) {
-    alert(e);
-  };
 
-  </script>
diff --git a/app/templates/latest/reference/script.js b/app/templates/latest/reference/script.js
@@ -129,8 +129,21 @@ function parents(node, secondnode) {
   return false;
 }
 
+var nextLink = document.querySelector('[data-next]');
+var previousLink = document.querySelector('[data-previous]');
+var nextURL = nextLink && nextLink.getAttribute('href');
+var previousURL = previousLink && previousLink.getAttribute('href');
+
 document.onkeydown = function(e) {
 
+  if (previousURL && e.keyCode == '39') {
+    return window.location = previousURL;
+  }
+
+   if (nextURL && e.keyCode == '37') {
+    return window.location = nextURL;
+  }
+
   if (!parents(document.activeElement, searchForm)) return;
 
   if (e.keyCode === 37 && document.activeElement !== searchInput) {