Skip to content
This repository was archived by the owner on Jan 6, 2023. It is now read-only.

Commit 563de37

Browse files
mdeanjonesmdeanjones
committed
feat: add "hideWhenEmpty" option to UiPager navbar
1 parent 53d69bc commit 563de37

File tree

3 files changed

+101
-71
lines changed

3 files changed

+101
-71
lines changed

‎addon/components/ui-pager/navbar/component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ export default class UiPagerNavbar extends Component {
4141
*/
4242
public ariaLabel?: string;
4343

44+
/**
45+
* When true, the entire navigation bar will be removed when there are zero pages
46+
* to navigate.
47+
*/
48+
public hideWhenEmpty = false;
49+
4450
protected disabled = false;
4551

4652
protected currentPage = 1;

‎addon/components/ui-pager/navbar/template.hbs‎

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,82 @@
1-
<nav aria-label={{this.ariaLabel}}>
2-
<ul class="pagination">
3-
<li class={{if this.disablePrevButtons "disabled"}}>
4-
<a
5-
href="#"
6-
role="button"
7-
class="page-item"
8-
title="Go to first page"
9-
aria-label="Go to first page"
10-
aria-disabled="{{this.disablePrevButtons}}"
11-
aria-current="false"
12-
onclick={{action this.handleNavigation "first"}}
13-
>
14-
<UiIcon @name="angle-double-left" />
15-
</a>
16-
</li>
17-
18-
<li class={{if this.disablePrevButtons "disabled"}}>
19-
<a
20-
href="#"
21-
role="button"
22-
class="page-item"
23-
title="Go to previous page"
24-
aria-label="Go to previous page"
25-
aria-disabled="{{this.disablePrevButtons}}"
26-
aria-current="false"
27-
onclick={{action this.handleNavigation "prev"}}
28-
>
29-
<UiIcon @name="angle-left" />
30-
</a>
31-
</li>
1+
{{#if (or (not this.hideWhenEmpty) this.pageNumbers.length)}}
2+
<nav aria-label={{this.ariaLabel}}>
3+
<ul class="pagination">
4+
<li class={{if this.disablePrevButtons "disabled"}}>
5+
<a
6+
href="#"
7+
role="button"
8+
class="page-item"
9+
title="Go to first page"
10+
aria-label="Go to first page"
11+
aria-disabled="{{this.disablePrevButtons}}"
12+
aria-current="false"
13+
onclick={{action this.handleNavigation "first"}}
14+
>
15+
<UiIcon @name="angle-double-left" />
16+
</a>
17+
</li>
3218

33-
{{#each this.pageNumbers as |item|}}
34-
<li class="{{if this.disabled "disabled"}}{{if item.isCurrent " active"}}">
19+
<li class={{if this.disablePrevButtons "disabled"}}>
3520
<a
3621
href="#"
3722
role="button"
38-
class="page-item{{if this.responsive " hidden-xs hidden-sm"}}"
39-
title="{{if item.isCurrent (concat "Current page, page " item.idx) (concat "Go to page " item.idx)}}"
40-
aria-label="{{if item.isCurrent (concat "Current page, page " item.idx) (concat "Go to page " item.idx)}}"
41-
aria-current="{{if item.isCurrent "page" "false"}}"
42-
aria-disabled="{{this.disabled}}"
43-
onclick={{action this.handleNavigation item.idx}}
23+
class="page-item"
24+
title="Go to previous page"
25+
aria-label="Go to previous page"
26+
aria-disabled="{{this.disablePrevButtons}}"
27+
aria-current="false"
28+
onclick={{action this.handleNavigation "prev"}}
4429
>
45-
{{if this.showPageLinkRangeLabels item.range item.idx}}
30+
<UiIcon @name="angle-left" />
4631
</a>
4732
</li>
48-
{{/each}}
4933

50-
<li class={{if this.disableNextButtons "disabled"}}>
51-
<a
52-
href="#"
53-
role="button"
54-
class="page-item"
55-
title="Go to next page"
56-
aria-label="Go to next page"
57-
aria-disabled="{{this.disableNextButtons}}"
58-
aria-current="false"
59-
onclick={{action this.handleNavigation "next"}}
60-
>
61-
<UiIcon @name="angle-right" />
62-
</a>
63-
</li>
34+
{{#each this.pageNumbers as |item|}}
35+
<li class="{{if this.disabled "disabled"}}{{if item.isCurrent " active"}}">
36+
<a
37+
href="#"
38+
role="button"
39+
class="page-item{{if this.responsive " hidden-xs hidden-sm"}}"
40+
title="{{if item.isCurrent (concat "Current page, page " item.idx) (concat "Go to page " item.idx)}}"
41+
aria-label="{{if item.isCurrent (concat "Current page, page " item.idx) (concat "Go to page " item.idx)}}"
42+
aria-current="{{if item.isCurrent "page" "false"}}"
43+
aria-disabled="{{this.disabled}}"
44+
onclick={{action this.handleNavigation item.idx}}
45+
>
46+
{{if this.showPageLinkRangeLabels item.range item.idx}}
47+
</a>
48+
</li>
49+
{{/each}}
50+
51+
<li class={{if this.disableNextButtons "disabled"}}>
52+
<a
53+
href="#"
54+
role="button"
55+
class="page-item"
56+
title="Go to next page"
57+
aria-label="Go to next page"
58+
aria-disabled="{{this.disableNextButtons}}"
59+
aria-current="false"
60+
onclick={{action this.handleNavigation "next"}}
61+
>
62+
<UiIcon @name="angle-right" />
63+
</a>
64+
</li>
6465

65-
<li class={{if this.disableNextButtons "disabled"}}>
66-
<a
67-
href="#"
68-
role="button"
69-
class="page-item{{if this.disableNextButtons ' disabled'}}"
70-
title="Go to last page"
71-
aria-label="Go to last page"
72-
aria-disabled="{{this.disableNextButtons}}"
73-
aria-current="false"
74-
onclick={{action this.handleNavigation "last"}}
75-
>
76-
<UiIcon @name="angle-double-right" />
77-
</a>
78-
</li>
79-
</ul>
80-
</nav>
66+
<li class={{if this.disableNextButtons "disabled"}}>
67+
<a
68+
href="#"
69+
role="button"
70+
class="page-item{{if this.disableNextButtons ' disabled'}}"
71+
title="Go to last page"
72+
aria-label="Go to last page"
73+
aria-disabled="{{this.disableNextButtons}}"
74+
aria-current="false"
75+
onclick={{action this.handleNavigation "last"}}
76+
>
77+
<UiIcon @name="angle-double-right" />
78+
</a>
79+
</li>
80+
</ul>
81+
</nav>
82+
{{/if}}

‎tests/integration/components/ui-pager-test.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,28 @@ module('Integration | Component | ui-pager', function (hooks) {
238238
});
239239
});
240240

241+
test('the navbar can be hidden when no pages are available', async function (assert) {
242+
this.set('records', generateRecordSet());
243+
this.set('hideWhenEmpty', true);
244+
245+
// language=handlebars
246+
await render(hbs`
247+
<UiPager @records={{this.records}} @disabled={{this.disabled}} as |Pager|>
248+
<Pager.Navbar @hideWhenEmpty={{this.hideWhenEmpty}} />
249+
</UiPager>
250+
`);
251+
252+
assert.dom('nav').isVisible();
253+
254+
this.set('records', []);
255+
256+
assert.dom('nav').doesNotExist();
257+
258+
this.set('records', generateRecordSet(1));
259+
260+
assert.dom('nav').isVisible();
261+
});
262+
241263
test('it generates descriptive text', async function (assert) {
242264
this.set('records', generateRecordSet());
243265

0 commit comments

Comments
 (0)