pagy 9.1.1 → 9.3.0
Sign up to get free protection for your applications and to get access to all the features.
- 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 +14 -18
- 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/keyset/active_record.rb +4 -4
- data/lib/pagy/keyset/sequel.rb +4 -4
- data/lib/pagy/keyset.rb +21 -11
- 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.1.1'
|
|
22
|
+
VERSION = '9.3.0'
|
|
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) %>
|