pagy 9.4.0 → 43.5.5

data/apps/demo.ru

@@ -4,28 +4,30 @@
 #    Showcase all the helpers and styles
 #
 # DOC
-#    https://ddnexus.github.io/pagy/playground/#3-demo-app
+#    https://ddnexus.github.io/pagy/playground/#demo-app
 #
 # BIN HELP
-#    bundle exec pagy -h
+#    pagy -h
 #
 # DEMO USAGE
-#    bundle exec pagy demo
+#    pagy demo
 #
 # DEV USAGE
-#    bundle exec pagy clone demo
-#    bundle exec pagy ./demo.ru
+#    pagy clone demo
+#    pagy ./demo.ru
 #
 # URL
-#    http://0.0.0.0:8000
+#    http://127.0.0.1:8000
 
-VERSION = '9.4.0'
+VERSION = '43.5.5'
+
+if VERSION != Pagy::VERSION
+  Warning.warn("\n>>> WARNING! '#{File.basename(__FILE__)}-#{VERSION}' running with 'pagy-#{Pagy::VERSION}'! <<< \n\n")
+end
 
 # Bundle
 require 'bundler/inline'
-require 'bundler'
-Bundler.configure
-gemfile(ENV['PAGY_INSTALL_BUNDLE'] == 'true') do
+gemfile(!Pagy::ROOT.join('pagy.gemspec').exist?) do
   source 'https://rubygems.org'
   gem 'oj'
   gem 'puma'
@@ -34,36 +36,26 @@ gemfile(ENV['PAGY_INSTALL_BUNDLE'] == 'true') do
 end
 
 # pagy initializer
-STYLES = { pagy:        { extra: 'pagy', prefix: '', css_anchor: 'pagy-scss' },
-           bootstrap:   {},
-           bulma:       {},
-           tailwind:    { extra: 'pagy', prefix: '', css_anchor: 'pagy-tailwind-css' } }.freeze
-
-STYLES.each_key do |style|
-  require "pagy/extras/#{STYLES[style][:extra] || style}"
-end
-require 'pagy/extras/limit'
-require 'pagy/extras/trim'
-Pagy::DEFAULT[:trim_extra] = false         # opt-in trim
+SECTIONS = { pagy:      { css_anchor: 'pagy-css' },
+             tailwind:  { css_anchor: 'pagy-tailwind-css' },
+             bootstrap: { style: :bootstrap, classes: 'pagination pagination-sm' },
+             bulma:     { style: :bulma, classes: 'pagination is-small' },
+             template:  { css_anchor: 'pagy-css', template: :template } }.freeze
 
 # Sinatra setup
 require 'sinatra/base'
 
+# Pagy init
+Pagy::OPTIONS[:max_limit] = 100
+
 # Sinatra application
 class PagyDemo < Sinatra::Base
-  include Pagy::Backend
+  include Pagy::Method
 
   get '/' do
     redirect '/pagy'
   end
 
-  get '/template' do
-    collection = MockCollection.new
-    @pagy, @records = pagy(collection, trim_extra: params['trim'])
-
-    erb :template, locals: { pagy: @pagy, style: 'pagy' }
-  end
-
   get('/javascripts/:file') do
     format = params[:file].split('.').last
     if format == 'js'
@@ -71,74 +63,142 @@ class PagyDemo < Sinatra::Base
     elsif format == 'map'
       content_type 'application/json'
     end
-    send_file Pagy.root.join('javascripts', params[:file])
+    send_file Pagy::ROOT.join('javascripts', params[:file])
   end
 
   get('/stylesheets/:file') do
     content_type 'text/css'
-    send_file Pagy.root.join('stylesheets', params[:file])
+    send_file Pagy::ROOT.join('stylesheets', params[:file])
   end
 
-  # One route/action per style
-  STYLES.each_key do |style|
-    prefix = STYLES[style][:prefix] || "_#{style}"
-
-    get("/#{style}/?:trim?") do
-      collection = MockCollection.new
-      @pagy, @records = pagy(collection, trim_extra: params['trim'])
+  if ENV['E2E_TEST']
+    get('/assets/:file') do
+      content_type 'text/css'
+      send_file Pagy::ROOT.join('../test/e2e/assets', params[:file])
+    end
+  end
 
-      erb :helpers, locals: { style:, prefix: }
+  # One route/action per style
+  SECTIONS.each do |section, value|
+    get("/#{section}") do
+      collection      = MockCollection.new
+      @pagy, @records = pagy(:offset, collection)
+      erb value[:template] || :page,
+          locals: { section:,
+                    pagy:       @pagy,
+                    style:      value[:style],
+                    classes:    value[:classes],
+                    css_anchor: value[:css_anchor] }
     end
   end
 
-  helpers do
-    include Pagy::Frontend
+  PAGY_LIKE_HEAD =
+    %(#{Pagy.dev_tools unless ENV['E2E_TEST']}
+      <style>
+        /* black/white backdrop color based on --B */
+        .pagy { background-color: hsl(0 0 calc(100 * var(--B))) !important; }
+      </style>).freeze
 
+  helpers do
     def style_menu
       html = +%(<div id="style-menu"> )
-      STYLES.each_key { |style| html << %(<a href="/#{style}">#{style}</a>) }
-      html << %(<a href="/template">template</a>)
+      SECTIONS.each_key do |section|
+        name    = section.to_s
+        name[0] = name[0].capitalize
+        html << %(<a href="/#{section}">#{name}</a>)
+      end
       html << %(</div>)
+      html
+    end
+
+    def head_for(section)
+      case section
+      when :pagy, :template
+        %(#{PAGY_LIKE_HEAD}
+        <link rel="stylesheet" href="/stylesheets/pagy.css">)
+      when :tailwind
+        %(#{PAGY_LIKE_HEAD}
+        #{if ENV['E2E_TEST']
+            '<script src="/assets/tailwind.js"></script>'
+          else
+            '<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>'
+          end}
+        <style type="text/tailwindcss">
+          #{Pagy::ROOT.join('stylesheets/pagy-tailwind.css').read}
+        </style>)
+      when :bootstrap
+        if ENV['E2E_TEST']
+          '<link rel="stylesheet" href="/assets/bootstrap.min.css">'
+        else
+          '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">'
+        end
+      when :bulma
+        if ENV['E2E_TEST']
+          '<link rel="stylesheet" href="/assets/bulma.min.css">'
+        else
+          '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css">'
+        end
+      end
     end
 
     def highlight(html, format: :html)
       if format == :html
-        html = html.gsub(/>[\s]*</, '><').strip # template single line no spaces around/between tags
+        html = html.gsub(/>\s*</, '><').strip # template single line no spaces around/between tags
         html = Formatter.new.format(html)
       end
       lexer     = Rouge::Lexers::ERB.new
       formatter = Rouge::Formatters::HTMLInline.new('monokai.sublime')
       summary   = { html: 'Served HTML (pretty formatted)', erb: 'ERB Template' }
       %(<details><summary>#{summary[format]}</summary><pre>\n#{
-         formatter.format(lexer.lex(html))
+      formatter.format(lexer.lex(html))
       }</pre></details>)
     end
   end
 
   # Views
   template :layout do
-    <<~'ERB'
+    <<~HTML
       <!DOCTYPE html>
-      <html lang="en">
+      <html lang="en" data-theme="light">
       <head>
         <title>Pagy Demo App</title>
-        <script src="/javascripts/pagy.min.js"></script>
-        <script>
-          window.addEventListener("load", Pagy.init);
-        </script>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <%= erb :"#{style}_head" if defined?(style) %>
-        <style type="text/css">
+        <%= head_for(section) %>
+        <script src="/javascripts/pagy.js"></script>
+        <script>window.addEventListener("load", Pagy.init);</script>
+        <% unless ENV['E2E_TEST'] %>
+          <link rel="preconnect" href="https://fonts.googleapis.com">
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+          <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
+        <% end %>
+        <style>
           @media screen { html, body {
             font-size: 1rem;
-            line-height: 1.2s;
+            line-height: 1.2;
             padding: 0;
             margin: 0;
           } }
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+          html {
+            background-color: transparent !important; /* Fix for Bulma */
+          }
           body {
-            background: white !important;
             margin: 0 !important;
-            font-family: sans-serif !important;
+            font-family: <%= '"Nunito Sans", ' unless ENV['E2E_TEST'] %>"Helvetica Neue", Helvetica, Arial, sans-serif !important;
+            color: #303030 !important;
+            background-color: #f5f5f5 !important;
+          }
+          svg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: -10;
           }
           h1, h2 {
             font-size: 1.8rem !important;
@@ -146,16 +206,22 @@ class PagyDemo < Sinatra::Base
             margin-top: 1rem !important;
             margin-bottom: 0.7rem !important;
             line-height: 1.5 !important;
-            color: rgb(90 90 90)  !important;
+            color: #303030  !important;
           }
           h2 {
             font-family: monospace;
             font-size: .9rem !important;
             margin-top: 1.6rem !important;
           }
+          hr {
+            height: 0;
+            color: inherit;
+            border-top-width: 1px;
+            border-top-color: gray;
+            margin: 8px 0 !important;
+          }
           summary, .notes {
             font-size: .8rem;
-            color: gray;
             margin-top: .6rem;
             font-style: italic;
             cursor: pointer;
@@ -165,7 +231,7 @@ class PagyDemo < Sinatra::Base
             font-weight: normal;
           }
           .notes code{
-            background-color: #E8E8E8;
+            background-color: rgba(255, 255, 255, .6);
             padding: 0 0.3rem;
             font-style: normal;
             border-radius: 3px;
@@ -178,7 +244,7 @@ class PagyDemo < Sinatra::Base
             text-decoration: underline;
           }
           pre, pre code {
-            display: block;
+            display: inline-block;
             margin-top: .3rem;
             margin-bottom: 1rem;
             font-size: .8rem !important;
@@ -186,12 +252,13 @@ class PagyDemo < Sinatra::Base
             color: white;
             background-color: rgb(30 30 30);
             padding: 1rem;
-            overflow: auto;
+            overflow-x: auto;
+            max-width: 100%;
+            white-space: pre;
           }
-          .content {
+          .main-content {
             padding: 0 1.5rem 2rem !important;
           }
-
           #style-menu {
             flex;
             font-family: sans-serif;
@@ -199,7 +266,7 @@ class PagyDemo < Sinatra::Base
             line-height: 1.5rem;
             white-space: nowrap;
             color: white;
-            background-color: gray;
+            background-color: rgba(0,0,0,.65);
             padding: .2rem 1.5rem;
           }
           #style-menu > :not([hidden]) ~ :not([hidden]) {
@@ -211,158 +278,155 @@ class PagyDemo < Sinatra::Base
             color: inherit;
             text-decoration: none;
           }
-          /* Quick demo for overriding the element style attribute of certain pagy helpers
-          .pagy input[style] {
-            width: 5rem !important;
+          .pagy, .pagy-bootstrap, .pagy-bulma {
+            background-color: white;
+            padding: 1.5em;
+            margin: .3em 0;
+            width: fit-content;
+            box-shadow: 8px 8px 18px 0px rgba(0,0,0,0.25);
+          }
+          span.pagy {
+            display: block;
+          }
+          .pagy-bootstrap .pagination {
+            margin: 0;
+          }
+          /* Demo app custom style */
+          .pagy {
+            --B: 1;
+            --H: 109;
+            --S: 40;
+            --L: 70;
+            --spacing: 0.125rem;
+            --padding: 0.75rem;
+            --rounding: 0.8125rem;
+            --border-width: 0.03125rem;
+            --font-size: 0.875rem;
+            --font-weight: 450;
+            --line-height: 1.75;
           }
-          */
         </style>
       </head>
       <body>
+        <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
+          <filter id="noiseFilter">
+            <feTurbulence type="fractalNoise" baseFrequency="0.6" numOctaves="100" stitchTiles="stitch" />
+            <feColorMatrix type="matrix" values="0.5 0 0 0 0, 0.5 0 0 0 0, 0.5 0 0 0 0, 0 0 0 0.5 0" />
+         </filter>
+          <rect width="100%" height="100%" filter="url(#noiseFilter)" fill="rgb(255, 255, 255)" />
+        </svg>
         <!-- each different class used by each style -->
         <%= style_menu %>
-        <div class="content">
+        <div class="main-content">
           <%= yield %>
         </div>
       </body>
       </html>
-    ERB
+    HTML
   end
 
-  template :pagy_head do
+  template :page do
     <<~ERB
-      <!-- copy and paste the pagy style in order to edit it -->
-      <link rel="stylesheet" href="/stylesheets/pagy.css">
-    ERB
-  end
+      <h1><%= title = section.to_s; title[0] = title[0].capitalize; title %></h1>
 
-  template :bootstrap_head do
-    <<~ERB
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
-    ERB
-  end
-
-  template :bulma_head do
-    <<~ERB
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
-    ERB
-  end
-
-  template :tailwind_head do
-    <<~ERB
-      <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
-      <!-- copy and paste the pagy.tailwind style in order to edit it -->
-      <style type="text/tailwindcss">
-        <%= Pagy.root.join('stylesheets', 'pagy.tailwind.css').read %>
-      </style>
-    ERB
-  end
-
-  template :helpers do
-    <<~'ERB'
-      <h1><%= style %></h1>
-      <% extra = STYLES[style][:extra] || "#{style}" %>
-      <% css_anchor = STYLES[style][:css_anchor] %>
-
-      <p class="description">See the <a href="http://ddnexus.github.io/pagy/docs/extras/<%= extra %>" target="blank"><%= extra %> extra</a>
-      documentation
       <% if css_anchor %>
-        and the <a href="http://ddnexus.github.io/pagy/docs/api/stylesheets/#<%= css_anchor %>" target="blank"><%= css_anchor.gsub('-', '.') %></a>
-      <% end %>
-      for details</p>
-
-      <h2>Collection</h2>
-      <p id="records">@records: <%= @records.join(',') %></p>
-
-      <h2>pagy<%= prefix %>_nav <span class="notes">Simple nav <code>size: 5</code></span></h2>
-      <%= html = send(:"pagy#{prefix}_nav", @pagy, id: 'simple-nav', aria_label: 'Pages simple-nav', size: 5) %>
-      <%= highlight(html) %>
-
-      <h2>pagy<%= prefix %>_nav <span class="notes">Fast nav <code>size: 7</code></span></h2>
-      <%= html = send(:"pagy#{prefix}_nav", @pagy, id: 'nav', aria_label: 'Pages nav') %>
-      <%= highlight(html) %>
-
-      <h2>pagy<%= prefix %>_nav_js <span class="notes">Fast nav <code>size: 7</code></span></h2>
-      <%= html = send(:"pagy#{prefix}_nav_js", @pagy, id: 'nav-js', aria_label: 'Pages nav_js') %>
-      <%= highlight(html) %>
-
-      <h2>pagy<%= prefix %>_nav_js <span class="notes">Responsive nav <code>steps: {...}</code> (Resize the window to see)</span></h2>
-      <%= html = send(:"pagy#{prefix}_nav_js", @pagy, id: 'nav-js-responsive',
-           aria_label: 'Pages nav_js_responsive',
-           steps: { 0 => 5, 500 => 7, 750 => 9, 1000 => 11 }) %>
-      <%= highlight(html) %>
-
-      <h2>pagy<%= prefix %>_combo_nav_js</h2>
-      <%= html = send(:"pagy#{prefix}_combo_nav_js", @pagy, id: 'combo-nav-js', aria_label: 'Pages combo_nav_js') %>
-      <%= highlight(html) %>
-
-      <h2>pagy_info</h2>
-      <%= html = pagy_info(@pagy, id: 'pagy-info') %>
-      <%= highlight(html) %>
-
-      <% if style.match(/pagy|tailwind/) %>
-      <h2>pagy_limit_selector_js</h2>
-      <%= html = pagy_limit_selector_js(@pagy, id: 'limit-selector-js') %>
-      <%= highlight(html) %>
-
-      <h2>pagy_prev_a / pagy_next_a</h2>
-      <%= html = '<nav class="pagy" id="prev-next" aria-label="Pagy prev-next">' << pagy_prev_a(@pagy) << pagy_next_a(@pagy) << '</nav>' %>
-      <%= highlight(html) %>
-
-      <h2>pagy_prev_link / pagy_next_link <span class="notes">Link not rendered<span></h2>
-      <% html = '<head>' << (pagy_prev_link(@pagy)||'') << (pagy_next_link(@pagy)||'') << '</head>' %>
-      <%= highlight(html) %>
+        <p>Check the <u><i><b><a href="http://ddnexus.github.io/pagy/resources/stylesheets/#<%= css_anchor %>" target="blank"><%= css_anchor.gsub('-', '.') %></a></b></u></i>
+        for details.</p>
       <% end %>
+      </p>
+      <div id="main-container">
+        <div id="content">
+          <hr id="top-hr">
+          <h2>@records</h2>
+          <p id="records"><%= @records.join(',') %></p>
+
+          <h2>@pagy.series_nav<br/>
+            <span class="notes">Series nav <code>{slots: 7}</code></span>
+          </h2>
+          <%= html = @pagy.series_nav(style, classes:,
+                                      id: 'series-nav',
+                                      aria_label: 'Pages series_nav') %>
+          <%= highlight(html) %>
+
+          <h2>@pagy.series_nav_js<br/>
+            <span class="notes">Responsive nav: <code>{steps: {0 => 5, 500 => 7, 600 => 9, 700 => 11}}</code><br/>
+            (Resize the window to see)
+            </span>
+          </h2>
+          <%= html = @pagy.series_nav_js(style, classes:,
+                                         id: 'series-nav-js-responsive',
+                                         aria_label: 'Pages series_nav_js_responsive',
+                                         steps: { 0 => 5, 500 => 7, 600 => 9, 700 => 11 }) %>
+          <%= highlight(html) %>
+
+          <h2>@pagy.input_nav_js</h2>
+          <%= html = @pagy.input_nav_js(style, classes:,
+                                        id: 'input-nav-js',
+                                        aria_label: 'Pages inpup_nav_js') %>
+          <%= highlight(html) %>
+
+          <h2>@pagy.limit_tag_js</h2>
+          <%= html = @pagy.limit_tag_js(id: 'limit-tag-js') %>
+          <%= highlight(html) %>
+
+          <h2>@pagy.info_tag</h2>
+          <%= html = @pagy.info_tag(id: 'pagy-info') %>
+          <%= highlight(html) %>
+        </div>
+      </div>
     ERB
   end
 
   template :template do
-    <<~ERB
-      <h1>Pagy Template Demo</h1>
+     <<~ERB
+       <h1>Pagy Template Demo</h1>
 
-      <p class="description">
-      See the <a href="https://ddnexus.github.io/pagy/docs/how-to/#using-your-pagination-templates">
-      Custom Templates</a> documentation.
-      </p>
-      <h2>Collection</h2>
-      <p id="records">@records: <%= @records.join(',') %></p>
+       <p class="description">
+       See the <a href="https://ddnexus.github.io/pagy/docs/how-to/#using-your-pagination-templates">
+       Custom Templates</a> documentation.
+       </p>
 
-      <h2>Rendered ERB template</h2>
+       <h2>Collection</h2>
+       <p id="records">@records: <%= @records.join(',') %></p>
 
-      <%# We don't inline the template here, so we can highlight it more easily %>
-      <%= html = ERB.new(TEMPLATE).result(binding) %>
-      <%= highlight(TEMPLATE, format: :erb) %>
-      <%= highlight(html) %>
-    ERB
-  end
+       <h2>Rendered ERB template</h2>
+
+       <div class="backdrop">
+         <%# We don't inline the template here, so we can highlight it more easily %>
+         <%= html = ERB.new(TEMPLATE).result(binding) %>
+       </div>
+       <%= highlight(TEMPLATE, format: :erb) %>
+       <%= highlight(html) %>
+     ERB
+   end
 
   # Easier code highlighting
   TEMPLATE = <<~ERB
     <%# IMPORTANT: replace '<%=' with '<%==' if you run this in rails %>
 
     <%# The a variable below is set to a lambda that generates the a tag %>
-    <%# Usage: a_tag = a.(page_number, text, classes: nil, aria_label: nil) %>
-    <% a = pagy_anchor(pagy) %>
-    <nav class="pagy nav" aria-label="Pages">
+    <%# Usage: anchor_tag = a_lambda.(page_number, text, classes: nil, aria_label: nil) %>
+    <% a_lambda = @pagy.send(:a_lambda) %>
+    <nav class="pagy series-nav" aria-label="Pages">
       <%# Previous page link %>
-      <% if pagy.prev %>
-        <%= a.(pagy.prev, '&lt;', aria_label: 'Previous') %>
+      <% if pagy.previous %>
+        <%= a_lambda.(pagy.previous, '&lt;', aria_label: 'Previous') %>
       <% else %>
         <a role="link" aria-disabled="true" aria-label="Previous">&lt;</a>
       <% end %>
       <%# Page links (series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]) %>
-      <% pagy.series.each do |item| %>
+      <% pagy.send(:series).each do |item| %>
         <% if item.is_a?(Integer) %>
-          <%= a.(item) %>
+          <%= a_lambda.(item) %>
         <% elsif item.is_a?(String) %>
-          <a role="link" aria-disabled="true" aria-current="page" class="current"><%= item %></a>
+          <a role="link" aria-disabled="true" aria-current="page"><%= item %></a>
         <% elsif item == :gap %>
-          <a role="link" aria-disabled="true" class="gap">&hellip;</a>
+          <a role="separator" aria-disabled="true">&hellip;</a>
         <% end %>
       <% end %>
       <%# Next page link %>
       <% if pagy.next %>
-        <%= a.(pagy.next, '&gt;', aria_label: 'Next') %>
+        <%= a_lambda.(pagy.next, '&gt;', aria_label: 'Next') %>
       <% else %>
         <a role="link" aria-disabled="true" aria-label="Next">&lt;</a>
       <% end %>
@@ -402,15 +466,15 @@ class Formatter
       push.(tag)
     elsif (match = input.match(PAIRED))
       tag_start, name, block, tag_end, rest = match.captures
-      ## Handle incomplete same-tag nesting
+      # Handle incomplete same-tag nesting
       while block.scan(/<#{name}.*?>/).size > block.scan(tag_end).size
         more, rest = rest.split(tag_end, 2)
-        block << tag_end << more
+        block << (tag_end + more)
       end
       if (match = tag_start.match(DATA_PAGY))
         search, data = match.captures
-        formatted = data.scan(/.{1,76}/).join("\n")
-        replace = %(\n#{INDENT * (level + 1)}data-pagy="#{formatted}")
+        formatted    = data.scan(/.{1,76}/).join("\n")
+        replace      = %(\n#{INDENT * (level + 1)}data-pagy="#{formatted}")
         tag_start.sub!(search, replace)
       end
       if block.match(WRAPPER)
@@ -418,7 +482,7 @@ class Formatter
         process(block, level + 1)
         push.(tag_end)
       else
-        push.(tag_start << block << tag_end)
+        push.(tag_start << (block + tag_end))
       end
     end
     process(rest, level) if rest
@@ -433,12 +497,12 @@ class MockCollection < Array
   end
 
   def offset(value)
-    @collection = self[value..]
+    @collection = self[value..] || []
     self
   end
 
   def limit(value)
-    @collection[0, value]
+    @collection.empty? ? [] : @collection[0, value]
   end
 
   def count(*)