From 1c61333f0c111a71f85eb076e176af635d98cd83 Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Mon, 14 Jul 2025 14:28:51 +0000
Subject: [PATCH] adding tn count

---
 vue/src/components/Pagination.vue |  152 +++++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 123 insertions(+), 29 deletions(-)

diff --git a/vue/src/components/Pagination.vue b/vue/src/components/Pagination.vue
index 0460a09..02c85b0 100644
--- a/vue/src/components/Pagination.vue
+++ b/vue/src/components/Pagination.vue
@@ -1,69 +1,145 @@
 <script setup>
 
+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"])
 
 function goStart () {
-   const {offset, limit, total} = props
-   console.log("goStart", {offset, limit, total})
-   emit("go", 0)
+   const offset2 = itemOffset.goStart(props.offset, props.limit, props.total)
+   emit("go", offset2)
 }
 
 function goEnd () {
-   const {offset, limit, total} = props
-   console.log("goEnd ", {offset, limit, total})
-   emit("go", Math.floor(total / limit) * limit)
+   const offset2 = itemOffset.goEnd(props.offset, props.limit, props.total)
+   emit("go", offset2)
 }
 
-function goPrev () {
-   const {offset, limit, total} = props
-   console.log("goPrev", {offset, limit, total})
-   emit("go", Math.max(0, offset - limit))
+function goPrev (multiplier = 1) {
+   const offset2 = itemOffset.goPrev(props.offset, props.limit * multiplier, props.total)
+   emit("go", offset2)
 }
 
-function goNext () {
-   const {offset, limit, total} = props
-   console.log("goNext", {offset, limit, total})
-   console.log(total%limit)
-   const maxNext = Math.floor(total/limit)*limit
-   const nextNext = offset+limit
-   let noffset = Math.min(maxNext, nextNext)
-   // console.log({maxNext,nextNext,noffset})
-   emit("go", noffset)
+function goNext (multiplier = 1) {
+   const offset2 = itemOffset.goNext(props.offset, props.limit * multiplier, props.total)
+   emit("go", offset2)
 }
 
+/////// KEYBOARD ////////////////////////////////////////////////////////////////
+
+onKeyStroke(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"], (e) => {
+   let multiplier = 1
+   switch (e.key) {
+      case "ArrowLeft":
+         multiplier = e.shiftKey ? 10 : 1
+         goPrev(multiplier)
+         break
+      case "ArrowRight":
+         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
@@ -75,7 +151,8 @@
 
 .start, .end, .prev, .next
    font-size 130%
-   //width 1em
+
+//width 1em
 .current
    width 12em;
    text-align center;
@@ -84,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