greenflame089
70 lines
3.4 KiB
Markdown
70 lines
3.4 KiB
Markdown
# Q-Edit v0.7.1 — Pagination UX & State Persistence
|
||
|
||
**Date:** 2025-08-24
|
||
|
||
This release focuses on making very large result sets (hundreds to thousands of pages) pleasant to navigate. We replaced the full page-number list with a compact, windowed pager; added a jump-to-page control; preserved your place via URL hash; and made the page count preference persistent.
|
||
|
||
## Highlights
|
||
|
||
- **Windowed + Ellipsis Pagination**
|
||
- Only shows a small window around the current page: _first/prev, current±2, next/last_, with `…` for gaps.
|
||
- Prevents the pagination bar from stretching the page horizontally.
|
||
- **Jump to page**
|
||
- Number input + **Go** button; **Enter** key supported.
|
||
- **URL hash deep-linking**
|
||
- The current page is reflected as `#page=NN`. Browser back/forward & reload restore state.
|
||
- **Default items per page = 25**
|
||
- Persisted in `localStorage` under the key **`qedit_itemsPerPage`**.
|
||
- **Overflow guard**
|
||
- `.pagination-controls` is now constrained with `max-width:100%; overflow-x:auto; white-space:nowrap;`.
|
||
|
||
## Technical changes
|
||
|
||
- **Files modified**
|
||
- `index.html`
|
||
- Default items-per-page option switched to **25** (`<option value="25" selected>`).
|
||
- `style.css`
|
||
- Added overflow guard for `.pagination-controls`.
|
||
- New styles for `.jump-to-page` controls.
|
||
- `script.js`
|
||
- Replaced `buildPaginationControls()` with windowed/ellipsis logic and jump UI.
|
||
- Expanded `addPaginationEventHandlers()` to wire **jump button** and **Enter** on the number input.
|
||
- New helpers:
|
||
- `getPageFromHash()` — parse `#page=NN`.
|
||
- `setPageHash(p)` — update hash on navigation.
|
||
- `initPaginationPrefs()` — apply `localStorage` items-per-page and hash page on startup; listens for `hashchange`.
|
||
- Persist selection on items-per-page change via `localStorage.setItem('qedit_itemsPerPage', ...)`.
|
||
- **Respect existing page** from hash after auth; removed forced `currentPage = 1` in login success path.
|
||
- A11y: `aria-label` on navigation controls; `aria-current="page"` on active page.
|
||
- Defensive: no-op when `totalPages <= 1`.
|
||
|
||
## Behavior notes
|
||
|
||
- If `localStorage` is unavailable, items-per-page simply won’t persist (feature degrades gracefully).
|
||
- Deep-links like `/#page=17` will open directly on page 17 after authentication completes.
|
||
- Both top and bottom pagers render identically from the same HTML string.
|
||
|
||
## QA checklist
|
||
|
||
- With large datasets (e.g., 4,000+ items):
|
||
- [ ] No horizontal page-wide scrolling due to pagination.
|
||
- [ ] Pager shows compact numbers with `…` where appropriate.
|
||
- [ ] Clicking **First/Prev/Next/Last** updates content and hash.
|
||
- [ ] Typing a page number and pressing **Go** or **Enter** navigates correctly and clamps to 1..N.
|
||
- [ ] Reload preserves page via `#page=NN`.
|
||
- [ ] Changing items-per-page updates `#page` to 1 and persists across reloads.
|
||
- A11y:
|
||
- [ ] `aria-current="page"` present on current page link.
|
||
- [ ] Focus rings visible; buttons keyboard-activatable.
|
||
|
||
## Potential regressions / mitigations
|
||
|
||
- **Hash collisions**: If other features later use the hash, ensure `page=` remains compatible or parse jointly.
|
||
- **Bookmark drift**: When items-per-page changes, page resets to 1 by design; the hash updates accordingly.
|
||
|
||
## Future work (optional)
|
||
|
||
- Keyboard nav shortcuts (←/→) to flip pages when the pager is focused.
|
||
- Gradient edge hints on the pager to signal scrollable overflow.
|
||
- Virtualized/infinite scroll mode for image-heavy views.
|