Implement pagination web component on Trending page (#12035)

* refactor: Rename pagination event to ol-pagination-change

Rename custom event from update:page to ol-pagination-change with
structured detail object. Add self-update of currentPage with
cancelable support.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: Update design template for ol-pagination-change event

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: Enhance OlPagination documentation and examples

Updated the OlPagination component's documentation to clarify the behavior of the baseUrl property and its fallback to the current page URL. Improved examples to demonstrate analytics tracking and the handling of the ol-pagination-change event. Adjusted text for better clarity on navigation options.

* feat: Introduce OlPagination component and update trending template

Added a new OlPagination component for improved pagination functionality. Updated the trending template to utilize the new component, replacing the previous pager implementation. Enhanced CSS for pagination styling and adjusted mybooks list margin for better layout.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Update openlibrary/templates/trending.html

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Drini Cami <cdrini@gmail.com>

Author: 4 people

openlibrary/components/lit/OlPagination.js

@@ -7,9 +7,10 @@ import { LitElement, html, css } from 'lit';
  *
  * @prop {Number} totalPages - Total number of pages
  * @prop {Number} currentPage - Currently selected page (1-indexed)
- * @prop {String} baseUrl - Optional base URL for generating page links. When provided,
- *                          renders anchor tags for SEO-friendly navigation. When omitted,
- *                          renders buttons and emits events.
+ * @prop {String} baseUrl - Optional base URL for generating page links. When omitted,
+ *                          falls back to the current page URL, preserving all existing
+ *                          query parameters (similar to changequery). Always renders
+ *                          anchor tags for SEO-friendly navigation.
  * @prop {String} labelPreviousPage - Aria label for "previous page" button (default: "Go to previous page")
  * @prop {String} labelNextPage - Aria label for "next page" button (default: "Go to next page")
  * @prop {String} labelGoToPage - Aria label template for page buttons, use {page} as placeholder
@@ -21,14 +22,20 @@ import { LitElement, html, css } from 'lit';
  * @fires ol-pagination-change - Fired when a page is selected. detail: { page: Number }
  *
  * @example
- * <!-- Event-based -->
+ * <!-- Uses current page URL, preserving query params -->
  * <ol-pagination total-pages="50" current-page="1"></ol-pagination>
  *
  * @example
- * <!-- URL-based -->
+ * <!-- Explicit base URL -->
  * <ol-pagination total-pages="50" current-page="1" base-url="/search?q=hello"></ol-pagination>
  *
  * @example
+ * <!-- Intercept navigation with event -->
+ * <ol-pagination total-pages="50" current-page="1"
+ *     @ol-pagination-change=${(e) => { e.preventDefault(); handlePage(e.detail.page); }}
+ * ></ol-pagination>
+ *
+ * @example
  * <!-- With translated labels -->
  * <ol-pagination
  *     total-pages="50"
@@ -73,32 +80,33 @@ export class OlPagination extends LitElement {
             border: 1px solid transparent;
             border-radius: 4px;
             background: transparent;
-            color: #444;
+            color: var(--darker-grey, #444);
             cursor: pointer;
             text-decoration: none;
         }
 
         .pagination-item:hover:not([aria-disabled="true"]):not([aria-current="page"]) {
-            background: rgba(0, 0, 0, 0.1);
+            background: var(--icon-link-grey, rgba(0, 0, 0, 0.1));
         }
 
         .pagination-item:focus {
             outline: none;
         }
 
         .pagination-item:focus-visible {
-            outline: 2px solid #5B8DD9;
+            outline: 2px solid var(--color-focus-ring, #5B8DD9);
             outline-offset: 2px;
         }
 
         .pagination-item[aria-current="page"] {
-            border-color: #ddd;
+            border-color: var(--lighter-grey, #ddd);
+            background-color: var(--lightest-grey, #eee);
             cursor: default;
             user-select: none;
         }
 
         .pagination-item[aria-disabled="true"] {
-            color: #ddd;
+            color: var(--lighter-grey, #ddd);
             cursor: not-allowed;
         }
 
@@ -110,7 +118,7 @@ export class OlPagination extends LitElement {
             display: flex;
             align-items: center;
             justify-content: center;
-            color: #aaa;
+            color: var(--mid-grey, #aaa);
             cursor: default;
             user-select: none;
         }
@@ -149,15 +157,15 @@ export class OlPagination extends LitElement {
 
     /**
      * Build URL for a specific page number.
-     * Returns null if baseUrl is not set.
+     * Uses baseUrl if provided, otherwise falls back to the current window location.
+     * This preserves all existing query parameters (like changequery() does).
      * @param {Number} page - The page number
-     * @returns {String|null} The URL for the page, or null if baseUrl not set
+     * @returns {String|null} The URL for the page
      */
     _getPageUrl(page) {
-        if (!this.baseUrl) return null;
-
         try {
-            const url = new URL(this.baseUrl, window.location.origin);
+            const base = this.baseUrl || window.location.href;
+            const url = new URL(base, window.location.origin);
             if (page === 1) {
                 url.searchParams.delete('page');
             } else {
@@ -254,6 +262,7 @@ export class OlPagination extends LitElement {
     /**
      * Handle click on anchor-based page links.
      * Dispatches the ol-pagination-change event to allow interception.
+     * If the event is cancelled via preventDefault(), anchor navigation is also prevented.
      * @param {Event} e - Click event
      * @param {Number} page - The page number
      */
@@ -265,6 +274,10 @@ export class OlPagination extends LitElement {
             cancelable: true,
         });
         this.dispatchEvent(event);
+        if (event.defaultPrevented) {
+            e.preventDefault();
+            this.currentPage = page;
+        }
     }
 
     /**

openlibrary/i18n/messages.pot

@@ -491,6 +491,26 @@ msgstr ""
 msgid "My Book Review"
 msgstr ""
 
+#: OlPagination.html
+msgid "Go to previous page"
+msgstr ""
+
+#: OlPagination.html
+msgid "Go to next page"
+msgstr ""
+
+#: OlPagination.html
+msgid "Go to page {page}"
+msgstr ""
+
+#: OlPagination.html
+msgid "Page {page}, current page"
+msgstr ""
+
+#: OlPagination.html type/edition/view.html type/work/view.html
+msgid "Pagination"
+msgstr ""
+
 #: Pager.html Pager_loanhistory.html
 msgid "First"
 msgstr ""
@@ -1813,18 +1833,19 @@ msgid ""
 msgstr ""
 
 #: design.html
-msgid "Event-based"
+msgid "Analytics tracking"
 msgstr ""
 
 #: design.html
 #, python-format
 msgid ""
 "When a page is clicked, the component fires an %(event_name)s event with "
-"the page number in %(event_detail)s."
+"the page number in %(event_detail)s. Use this to send analytics before "
+"the browser navigates."
 msgstr ""
 
 #: design.html
-msgid "Selected page:"
+msgid "Last tracked page:"
 msgstr ""
 
 #: design.html
@@ -1833,8 +1854,8 @@ msgstr ""
 
 #: design.html
 msgid ""
-"When base-url is provided, pagination renders anchor tags for SEO-"
-"friendly links."
+"By default, pagination renders anchor tags using the current page URL, "
+"preserving all query parameters. Use base-url to override the URL."
 msgstr ""
 
 #: design.html
@@ -7938,10 +7959,6 @@ msgstr ""
 msgid "Format"
 msgstr ""
 
-#: type/edition/view.html type/work/view.html
-msgid "Pagination"
-msgstr ""
-
 #: type/edition/view.html type/work/view.html
 msgid "Number of pages"
 msgstr ""

openlibrary/macros/OlPagination.html

@@ -0,0 +1,12 @@
+$def with (page, total_pages)
+
+$if total_pages > 1:
+    <ol-pagination
+        total-pages="$total_pages"
+        current-page="$page"
+        label-previous-page="$_('Go to previous page')"
+        label-next-page="$_('Go to next page')"
+        label-go-to-page="$_('Go to page {page}')"
+        label-current-page="$_('Page {page}, current page')"
+        label-pagination="$_('Pagination')"
+    ></ol-pagination>

openlibrary/templates/design.html

@@ -25,24 +25,29 @@ <h2 class="design-pattern__title">$_("Pagination component")</h2>
     </div>
     <div class="design-pattern__content">
       <section class="example">
-        <h3 class="example__title">$_("Event-based")</h3>
-        <p>$:_("When a page is clicked, the component fires an %(event_name)s event with the page number in %(event_detail)s.", event_name="<code>ol-pagination-change</code>", event_detail="<code>event.detail.page</code>")</p>
-        <code class="example__code">&lt;ol-pagination total-pages="10" current-page="1"&gt;&lt;/ol-pagination&gt;</code>
+        <h3 class="example__title">$_("Analytics tracking")</h3>
+        <p>$:_("When a page is clicked, the component fires an %(event_name)s event with the page number in %(event_detail)s. Use this to send analytics before the browser navigates.", event_name="<code>ol-pagination-change</code>", event_detail="<code>event.detail.page</code>")</p>
+        <code class="example__code">document.addEventListener('ol-pagination-change', (e) => {
+  navigator.sendBeacon('/analytics', JSON.stringify({
+    category: 'Pager',
+    action: 'Page ' + e.detail.page,
+  }));
+});</code>
         <div class="example__output">
           <ol-pagination id="demo-pagination" total-pages="10" current-page="1"></ol-pagination>
         </div>
-        <p>$_("Selected page:"): <strong id="demo-selected-page">1</strong></p>
+        <p>$_("Last tracked page:"): <strong id="demo-selected-page">-</strong></p>
         <script>
           document.getElementById('demo-pagination').addEventListener('ol-pagination-change', (e) => {
+            e.preventDefault();
             document.getElementById('demo-selected-page').textContent = e.detail.page;
-            e.target.setAttribute('current-page', e.detail.page);
           });
         </script>
       </section>
 
       <section class="example">
         <h3 class="example__title">$_("URL-based Navigation")</h3>
-        <p>$_("When base-url is provided, pagination renders anchor tags for SEO-friendly links.")</p>
+        <p>$_("By default, pagination renders anchor tags using the current page URL, preserving all query parameters. Use base-url to override the URL.")</p>
         <code class="example__code">&lt;ol-pagination total-pages="50" current-page="5" base-url="/search?q=example"&gt;&lt;/ol-pagination&gt;</code>
         <ol-pagination total-pages="50" current-page="5" base-url="/search?q=example"></ol-pagination>
       </section>

openlibrary/templates/trending.html

@@ -31,7 +31,7 @@ <h1>$_('Trending Books'): $(pages[mode])</h1>
           $:macros.SearchResultsWork(entry['work'], extra=extra, availability=entry['work'].get('availability'), seq_index=loop.index0)
     </ul>
   </div>
-  <div class="pager">
-    $:macros.Pager(page, 200, results_per_page=20)
+  <div class="ol-pagination-wrapper">
+    $:macros.OlPagination(page, total_pages=200 // 20)
   </div>
 </div>

static/css/components/mybooks-list.css

@@ -42,6 +42,7 @@
 
 .mybooks-list {
   overflow-wrap: anywhere;
+  margin-bottom: 12px;
 }
 
 .chip-group + .mybooks-list {

static/css/components/pagination.css

@@ -36,3 +36,8 @@
   margin-right: 10px;
   background-color: var(--lightest-grey);
 }
+
+.ol-pagination-wrapper {
+  display: flex;
+  justify-content: center;
+}