Add previous/next page arrows to newer/older pagination

This commit is contained in:
Anton Khorev 2024-01-20 06:03:20 +03:00
parent 523bb3169a
commit ebbebf8e57
2 changed files with 36 additions and 8 deletions

View file

@ -1,4 +1,12 @@
module SvgHelper
def previous_page_svg_tag(**options)
adjacent_page_svg_tag(dir == "rtl" ? 1 : -1, **options)
end
def next_page_svg_tag(**options)
adjacent_page_svg_tag(dir == "rtl" ? -1 : 1, **options)
end
def key_svg_tag(**options)
border_width = options["border"] ? (options["border-width"] || 1) : 0
rect_attrs = {
@ -31,6 +39,17 @@ module SvgHelper
private
# returns "<" shape if side == -1; ">" if side == 1
def adjacent_page_svg_tag(side, **options)
height = 15
pad = 2
segment = (0.5 * height) - pad
width = segment + (2 * pad)
path_data = "M#{side * (pad - (0.5 * width))},#{pad} l#{side * segment},#{segment} l#{-side * segment},#{segment}"
path_tag = tag.path :d => path_data, :fill => "none", :stroke => "currentColor", :"stroke-width" => 1.5
tag.svg path_tag, :width => width, :height => height, :viewBox => "-#{0.5 * width} 0 #{width} #{height}", :class => options[:class]
end
def stroke_attrs(attrs, prefix)
attrs.select { |key| key.start_with?(prefix) }.transform_keys { |key| key.delete_prefix(prefix).prepend("stroke") }
end

View file

@ -1,22 +1,31 @@
<nav>
<% link_class = "page-link d-flex align-items-center gap-2 text-center" %>
<ul class="pagination">
<% newer_link_content = capture do %>
<%= previous_page_svg_tag :class => "flex-shrink-0 d-none d-sm-block" %>
<%= t(newer_key) %>
<% end %>
<% if newer_id -%>
<li class="page-item">
<%= link_to t(newer_key), @params.merge(:before => nil, :after => newer_id), :class => "page-link" %>
<li class="page-item d-flex">
<%= link_to newer_link_content, @params.merge(:before => nil, :after => newer_id), :class => link_class %>
</li>
<% else -%>
<li class="page-item disabled">
<span class="page-link"><%= t(newer_key) %></span>
<li class="page-item d-flex disabled">
<%= tag.span newer_link_content, :class => link_class %>
</li>
<% end -%>
<% older_link_content = capture do %>
<%= t(older_key) %>
<%= next_page_svg_tag :class => "flex-shrink-0 d-none d-sm-block" %>
<% end %>
<% if older_id -%>
<li class="page-item">
<%= link_to t(older_key), @params.merge(:before => older_id, :after => nil), :class => "page-link" %>
<li class="page-item d-flex">
<%= link_to older_link_content, @params.merge(:before => older_id, :after => nil), :class => link_class %>
</li>
<% else -%>
<li class="page-item disabled">
<span class="page-link"><%= t(older_key) %></span>
<li class="page-item d-flex disabled">
<%= tag.span older_link_content, :class => link_class %>
</li>
<% end -%>
</ul>