Skip to content

Commit e71b7c0

Browse files
jrmerzjrmerz
committedJul 13, 2017
initial commit
·
polymer-v2
1 parent 5bfd608 commit e71b7c0

8 files changed

+410
-2
lines changed
 

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
bower_components
2+

‎README.md

+21-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,21 @@
1-
# cork-pagination
2-
Pagination Element
1+
# \<cork-pagination\>
2+
3+
Pagination element
4+
5+
## Install the Polymer-CLI
6+
7+
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
8+
9+
## Viewing Your Element
10+
11+
```
12+
$ polymer serve
13+
```
14+
15+
## Running Tests
16+
17+
```
18+
$ polymer test
19+
```
20+
21+
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

‎bower.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "cork-pagination",
3+
"description": "Pagination element",
4+
"main": "cork-pagination.html",
5+
"dependencies": {
6+
"polymer": "Polymer/polymer#^2.0.0",
7+
"iron-icons": "PolymerElements/iron-icons#^2.0.1",
8+
"iron-icon": "PolymerElements/iron-icon#^2.0.0",
9+
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0"
10+
},
11+
"devDependencies": {
12+
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
13+
"web-component-tester": "Polymer/web-component-tester#^6.0.0",
14+
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
15+
},
16+
"resolutions": {
17+
"polymer": "^2.0.0"
18+
}
19+
}

‎cork-pagination.html

+199
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
<link rel="import" href="../polymer/polymer-element.html">
2+
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
3+
<link rel="import" href="../iron-icons/iron-icons.html">
4+
5+
6+
<dom-module id="cork-pagination">
7+
<template>
8+
<style>
9+
:host {
10+
display: inline-block;
11+
}
12+
13+
#root {
14+
display: flex;
15+
align-items: center;
16+
}
17+
18+
.ellipsis {
19+
display: none;
20+
}
21+
22+
paper-icon-button {
23+
color: var(--cork-color, --default-primary-color);
24+
}
25+
paper-icon-button[disabled] {
26+
color: var(--cork-disabled-color, #ccc);
27+
}
28+
29+
a {
30+
color: var(--cork-color, --default-primary-color);
31+
cursor: pointer;
32+
text-align: center;
33+
min-width: 20px;
34+
border-radius: 20px;
35+
display: inline-block;
36+
padding: 4px;
37+
margin: 0 3px;
38+
}
39+
40+
a:hover {
41+
background: var(--cork-background-color-light, var(--default-background-color-light, #eee));
42+
}
43+
44+
a[selected] {
45+
background: var(--cork-background-color, var(--default-background-color, #ccc));
46+
color: white;
47+
}
48+
</style>
49+
50+
<div id="root">
51+
<paper-icon-button disabled$="[[firstPage]]" icon="arrow-back" on-click="previous"></paper-icon-button>
52+
53+
<a selected$="[[firstPage]]" on-click="_selectPage">1</a>
54+
<span id="startEllipsis" class="ellipsis">...</span>
55+
56+
<template is="dom-repeat" items="[[pages]]">
57+
<a selected$="[[item.selected]]" on-click="_selectPage">[[item.index]]</a>
58+
</template>
59+
60+
<span id="stopEllipsis" class="ellipsis">...</span>
61+
<a id="lastPage" selected$="[[lastPage]]" on-click="_selectPage">[[lastPageIndex]]</a>
62+
63+
<paper-icon-button disabled$="[[lastPage]]" icon="arrow-forward" on-click="next"></paper-icon-button>
64+
</div>
65+
66+
67+
</template>
68+
69+
<script>
70+
/**
71+
* `cork-pagination`
72+
* Pagination element
73+
*
74+
* @customElement
75+
* @polymer
76+
* @demo demo/index.html
77+
*/
78+
class CorkPagination extends Polymer.Element {
79+
static get is() { return 'cork-pagination'; }
80+
81+
static get properties() {
82+
return {
83+
itemsPerPage : {
84+
type : Number,
85+
value : 10
86+
},
87+
currentIndex : {
88+
type : Number,
89+
value : 1
90+
},
91+
totalResults : {
92+
type : Number,
93+
value : 1
94+
},
95+
numShownPages : {
96+
type : Number,
97+
value : 5
98+
},
99+
pages : {
100+
type : Array,
101+
value : function() {
102+
return []
103+
}
104+
},
105+
lastPageIndex: {
106+
type: Number,
107+
value: 1
108+
},
109+
firstPage : {
110+
type : Boolean,
111+
value : true
112+
},
113+
lastPage : {
114+
type: Boolean,
115+
value: false
116+
}
117+
};
118+
}
119+
120+
static get observers() {
121+
return [
122+
// Observer method name, followed by a list of dependencies, in parenthesis
123+
'_onPageChanged(currentIndex, itemsPerPage, totalResults)'
124+
]
125+
}
126+
127+
_onPageChanged() {
128+
this.firstPage = false;
129+
this.lastPage = false;
130+
131+
var pages = [];
132+
this.currentPage = Math.floor(this.currentIndex / this.itemsPerPage) + 1;
133+
var offset = Math.floor(this.numShownPages / 2);
134+
this.lastPageIndex = Math.max(Math.floor(this.totalResults / this.itemsPerPage), 1);
135+
136+
var startPage = this.currentPage - offset;
137+
var endPage = this.currentPage + offset;
138+
139+
if( startPage < 1 ) {
140+
endPage = (1 - startPage) + endPage;
141+
}
142+
if( endPage > this.lastPageIndex ) {
143+
startPage = startPage - (endPage - this.lastPageIndex);
144+
endPage = this.lastPageIndex;
145+
}
146+
if( startPage < 1 ) startPage = 1;
147+
148+
this.firstPage = (this.currentPage === 1) ? true : false;
149+
if( startPage === 1 ) startPage = 2;
150+
151+
this.lastPage = (this.currentPage === this.lastPageIndex) ? true : false;
152+
if( endPage === this.lastPageIndex ) endPage = this.lastPageIndex - 1;
153+
154+
for( var i = startPage; i <= endPage; i++ ) {
155+
pages.push({
156+
index : i,
157+
selected : (i === this.currentPage) ? true : false
158+
});
159+
}
160+
161+
this.$.lastPage.style.display = (this.lastPageIndex > 1) ? 'inline-block' : 'none';
162+
163+
this.$.startEllipsis.style.display = (startPage > 2) ? 'inline-block' : 'none';
164+
this.$.stopEllipsis.style.display = (endPage < (this.lastPageIndex - 1)) ? 'inline-block' : 'none';
165+
166+
this.pages = pages;
167+
}
168+
169+
previous() {
170+
this._fireNav({
171+
page : this.currentPage - 1,
172+
startIndex : (this.currentPage - 2) * this.itemsPerPage
173+
});
174+
}
175+
176+
next() {
177+
this._fireNav({
178+
page : this.currentPage + 1,
179+
startIndex : (this.currentPage) * this.itemsPerPage
180+
});
181+
}
182+
183+
_selectPage(e) {
184+
var page = parseInt(e.currentTarget.innerHTML);
185+
186+
this._fireNav({
187+
page : page,
188+
startIndex : (page-1) * this.itemsPerPage
189+
});
190+
}
191+
192+
_fireNav(payload) {
193+
this.dispatchEvent(new CustomEvent('nav', {detail: payload}));
194+
}
195+
}
196+
197+
window.customElements.define(CorkPagination.is, CorkPagination);
198+
</script>
199+
</dom-module>

‎demo/index.html

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
7+
<title>cork-pagination demo</title>
8+
9+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
11+
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
12+
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
13+
<link rel="import" href="../cork-pagination.html">
14+
15+
<custom-style>
16+
<style is="custom-style" include="demo-pages-shared-styles">
17+
</style>
18+
</custom-style>
19+
</head>
20+
<body>
21+
<div class="vertical-section-container centered">
22+
<h3>Basic cork-pagination demo, 163 results</h3>
23+
<demo-snippet>
24+
<template>
25+
<div style="text-align: center">
26+
<cork-pagination total-results="163" style="--cork-color: red"></cork-pagination>
27+
</div>
28+
</template>
29+
</demo-snippet>
30+
31+
<h3>534 Total Results, 9 pages shown, 15 items per page</h3>
32+
<demo-snippet>
33+
<template>
34+
<div style="text-align: center">
35+
<cork-pagination total-results="534" num-shown-pages="9" items-per-page="15" style="--cork-color: red"></cork-pagination>
36+
</div>
37+
</template>
38+
</demo-snippet>
39+
40+
<h3>64 Total Results, 9 pages shown</h3>
41+
<demo-snippet>
42+
<template>
43+
<div style="text-align: center">
44+
<cork-pagination total-results="64" num-shown-pages="9" style="--cork-color: red"></cork-pagination>
45+
</div>
46+
</template>
47+
</demo-snippet>
48+
49+
<h3>34 Total Results</h3>
50+
<demo-snippet>
51+
<template>
52+
<div style="text-align: center">
53+
<cork-pagination total-results="34" style="--cork-color: red"></cork-pagination>
54+
</div>
55+
</template>
56+
</demo-snippet>
57+
58+
<h3>1 Total Result</h3>
59+
<demo-snippet>
60+
<template>
61+
<div style="text-align: center">
62+
<cork-pagination total-results="1" style="--cork-color: red"></cork-pagination>
63+
</div>
64+
</template>
65+
</demo-snippet>
66+
67+
<h3>0 Total Results</h3>
68+
<demo-snippet>
69+
<template>
70+
<div style="text-align: center">
71+
<cork-pagination total-results="0" style="--cork-color: red"></cork-pagination>
72+
</div>
73+
</template>
74+
</demo-snippet>
75+
</div>
76+
77+
<script>
78+
setTimeout(() => {
79+
var eles = document.querySelectorAll('cork-pagination');
80+
for( var i = 0; i < eles.length; i++ ) {
81+
wireDemo(eles[i]);
82+
}
83+
}, 200);
84+
85+
function wireDemo(ele) {
86+
ele.addEventListener('nav', (e) => {
87+
ele.currentIndex = e.detail.startIndex;
88+
});
89+
}
90+
91+
</script>
92+
93+
</body>
94+
</html>

‎index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="refresh" content="0;url=demo/" />
6+
<title>cork-pagination</title>
7+
</head>
8+
<body>
9+
<!--
10+
ELEMENT API DOCUMENTATION SUPPORT COMING SOON
11+
Visit demo/index.html to see live examples of your element running.
12+
This page will automatically redirect you there when run in the browser
13+
with `polymer serve`.
14+
-->
15+
</body>
16+
</html>

‎polymer.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"lint": {
3+
"rules": [
4+
"polymer-2"
5+
]
6+
}
7+
}

‎test/cork-pagination_test.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
7+
<title>cork-pagination test</title>
8+
9+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
<script src="../../web-component-tester/browser.js"></script>
11+
12+
<link rel="import" href="../cork-pagination.html">
13+
</head>
14+
<body>
15+
16+
<test-fixture id="BasicTestFixture">
17+
<template>
18+
<cork-pagination></cork-pagination>
19+
</template>
20+
</test-fixture>
21+
22+
<test-fixture id="ChangedPropertyTestFixture">
23+
<template>
24+
<cork-pagination prop1="new-prop1"></cork-pagination>
25+
</template>
26+
</test-fixture>
27+
28+
<script>
29+
suite('cork-pagination', function() {
30+
31+
test('instantiating the element with default properties works', function() {
32+
var element = fixture('BasicTestFixture');
33+
assert.equal(element.prop1, 'cork-pagination');
34+
var elementShadowRoot = element.shadowRoot;
35+
var elementHeader = elementShadowRoot.querySelector('h2');
36+
assert.equal(elementHeader.innerHTML, 'Hello cork-pagination!');
37+
});
38+
39+
test('setting a property on the element works', function() {
40+
// Create a test fixture
41+
var element = fixture('ChangedPropertyTestFixture');
42+
assert.equal(element.prop1, 'new-prop1');
43+
var elementShadowRoot = element.shadowRoot;
44+
var elementHeader = elementShadowRoot.querySelector('h2');
45+
assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
46+
});
47+
48+
});
49+
</script>
50+
51+
</body>
52+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.