From 1eb86629227181c4c05c8a34100f7e54a57574a8 Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Thu, 23 Oct 2025 14:41:40 +0000
Subject: [PATCH] GS-2375

---
 vue/src/components/Pagination.vue |  105 ++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 93 insertions(+), 12 deletions(-)

diff --git a/vue/src/components/Pagination.vue b/vue/src/components/Pagination.vue
index f00836b..02c85b0 100644
--- a/vue/src/components/Pagination.vue
+++ b/vue/src/components/Pagination.vue
@@ -2,11 +2,15 @@
 
 import * as itemOffset from '../lib/itemOffset.js'
 import {onKeyStroke} from "@vueuse/core"
+import IconKeyboard from "@/components/icons/IconKeyboard.vue"
+import KeyboardToggle from "@/components/KeyboardToggle.vue"
+import {ref} from "vue"
 
 const props = defineProps({
    total: Number,
    offset: Number,
    limit: Number,
+   current: Number,
 })
 
 const emit = defineEmits(["go"])
@@ -33,49 +37,109 @@
 
 /////// KEYBOARD ////////////////////////////////////////////////////////////////
 
-onKeyStroke(["ArrowLeft", "ArrowRight"], (e) => {
+onKeyStroke(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"], (e) => {
    let multiplier = 1
    switch (e.key) {
       case "ArrowLeft":
-         console.log("go left")
          multiplier = e.shiftKey ? 10 : 1
          goPrev(multiplier)
          break
       case "ArrowRight":
-         console.log("go right")
          multiplier = e.shiftKey ? 10 : 1
          goNext(multiplier)
+         break
+      case "ArrowUp":
+         goStart()
+         break
+      case "ArrowDown":
+         goEnd()
          break
    }
 })
 
+/////// keyboard ////////////////////////////////////////////////////////////////
+
+const keyboardVisible = ref(false)
+function toggleKeyboard (value) {
+   console.log("toggleKeyboard", value)
+   keyboardVisible.value = value
+}
 
 </script>
 
 <template>
 
    <div class="pagination">
-      <input type="button" @click="goStart()" class="start" value="«">
-      <input type="button" @click="goPrev()" class="prev" value="‹">
-      <span class="current">
-         {{ offset }} - {{ offset + limit }}
-          / {{ total }}
-      </span>
-      <input type="button" @click="goNext()" class="next" value="›">
-      <input type="button" @click="goEnd()" class="end" value="»">
+      <div class="pagination-buttons">
+<!--         <pre>&#45;&#45;{{current}}&#45;&#45;</pre>-->
+         <input type="button" @click="goStart()" class="start" value="«">
+         <input type="button" @click="goPrev()" class="prev" value="‹">
+         <span class="current">{{ offset }} - {{ offset + current }} / {{ total }}</span>
+         <input type="button" @click="goNext()" class="next" value="›">
+         <input type="button" @click="goEnd()" class="end" value="»">
+         <KeyboardToggle :initial="false" @toggle="toggleKeyboard" style="color: #666" />
+      </div>
+      <small class="pagination-info" v-show="keyboardVisible">
+         <em>Keyboard control:</em>
+         <span class="spacer" />
+         <kbd class="bigger">&ltri;</kbd> previous page
+         <span class="spacer" />
+         <kbd class="bigger">&rtri;</kbd> next page
+         <span class="spacer" />
+         <kbd>SHIFT</kbd> + <kbd class="bigger">&ltri;</kbd> {{limit * 10}} backward
+         <span class="spacer" />
+         <kbd>SHIFT</kbd> + <kbd class="bigger">&rtri;</kbd> {{limit * 10}} forward
+         <span class="spacer" />
+         <kbd class="bigger">&utri;</kbd> start
+         <span class="spacer" />
+         <kbd class="bigger">&dtri;</kbd> end
+      </small>
    </div>
 
 </template>
 
 <style scoped lang="stylus">
 
+.pagination-info
+   margin-top .5em;
+   display flex;
+   gap .5em
+   padding .33em .66em;
+   align-items center;
+   background-color #f1f1f1
+   .spacer
+      width 2em;
+      height 1px
+      display inline-block;
+      //background-color black
+
+kbd
+   border 1px solid #777
+   border-radius 4px
+   font-size 120%;
+   line-height 50%
+   min-width 1rem;
+   height 1rem
+   padding 3px;
+   display inline-flex;
+   align-items center;
+   justify-content center;
+
+kbd.bigger
+   font-size 220%
+   line-height 0
+
+
 .pagination
+   display flex;
+   flex-direction column
+   align-items center;
+.pagination-buttons
    font-size 1.33rem
    display flex;
    gap 1em
    align-items center;
    justify-content center;
-   margin -1em 0 1em 0;
 
    & > div
       cursor: pointer
@@ -97,5 +161,22 @@
    //all: unset
    border none
    width 1em
+input[type=button]
+   color rgb(0,0,238)
+   cursor pointer;
+   &:hover
+      background-color #ddd;
+
+
+button
+   display inline-flex;
+   align-items center;
+   justify-content center;
+   border none
+   background-color transparent;
+   cursor pointer
+   &:hover
+      background-color #eee;
+
 
 </style>

--
Gitblit v1.8.0