From 437236bf3ca97a1040d0b01197aa138aa9391e26 Mon Sep 17 00:00:00 2001
From: Ivan Kupalov <charlag@tutanota.com>
Date: Sun, 3 Feb 2019 20:56:07 +0100
Subject: [PATCH] feat: Add shortcuts to the media dialog (#930)

* Add shortcuts to the media dialog

* fix: unify logic for next/prev buttons and keyboard shortcuts

* fix: add info about left/right shortcuts
---
 src/routes/_components/ShortcutHelpInfo.html  |  6 ++++
 .../dialog/components/MediaDialog.html        | 29 +++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/routes/_components/ShortcutHelpInfo.html b/src/routes/_components/ShortcutHelpInfo.html
index f6540f12..75ced411 100644
--- a/src/routes/_components/ShortcutHelpInfo.html
+++ b/src/routes/_components/ShortcutHelpInfo.html
@@ -29,6 +29,12 @@
       <li><kbd>k</kbd> or <kbd>↑</kbd> to activate the previous toot</li>
     </ul>
   </div>
+  <h2>Media</h2>
+  <div class="hotkey-group">
+    <ul>
+      <li><kbd>&#8592;</kbd> - <kbd>&#8594;</kbd> to go to next or previous</li>
+    </ul>
+  </div>
 </div>
 <style>
   .shortcut-help-info {
diff --git a/src/routes/_components/dialog/components/MediaDialog.html b/src/routes/_components/dialog/components/MediaDialog.html
index c1c8e6c2..decab6b7 100644
--- a/src/routes/_components/dialog/components/MediaDialog.html
+++ b/src/routes/_components/dialog/components/MediaDialog.html
@@ -24,7 +24,7 @@
           disabled={scrolledItem === 0}
           label="Show previous media"
           href="#fa-angle-left"
-          on:click="onClick(scrolledItem - 1)"
+          on:click="prev()"
         />
         {#each dots as dot, i (dot.i)}
           <IconButton
@@ -42,7 +42,7 @@
           disabled={scrolledItem === length - 1}
           label="Show next media"
           href="#fa-angle-right"
-          on:click="onClick(scrolledItem + 1)"
+          on:click="next()"
         />
       </div>
     {/if}
@@ -50,6 +50,9 @@
 
 
 </ModalDialog>
+
+<Shortcut scope='mediaDialog' key="ArrowLeft" on:pressed="prev()" />
+<Shortcut scope='mediaDialog' key="ArrowRight" on:pressed="next()" />
 <style>
   :global(.media-modal-dialog) {
     max-width: calc(100vw);
@@ -125,6 +128,7 @@
   import ModalDialog from './ModalDialog.html'
   import MediaInDialog from './MediaInDialog.html'
   import IconButton from '../../IconButton.html'
+  import Shortcut from '../../shortcut/Shortcut.html'
   import { show } from '../helpers/showDialog'
   import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
   import debounce from 'lodash-es/debounce'
@@ -132,6 +136,9 @@
   import { smoothScroll } from '../../../_utils/smoothScroll'
   import { doubleRAF } from '../../../_utils/doubleRAF'
   import { store } from '../../../_store/store'
+  import {
+    pushShortcutScope,
+    popShortcutScope } from '../../../_utils/shortcuts'
 
   export default {
     oncreate () {
@@ -148,9 +155,12 @@
       } else {
         this.setupScroll()
       }
+      pushShortcutScope('mediaDialog')
     },
     ondestroy () {
       this.teardownScroll()
+
+      popShortcutScope('mediaDialog')
     },
     store: () => store,
     computed: {
@@ -162,7 +172,8 @@
     components: {
       ModalDialog,
       MediaInDialog,
-      IconButton
+      IconButton,
+      Shortcut
     },
     helpers: {
       nth (i) {
@@ -198,6 +209,18 @@
           this.scrollToItem(i, true)
         }
       },
+      next () {
+        let { scrolledItem, length } = this.get()
+        if (scrolledItem < length - 1) {
+          this.scrollToItem(scrolledItem + 1, true)
+        }
+      },
+      prev () {
+        let { scrolledItem } = this.get()
+        if (scrolledItem > 0) {
+          this.scrollToItem(scrolledItem - 1, true)
+        }
+      },
       scrollToItem (i, smooth) {
         let { length } = this.get()
         let { scroller } = this.refs