Skip to content

Commit c472d84

Browse files
fiegfieg
authored
Merge pull request #445 from fieg/issue-423-hide-multiple-pagers
Hide all pagination elements + warning instead of error when element not found
2 parents 1f70b99 + a2e61a5 commit c472d84

File tree

6 files changed

+190
-27
lines changed

6 files changed

+190
-27
lines changed

‎docs/options.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@ let ias = new InfiniteAjaxScroll(/*..*/, {
5050
**Default:** `false`<br>
5151
**Required:** no
5252

53-
Selector of the elements that contain the pagination. The elements that match the selector will be hidden when Infinite Ajax Scroll binds.
53+
Selector of the elements that contain the pagination. The elements that match the selector will be hidden (`element.style.display` -> none) when Infinite Ajax Scroll binds.
54+
55+
The pagination elements will be restored (`element.style.display` -> original value) when [`unbind`](./methods.md#unbind) is called.
5456

5557
```html
5658
<div class="pager" id="pager1">

‎rollup.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ const min = Object.assign({}, base, {
6262
unsafe: true,
6363
unsafe_comps: true,
6464
warnings: false
65+
},
66+
output: {
67+
comments: new RegExp(pkg.title)
6568
}
6669
})
6770
],

‎src/assert.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,14 @@ export default {
1818
if ($element.length === 0) {
1919
throw new Error(`Element "${elementOrSelector}" not found for "${property}"`);
2020
}
21+
},
22+
warn(fn, ...args) {
23+
try {
24+
fn(...args)
25+
} catch (e) {
26+
if (console && console.warn) {
27+
console.warn(e.message)
28+
}
29+
}
2130
}
2231
}

‎src/pagination.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,33 @@ function expand(options) {
2727
export default class Pagination {
2828
constructor(ias, options) {
2929
this.options = extend({}, defaults, expand(options));
30+
this.originalDisplayStyles = new WeakMap();
3031

3132
if (!this.options.hide) {
3233
return;
3334
}
3435

35-
Assert.anyElement(this.options.element, 'pagination.element');
36+
Assert.warn(Assert.anyElement, this.options.element, 'pagination.element');
3637

3738
ias.on(Events.BINDED, this.hide.bind(this));
3839
ias.on(Events.UNBINDED, this.restore.bind(this));
3940
}
4041

4142
hide() {
42-
let el = $(this.options.element)[0];
43+
let els = $(this.options.element);
4344

44-
this.originalDisplayStyle = window.getComputedStyle(el).display;
45+
els.forEach((el) => {
46+
this.originalDisplayStyles.set(el, window.getComputedStyle(el).display);
4547

46-
el.style.display = 'none';
48+
el.style.display = 'none';
49+
});
4750
}
4851

4952
restore() {
50-
let el = $(this.options.element)[0];
53+
let els = $(this.options.element);
5154

52-
el.style.display = this.originalDisplayStyle;
55+
els.forEach((el) => {
56+
el.style.display = this.originalDisplayStyles.get(el) || 'block';
57+
});
5358
}
5459
}

‎test/fixtures/default/page1-dual-pager.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Page 1 - Infinite Ajax Scroll</title>
6+
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
11+
<div class="surface-container">
12+
<div class="pager">
13+
<a href="page2.html" class="pager__next">Next page &rightarrow;</a>
14+
</div>
15+
16+
<div class="blocks">
17+
<span class="blocks__block">1</span>
18+
<span class="blocks__block">2</span>
19+
<span class="blocks__block">3</span>
20+
<span class="blocks__block">4</span>
21+
<span class="blocks__block">5</span>
22+
<span class="blocks__block">6</span>
23+
<span class="blocks__block">7</span>
24+
<span class="blocks__block">8</span>
25+
<span class="blocks__block">9</span>
26+
<span class="blocks__block">10</span>
27+
28+
<span class="blocks__block">11</span>
29+
<span class="blocks__block">12</span>
30+
<span class="blocks__block">13</span>
31+
<span class="blocks__block">14</span>
32+
<span class="blocks__block">15</span>
33+
<span class="blocks__block">16</span>
34+
<span class="blocks__block">17</span>
35+
<span class="blocks__block">18</span>
36+
<span class="blocks__block">19</span>
37+
<span class="blocks__block">20</span>
38+
39+
<span class="blocks__block">21</span>
40+
<span class="blocks__block">22</span>
41+
<span class="blocks__block">23</span>
42+
<span class="blocks__block">24</span>
43+
<span class="blocks__block">25</span>
44+
<span class="blocks__block">26</span>
45+
<span class="blocks__block">27</span>
46+
<span class="blocks__block">28</span>
47+
<span class="blocks__block">29</span>
48+
<span class="blocks__block">30</span>
49+
50+
<span class="blocks__block">31</span>
51+
<span class="blocks__block">32</span>
52+
<span class="blocks__block">33</span>
53+
<span class="blocks__block">34</span>
54+
<span class="blocks__block">35</span>
55+
<span class="blocks__block">36</span>
56+
<span class="blocks__block">37</span>
57+
<span class="blocks__block">38</span>
58+
<span class="blocks__block">39</span>
59+
<span class="blocks__block">40</span>
60+
61+
<span class="blocks__block">41</span>
62+
<span class="blocks__block">42</span>
63+
<span class="blocks__block">43</span>
64+
<span class="blocks__block">44</span>
65+
<span class="blocks__block">45</span>
66+
<span class="blocks__block">46</span>
67+
<span class="blocks__block">47</span>
68+
<span class="blocks__block">48</span>
69+
<span class="blocks__block">49</span>
70+
<span class="blocks__block">50</span>
71+
72+
<span class="blocks__block">51</span>
73+
<span class="blocks__block">52</span>
74+
<span class="blocks__block">53</span>
75+
<span class="blocks__block">54</span>
76+
<span class="blocks__block">55</span>
77+
<span class="blocks__block">56</span>
78+
<span class="blocks__block">57</span>
79+
<span class="blocks__block">58</span>
80+
<span class="blocks__block">59</span>
81+
<span class="blocks__block">60</span>
82+
83+
<span class="blocks__block">61</span>
84+
<span class="blocks__block">62</span>
85+
<span class="blocks__block">63</span>
86+
<span class="blocks__block">64</span>
87+
<span class="blocks__block">65</span>
88+
<span class="blocks__block">66</span>
89+
<span class="blocks__block">67</span>
90+
<span class="blocks__block">68</span>
91+
<span class="blocks__block">69</span>
92+
<span class="blocks__block">70</span>
93+
</div>
94+
95+
<div class="pager">
96+
<a href="page2.html" class="pager__next">Next page &rightarrow;</a>
97+
</div>
98+
99+
<button id="trigger1" class="trigger">Load more</button>
100+
101+
<div class="spinner">
102+
Loading...
103+
</div>
104+
</div>
105+
106+
<!--<script src="../../../dist/infinite-ajax-scroll.js"></script>-->
107+
<script src="index.js"></script>
108+
109+
</body>
110+
</html>

‎test/pagination_spec.js‎

Lines changed: 54 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,26 @@ describe('Pagination', () => {
2222
});
2323
});
2424

25+
it('should hide multiple pagination elements', () => {
26+
cy.visit('http://localhost:8080/test/fixtures/default/page1-dual-pager.html');
27+
28+
cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
29+
let ias = new InfiniteAjaxScroll('.blocks', {
30+
item: '.blocks__block',
31+
next: '.pager__next',
32+
pagination: '.pager',
33+
bind: false
34+
});
35+
36+
cy.get('.pager').should('be.visible')
37+
.then(() => {
38+
ias.bind();
39+
40+
cy.get('.pager').should('not.be.visible');
41+
});
42+
});
43+
});
44+
2545
it('should restore pagination on unbinded', () => {
2646
cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
2747
let ias = new InfiniteAjaxScroll('.blocks', {
@@ -42,6 +62,28 @@ describe('Pagination', () => {
4262
});
4363
});
4464

65+
it('should restore multiple pagination elements', () => {
66+
cy.visit('http://localhost:8080/test/fixtures/default/page1-dual-pager.html');
67+
68+
cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
69+
let ias = new InfiniteAjaxScroll('.blocks', {
70+
item: '.blocks__block',
71+
next: '.pager__next',
72+
pagination: '.pager',
73+
bind: false
74+
});
75+
76+
ias.bind();
77+
78+
cy.get('.pager').should('not.be.visible')
79+
.then(() => {
80+
ias.unbind();
81+
82+
cy.get('.pager').should('be.visible');
83+
});
84+
});
85+
});
86+
4587
it('should not hide pagination when option set to false', () => {
4688
cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
4789
let ias = new InfiniteAjaxScroll('.blocks', {
@@ -82,28 +124,20 @@ describe('Pagination', () => {
82124
});
83125
});
84126

85-
it('should throw when element not found', () => {
127+
it('should warn when element not found', () => {
86128
cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
87-
const subject = {
88-
ias: () => {
89-
new InfiniteAjaxScroll('.blocks', {
90-
item: '.blocks__block',
91-
next: '.pager__next',
92-
pagination: '.pager_does_not_exist',
93-
bind: false
94-
});
95-
}
96-
};
97-
98-
const spy = cy.spy(subject, 'ias');
99-
100-
try {
101-
subject.ias();
102-
} catch (e) {
103-
// noop
104-
}
129+
cy.window().then((win) => {
130+
const spy = cy.spy(win.console, 'warn');
131+
132+
let ias = new InfiniteAjaxScroll('.blocks', {
133+
item: '.blocks__block',
134+
next: '.pager__next',
135+
pagination: '.pager_does_not_exist',
136+
bind: false
137+
});
105138

106-
expect(spy).to.have.thrown('Error');
139+
expect(spy).to.have.been.called;
140+
});
107141
});
108142
});
109143

0 commit comments

Comments
 (0)