Skip to content

Commit cf7f1d6

Browse files
jrmerzjrmerz
committed
porting to js modules
1 parent 001da33 commit cf7f1d6

10 files changed

+5435
-354
lines changed

‎.gitignore

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

‎bower.json

-19
This file was deleted.

‎cork-pagination.html

+77-259
Original file line numberDiff line numberDiff line change
@@ -1,259 +1,77 @@
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: 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, var(--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: 25px;
35-
display: inline-block;
36-
padding: 5px;
37-
margin: 0 3px;
38-
font-size: 14px;
39-
line-height: 20px;
40-
}
41-
42-
a:hover {
43-
background: var(--cork-background-color-light, var(--light-background-color, #eee));
44-
}
45-
46-
a[selected] {
47-
background: var(--cork-background-color, var(--medium-background-color, #ccc));
48-
color: white;
49-
}
50-
51-
[hidden] {
52-
display: none;
53-
}
54-
55-
.text-display {
56-
font-style: italic;
57-
}
58-
</style>
59-
60-
<div id="root">
61-
<paper-icon-button disabled$="[[firstPage]]" icon="arrow-back" on-click="previous"></paper-icon-button>
62-
63-
<div style="flex:1"></div>
64-
65-
<div hidden$="[[loading]]">
66-
<div hidden$="[[!textMode]]" class="text-display">[[textDisplay]]</div>
67-
</div>
68-
69-
<div hidden$="[[textMode]]">
70-
<a selected$="[[firstPage]]" on-click="_selectPage">1</a>
71-
<a id="startEllipsis" class="ellipsis" on-click="previousSection">...</a>
72-
73-
<template is="dom-repeat" items="[[pages]]">
74-
<a selected$="[[item.selected]]" on-click="_selectPage">[[item.index]]</a>
75-
</template>
76-
77-
<a id="stopEllipsis" class="ellipsis" on-click="nextSection">...</a>
78-
<a id="lastPage" selected$="[[lastPage]]" on-click="_selectPage">[[lastPageIndex]]</a>
79-
</div>
80-
81-
<div style="flex:1"></div>
82-
83-
<paper-icon-button disabled$="[[lastPage]]" icon="arrow-forward" on-click="next"></paper-icon-button>
84-
</div>
85-
86-
87-
</template>
88-
89-
<script>
90-
91-
class CorkPagination extends Polymer.Element {
92-
static get is() { return 'cork-pagination'; }
93-
94-
static get properties() {
95-
return {
96-
itemsPerPage : {
97-
type : Number,
98-
value : 10
99-
},
100-
currentIndex : {
101-
type : Number,
102-
value : 1
103-
},
104-
textMode : {
105-
type : Boolean,
106-
value : false
107-
},
108-
textDisplay : {
109-
type : String,
110-
computed : '_computeTextDisplay(currentIndex, totalResults, itemsPerPage)'
111-
},
112-
totalResults : {
113-
type : Number,
114-
value : 1
115-
},
116-
numShownPages : {
117-
type : Number,
118-
value : 5
119-
},
120-
pages : {
121-
type : Array,
122-
value : function() {
123-
return []
124-
}
125-
},
126-
lastPageIndex: {
127-
type: Number,
128-
value: 1
129-
},
130-
firstPage : {
131-
type : Boolean,
132-
value : true
133-
},
134-
lastPage : {
135-
type: Boolean,
136-
value: false
137-
},
138-
loading : {
139-
type : Boolean,
140-
value : false
141-
}
142-
};
143-
}
144-
145-
static get observers() {
146-
return [
147-
// Observer method name, followed by a list of dependencies, in parenthesis
148-
'_onPageChanged(currentIndex, itemsPerPage, totalResults)'
149-
]
150-
}
151-
152-
_computeTextDisplay(currentIndex, totalResults, itemsPerPage) {
153-
if( totalResults === 0 ) return 'No results found';
154-
155-
var to = (currentIndex+itemsPerPage < totalResults) ? (currentIndex+itemsPerPage) : totalResults;
156-
var current = currentIndex+1;
157-
if( current > to ) current = to;
158-
return `Showing ${current} to ${to} of ${totalResults}`;
159-
}
160-
161-
_onPageChanged() {
162-
this.firstPage = false;
163-
this.lastPage = false;
164-
165-
var pages = [];
166-
this.currentPage = Math.floor(this.currentIndex / this.itemsPerPage) + 1;
167-
var offset = Math.floor(this.numShownPages / 2);
168-
this.lastPageIndex = Math.max(Math.ceil(this.totalResults / this.itemsPerPage), 1);
169-
170-
var startPage = this.currentPage - offset;
171-
var endPage = this.currentPage + offset;
172-
173-
if( startPage < 1 ) {
174-
endPage = (1 - startPage) + endPage;
175-
}
176-
if( endPage > this.lastPageIndex ) {
177-
startPage = startPage - (endPage - this.lastPageIndex);
178-
endPage = this.lastPageIndex;
179-
}
180-
if( startPage < 1 ) startPage = 1;
181-
182-
this.firstPage = (this.currentPage === 1) ? true : false;
183-
if( startPage === 1 ) startPage = 2;
184-
185-
this.lastPage = (this.currentPage === this.lastPageIndex) ? true : false;
186-
if( endPage === this.lastPageIndex ) endPage = this.lastPageIndex - 1;
187-
188-
for( var i = startPage; i <= endPage; i++ ) {
189-
pages.push({
190-
index : i,
191-
selected : (i === this.currentPage) ? true : false
192-
});
193-
}
194-
195-
this.$.lastPage.style.display = (this.lastPageIndex > 1) ? 'inline-block' : 'none';
196-
197-
this.$.startEllipsis.style.display = (startPage > 2) ? 'inline-block' : 'none';
198-
this.$.stopEllipsis.style.display = (endPage < (this.lastPageIndex - 1)) ? 'inline-block' : 'none';
199-
200-
this.pages = pages;
201-
}
202-
203-
previous() {
204-
this._fireNav({
205-
page : this.currentPage - 1,
206-
startIndex : (this.currentPage - 2) * this.itemsPerPage
207-
});
208-
}
209-
210-
next() {
211-
this._fireNav({
212-
page : this.currentPage + 1,
213-
startIndex : (this.currentPage) * this.itemsPerPage
214-
});
215-
}
216-
217-
_selectPage(e) {
218-
var page = parseInt(e.currentTarget.innerHTML);
219-
220-
this._fireNav({
221-
page : page,
222-
startIndex : (page-1) * this.itemsPerPage
223-
});
224-
}
225-
226-
previousSection() {
227-
var offset = Math.floor(this.numShownPages / 2) + 1;
228-
var currentStartPage = this.pages[0].index;
229-
var page = currentStartPage - offset;
230-
231-
if( page < 1 ) page = 1;
232-
233-
this._fireNav({
234-
page : page,
235-
startIndex : (page-1) * this.itemsPerPage
236-
});
237-
}
238-
239-
nextSection() {
240-
var offset = Math.floor(this.numShownPages / 2) + 1;
241-
var currentStartPage = this.pages[this.pages.length-1].index;
242-
var page = currentStartPage + offset;
243-
244-
if( page > this.lastPageIndex ) page = this.lastPageIndex;
245-
246-
this._fireNav({
247-
page : page,
248-
startIndex : (page-1) * this.itemsPerPage
249-
});
250-
}
251-
252-
_fireNav(payload) {
253-
this.dispatchEvent(new CustomEvent('nav', {detail: payload}));
254-
}
255-
}
256-
257-
window.customElements.define(CorkPagination.is, CorkPagination);
258-
</script>
259-
</dom-module>
1+
<style>
2+
:host {
3+
display: block;
4+
}
5+
6+
#root {
7+
display: flex;
8+
align-items: center;
9+
}
10+
11+
.ellipsis {
12+
display: none;
13+
}
14+
15+
paper-icon-button {
16+
color: var(--cork-color, --default-primary-color);
17+
}
18+
paper-icon-button[disabled] {
19+
color: var(--cork-disabled-color, var(--disabled-color, #ccc));
20+
}
21+
22+
a {
23+
color: var(--cork-color, --default-primary-color);
24+
cursor: pointer;
25+
text-align: center;
26+
min-width: 20px;
27+
border-radius: 25px;
28+
display: inline-block;
29+
padding: 5px;
30+
margin: 0 3px;
31+
font-size: 14px;
32+
line-height: 20px;
33+
}
34+
35+
a:hover {
36+
background: var(--cork-background-color-light, var(--light-background-color, #eee));
37+
}
38+
39+
a[selected] {
40+
background: var(--cork-background-color, var(--medium-background-color, #ccc));
41+
color: white;
42+
}
43+
44+
[hidden] {
45+
display: none;
46+
}
47+
48+
.text-display {
49+
font-style: italic;
50+
}
51+
</style>
52+
53+
<div id="root">
54+
<paper-icon-button disabled$="[[firstPage]]" icon="arrow-back" on-click="previous"></paper-icon-button>
55+
56+
<div style="flex:1"></div>
57+
58+
<div hidden$="[[loading]]">
59+
<div hidden$="[[!textMode]]" class="text-display">[[textDisplay]]</div>
60+
</div>
61+
62+
<div hidden$="[[textMode]]">
63+
<a selected$="[[firstPage]]" on-click="_selectPage">1</a>
64+
<a id="startEllipsis" class="ellipsis" on-click="previousSection">...</a>
65+
66+
<template is="dom-repeat" items="[[pages]]">
67+
<a selected$="[[item.selected]]" on-click="_selectPage">[[item.index]]</a>
68+
</template>
69+
70+
<a id="stopEllipsis" class="ellipsis" on-click="nextSection">...</a>
71+
<a id="lastPage" selected$="[[lastPage]]" on-click="_selectPage">[[lastPageIndex]]</a>
72+
</div>
73+
74+
<div style="flex:1"></div>
75+
76+
<paper-icon-button disabled$="[[lastPage]]" icon="arrow-forward" on-click="next"></paper-icon-button>
77+
</div>

0 commit comments

Comments
 (0)