-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
pagination.html.haml
84 lines (78 loc) · 4.15 KB
/
pagination.html.haml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
:ruby
page_index = page.posts.current_page_index
page_count = page.posts.pages.size
linked_pages = Array.new
linked_pages << 0
linked_pages << 1
linked_pages << 2
linked_pages << page_index
linked_pages << page_index - 1
linked_pages << page_index - 2
linked_pages << page_index + 1
linked_pages << page_index + 2
linked_pages << page_count - 1
linked_pages << page_count - 2
linked_pages << page_count - 3
%div
%nav
%ul.app-pagination
%li.app-pagination__page-item{:class => ('app-pagination__page-item--hidden' unless page.posts.previous_page)}
%a.app-button.app-pagination__page-link{:href => (page.posts.previous_page and expand_link(page.posts.previous_page.url))}
%ion-icon{:name=>"arrow-back-outline"}
- previous_visible = false
- page.posts.pages.each_index do |index|
- # The url changed depending on if we are on the first page or later pages.
- # These must be relative links to handle pagination of tags.
- # First page on blog or tags:
- # https://jenkins.io/blog/
- # https://jenkins.io/blog/tags/pipeline/
- # Other pages on blog or tags:
- # https://jenkins.io/blog/page/4.html
- # https://jenkins.io/blog/tags/pipeline/page/4.html
- if page_index == 0
- if index != 0
- # link to other page from first page
- link_url = "./page/#{index + 1}.html"
- else
- if index == 0
- # link to first page from other page
- link_url = '..'
-# This will remove Links from the current page
- elsif index != page_index
- # link to other page from other page
- link_url = "../page/#{index + 1}.html"
- # whatever the link url, the text is the same
- if index == 0
%li.app-pagination__page-item{:class => ((page_index == index) and 'app-pagination__page-item__active')}
%a.app-button.app-pagination__page-link{:href => link_url, :class => ((page_index == index) and 'app-pagination__page-link__current')}
1
- elsif linked_pages.include?(index) or (linked_pages.include?(index - 1) and linked_pages.include?(index + 1))
- # page is defined to be linked, or is surrounded by linked pages -- i.e. no gaps of just 1 page, removing hover if its current page
- previous_visible = true
%li.app-pagination__page-item{:class => ((page_index == index) and 'app-pagination__page-item__active')}
%a.app-button.app-pagination__page-link{:href => link_url, :class => ((page_index == index) and 'app-pagination__page-link__current')}
= index + 1
- else
- if previous_visible
%li.app-pagination__page-item.app-pagination__page-item--disabled
%div.app-button.app-pagination__page-link
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="48" fill="var(--color--secondary)" /><circle cx="466" cy="256" r="48" fill="var(--color--secondary)" /><circle cx="46" cy="256" r="48" fill="var(--color--secondary)" /></svg>
- previous_visible = false
%div.app-button.app-page-switcher
%select{:id => 'page-switcher'}
- page.posts.pages.each_index do |index|
%option{:value => index + 1, :selected => page_index == index ? true : null}
= "Page #{index + 1}"
%ion-icon{:name=>"chevron-down-outline"}
:javascript
$(document).ready(function() {
const pageSwitcher = document.querySelector("#page-switcher");
pageSwitcher.style.width = (`Page ${pageSwitcher.value}`.length * 15.625) + 'px';
pageSwitcher.addEventListener('change', () => {
const value = pageSwitcher.value;
window.location.href = value === '1' ? `/blog/` : `/blog/page/${value}.html`;
})
});
%li.app-pagination__page-item{:class => ('app-pagination__page-item--hidden' unless page.posts.next_page)}
%a.app-button.app-pagination__page-link{:href => (page.posts.next_page and expand_link(page.posts.next_page.url))}
%ion-icon{:name=>"arrow-forward-outline"}