From beb0698a28d4700876a5f63cf4e484595813e20f Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Fri, 06 Jun 2025 09:40:46 +0000
Subject: [PATCH] adding keystrokes to Pagination.vue
---
vue/src/components/Pagination.vue | 65 ++++++++++++++++++++------------
1 files changed, 41 insertions(+), 24 deletions(-)
diff --git a/vue/src/components/Pagination.vue b/vue/src/components/Pagination.vue
index 0460a09..fa59d81 100644
--- a/vue/src/components/Pagination.vue
+++ b/vue/src/components/Pagination.vue
@@ -1,5 +1,8 @@
<script setup>
+import * as itemOffset from '../lib/itemOffset.js'
+import {onKeyStroke} from "@vueuse/core"
+
const props = defineProps({
total: Number,
offset: Number,
@@ -9,33 +12,46 @@
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", "Home", "End"], (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 "Home":
+ goStart()
+ break
+ case "End":
+ goEnd()
+ break
+ }
+})
</script>
@@ -43,14 +59,14 @@
<template>
<div class="pagination">
- <input type="button" @click="goStart()" class="start" value="«" >
- <input type="button" @click="goPrev()" class="prev" value="‹" >
+ <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="»" >
+ <input type="button" @click="goNext()" class="next" value="›">
+ <input type="button" @click="goEnd()" class="end" value="»">
</div>
</template>
@@ -75,7 +91,8 @@
.start, .end, .prev, .next
font-size 130%
- //width 1em
+
+//width 1em
.current
width 12em;
text-align center;
--
Gitblit v1.8.0