Added name attribute to combo and items input tags; removed pagy_mark…

…ed_link and refactored js input action

lib/javascripts/pagy-module.js

@@ -40,13 +40,13 @@ const Pagy = (() => {
         }
     };
     // Init the *_combo_nav_js helpers
-    const initCombo = (el, [link, trimParam]) => initInput(el, inputValue => [inputValue, link.replace(/__pagy_page__/, inputValue)], trimParam);
+    const initCombo = (el, [url_token, trimParam]) => initInput(el, inputValue => [inputValue, url_token.replace(/__pagy_page__/, inputValue)], trimParam);
     // Init the items_selector_js helper
-    const initSelector = (el, [from, link, trimParam]) => {
+    const initSelector = (el, [from, url_token, trimParam]) => {
         initInput(el, inputValue => {
             const page = Math.max(Math.ceil(from / parseInt(inputValue)), 1).toString();
-            const html = link.replace(/__pagy_page__/, page).replace(/__pagy_items__/, inputValue);
-            return [page, html];
+            const url = url_token.replace(/__pagy_page__/, page).replace(/__pagy_items__/, inputValue);
+            return [page, url];
         }, trimParam);
     };
     // Init the input element
@@ -63,12 +63,11 @@ const Pagy = (() => {
                 input.select();
                 return;
             }
-            let [page, html] = getVars(input.value); // eslint-disable-line prefer-const
+            let [page, url] = getVars(input.value); // eslint-disable-line prefer-const
             if (typeof trimParam === "string" && page === "1") {
-                html = trim(html, trimParam);
+                url = trim(url, trimParam);
             }
-            el.insertAdjacentHTML("afterbegin", html);
-            el.querySelector("a").click();
+            window.location.href = url;
         };
         ["change", "focus"].forEach(e => input.addEventListener(e, input.select)); // auto-select
         input.addEventListener("focusout", action); // trigger action

lib/pagy/extras/bootstrap.rb

@@ -60,13 +60,13 @@ def pagy_bootstrap_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
       link    = pagy_link_proc(pagy, link_extra:)
       p_page  = pagy.page
       p_pages = pagy.pages
-      input   = %(<input type="number" min="1" max="#{p_pages}" value="#{
+      input   = %(<input name="page" type="number" min="1" max="#{p_pages}" value="#{
                     p_page}" style="padding: 0; border: none; text-align: center; width: #{
                     p_pages.to_s.length + 1}rem;" aria-current="page">)
 
       %(<nav#{p_id} class="pagy-bootstrap-combo-nav-js pagination" #{
           nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-          pagy_data(pagy, :combo, pagy_marked_link(link)) }><div class="btn-group" role="group">#{
+          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN)) }><div class="btn-group" role="group">#{
           if (p_prev = pagy.prev)
             link.call(p_prev, pagy_t('pagy.prev'), %(class="prev btn btn-primary" #{prev_aria_label_attr}))
           else

lib/pagy/extras/bulma.rb

@@ -59,13 +59,13 @@ def pagy_bulma_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
       link    = pagy_link_proc(pagy, link_extra:)
       p_page  = pagy.page
       p_pages = pagy.pages
-      input   = %(<input class="input" type="number" min="1" max="#{p_pages}" value="#{
+      input   = %(<input name="page" class="input" type="number" min="1" max="#{p_pages}" value="#{
                     p_page}" style="padding: 0; text-align: center; width: #{
                     p_pages.to_s.length + 1}rem; margin:0 0.3rem;" aria-current="page">)
 
       html = %(<nav#{p_id} class="pagy-bulma-combo-nav-js #{DEFAULT[:bulma_nav_classes]}" #{
                  nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-                 pagy_data(pagy, :combo, pagy_marked_link(link))}>)
+                 pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))}>)
       %(#{html}<div class="field is-grouped is-grouped-centered" role="group">#{
           if (p_prev  = pagy.prev)
             %(<p class="control">#{link.call(p_prev, pagy_t('pagy.prev'), %(class="button" #{prev_aria_label_attr}))}</p>)

lib/pagy/extras/foundation.rb

@@ -56,13 +56,13 @@ def pagy_foundation_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
       link    = pagy_link_proc(pagy, link_extra:)
       p_page  = pagy.page
       p_pages = pagy.pages
-      input   = %(<input class="input-group-field cell shrink" type="number" min="1" max="#{
+      input   = %(<input name="page" class="input-group-field cell shrink" type="number" min="1" max="#{
                     p_pages}" value="#{p_page}" style="width: #{
                     p_pages.to_s.length + 1}rem; padding: 0 0.3rem; margin: 0 0.3rem;" aria-current="page">)
 
       %(<nav#{p_id} class="pagy-foundation-combo-nav-js" #{
           nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-          pagy_data(pagy, :combo, pagy_marked_link(link))}><div class="input-group">#{
+          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))}><div class="input-group">#{
           if (p_prev = pagy.prev)
             link.call(p_prev, pagy_t('pagy.prev'),
                       %(style="margin-bottom: 0" class="prev button primary" #{prev_aria_label_attr}))

lib/pagy/extras/frontend_helpers.rb

@@ -61,11 +61,6 @@ def pagy_data(pagy, *args)
           %(data-pagy="#{strict_base64_encoded}")
         end
       end
-
-      # Return the marked link used by pagy.js
-      def pagy_marked_link(link)
-        link.call PAGE_TOKEN, '', 'style="display: none;"'
-      end
     end
     Frontend.prepend FrontendAddOn
   end

lib/pagy/extras/items.rb

@@ -36,18 +36,18 @@ module FrontendAddOn
       ITEMS_PLACEHOLDER = '__pagy_items__'
 
       # Return the items selector HTML. For example "Show [20] items per page"
-      def pagy_items_selector_js(pagy, pagy_id: nil, item_name: nil, item_i18n_key: nil, link_extra: '')
+      def pagy_items_selector_js(pagy, pagy_id: nil, item_name: nil, item_i18n_key: nil)
         return '' unless pagy.vars[:items_extra]
 
         p_id           = %( id="#{pagy_id}") if pagy_id
         p_vars         = pagy.vars
         p_items        = p_vars[:items]
         p_vars[:items] = ITEMS_PLACEHOLDER
-        link           = pagy_marked_link(pagy_link_proc(pagy, link_extra:))
+        url_token      = pagy_url_for(pagy, PAGE_TOKEN)
         p_vars[:items] = p_items # restore the items
 
-        html  = +%(<span#{p_id} class="pagy pagy-items-selector-js" #{pagy_data(pagy, :selector, pagy.from, link)}>)
-        input = %(<input type="number" min="1" max="#{p_vars[:max_items]}" value="#{
+        html  = +%(<span#{p_id} class="pagy pagy-items-selector-js" #{pagy_data(pagy, :selector, pagy.from, url_token)}>)
+        input = %(<input name="items" type="number" min="1" max="#{p_vars[:max_items]}" value="#{
                     p_items}" style="padding: 0; text-align: center; width: #{p_items.to_s.length + 1}rem;">)
         html << pagy_t('pagy.items_selector_js',
                        item_name: item_name || pagy_t(item_i18n_key || p_vars[:item_i18n_key], count: p_items),

lib/pagy/extras/materialize.rb

@@ -58,13 +58,13 @@ def pagy_materialize_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
       p_page  = pagy.page
       p_pages = pagy.pages
       style   = ' style="vertical-align: middle"'
-      input   = %(<input type="number" class="browser-default" min="1" max="#{p_pages}" value="#{
+      input   = %(<input  name="page" type="number" class="browser-default" min="1" max="#{p_pages}" value="#{
                     p_page}" style="text-align: center; width: #{p_pages.to_s.length + 1}rem;" aria-current="page">)
 
       html = %(<ul#{p_id} class="pagy-materialize-combo-nav-js pagination chip" role="navigation" #{
                  nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)})
       %(#{html} style="padding-right: 0" #{
-          pagy_data(pagy, :combo, pagy_marked_link(link))}>#{
+          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))}>#{
           materialize_prev_html pagy, link, style}<li class="pagy-combo-input">#{
           pagy_t 'pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages}</li>#{
           materialize_next_html pagy, link, style}</ul>)

lib/pagy/extras/navs.rb

@@ -33,12 +33,12 @@ def pagy_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
       link    = pagy_link_proc(pagy, link_extra:)
       p_page  = pagy.page
       p_pages = pagy.pages
-      input   = %(<input type="number" min="1" max="#{p_pages}" value="#{p_page}" ) +
+      input   = %(<input name="page" type="number" min="1" max="#{p_pages}" value="#{p_page}" ) +
                 %(style="padding: 0; text-align: center; width: #{p_pages.to_s.length + 1}rem;" aria-current="page">)
 
       %(<nav#{p_id} class="pagy pagy-combo-nav-js pagination" #{
           nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-          pagy_data(pagy, :combo, pagy_marked_link(link))}>#{
+          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))}>#{
           prev_html(pagy, link)
       }<span class="pagy-combo-input">#{
           pagy_t('pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages)

lib/pagy/extras/semantic.rb

@@ -56,13 +56,13 @@ def pagy_semantic_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
       link    = pagy_link_proc(pagy, link_extra: %(class="item" #{link_extra}))
       p_page  = pagy.page
       p_pages = pagy.pages
-      input   = %(<input type="number" min="1" max="#{p_pages}" value="#{
+      input   = %(<input name="page" type="number" min="1" max="#{p_pages}" value="#{
                     p_page}" style="padding: 0; text-align: center; width: #{
                     p_pages.to_s.length + 1}rem; margin: 0 0.3rem" aria-current="page">)
 
       %(<div#{p_id} class="pagy-semantic-combo-nav-js ui compact menu" role="navigation" #{
           nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-          pagy_data(pagy, :combo, pagy_marked_link(link))}>#{
+          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))}>#{
           semantic_prev_html pagy, link
         }<div class="pagy-combo-input item">#{
           pagy_t 'pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages

lib/pagy/extras/uikit.rb

@@ -58,12 +58,12 @@ def pagy_uikit_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
       link    = pagy_link_proc(pagy, link_extra:)
       p_page  = pagy.page
       p_pages = pagy.pages
-      input   = %(<input type="number" min="1" max="#{p_pages}" value="#{
+      input   = %(<input name="page" type="number" min="1" max="#{p_pages}" value="#{
                     p_page}" style="text-align: center; width: #{p_pages.to_s.length + 1}rem;" aria-current="page">)
 
       %(<ul#{p_id} class="pagy-uikit-combo-nav-js uk-button-group uk-pagination uk-flex-center" role="navigation" #{
           nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-          pagy_data(pagy, :combo, pagy_marked_link(link))
+          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))
         }>#{
           uikit_prev_html pagy, link
         }<li>#{

src/pagy.ts

@@ -57,15 +57,15 @@ const Pagy = (() => {
     };
 
     // Init the *_combo_nav_js helpers
-    const initCombo = (el:Element, [link, trimParam]:ComboArgs) =>
-        initInput(el, inputValue => [inputValue, link.replace(/__pagy_page__/, inputValue)], trimParam);
+    const initCombo = (el:Element, [url_token, trimParam]:ComboArgs) =>
+        initInput(el, inputValue => [inputValue, url_token.replace(/__pagy_page__/, inputValue)], trimParam);
 
     // Init the items_selector_js helper
-    const initSelector = (el:Element, [from, link, trimParam]:SelectorArgs) => {
+    const initSelector = (el:Element, [from, url_token, trimParam]:SelectorArgs) => {
         initInput(el, inputValue => {
             const page = Math.max(Math.ceil(from / parseInt(inputValue)), 1).toString();
-            const html = link.replace(/__pagy_page__/, page).replace(/__pagy_items__/, inputValue);
-            return [page, html];
+            const url = url_token.replace(/__pagy_page__/, page).replace(/__pagy_items__/, inputValue);
+            return [page, url];
         }, trimParam);
     };
 
@@ -81,10 +81,9 @@ const Pagy = (() => {
                 input.select();
                 return;
             }
-            let [page, html] = getVars(input.value);   // eslint-disable-line prefer-const
-            if (typeof trimParam === "string" && page === "1") { html = trim(html, trimParam) }
-            el.insertAdjacentHTML("afterbegin", html);
-            (el.querySelector("a") as HTMLAnchorElement).click();
+            let [page, url] = getVars(input.value);   // eslint-disable-line prefer-const
+            if (typeof trimParam === "string" && page === "1") { url = trim(url, trimParam) }
+            window.location.href = url;
         };
         ["change", "focus"].forEach(e => input.addEventListener(e, input.select));        // auto-select
         input.addEventListener("focusout", action);                                       // trigger action