From 0cca6eec665ebe8f5a90cf24c1bf29ff49199480 Mon Sep 17 00:00:00 2001
From: Andy Heathershaw <andy@andysh.uk>
Date: Tue, 9 Jul 2019 23:14:54 +0100
Subject: [PATCH] #104: Added left/right key bindings to navigate through an
 album

---
 .../views/themes/base/gallery/photo.blade.php | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/resources/views/themes/base/gallery/photo.blade.php b/resources/views/themes/base/gallery/photo.blade.php
index 4119eb8..97e773d 100644
--- a/resources/views/themes/base/gallery/photo.blade.php
+++ b/resources/views/themes/base/gallery/photo.blade.php
@@ -33,12 +33,12 @@
                 <div class="row mb-3">
                     <div class="col-6">
                         @if (!is_null($previous_photo))
-                            <a href="{{ $previous_photo->url() }}" class="btn btn-secondary">@lang('gallery.previous_button')</a>
+                            <a href="{{ $previous_photo->url() }}" class="btn btn-secondary" id="previous-button">@lang('gallery.previous_button')</a>
                         @endif
                     </div>
                     <div class="col-6 text-right">
                         @if (!is_null($next_photo))
-                            <a href="{{ $next_photo->url() }}" class="btn btn-secondary">@lang('gallery.next_button')</a>
+                            <a href="{{ $next_photo->url() }}" class="btn btn-secondary" id="next-button">@lang('gallery.next_button')</a>
                         @endif
                     </div>
                 </div>
@@ -161,6 +161,22 @@
 
 @push('scripts')
     <script type="text/javascript">
+        // #104: Next/Prev key bindings
+        $(document).ready(function()
+        {
+            $(document).keyup(function(e)
+            {
+                if (e.which === 37)
+                {
+                    document.getElementById('previous-button').click();
+                }
+                else if (e.which === 39)
+                {
+                    document.getElementById('next-button').click();
+                }
+            });
+        });
+
         var app = null;
         var photoViewModel = new PhotoViewModel({
             reply_comment_form: '{{ $photo->replyToCommentFormUrl() }}'