From 5b97c7bba168089752aaf071adf3af76fec125a7 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Tue, 30 Jan 2024 12:02:21 -0500 Subject: [PATCH 01/24] Refactors Drawer into common components Refactors browser logic into separate files Moves Paginator into common components Makes SearchInput a generic component --- src/addons/browser/Browser.svelte | 83 +++++------------ src/addons/browser/Categories.svelte | 38 ++++++++ src/addons/browser/Filters.svelte | 88 ++++--------------- src/addons/browser/browser.ts | 64 ++++++++++++++ src/addons/dispatch/Dispatch.svelte | 2 +- src/addons/runs/History.svelte | 2 +- src/addons/runs/Runs.svelte | 2 +- src/addons/runs/Scheduled.svelte | 2 +- src/{addons => common}/Drawer.svelte | 0 src/{addons => common}/Paginator.svelte | 2 +- .../browser => common}/SearchInput.svelte | 2 +- .../stories/Drawer.stories.svelte | 2 +- .../stories/Paginator.stories.svelte | 2 +- .../stories/SearchInput.stories.svelte | 2 +- 14 files changed, 151 insertions(+), 140 deletions(-) create mode 100644 src/addons/browser/Categories.svelte create mode 100644 src/addons/browser/browser.ts rename src/{addons => common}/Drawer.svelte (100%) rename src/{addons => common}/Paginator.svelte (93%) rename src/{addons/browser => common}/SearchInput.svelte (93%) rename src/{addons => common}/stories/Drawer.stories.svelte (95%) rename src/{addons => common}/stories/Paginator.stories.svelte (96%) rename src/{addons/browser => common}/stories/SearchInput.stories.svelte (88%) diff --git a/src/addons/browser/Browser.svelte b/src/addons/browser/Browser.svelte index a975fdea8..4bb6408aa 100644 --- a/src/addons/browser/Browser.svelte +++ b/src/addons/browser/Browser.svelte @@ -2,13 +2,14 @@ @@ -117,7 +75,10 @@
diff --git a/src/addons/browser/Categories.svelte b/src/addons/browser/Categories.svelte new file mode 100644 index 000000000..d4d4813e8 --- /dev/null +++ b/src/addons/browser/Categories.svelte @@ -0,0 +1,38 @@ + + +
+

{$_("addonBrowserDialog.categories")}

+
    + {#each CATEGORIES as [category, name]} +
  • + + + +
    • + {/each} +
+
+ + diff --git a/src/addons/browser/Filters.svelte b/src/addons/browser/Filters.svelte index fcef773df..98f066aa0 100644 --- a/src/addons/browser/Filters.svelte +++ b/src/addons/browser/Filters.svelte @@ -1,78 +1,30 @@ - -
    -
  • - - - - -
    • - -
  • - - - - -
    • -
  • - - - - -
    • + {#each FILTERS as [id, name]} +
  • + + + + +
    • + {/each}
-
-

{$_("addonBrowserDialog.categories")}

-
    - {#each CATEGORIES as [category, name]} -
  • - - - -
    • - {/each} -
-
diff --git a/src/common/stories/Paginator.stories.svelte b/src/common/stories/Paginator.stories.svelte index 3f1013689..276589b02 100644 --- a/src/common/stories/Paginator.stories.svelte +++ b/src/common/stories/Paginator.stories.svelte @@ -23,6 +23,7 @@
@@ -33,11 +34,15 @@ + + diff --git a/src/langs/json/en.json b/src/langs/json/en.json index d978178b9..967cdb03a 100644 --- a/src/langs/json/en.json +++ b/src/langs/json/en.json @@ -539,10 +539,13 @@ "requestVerificationAction": "Request Verification to Upload" }, "paginator": { + "page": "Page", "of": "of", "document": "{n, plural, one {Document} other {Documents}}", - "next": "Next", - "previous": "Previous" + "next": "Next Page", + "previous": "Previous Page", + "first": "First Page", + "last": "Last Page" }, "processingBar": { "doneProcessing": "Done processing", From 03e17c5b80d0c43fc0194277123d7eb4274b9c5e Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 21 Feb 2024 17:38:37 -0500 Subject: [PATCH 03/24] Adds additional states to Paginator --- src/common/Paginator.svelte | 53 +++++++++++---------- src/common/stories/Paginator.stories.svelte | 5 +- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/common/Paginator.svelte b/src/common/Paginator.svelte index e56a33dcf..85c8ba859 100644 --- a/src/common/Paginator.svelte +++ b/src/common/Paginator.svelte @@ -9,10 +9,11 @@ MoveToStart16, } from "svelte-octicons"; - export let page: number; - export let totalPages: number; + export let page: number | undefined = undefined; + export let totalPages: number | undefined = undefined; export let has_next = false; export let has_previous = false; + export let goToNav = false; const dispatch = createEventDispatcher(); let input: HTMLInputElement; @@ -70,7 +71,7 @@
- {#if page && totalPages} + {#if page && totalPages && goToNav}
@@ -120,7 +125,7 @@ > - {#if page && totalPages} + {#if page && totalPages && goToNav} - - - {$doc.visiblePageNumber} - { - intentionalBlur = false; - customPage = `${$doc.visiblePageNumber}`; - hadInput = false; - select(); - }} - on:blur={handleInput} - on:input={() => (hadInput = true)} - on:keydown={(e) => { - if (input != document.activeElement) return; - if (e.key == "Escape") { - dismiss(); - } else if (e.key == "Enter") { - handleInput(); - } else if (e.key == "ArrowUp") { - increment(true); - } else if (e.key == "ArrowDown") { - decrement(true); - } - }} - /> - - {$_("paginator.of")} {$viewer.document.pageCount} - -
+ 1} + /> {/if} - - From 65ce651f5039d3a2256cbc219db6a55174f0aa71 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 21 Feb 2024 19:21:26 -0500 Subject: [PATCH 07/24] Update Ghost button styling --- src/common/Button.svelte | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/common/Button.svelte b/src/common/Button.svelte index e9fa024b4..d905bbea9 100644 --- a/src/common/Button.svelte +++ b/src/common/Button.svelte @@ -188,13 +188,16 @@ margin: 0 5px; } - .ghost, - .ghost:disabled { + .ghost { background: transparent; - color: var(--black); + color: var(--primary); + fill: var(--primary); } .ghost:disabled { opacity: 0.5; + background: transparent; + color: var(--gray); + fill: var(--gray); } .ghost:hover, .ghost:focus { From 33c864fba5c56e6eeb2b59728805449b11f8c194 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 21 Feb 2024 19:21:35 -0500 Subject: [PATCH 08/24] Fix page counter --- src/search/search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/search/search.js b/src/search/search.js index 3685906bf..481645595 100644 --- a/src/search/search.js +++ b/src/search/search.js @@ -63,7 +63,7 @@ export const search = new Svue({ return prevUrls.length > 0; }, page(prevUrls) { - return prevUrls.length; + return prevUrls.length + 1; }, start(prevUrls, results, params) { if (results == null) return 0; From c4d089053af16931c66ab0f392f887a44004dd8c Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 21 Feb 2024 20:56:31 -0500 Subject: [PATCH 09/24] Fixes for viewer paginator --- src/common/Paginator.svelte | 27 ++++++++-------------- src/pages/viewer/controls/Paginator.svelte | 2 +- 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/src/common/Paginator.svelte b/src/common/Paginator.svelte index 85c8ba859..a191dc619 100644 --- a/src/common/Paginator.svelte +++ b/src/common/Paginator.svelte @@ -17,12 +17,8 @@ const dispatch = createEventDispatcher(); let input: HTMLInputElement; - let inputValue: number = page; - $: inputWidth = String(inputValue ?? 0).length; - $: invalidValue = inputValue > totalPages || !inputValue; - $: { - inputValue = page; - } + $: inputWidth = String(page ?? 0).length; + $: invalidValue = page > totalPages || !page; export function previous() { dispatch("previous"); @@ -36,13 +32,11 @@ dispatch("goTo", page); } - function handleChange() { - if (invalidValue || inputValue === page) { - inputValue = page; - return; - } - console.log(inputValue); - goTo(inputValue); + function handleChange(event: Event) { + if (invalidValue) return; + console.debug("Paginator: Page changed to ", page); + const { value } = event.target as HTMLInputElement; + goTo(parseInt(value)); } function handleKeyup({ key }: KeyboardEvent) { @@ -53,10 +47,7 @@ input.blur(); break; // case "Enter": - // if (invalidValue) { - // inputValue = page; - // } else if (inputValue !== page) { - // goTo(inputValue); + // goTo(page); // } // input.blur(); // break; @@ -104,7 +95,7 @@ min="1" max={totalPages} bind:this={input} - bind:value={inputValue} + bind:value={page} on:change={handleChange} on:keyup={handleKeyup} style={`width: ${inputWidth}ch`} diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte index b02837482..5238a437f 100644 --- a/src/pages/viewer/controls/Paginator.svelte +++ b/src/pages/viewer/controls/Paginator.svelte @@ -19,7 +19,7 @@ {#if $viewer.loaded && $doc.mode !== "search" && $doc.mode !== "notes" && $doc.mode !== "thumbnail"} Date: Thu, 22 Feb 2024 13:38:50 -0500 Subject: [PATCH 10/24] Fixes for viewer pagination --- src/common/Paginator.svelte | 10 +++++----- src/pages/viewer/controls/Paginator.svelte | 18 +++++++----------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/common/Paginator.svelte b/src/common/Paginator.svelte index a191dc619..da0248633 100644 --- a/src/common/Paginator.svelte +++ b/src/common/Paginator.svelte @@ -20,15 +20,15 @@ $: inputWidth = String(page ?? 0).length; $: invalidValue = page > totalPages || !page; - export function previous() { - dispatch("previous"); + function previous() { + dispatch("previous", page - 1); } - export function next() { - dispatch("next"); + function next() { + dispatch("next", page + 1); } - export function goTo(page: number) { + function goTo(page: number) { dispatch("goTo", page); } diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte index 5238a437f..9c277952e 100644 --- a/src/pages/viewer/controls/Paginator.svelte +++ b/src/pages/viewer/controls/Paginator.svelte @@ -3,26 +3,22 @@ import { viewer } from "@/viewer/viewer.js"; import Paginator from "../../../common/Paginator.svelte"; - function gotoPage(readablePageNumber) { + function goToPage(readablePageNumber) { doc.jumpToPage(readablePageNumber - 1); } - function increment() { - gotoPage(Math.min(doc.visiblePageNumber + 1, viewer.document.pageCount)); - } - - function decrement() { - gotoPage(Math.max(doc.visiblePageNumber - 1, 1)); + $: { + console.log(doc.visiblePageNumber, $doc.visiblePageNumber); } {#if $viewer.loaded && $doc.mode !== "search" && $doc.mode !== "notes" && $doc.mode !== "thumbnail"} 1} From da3b2776fb9d4d2a30493de7349a597ed252c8b1 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 22 Feb 2024 13:49:24 -0500 Subject: [PATCH 11/24] More viewer pagination fixes --- src/pages/viewer/controls/Paginator.svelte | 31 +++++++++++++--------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte index 9c277952e..7f1a4de34 100644 --- a/src/pages/viewer/controls/Paginator.svelte +++ b/src/pages/viewer/controls/Paginator.svelte @@ -1,26 +1,31 @@ - -{#if $viewer.loaded && $doc.mode !== "search" && $doc.mode !== "notes" && $doc.mode !== "thumbnail"} +{#if $viewer.loaded && mode !== "search" && mode !== "notes" && mode !== "thumbnail"} 1} /> {/if} From 20e2579863dc685d04505fbbd5822d5a8b9d884c Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 22 Feb 2024 14:45:08 -0500 Subject: [PATCH 12/24] Fix goToPage handler --- src/pages/viewer/controls/Paginator.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte index 7f1a4de34..4bfc831ca 100644 --- a/src/pages/viewer/controls/Paginator.svelte +++ b/src/pages/viewer/controls/Paginator.svelte @@ -11,7 +11,8 @@ $: has_next = page < totalPages; $: has_previous = page > 1; - function goToPage(page) { + function goToPage(event: CustomEvent) { + const page = event.detail; console.log("Go to page ", page); doc.jumpToPage(page - 1); } From 0b01b3307eac00c93972b89d62e669fd011f540b Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 22 Feb 2024 15:03:18 -0500 Subject: [PATCH 13/24] Debug paginator --- src/pages/viewer/controls/Paginator.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte index 4bfc831ca..4d5048a8b 100644 --- a/src/pages/viewer/controls/Paginator.svelte +++ b/src/pages/viewer/controls/Paginator.svelte @@ -10,10 +10,13 @@ $: totalPages = viewer.document.pageCount; $: has_next = page < totalPages; $: has_previous = page > 1; + $: { + console.debug({ page, totalPages, has_next, has_previous }); + } function goToPage(event: CustomEvent) { const page = event.detail; - console.log("Go to page ", page); + console.debug("Go to page ", page); doc.jumpToPage(page - 1); } From b590ecc401c47fbd1b61674f9fa98c5628c34c26 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 22 Feb 2024 15:13:41 -0500 Subject: [PATCH 14/24] Fix null document check --- src/pages/viewer/controls/Paginator.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte index 4d5048a8b..1addbc22e 100644 --- a/src/pages/viewer/controls/Paginator.svelte +++ b/src/pages/viewer/controls/Paginator.svelte @@ -7,7 +7,7 @@ $: mode = doc.mode; $: page = doc.visiblePageNumber; - $: totalPages = viewer.document.pageCount; + $: totalPages = viewer.document?.pageCount; $: has_next = page < totalPages; $: has_previous = page > 1; $: { From 1d29a74967fd0558b7587dbf43b6fbd3fc80635b Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 22 Feb 2024 15:17:56 -0500 Subject: [PATCH 15/24] Attempt $ access for updates --- src/pages/viewer/controls/Paginator.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte index 1addbc22e..1c4355ef1 100644 --- a/src/pages/viewer/controls/Paginator.svelte +++ b/src/pages/viewer/controls/Paginator.svelte @@ -4,10 +4,10 @@ import Paginator from "../../../common/Paginator.svelte"; // @ts-expect-error - $: mode = doc.mode; + $: mode = $doc.mode; - $: page = doc.visiblePageNumber; - $: totalPages = viewer.document?.pageCount; + $: page = $doc.visiblePageNumber; + $: totalPages = $viewer.document?.pageCount; $: has_next = page < totalPages; $: has_previous = page > 1; $: { From 0be18b04d18917eb5d750ed9d1cb59e3a9ff2e71 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 22 Feb 2024 15:42:05 -0500 Subject: [PATCH 16/24] Do not bind input value to page --- src/common/Paginator.svelte | 24 ++++++++-------------- src/pages/viewer/controls/Paginator.svelte | 1 - 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/src/common/Paginator.svelte b/src/common/Paginator.svelte index da0248633..f0d56ad3b 100644 --- a/src/common/Paginator.svelte +++ b/src/common/Paginator.svelte @@ -17,8 +17,10 @@ const dispatch = createEventDispatcher(); let input: HTMLInputElement; - $: inputWidth = String(page ?? 0).length; - $: invalidValue = page > totalPages || !page; + // proxy the page value so we can reset it if needed + let inputValue = page; + $: inputWidth = String(inputValue ?? 0).length; + $: invalidValue = inputValue > totalPages || !inputValue; function previous() { dispatch("previous", page - 1); @@ -33,7 +35,10 @@ } function handleChange(event: Event) { - if (invalidValue) return; + if (invalidValue || inputValue === page) { + inputValue = page; + return; + } console.debug("Paginator: Page changed to ", page); const { value } = event.target as HTMLInputElement; goTo(parseInt(value)); @@ -46,17 +51,6 @@ case "Enter": input.blur(); break; - // case "Enter": - // goTo(page); - // } - // input.blur(); - // break; - // case "ArrowUp": - // next(); - // break; - // case "ArrowDown": - // previous(); - // break; } } @@ -95,7 +89,7 @@ min="1" max={totalPages} bind:this={input} - bind:value={page} + bind:value={inputValue} on:change={handleChange} on:keyup={handleKeyup} style={`width: ${inputWidth}ch`} diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte index 1c4355ef1..d3700d3ab 100644 --- a/src/pages/viewer/controls/Paginator.svelte +++ b/src/pages/viewer/controls/Paginator.svelte @@ -3,7 +3,6 @@ import { viewer } from "../../../viewer/viewer.js"; import Paginator from "../../../common/Paginator.svelte"; - // @ts-expect-error $: mode = $doc.mode; $: page = $doc.visiblePageNumber; From 109cd24452ebdb5db9f7ce351f15e7c5a74c96de Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 22 Feb 2024 15:56:53 -0500 Subject: [PATCH 17/24] Update inputValue when page changes --- src/common/Paginator.svelte | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/common/Paginator.svelte b/src/common/Paginator.svelte index f0d56ad3b..8ed6a2da0 100644 --- a/src/common/Paginator.svelte +++ b/src/common/Paginator.svelte @@ -21,6 +21,9 @@ let inputValue = page; $: inputWidth = String(inputValue ?? 0).length; $: invalidValue = inputValue > totalPages || !inputValue; + $: { + inputValue = page; + } function previous() { dispatch("previous", page - 1); From 61f6e086c9f062103789ff3d9e0572e1dbf3c73e Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 22 Feb 2024 17:09:40 -0500 Subject: [PATCH 18/24] Validates if page is integer --- src/common/Button.svelte | 1 + src/common/Paginator.svelte | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/common/Button.svelte b/src/common/Button.svelte index d905bbea9..064bd4a8a 100644 --- a/src/common/Button.svelte +++ b/src/common/Button.svelte @@ -205,6 +205,7 @@ } .square { + margin: 0; padding: 0.5rem; } diff --git a/src/common/Paginator.svelte b/src/common/Paginator.svelte index 8ed6a2da0..88b9f5731 100644 --- a/src/common/Paginator.svelte +++ b/src/common/Paginator.svelte @@ -15,12 +15,17 @@ export let has_previous = false; export let goToNav = false; + var isInt = /^[0-9]+$/; + const dispatch = createEventDispatcher(); let input: HTMLInputElement; // proxy the page value so we can reset it if needed let inputValue = page; $: inputWidth = String(inputValue ?? 0).length; - $: invalidValue = inputValue > totalPages || !inputValue; + $: invalidValue = + inputValue > totalPages || + !inputValue || + !isInt.test(inputValue.toString()); $: { inputValue = page; } From 6e5cc0d4eb8534362aa91356e3ff679bae44e808 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 23 Feb 2024 08:28:27 -0500 Subject: [PATCH 19/24] Cleanup and fix --- src/common/Paginator.svelte | 1 - src/pages/app/ActionBar.svelte | 2 +- src/pages/app/Documents.svelte | 2 +- src/pages/app/EmbedFooter.svelte | 2 +- src/pages/viewer/controls/Paginator.svelte | 8 ++------ 5 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/common/Paginator.svelte b/src/common/Paginator.svelte index 88b9f5731..e08a91bdd 100644 --- a/src/common/Paginator.svelte +++ b/src/common/Paginator.svelte @@ -47,7 +47,6 @@ inputValue = page; return; } - console.debug("Paginator: Page changed to ", page); const { value } = event.target as HTMLInputElement; goTo(parseInt(value)); } diff --git a/src/pages/app/ActionBar.svelte b/src/pages/app/ActionBar.svelte index b79b7c340..cd9966767 100644 --- a/src/pages/app/ActionBar.svelte +++ b/src/pages/app/ActionBar.svelte @@ -85,7 +85,7 @@ + From 9bffa8c17aa54ab6ae853ef2d6e282369cc44cb2 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 23 Feb 2024 08:29:18 -0500 Subject: [PATCH 20/24] Adds todo to pagination script --- src/pages/viewer/controls/Paginator.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte index 7f4e61156..8966f4de4 100644 --- a/src/pages/viewer/controls/Paginator.svelte +++ b/src/pages/viewer/controls/Paginator.svelte @@ -1,3 +1,4 @@ +