]> git.openstreetmap.org Git - rails.git/blob - app/helpers/numbered_pagination_helper.rb
Split long version lists into 3 parts, with middle list scrollable
[rails.git] / app / helpers / numbered_pagination_helper.rb
1 module NumberedPaginationHelper
2   def element_versions_pagination(top_version, active_version: 0, &)
3     lists = []
4
5     if top_version <= 5
6       lists << tag.ul(:class => "pagination pagination-sm mt-1") do
7         (1..top_version).each do |v|
8           concat element_versions_pagination_item(v, **yield(v), :active => v == active_version)
9         end
10       end
11     else
12       start_list_versions = 1..1
13       end_list_versions = top_version..top_version
14       middle_list_versions = (start_list_versions.last + 1)..(end_list_versions.first - 1)
15
16       lists << tag.ul(:class => "pagination pagination-sm mt-1") do
17         start_list_versions.each do |v|
18           concat element_versions_pagination_item(v, **yield(v), :active => v == active_version)
19         end
20       end
21       lists << tag.ul(:class => [
22                         "pagination pagination-sm",
23                         "overflow-x-scroll pb-3", # horizontal scrollbar with reserved space below
24                         "pt-1" # space reserved for focus outlines
25                       ]) do
26         middle_list_versions.each do |v|
27           concat element_versions_pagination_item(v, **yield(v), :active => v == active_version)
28         end
29       end
30       lists << tag.ul(:class => "pagination pagination-sm mt-1") do
31         end_list_versions.each do |v|
32           concat element_versions_pagination_item(v, **yield(v), :active => v == active_version)
33         end
34       end
35     end
36
37     tag.div safe_join(lists), :class => "d-flex align-items-start"
38   end
39
40   private
41
42   def element_versions_pagination_item(body, href: nil, title: nil, active: false)
43     link_class = "page-link"
44     link = link_to body, href, :class => link_class, :title => title
45     tag.li link, :class => ["page-item", { "active" => active }]
46   end
47 end