Skip to content

Add "Go to Hadith Number" input to collection navigation#164

Open
mahmoodhamdi wants to merge 1 commit into
sunnah-com:masterfrom
mahmoodhamdi:feat-go-to-hadith-number
Open

Add "Go to Hadith Number" input to collection navigation#164
mahmoodhamdi wants to merge 1 commit into
sunnah-com:masterfrom
mahmoodhamdi:feat-go-to-hadith-number

Conversation

@mahmoodhamdi
Copy link
Copy Markdown

Summary

Adds a "Go to Hadith Number" input to the collection navigation flow so users
can jump directly to a specific hadith instead of scrolling through a book or
using the browser's in-page find.

A new view widget (collection/_go_to_hadith.php) renders a numeric input and
a "Go" button. JavaScript validates the input and builds the
/<collectionName>:<hadithNumber> URL, which the existing
actionHadithByNumber route already handles (including the 301 redirect that
strips leading zeros).

The widget is included in:

  • collection/index.php — the collection landing page (e.g. /bukhari)
  • collection/dispbook.php — the book page and single-hadith page
    (e.g. /bukhari/1, /bukhari:1)

Implementation notes

  • Numeric-only input is enforced via type="number", pattern="[0-9]*",
    inputmode="numeric", and a client-side regex. No server-side validation
    is needed since the existing route already handles bad inputs.
  • $collectionName is passed into JavaScript via json_encode to prevent
    XSS.
  • The form/input IDs are suffixed with uniqid() so the widget can appear
    more than once on the same page without ID collisions.
  • Styling references the same CSS variables already defined by the search
    box widget (--chip-selected-bg, --border-color, --primary-text-color,
    --secondary-text-color), so the field picks up the existing light/dark
    themes.
  • WebKit/Firefox spinner buttons on the number input are hidden to keep the
    layout tidy.

No new server-side endpoints, no new dependencies, no DB changes.

Fixes #153

Test plan

  • Valid number → navigates to /<collection>:<number>
  • Enter key submits the same as the "Go" button
  • Empty input → focuses the input, no navigation
  • Non-numeric input → blocked by input attributes; regex fallback
    prevents navigation if bypassed
  • Leading zeros (011) stripped client-side; the existing
    server-side 301 redirect remains as a fallback
  • php -l clean on all changed files

Adds a numeric input plus "Go" button that lets users jump directly to
a hadith by its number within the current collection. The widget is
rendered on the collection landing page and on the book/single-hadith
pages (collection/index.php and collection/dispbook.php).

Input is restricted to numeric values via input attributes and a
client-side regex check; the URL is built in JavaScript using the
existing `<collectionName>:<hadithNumber>` route, so no new server-side
handling is needed. Styling uses the same CSS variables as the search
box widget, so the field picks up the existing light/dark themes.

Fixes sunnah-com#153
@ahadith
Copy link
Copy Markdown
Contributor

ahadith commented May 12, 2026

@fsid could you please review?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add "Go to Hadith Number" input field to navigate collections

2 participants