pagy 9.2.0 → 9.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/apps/calendar.ru +115 -123
- data/apps/demo.ru +273 -259
- data/apps/index.rb +7 -0
- data/apps/keyset_ar.ru +143 -152
- data/apps/keyset_s.ru +135 -154
- data/apps/rails.ru +15 -16
- data/apps/repro.ru +107 -102
- data/bin/pagy +18 -22
- data/config/pagy.rb +1 -1
- data/javascripts/pagy.min.js +2 -2
- data/javascripts/pagy.min.js.map +2 -2
- data/javascripts/pagy.mjs +1 -1
- data/lib/pagy/calendar/day.rb +1 -1
- data/lib/pagy/calendar/month.rb +1 -1
- data/lib/pagy/calendar/quarter.rb +1 -1
- data/lib/pagy/calendar/week.rb +1 -1
- data/lib/pagy/calendar/year.rb +1 -1
- data/lib/pagy/keyset/active_record.rb +2 -2
- data/lib/pagy/keyset/sequel.rb +2 -2
- data/lib/pagy/keyset.rb +34 -20
- data/lib/pagy.rb +1 -1
- metadata +3 -2
data/apps/demo.ru
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
-
#
|
|
4
|
-
|
|
3
|
+
# DESCRIPTION
|
|
4
|
+
# Showcase all the helpers and styles
|
|
5
|
+
#
|
|
6
|
+
# DOC
|
|
7
|
+
# https://ddnexus.github.io/pagy/playground/#3-demo-app
|
|
8
|
+
#
|
|
9
|
+
# BIN HELP
|
|
10
|
+
# bundle exec pagy -h
|
|
11
|
+
#
|
|
5
12
|
# DEMO USAGE
|
|
6
|
-
# pagy demo
|
|
7
|
-
|
|
13
|
+
# bundle exec pagy demo
|
|
14
|
+
#
|
|
8
15
|
# DEV USAGE
|
|
9
|
-
# pagy clone demo
|
|
10
|
-
# pagy ./demo.ru
|
|
11
|
-
|
|
16
|
+
# bundle exec pagy clone demo
|
|
17
|
+
# bundle exec pagy ./demo.ru
|
|
18
|
+
#
|
|
12
19
|
# URL
|
|
13
20
|
# http://0.0.0.0:8000
|
|
14
21
|
|
|
15
|
-
|
|
16
|
-
# pagy -h
|
|
17
|
-
|
|
18
|
-
# DOC
|
|
19
|
-
# https://ddnexus.github.io/pagy/playground/#3-demo-app
|
|
20
|
-
|
|
21
|
-
VERSION = '9.2.0'
|
|
22
|
+
VERSION = '9.3.1'
|
|
22
23
|
|
|
24
|
+
# Bundle
|
|
23
25
|
require 'bundler/inline'
|
|
24
26
|
require 'bundler'
|
|
25
27
|
Bundler.configure
|
|
@@ -29,7 +31,6 @@ gemfile(ENV['PAGY_INSTALL_BUNDLE'] == 'true') do
|
|
|
29
31
|
gem 'puma'
|
|
30
32
|
gem 'rouge'
|
|
31
33
|
gem 'sinatra'
|
|
32
|
-
gem 'sinatra-contrib'
|
|
33
34
|
end
|
|
34
35
|
|
|
35
36
|
# pagy initializer
|
|
@@ -45,15 +46,11 @@ require 'pagy/extras/limit'
|
|
|
45
46
|
require 'pagy/extras/trim'
|
|
46
47
|
Pagy::DEFAULT[:trim_extra] = false # opt-in trim
|
|
47
48
|
|
|
48
|
-
#
|
|
49
|
+
# Sinatra setup
|
|
49
50
|
require 'sinatra/base'
|
|
50
51
|
|
|
51
|
-
#
|
|
52
|
+
# Sinatra application
|
|
52
53
|
class PagyDemo < Sinatra::Base
|
|
53
|
-
configure do
|
|
54
|
-
enable :inline_templates
|
|
55
|
-
end
|
|
56
|
-
|
|
57
54
|
include Pagy::Backend
|
|
58
55
|
|
|
59
56
|
get '/' do
|
|
@@ -82,7 +79,7 @@ class PagyDemo < Sinatra::Base
|
|
|
82
79
|
send_file Pagy.root.join('stylesheets', params[:file])
|
|
83
80
|
end
|
|
84
81
|
|
|
85
|
-
#
|
|
82
|
+
# One route/action per style
|
|
86
83
|
STYLES.each_key do |style|
|
|
87
84
|
prefix = STYLES[style][:prefix] || "_#{style}"
|
|
88
85
|
|
|
@@ -117,6 +114,260 @@ class PagyDemo < Sinatra::Base
|
|
|
117
114
|
}</pre></details>)
|
|
118
115
|
end
|
|
119
116
|
end
|
|
117
|
+
|
|
118
|
+
# Views
|
|
119
|
+
template :layout do
|
|
120
|
+
<<~'ERB'
|
|
121
|
+
<!DOCTYPE html>
|
|
122
|
+
<html lang="en">
|
|
123
|
+
<head>
|
|
124
|
+
<title>Pagy Demo App</title>
|
|
125
|
+
<script src="/javascripts/pagy.min.js"></script>
|
|
126
|
+
<script>
|
|
127
|
+
window.addEventListener("load", Pagy.init);
|
|
128
|
+
</script>
|
|
129
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
130
|
+
<%= erb :"#{style}_head" if defined?(style) %>
|
|
131
|
+
<style type="text/css">
|
|
132
|
+
@media screen { html, body {
|
|
133
|
+
font-size: 1rem;
|
|
134
|
+
line-height: 1.2s;
|
|
135
|
+
padding: 0;
|
|
136
|
+
margin: 0;
|
|
137
|
+
} }
|
|
138
|
+
body {
|
|
139
|
+
background: white !important;
|
|
140
|
+
margin: 0 !important;
|
|
141
|
+
font-family: sans-serif !important;
|
|
142
|
+
}
|
|
143
|
+
h1, h2 {
|
|
144
|
+
font-size: 1.8rem !important;
|
|
145
|
+
font-weight: 600 !important;
|
|
146
|
+
margin-top: 1rem !important;
|
|
147
|
+
margin-bottom: 0.7rem !important;
|
|
148
|
+
line-height: 1.5 !important;
|
|
149
|
+
color: rgb(90 90 90) !important;
|
|
150
|
+
}
|
|
151
|
+
h2 {
|
|
152
|
+
font-family: monospace;
|
|
153
|
+
font-size: .9rem !important;
|
|
154
|
+
margin-top: 1.6rem !important;
|
|
155
|
+
}
|
|
156
|
+
summary, .notes {
|
|
157
|
+
font-size: .8rem;
|
|
158
|
+
color: gray;
|
|
159
|
+
margin-top: .6rem;
|
|
160
|
+
font-style: italic;
|
|
161
|
+
cursor: pointer;
|
|
162
|
+
}
|
|
163
|
+
.notes {
|
|
164
|
+
font-family: sans-serif;
|
|
165
|
+
font-weight: normal;
|
|
166
|
+
}
|
|
167
|
+
.notes code{
|
|
168
|
+
background-color: #E8E8E8;
|
|
169
|
+
padding: 0 0.3rem;
|
|
170
|
+
font-style: normal;
|
|
171
|
+
border-radius: 3px;
|
|
172
|
+
}
|
|
173
|
+
.description {
|
|
174
|
+
margin: 1rem 0;
|
|
175
|
+
}
|
|
176
|
+
.description a {
|
|
177
|
+
color: blue;
|
|
178
|
+
text-decoration: underline;
|
|
179
|
+
}
|
|
180
|
+
pre, pre code {
|
|
181
|
+
display: block;
|
|
182
|
+
margin-top: .3rem;
|
|
183
|
+
margin-bottom: 1rem;
|
|
184
|
+
font-size: .8rem !important;
|
|
185
|
+
line-height: 1rem !important;
|
|
186
|
+
color: white;
|
|
187
|
+
background-color: rgb(30 30 30);
|
|
188
|
+
padding: 1rem;
|
|
189
|
+
overflow: auto;
|
|
190
|
+
}
|
|
191
|
+
.content {
|
|
192
|
+
padding: 0 1.5rem 2rem !important;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
#style-menu {
|
|
196
|
+
flex;
|
|
197
|
+
font-family: sans-serif;
|
|
198
|
+
font-size: 1.1rem;
|
|
199
|
+
line-height: 1.5rem;
|
|
200
|
+
white-space: nowrap;
|
|
201
|
+
color: white;
|
|
202
|
+
background-color: gray;
|
|
203
|
+
padding: .2rem 1.5rem;
|
|
204
|
+
}
|
|
205
|
+
#style-menu > :not([hidden]) ~ :not([hidden]) {
|
|
206
|
+
--space-reverse: 0;
|
|
207
|
+
margin-right: calc(0.5rem * var(--space-reverse));
|
|
208
|
+
margin-left: calc(0.5rem * calc(1 - var(--space-reverse)));
|
|
209
|
+
}
|
|
210
|
+
#style-menu a {
|
|
211
|
+
color: inherit;
|
|
212
|
+
text-decoration: none;
|
|
213
|
+
}
|
|
214
|
+
/* Quick demo for overriding the element style attribute of certain pagy helpers
|
|
215
|
+
.pagy input[style] {
|
|
216
|
+
width: 5rem !important;
|
|
217
|
+
}
|
|
218
|
+
*/
|
|
219
|
+
</style>
|
|
220
|
+
</head>
|
|
221
|
+
<body>
|
|
222
|
+
<!-- each different class used by each style -->
|
|
223
|
+
<%= style_menu %>
|
|
224
|
+
<div class="content">
|
|
225
|
+
<%= yield %>
|
|
226
|
+
</div>
|
|
227
|
+
</body>
|
|
228
|
+
</html>
|
|
229
|
+
ERB
|
|
230
|
+
end
|
|
231
|
+
|
|
232
|
+
template :pagy_head do
|
|
233
|
+
<<~ERB
|
|
234
|
+
<!-- copy and paste the pagy style in order to edit it -->
|
|
235
|
+
<link rel="stylesheet" href="/stylesheets/pagy.css">
|
|
236
|
+
ERB
|
|
237
|
+
end
|
|
238
|
+
|
|
239
|
+
template :bootstrap_head do
|
|
240
|
+
<<~ERB
|
|
241
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
|
242
|
+
ERB
|
|
243
|
+
end
|
|
244
|
+
|
|
245
|
+
template :bulma_head do
|
|
246
|
+
<<~ERB
|
|
247
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|
248
|
+
ERB
|
|
249
|
+
end
|
|
250
|
+
|
|
251
|
+
template :tailwind_head do
|
|
252
|
+
<<~ERB
|
|
253
|
+
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
|
|
254
|
+
<!-- copy and paste the pagy.tailwind style in order to edit it -->
|
|
255
|
+
<style type="text/tailwindcss">
|
|
256
|
+
<%= Pagy.root.join('stylesheets', 'pagy.tailwind.css').read %>
|
|
257
|
+
</style>
|
|
258
|
+
ERB
|
|
259
|
+
end
|
|
260
|
+
|
|
261
|
+
template :helpers do
|
|
262
|
+
<<~'ERB'
|
|
263
|
+
<h1><%= style %></h1>
|
|
264
|
+
<% extra = STYLES[style][:extra] || "#{style}" %>
|
|
265
|
+
<% css_anchor = STYLES[style][:css_anchor] %>
|
|
266
|
+
|
|
267
|
+
<p class="description">See the <a href="http://ddnexus.github.io/pagy/docs/extras/<%= extra %>" target="blank"><%= extra %> extra</a>
|
|
268
|
+
documentation
|
|
269
|
+
<% if css_anchor %>
|
|
270
|
+
and the <a href="http://ddnexus.github.io/pagy/docs/api/stylesheets/#<%= css_anchor %>" target="blank"><%= css_anchor.gsub('-', '.') %></a>
|
|
271
|
+
<% end %>
|
|
272
|
+
for details</p>
|
|
273
|
+
|
|
274
|
+
<h2>Collection</h2>
|
|
275
|
+
<p id="records">@records: <%= @records.join(',') %></p>
|
|
276
|
+
|
|
277
|
+
<h2>pagy<%= prefix %>_nav <span class="notes">Simple nav <code>size: 5</code></span></h2>
|
|
278
|
+
<%= html = send(:"pagy#{prefix}_nav", @pagy, id: 'simple-nav', aria_label: 'Pages simple-nav', size: 5) %>
|
|
279
|
+
<%= highlight(html) %>
|
|
280
|
+
|
|
281
|
+
<h2>pagy<%= prefix %>_nav <span class="notes">Fast nav <code>size: 7</code></span></h2>
|
|
282
|
+
<%= html = send(:"pagy#{prefix}_nav", @pagy, id: 'nav', aria_label: 'Pages nav') %>
|
|
283
|
+
<%= highlight(html) %>
|
|
284
|
+
|
|
285
|
+
<h2>pagy<%= prefix %>_nav_js <span class="notes">Fast nav <code>size: 7</code></span></h2>
|
|
286
|
+
<%= html = send(:"pagy#{prefix}_nav_js", @pagy, id: 'nav-js', aria_label: 'Pages nav_js') %>
|
|
287
|
+
<%= highlight(html) %>
|
|
288
|
+
|
|
289
|
+
<h2>pagy<%= prefix %>_nav_js <span class="notes">Responsive nav <code>steps: {...}</code> (Resize the window to see)</span></h2>
|
|
290
|
+
<%= html = send(:"pagy#{prefix}_nav_js", @pagy, id: 'nav-js-responsive',
|
|
291
|
+
aria_label: 'Pages nav_js_responsive',
|
|
292
|
+
steps: { 0 => 5, 500 => 7, 750 => 9, 1000 => 11 }) %>
|
|
293
|
+
<%= highlight(html) %>
|
|
294
|
+
|
|
295
|
+
<h2>pagy<%= prefix %>_combo_nav_js</h2>
|
|
296
|
+
<%= html = send(:"pagy#{prefix}_combo_nav_js", @pagy, id: 'combo-nav-js', aria_label: 'Pages combo_nav_js') %>
|
|
297
|
+
<%= highlight(html) %>
|
|
298
|
+
|
|
299
|
+
<h2>pagy_info</h2>
|
|
300
|
+
<%= html = pagy_info(@pagy, id: 'pagy-info') %>
|
|
301
|
+
<%= highlight(html) %>
|
|
302
|
+
|
|
303
|
+
<% if style.match(/pagy|tailwind/) %>
|
|
304
|
+
<h2>pagy_limit_selector_js</h2>
|
|
305
|
+
<%= html = pagy_limit_selector_js(@pagy, id: 'limit-selector-js') %>
|
|
306
|
+
<%= highlight(html) %>
|
|
307
|
+
|
|
308
|
+
<h2>pagy_prev_a / pagy_next_a</h2>
|
|
309
|
+
<%= html = '<nav class="pagy" id="prev-next" aria-label="Pagy prev-next">' << pagy_prev_a(@pagy) << pagy_next_a(@pagy) << '</nav>' %>
|
|
310
|
+
<%= highlight(html) %>
|
|
311
|
+
|
|
312
|
+
<h2>pagy_prev_link / pagy_next_link <span class="notes">Link not rendered<span></h2>
|
|
313
|
+
<% html = '<head>' << (pagy_prev_link(@pagy)||'') << (pagy_next_link(@pagy)||'') << '</head>' %>
|
|
314
|
+
<%= highlight(html) %>
|
|
315
|
+
<% end %>
|
|
316
|
+
ERB
|
|
317
|
+
end
|
|
318
|
+
|
|
319
|
+
template :template do
|
|
320
|
+
<<~ERB
|
|
321
|
+
<h1>Pagy Template Demo</h1>
|
|
322
|
+
|
|
323
|
+
<p class="description">
|
|
324
|
+
See the <a href="https://ddnexus.github.io/pagy/docs/how-to/#using-your-pagination-templates">
|
|
325
|
+
Custom Templates</a> documentation.
|
|
326
|
+
</p>
|
|
327
|
+
<h2>Collection</h2>
|
|
328
|
+
<p id="records">@records: <%= @records.join(',') %></p>
|
|
329
|
+
|
|
330
|
+
<h2>Rendered ERB template</h2>
|
|
331
|
+
|
|
332
|
+
<%# We don't inline the template here, so we can highlight it more easily %>
|
|
333
|
+
<%= html = ERB.new(TEMPLATE).result(binding) %>
|
|
334
|
+
<%= highlight(TEMPLATE, format: :erb) %>
|
|
335
|
+
<%= highlight(html) %>
|
|
336
|
+
ERB
|
|
337
|
+
end
|
|
338
|
+
|
|
339
|
+
# Easier code highlighting
|
|
340
|
+
TEMPLATE = <<~ERB
|
|
341
|
+
<%# IMPORTANT: replace '<%=' with '<%==' if you run this in rails %>
|
|
342
|
+
|
|
343
|
+
<%# The a variable below is set to a lambda that generates the a tag %>
|
|
344
|
+
<%# Usage: a_tag = a.(page_number, text, classes: nil, aria_label: nil) %>
|
|
345
|
+
<% a = pagy_anchor(pagy) %>
|
|
346
|
+
<nav class="pagy nav" aria-label="Pages">
|
|
347
|
+
<%# Previous page link %>
|
|
348
|
+
<% if pagy.prev %>
|
|
349
|
+
<%= a.(pagy.prev, '<', aria_label: 'Previous') %>
|
|
350
|
+
<% else %>
|
|
351
|
+
<a role="link" aria-disabled="true" aria-label="Previous"><</a>
|
|
352
|
+
<% end %>
|
|
353
|
+
<%# Page links (series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]) %>
|
|
354
|
+
<% pagy.series.each do |item| %>
|
|
355
|
+
<% if item.is_a?(Integer) %>
|
|
356
|
+
<%= a.(item) %>
|
|
357
|
+
<% elsif item.is_a?(String) %>
|
|
358
|
+
<a role="link" aria-disabled="true" aria-current="page" class="current"><%= item %></a>
|
|
359
|
+
<% elsif item == :gap %>
|
|
360
|
+
<a role="link" aria-disabled="true" class="gap">…</a>
|
|
361
|
+
<% end %>
|
|
362
|
+
<% end %>
|
|
363
|
+
<%# Next page link %>
|
|
364
|
+
<% if pagy.next %>
|
|
365
|
+
<%= a.(pagy.next, '>', aria_label: 'Next') %>
|
|
366
|
+
<% else %>
|
|
367
|
+
<a role="link" aria-disabled="true" aria-label="Next"><</a>
|
|
368
|
+
<% end %>
|
|
369
|
+
</nav>
|
|
370
|
+
ERB
|
|
120
371
|
end
|
|
121
372
|
|
|
122
373
|
# Cheap pagy formatter for helpers output
|
|
@@ -196,240 +447,3 @@ class MockCollection < Array
|
|
|
196
447
|
end
|
|
197
448
|
|
|
198
449
|
run PagyDemo
|
|
199
|
-
|
|
200
|
-
# We store the template in a constant instead of writing it inline, so we can highlight it more easily
|
|
201
|
-
TEMPLATE = <<~ERB
|
|
202
|
-
<%# IMPORTANT: use '<%== ... ' instead of '<%= ... ' if you run this in rails %>
|
|
203
|
-
|
|
204
|
-
<%# The a variable below is set to a lambda that generates the a tag %>
|
|
205
|
-
<%# Usage: a_tag = a.(page_number, text, classes: nil, aria_label: nil) %>
|
|
206
|
-
<% a = pagy_anchor(pagy) %>
|
|
207
|
-
<nav class="pagy nav" aria-label="Pages">
|
|
208
|
-
<%# Previous page link %>
|
|
209
|
-
<% if pagy.prev %>
|
|
210
|
-
<%= a.(pagy.prev, '<', aria_label: 'Previous') %>
|
|
211
|
-
<% else %>
|
|
212
|
-
<a role="link" aria-disabled="true" aria-label="Previous"><</a>
|
|
213
|
-
<% end %>
|
|
214
|
-
<%# Page links (series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]) %>
|
|
215
|
-
<% pagy.series.each do |item| %>
|
|
216
|
-
<% if item.is_a?(Integer) %>
|
|
217
|
-
<%= a.(item) %>
|
|
218
|
-
<% elsif item.is_a?(String) %>
|
|
219
|
-
<a role="link" aria-disabled="true" aria-current="page" class="current"><%= item %></a>
|
|
220
|
-
<% elsif item == :gap %>
|
|
221
|
-
<a role="link" aria-disabled="true" class="gap">…</a>
|
|
222
|
-
<% end %>
|
|
223
|
-
<% end %>
|
|
224
|
-
<%# Next page link %>
|
|
225
|
-
<% if pagy.next %>
|
|
226
|
-
<%= a.(pagy.next, '>', aria_label: 'Next') %>
|
|
227
|
-
<% else %>
|
|
228
|
-
<a role="link" aria-disabled="true" aria-label="Next"><</a>
|
|
229
|
-
<% end %>
|
|
230
|
-
</nav>
|
|
231
|
-
ERB
|
|
232
|
-
|
|
233
|
-
__END__
|
|
234
|
-
|
|
235
|
-
@@ layout
|
|
236
|
-
<!DOCTYPE html>
|
|
237
|
-
<html lang="en">
|
|
238
|
-
<head>
|
|
239
|
-
<title>Pagy Demo App</title>
|
|
240
|
-
<script src="/javascripts/pagy.min.js"></script>
|
|
241
|
-
<script>
|
|
242
|
-
window.addEventListener("load", Pagy.init);
|
|
243
|
-
</script>
|
|
244
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
245
|
-
<%= erb :"#{style}_head" if defined?(style) %>
|
|
246
|
-
<style type="text/css">
|
|
247
|
-
@media screen { html, body {
|
|
248
|
-
font-size: 1rem;
|
|
249
|
-
line-height: 1.2s;
|
|
250
|
-
padding: 0;
|
|
251
|
-
margin: 0;
|
|
252
|
-
} }
|
|
253
|
-
body {
|
|
254
|
-
background: white !important;
|
|
255
|
-
margin: 0 !important;
|
|
256
|
-
font-family: sans-serif !important;
|
|
257
|
-
}
|
|
258
|
-
h1, h2 {
|
|
259
|
-
font-size: 1.8rem !important;
|
|
260
|
-
font-weight: 600 !important;
|
|
261
|
-
margin-top: 1rem !important;
|
|
262
|
-
margin-bottom: 0.7rem !important;
|
|
263
|
-
line-height: 1.5 !important;
|
|
264
|
-
color: rgb(90 90 90) !important;
|
|
265
|
-
}
|
|
266
|
-
h2 {
|
|
267
|
-
font-family: monospace;
|
|
268
|
-
font-size: .9rem !important;
|
|
269
|
-
margin-top: 1.6rem !important;
|
|
270
|
-
}
|
|
271
|
-
summary, .notes {
|
|
272
|
-
font-size: .8rem;
|
|
273
|
-
color: gray;
|
|
274
|
-
margin-top: .6rem;
|
|
275
|
-
font-style: italic;
|
|
276
|
-
cursor: pointer;
|
|
277
|
-
}
|
|
278
|
-
.notes {
|
|
279
|
-
font-family: sans-serif;
|
|
280
|
-
font-weight: normal;
|
|
281
|
-
}
|
|
282
|
-
.notes code{
|
|
283
|
-
background-color: #E8E8E8;
|
|
284
|
-
padding: 0 0.3rem;
|
|
285
|
-
font-style: normal;
|
|
286
|
-
border-radius: 3px;
|
|
287
|
-
}
|
|
288
|
-
.description {
|
|
289
|
-
margin: 1rem 0;
|
|
290
|
-
}
|
|
291
|
-
.description a {
|
|
292
|
-
color: blue;
|
|
293
|
-
text-decoration: underline;
|
|
294
|
-
}
|
|
295
|
-
pre, pre code {
|
|
296
|
-
display: block;
|
|
297
|
-
margin-top: .3rem;
|
|
298
|
-
margin-bottom: 1rem;
|
|
299
|
-
font-size: .8rem !important;
|
|
300
|
-
line-height: 1rem !important;
|
|
301
|
-
color: white;
|
|
302
|
-
background-color: rgb(30 30 30);
|
|
303
|
-
padding: 1rem;
|
|
304
|
-
overflow: auto;
|
|
305
|
-
}
|
|
306
|
-
.content {
|
|
307
|
-
padding: 0 1.5rem 2rem !important;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
#style-menu {
|
|
311
|
-
flex;
|
|
312
|
-
font-family: sans-serif;
|
|
313
|
-
font-size: 1.1rem;
|
|
314
|
-
line-height: 1.5rem;
|
|
315
|
-
white-space: nowrap;
|
|
316
|
-
color: white;
|
|
317
|
-
background-color: gray;
|
|
318
|
-
padding: .2rem 1.5rem;
|
|
319
|
-
}
|
|
320
|
-
#style-menu > :not([hidden]) ~ :not([hidden]) {
|
|
321
|
-
--space-reverse: 0;
|
|
322
|
-
margin-right: calc(0.5rem * var(--space-reverse));
|
|
323
|
-
margin-left: calc(0.5rem * calc(1 - var(--space-reverse)));
|
|
324
|
-
}
|
|
325
|
-
#style-menu a {
|
|
326
|
-
color: inherit;
|
|
327
|
-
text-decoration: none;
|
|
328
|
-
}
|
|
329
|
-
/* Quick demo for overriding the element style attribute of certain pagy helpers
|
|
330
|
-
.pagy input[style] {
|
|
331
|
-
width: 5rem !important;
|
|
332
|
-
}
|
|
333
|
-
*/
|
|
334
|
-
</style>
|
|
335
|
-
</head>
|
|
336
|
-
<body>
|
|
337
|
-
<!-- each different class used by each style -->
|
|
338
|
-
<%= style_menu %>
|
|
339
|
-
<div class="content">
|
|
340
|
-
<%= yield %>
|
|
341
|
-
</div>
|
|
342
|
-
</body>
|
|
343
|
-
</html>
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
@@ pagy_head
|
|
347
|
-
<!-- copy and paste the pagy style in order to edit it -->
|
|
348
|
-
<link rel="stylesheet" href="/stylesheets/pagy.css">
|
|
349
|
-
|
|
350
|
-
@@ bootstrap_head
|
|
351
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
|
352
|
-
|
|
353
|
-
@@ bulma_head
|
|
354
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|
355
|
-
|
|
356
|
-
@@ tailwind_head
|
|
357
|
-
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
|
|
358
|
-
<!-- copy and paste the pagy.tailwind style in order to edit it -->
|
|
359
|
-
<style type="text/tailwindcss">
|
|
360
|
-
<%= Pagy.root.join('stylesheets', 'pagy.tailwind.css').read %>
|
|
361
|
-
</style>
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
@@ helpers
|
|
365
|
-
<h1><%= style %></h1>
|
|
366
|
-
<% extra = STYLES[style][:extra] || "#{style}" %>
|
|
367
|
-
<% css_anchor = STYLES[style][:css_anchor] %>
|
|
368
|
-
|
|
369
|
-
<p class="description">See the <a href="http://ddnexus.github.io/pagy/docs/extras/<%= extra %>" target="blank"><%= extra %> extra</a>
|
|
370
|
-
documentation
|
|
371
|
-
<% if css_anchor %>
|
|
372
|
-
and the <a href="http://ddnexus.github.io/pagy/docs/api/stylesheets/#<%= css_anchor %>" target="blank"><%= css_anchor.gsub('-', '.') %></a>
|
|
373
|
-
<% end %>
|
|
374
|
-
for details</p>
|
|
375
|
-
|
|
376
|
-
<h2>Collection</h2>
|
|
377
|
-
<p id="records">@records: <%= @records.join(',') %></p>
|
|
378
|
-
|
|
379
|
-
<h2>pagy<%= prefix %>_nav <span class="notes">Simple nav <code>size: 5</code></span></h2>
|
|
380
|
-
<%= html = send(:"pagy#{prefix}_nav", @pagy, id: 'simple-nav', aria_label: 'Pages simple-nav', size: 5) %>
|
|
381
|
-
<%= highlight(html) %>
|
|
382
|
-
|
|
383
|
-
<h2>pagy<%= prefix %>_nav <span class="notes">Fast nav <code>size: 7</code></span></h2>
|
|
384
|
-
<%= html = send(:"pagy#{prefix}_nav", @pagy, id: 'nav', aria_label: 'Pages nav') %>
|
|
385
|
-
<%= highlight(html) %>
|
|
386
|
-
|
|
387
|
-
<h2>pagy<%= prefix %>_nav_js <span class="notes">Fast nav <code>size: 7</code></span></h2>
|
|
388
|
-
<%= html = send(:"pagy#{prefix}_nav_js", @pagy, id: 'nav-js', aria_label: 'Pages nav_js') %>
|
|
389
|
-
<%= highlight(html) %>
|
|
390
|
-
|
|
391
|
-
<h2>pagy<%= prefix %>_nav_js <span class="notes">Responsive nav <code>steps: {...}</code> (Resize the window to see)</span></h2>
|
|
392
|
-
<%= html = send(:"pagy#{prefix}_nav_js", @pagy, id: 'nav-js-responsive',
|
|
393
|
-
aria_label: 'Pages nav_js_responsive',
|
|
394
|
-
steps: { 0 => 5, 500 => 7, 750 => 9, 1000 => 11 }) %>
|
|
395
|
-
<%= highlight(html) %>
|
|
396
|
-
|
|
397
|
-
<h2>pagy<%= prefix %>_combo_nav_js</h2>
|
|
398
|
-
<%= html = send(:"pagy#{prefix}_combo_nav_js", @pagy, id: 'combo-nav-js', aria_label: 'Pages combo_nav_js') %>
|
|
399
|
-
<%= highlight(html) %>
|
|
400
|
-
|
|
401
|
-
<h2>pagy_info</h2>
|
|
402
|
-
<%= html = pagy_info(@pagy, id: 'pagy-info') %>
|
|
403
|
-
<%= highlight(html) %>
|
|
404
|
-
|
|
405
|
-
<% if style.match(/pagy|tailwind/) %>
|
|
406
|
-
<h2>pagy_limit_selector_js</h2>
|
|
407
|
-
<%= html = pagy_limit_selector_js(@pagy, id: 'limit-selector-js') %>
|
|
408
|
-
<%= highlight(html) %>
|
|
409
|
-
|
|
410
|
-
<h2>pagy_prev_a / pagy_next_a</h2>
|
|
411
|
-
<%= html = '<nav class="pagy" id="prev-next" aria-label="Pagy prev-next">' << pagy_prev_a(@pagy) << pagy_next_a(@pagy) << '</nav>' %>
|
|
412
|
-
<%= highlight(html) %>
|
|
413
|
-
|
|
414
|
-
<h2>pagy_prev_link / pagy_next_link <span class="notes">Link not rendered<span></h2>
|
|
415
|
-
<% html = '<head>' << (pagy_prev_link(@pagy)||'') << (pagy_next_link(@pagy)||'') << '</head>' %>
|
|
416
|
-
<%= highlight(html) %>
|
|
417
|
-
<% end %>
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
@@ template
|
|
421
|
-
<h1>Pagy Template Demo</h1>
|
|
422
|
-
|
|
423
|
-
<p class="description">
|
|
424
|
-
See the <a href="https://ddnexus.github.io/pagy/docs/how-to/#using-your-pagination-templates">
|
|
425
|
-
Custom Templates</a> documentation.
|
|
426
|
-
</p>
|
|
427
|
-
<h2>Collection</h2>
|
|
428
|
-
<p id="records">@records: <%= @records.join(',') %></p>
|
|
429
|
-
|
|
430
|
-
<h2>Rendered ERB template</h2>
|
|
431
|
-
|
|
432
|
-
<%# We don't inline the template here, so we can highlight it more easily %>
|
|
433
|
-
<%= html = ERB.new(TEMPLATE).result(binding) %>
|
|
434
|
-
<%= highlight(TEMPLATE, format: :erb) %>
|
|
435
|
-
<%= highlight(html) %>
|