feat(webui): image viewer keybindings

koishijs · Apr 9, 2021 · 91247e1 · 91247e1
1 parent 3a72c99
commit 91247e1
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/packages/plugin-webui/client/components/virtual-list/index.vue b/packages/plugin-webui/client/components/virtual-list/index.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
 
-import { defineEmit, ref, defineProps, computed, watch, getCurrentInstance, nextTick, onMounted, onActivated, onUpdated, onBeforeUnmount, defineComponent, h } from 'vue'
+import { defineEmit, ref, defineProps, computed, watch, getCurrentInstance, nextTick, onMounted, onUpdated, onBeforeUnmount, defineComponent, h } from 'vue'
 import Virtual from './virtual'
 
 const emit = defineEmit(['click', 'scroll', 'top', 'bottom', 'update:activeKey'])
@@ -55,7 +55,7 @@ watch(() => props.data.length, () => {
 watch(() => props.activeKey, (value) => {
   if (!value) return
   emit('update:activeKey', null)
-  scrollToUid(value)
+  scrollToUid(value, true)
 })
 
 const shepherd = ref<HTMLElement>()
@@ -81,10 +81,6 @@ function getUids() {
 
 const { ctx } = getCurrentInstance()
 
-onActivated(() => {
-  scrollToOffset(virtual.offset)
-})
-
 onMounted(() => {
   if (props.activeKey) {
     scrollToUid(props.activeKey)
@@ -93,13 +89,17 @@ onMounted(() => {
   }
 })
 
-function scrollToOffset(offset: number) {
-  ctx.$el.scrollTop = offset
+function scrollToOffset(offset: number, smooth = false) {
+  if (smooth) {
+    ctx.$el.scrollTo({ top: offset, behavior: 'smooth' })
+  } else {
+    ctx.$el.scrollTop = offset
+  }
 }
 
 // set current scroll position to a expectant index
-function scrollToUid(uid: string) {
-  scrollToOffset(virtual.getUidOffset(uid))
+function scrollToUid(uid: string, smooth = false) {
+  scrollToOffset(virtual.getUidOffset(uid), smooth)
 }
 
 function scrollToBottom() {

diff --git a/packages/plugin-webui/client/views/layout/overlay.vue b/packages/plugin-webui/client/views/layout/overlay.vue
@@ -10,11 +10,11 @@
       <span class="button bottom" @click.stop>
         <i class="fas fa-search-minus" @click="scale -= 0.2"/>
         <i class="fas fa-search-plus" @click="scale += 0.2"/>
-        <i class="fas fa-expand" @click="scale = 1"/>
-        <i class="fas fa-undo" @click="rotate -= 90"/>
-        <i class="fas fa-redo" @click="rotate += 90"/>
+        <i class="fas fa-expand" @click="scale = 1, rotate = 0"/>
+        <i class="fas fa-undo" @click="rotate = (rotate - 90) % 180"/>
+        <i class="fas fa-redo" @click="rotate = (rotate + 90) % 180"/>
       </span>
-      <transition @before-appear="moveToOrigin" @after-appear="moveToCenter" appear :duration="1">
+      <transition appear :duration="1" @before-appear="moveToOrigin" @after-appear="moveToCenter">
         <img ref="img" :style="{ transform }" :src="store.overlayImage.src"/>
       </transition>
     </div>
@@ -24,7 +24,7 @@
 <script lang="ts" setup>
 
 import { store } from '~/client'
-import { computed, watch, ref } from 'vue'
+import { computed, watch, ref, onMounted, onBeforeUnmount } from 'vue'
 
 const scale = ref(1)
 const rotate = ref(0)
@@ -90,6 +90,29 @@ function moveToCenter(el: HTMLImageElement) {
   el.style.top = (innerHeight - height) / 2 + 'px'
 }
 
+onMounted(() => {
+  document.addEventListener('keydown', onKeyDown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onKeyDown)
+})
+
+function onKeyDown(ev: KeyboardEvent) {
+  if (!store.overlayImage) return
+  ev.preventDefault()
+  if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
+    setImage(siblings.value.prev)
+  } else if (ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
+    setImage(siblings.value.next)
+  } else if (ev.key === 'Escape') {
+    setImage(null)
+  } else if (ev.key === 'Enter') {
+    store.overlayImage.offsetParent.scrollIntoView({ behavior: 'smooth' })
+    setImage(null)
+  }
+}
+
 </script>
 
 <style lang="scss">

diff --git a/packages/plugin-webui/client/views/layout/sidebar.vue b/packages/plugin-webui/client/views/layout/sidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <aside>
     <ul>
-      <template v-for="({ name, path, meta }, index) in $router.getRoutes()" :key="index">
+      <template v-for="({ name, path, meta }) in $router.getRoutes()">
         <li v-if="isShown(meta)" :class="{ current: name === $route.name }">
           <router-link :to="path">
             <i :class="`fas fa-${meta.icon}`"/>