@everymatrix/bonus-elevate-powerups-history 0.0.78 → 0.0.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bonus-elevate-powerups-history/bonus-elevate-powerups-history-f700a5a8.js +9 -0
- package/dist/bonus-elevate-powerups-history/bonus-elevate-powerups-history.esm.js +1 -1
- package/dist/bonus-elevate-powerups-history/bonus-elevate-powerups-history_16.entry.js +6657 -0
- package/dist/bonus-elevate-powerups-history/index-4bb6fa75.js +2 -0
- package/dist/bonus-elevate-powerups-history/index.esm.js +1 -1
- package/dist/cjs/{bonus-elevate-powerups-history-2494a599.js → bonus-elevate-powerups-history-d31ca30d.js} +72 -7
- package/dist/cjs/bonus-elevate-powerups-history.cjs.js +2 -2
- package/dist/cjs/bonus-elevate-powerups-history_16.cjs.entry.js +15530 -0
- package/dist/cjs/{index-c9c2e922.js → index-c157d920.js} +14 -5
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +19 -0
- package/dist/collection/components/bonus-elevate-powerups-history/bonus-elevate-powerups-history.css +34 -0
- package/dist/collection/components/bonus-elevate-powerups-history/bonus-elevate-powerups-history.js +65 -5
- package/dist/collection/utils/utils.js +28 -0
- package/dist/esm/{bonus-elevate-powerups-history-e23bd6d0.js → bonus-elevate-powerups-history-f700a5a8.js} +70 -8
- package/dist/esm/bonus-elevate-powerups-history.js +3 -3
- package/dist/esm/bonus-elevate-powerups-history_16.entry.js +15512 -0
- package/dist/esm/{index-ee6f3831.js → index-4bb6fa75.js} +13 -6
- package/dist/esm/index.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/bonus-elevate-powerups-history/bonus-elevate-powerups-history.d.ts +5 -0
- package/dist/types/components.d.ts +2 -0
- package/dist/types/utils/utils.d.ts +1 -0
- package/package.json +1 -1
- package/dist/bonus-elevate-powerups-history/bonus-elevate-powerups-history-e23bd6d0.js +0 -9
- package/dist/bonus-elevate-powerups-history/bonus-elevate-powerups-history_2.entry.js +0 -1
- package/dist/bonus-elevate-powerups-history/index-ee6f3831.js +0 -2
- package/dist/cjs/bonus-elevate-powerups-history_2.cjs.entry.js +0 -210
- package/dist/esm/bonus-elevate-powerups-history_2.entry.js +0 -205
|
@@ -1,210 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const bonusElevatePowerupsHistory = require('./bonus-elevate-powerups-history-2494a599.js');
|
|
6
|
-
const index = require('./index-c9c2e922.js');
|
|
7
|
-
|
|
8
|
-
const DEFAULT_LANGUAGE = 'en';
|
|
9
|
-
const SUPPORTED_LANGUAGES = ['pt-br', 'en', 'es-mx', 'hu', 'hr'];
|
|
10
|
-
const TRANSLATIONS = {
|
|
11
|
-
"en": {
|
|
12
|
-
"firstPage": '|<',
|
|
13
|
-
"lastPage": '>|',
|
|
14
|
-
"prePage": '<',
|
|
15
|
-
"nextPage": '>',
|
|
16
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
17
|
-
},
|
|
18
|
-
"hu": {
|
|
19
|
-
"firstPage": 'First',
|
|
20
|
-
"lastPage": 'Last',
|
|
21
|
-
"prePage": '<',
|
|
22
|
-
"nextPage": '>',
|
|
23
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
24
|
-
},
|
|
25
|
-
"hr": {
|
|
26
|
-
"firstPage": 'First',
|
|
27
|
-
"lastPage": 'Last',
|
|
28
|
-
"prePage": '<',
|
|
29
|
-
"nextPage": '>',
|
|
30
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
31
|
-
},
|
|
32
|
-
"pt-br": {
|
|
33
|
-
"firstPage": 'First',
|
|
34
|
-
"lastPage": 'Last',
|
|
35
|
-
"prePage": '<',
|
|
36
|
-
"nextPage": '>',
|
|
37
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
38
|
-
},
|
|
39
|
-
"es-mx": {
|
|
40
|
-
"firstPage": 'First',
|
|
41
|
-
"lastPage": 'Last',
|
|
42
|
-
"prePage": '<',
|
|
43
|
-
"nextPage": '>',
|
|
44
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
const translate = (key, customLang, values) => {
|
|
48
|
-
const lang = customLang;
|
|
49
|
-
let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
|
|
50
|
-
if (values !== undefined) {
|
|
51
|
-
for (const [key, value] of Object.entries(values.values)) {
|
|
52
|
-
const regex = new RegExp(`{${key}}`, 'g');
|
|
53
|
-
translation = translation.replace(regex, value);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
return translation;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const bonusPaginationNavCss = ":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row;height:100%;align-content:center}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emw--color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emw--color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emw--color-primary, #f5f1f1);background-color:var(--emw--color-secondary, #8c8989);border-radius:0.3rem}";
|
|
60
|
-
const BonusPaginationNavStyle0 = bonusPaginationNavCss;
|
|
61
|
-
|
|
62
|
-
const BonusPaginationNav = class {
|
|
63
|
-
constructor(hostRef) {
|
|
64
|
-
index.registerInstance(this, hostRef);
|
|
65
|
-
this.reloadPageEmitter = index.createEvent(this, "reloadPageByType", 7);
|
|
66
|
-
this.total = 1;
|
|
67
|
-
this.limit = 10;
|
|
68
|
-
this.offset = 0;
|
|
69
|
-
this.tableId = 'default';
|
|
70
|
-
this.language = 'en';
|
|
71
|
-
this.translationUrl = '';
|
|
72
|
-
this.arrowsActive = true;
|
|
73
|
-
this.secondaryArrowsActive = true;
|
|
74
|
-
this.displayPageNumbers = true;
|
|
75
|
-
this.displayRangeOfTotal = undefined;
|
|
76
|
-
this.navItemAccount = 5;
|
|
77
|
-
this.endPageIndex = 0;
|
|
78
|
-
this.pagesArray = undefined;
|
|
79
|
-
this.currentPage = 1;
|
|
80
|
-
this.showAsEllipsisMid = !this.arrowsActive;
|
|
81
|
-
}
|
|
82
|
-
pageLimitChangedHandler(event) {
|
|
83
|
-
this.limit = event.detail.limit ? event.detail.limit : this.limit;
|
|
84
|
-
//reset offset = 0, this.currentPage = 1 when page limit changed
|
|
85
|
-
this.currentPage = 1;
|
|
86
|
-
this.offset = 0;
|
|
87
|
-
this.updatePageStatus();
|
|
88
|
-
if (event.type == 'pageLimitChanged') {
|
|
89
|
-
this.reloadPageEmitter.emit({ offset: 0, limit: this.limit, tableId: this.tableId });
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
goTo(step) {
|
|
93
|
-
if (step == '...' || step == 0 || parseInt(step.toString(), 10) > (this.endPageIndex + 1)) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
this.currentPage = step;
|
|
97
|
-
let offset = (this.currentPage - 1) * this.limit;
|
|
98
|
-
this.reloadPageEmitter.emit({ offset, limit: this.limit, tableId: this.tableId });
|
|
99
|
-
}
|
|
100
|
-
renderPageList() {
|
|
101
|
-
return index.h("ul", { class: 'PaginationArea' }, this.pagesArray.map((page) => {
|
|
102
|
-
return (index.h("li", { class: `PageItem ${this.currentPage == page ? 'Active' : ''}`, onClick: () => {
|
|
103
|
-
this.goTo(page);
|
|
104
|
-
} }, page));
|
|
105
|
-
}));
|
|
106
|
-
}
|
|
107
|
-
renderStylingWrapper() {
|
|
108
|
-
return index.h("general-styling-wrapper", { targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl });
|
|
109
|
-
}
|
|
110
|
-
/**
|
|
111
|
-
*
|
|
112
|
-
* @param maxNavItemsCount
|
|
113
|
-
* @param ellipsisMid
|
|
114
|
-
* @private
|
|
115
|
-
*/
|
|
116
|
-
generateNavItemsByType(maxNavItemsCount, ellipsisMid) {
|
|
117
|
-
if (this.endPageIndex < maxNavItemsCount) {
|
|
118
|
-
return Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
|
|
119
|
-
}
|
|
120
|
-
let pageArray = [];
|
|
121
|
-
/**
|
|
122
|
-
* Construct numbered navigation area based on current page position
|
|
123
|
-
* if ellipsisMid => 1, 2, 3 ... 8,9,10 / 1 ... 5,6,7,...10
|
|
124
|
-
* else => 1, 2, ... / ... 2, 3,4... / ... 9, 10
|
|
125
|
-
*/
|
|
126
|
-
let halfOfMaxPageCount = Math.floor(maxNavItemsCount / 2);
|
|
127
|
-
const firstPageNo = 1, lastPageNo = this.endPageIndex + 1;
|
|
128
|
-
if (ellipsisMid) {
|
|
129
|
-
//Assume navItemAccount = 7, and totalPage = 10, in this case, we got halfOfMaxPageCount = 3,
|
|
130
|
-
if (this.currentPage < halfOfMaxPageCount || this.currentPage > (lastPageNo - halfOfMaxPageCount + 1)) {
|
|
131
|
-
//current page: (1, 2, 9, 10)
|
|
132
|
-
//Nav show as ( 1, 2, 3, ..., 8, 9, 10)
|
|
133
|
-
pageArray = Array.from({ length: halfOfMaxPageCount }, (_, i) => i + 1);
|
|
134
|
-
pageArray.push('...');
|
|
135
|
-
pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount }, (_, i) => (this.endPageIndex - 1) + i));
|
|
136
|
-
}
|
|
137
|
-
else if (this.currentPage == halfOfMaxPageCount) {
|
|
138
|
-
//current page: 3 (=halfOfMaxPageCount)
|
|
139
|
-
//Nav show as ( 1, 2, 3, 4, ..., 9,10)
|
|
140
|
-
pageArray = Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => i + 1);
|
|
141
|
-
pageArray.push('...');
|
|
142
|
-
pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => (this.endPageIndex) + i));
|
|
143
|
-
}
|
|
144
|
-
else if (this.currentPage == (lastPageNo - halfOfMaxPageCount + 1)) {
|
|
145
|
-
//current page: 8, (the page index after this.total - halfOfMaxPageCount ) Nav show as ( 1, 2, ... ,7, 8,9,10)
|
|
146
|
-
pageArray = Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => i + 1);
|
|
147
|
-
pageArray.push('...');
|
|
148
|
-
pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => (this.endPageIndex - 2) + i));
|
|
149
|
-
}
|
|
150
|
-
else {
|
|
151
|
-
//current page: > 3 and < 7, let's say is 5 Nav show as ( 1, ..., 4, 5, 6, ... ,10)
|
|
152
|
-
pageArray = [firstPageNo, '...'];
|
|
153
|
-
pageArray = pageArray.concat([this.currentPage - 1], [this.currentPage], [this.currentPage + 1]);
|
|
154
|
-
pageArray = pageArray.concat(['...', lastPageNo]);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
else {
|
|
158
|
-
if (this.currentPage <= (maxNavItemsCount - halfOfMaxPageCount)) { // when current page is in first half of nav
|
|
159
|
-
pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => i + 1);
|
|
160
|
-
pageArray.push('...');
|
|
161
|
-
}
|
|
162
|
-
else if (this.currentPage > (lastPageNo - (maxNavItemsCount - halfOfMaxPageCount))) { // when current page is in last half of nav
|
|
163
|
-
pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => lastPageNo - (maxNavItemsCount - 2) + i);
|
|
164
|
-
pageArray.unshift('...');
|
|
165
|
-
}
|
|
166
|
-
else {
|
|
167
|
-
pageArray = Array.from({ length: (maxNavItemsCount - 2) }, (_, i) => this.currentPage + i - halfOfMaxPageCount + 1);
|
|
168
|
-
pageArray.push('...');
|
|
169
|
-
pageArray.unshift('...');
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
return pageArray;
|
|
173
|
-
}
|
|
174
|
-
updatePageStatus() {
|
|
175
|
-
this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
|
|
176
|
-
this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
|
|
177
|
-
this.pagesArray = this.generateNavItemsByType(this.navItemAccount, this.showAsEllipsisMid);
|
|
178
|
-
}
|
|
179
|
-
componentWillRender() {
|
|
180
|
-
this.currentPage = Math.floor(this.offset / this.limit) + 1;
|
|
181
|
-
this.updatePageStatus();
|
|
182
|
-
}
|
|
183
|
-
render() {
|
|
184
|
-
const startOffset = (this.currentPage - 1) * this.limit + 1;
|
|
185
|
-
const endOffset = this.currentPage * this.limit > this.total ? this.total : this.currentPage * this.limit;
|
|
186
|
-
return index.h("div", { key: '77610598f3ce40796b8d486fd27725fc68b61878', class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && index.h("span", { key: '879bd2f268a18ea3c9cb2bb706d23c8db0634592', class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
|
|
187
|
-
values: {
|
|
188
|
-
start: startOffset,
|
|
189
|
-
end: endOffset,
|
|
190
|
-
total: this.total
|
|
191
|
-
}
|
|
192
|
-
})), index.h("div", { key: '590af1c2fcb70d782b318c505deb507a8376e13b', class: 'PageNavigation' }, this.arrowsActive &&
|
|
193
|
-
index.h("div", { key: '2d4746e889a43d6199ad7f305676d79bdbaa4f04', class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
|
|
194
|
-
this.goTo(1);
|
|
195
|
-
} }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
|
|
196
|
-
index.h("span", { key: '89b588abdf7b77e3cdc00f44bbad27c432146f97', class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
|
|
197
|
-
this.goTo(this.currentPage - 1);
|
|
198
|
-
} }, translate('prePage', this.language)), this.displayPageNumbers && this.renderPageList(), this.secondaryArrowsActive &&
|
|
199
|
-
index.h("span", { key: '097710df72de15cd1b0c03dfb2ac7870c99e12c0', class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
|
|
200
|
-
this.goTo(this.currentPage + 1);
|
|
201
|
-
} }, translate('nextPage', this.language)), this.arrowsActive &&
|
|
202
|
-
index.h("div", { key: 'a61296f3e627bc012545618c0fda239a1356da1f', class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
|
|
203
|
-
this.goTo(this.endPageIndex + 1);
|
|
204
|
-
} }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
|
|
205
|
-
}
|
|
206
|
-
};
|
|
207
|
-
BonusPaginationNav.style = BonusPaginationNavStyle0;
|
|
208
|
-
|
|
209
|
-
exports.bonus_elevate_powerups_history = bonusElevatePowerupsHistory.BonusElevatePowerupsHistory;
|
|
210
|
-
exports.bonus_pagination_nav = BonusPaginationNav;
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
export { B as bonus_elevate_powerups_history } from './bonus-elevate-powerups-history-e23bd6d0.js';
|
|
2
|
-
import { r as registerInstance, c as createEvent, h } from './index-ee6f3831.js';
|
|
3
|
-
|
|
4
|
-
const DEFAULT_LANGUAGE = 'en';
|
|
5
|
-
const SUPPORTED_LANGUAGES = ['pt-br', 'en', 'es-mx', 'hu', 'hr'];
|
|
6
|
-
const TRANSLATIONS = {
|
|
7
|
-
"en": {
|
|
8
|
-
"firstPage": '|<',
|
|
9
|
-
"lastPage": '>|',
|
|
10
|
-
"prePage": '<',
|
|
11
|
-
"nextPage": '>',
|
|
12
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
13
|
-
},
|
|
14
|
-
"hu": {
|
|
15
|
-
"firstPage": 'First',
|
|
16
|
-
"lastPage": 'Last',
|
|
17
|
-
"prePage": '<',
|
|
18
|
-
"nextPage": '>',
|
|
19
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
20
|
-
},
|
|
21
|
-
"hr": {
|
|
22
|
-
"firstPage": 'First',
|
|
23
|
-
"lastPage": 'Last',
|
|
24
|
-
"prePage": '<',
|
|
25
|
-
"nextPage": '>',
|
|
26
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
27
|
-
},
|
|
28
|
-
"pt-br": {
|
|
29
|
-
"firstPage": 'First',
|
|
30
|
-
"lastPage": 'Last',
|
|
31
|
-
"prePage": '<',
|
|
32
|
-
"nextPage": '>',
|
|
33
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
34
|
-
},
|
|
35
|
-
"es-mx": {
|
|
36
|
-
"firstPage": 'First',
|
|
37
|
-
"lastPage": 'Last',
|
|
38
|
-
"prePage": '<',
|
|
39
|
-
"nextPage": '>',
|
|
40
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
const translate = (key, customLang, values) => {
|
|
44
|
-
const lang = customLang;
|
|
45
|
-
let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
|
|
46
|
-
if (values !== undefined) {
|
|
47
|
-
for (const [key, value] of Object.entries(values.values)) {
|
|
48
|
-
const regex = new RegExp(`{${key}}`, 'g');
|
|
49
|
-
translation = translation.replace(regex, value);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
return translation;
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
const bonusPaginationNavCss = ":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row;height:100%;align-content:center}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emw--color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emw--color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emw--color-primary, #f5f1f1);background-color:var(--emw--color-secondary, #8c8989);border-radius:0.3rem}";
|
|
56
|
-
const BonusPaginationNavStyle0 = bonusPaginationNavCss;
|
|
57
|
-
|
|
58
|
-
const BonusPaginationNav = class {
|
|
59
|
-
constructor(hostRef) {
|
|
60
|
-
registerInstance(this, hostRef);
|
|
61
|
-
this.reloadPageEmitter = createEvent(this, "reloadPageByType", 7);
|
|
62
|
-
this.total = 1;
|
|
63
|
-
this.limit = 10;
|
|
64
|
-
this.offset = 0;
|
|
65
|
-
this.tableId = 'default';
|
|
66
|
-
this.language = 'en';
|
|
67
|
-
this.translationUrl = '';
|
|
68
|
-
this.arrowsActive = true;
|
|
69
|
-
this.secondaryArrowsActive = true;
|
|
70
|
-
this.displayPageNumbers = true;
|
|
71
|
-
this.displayRangeOfTotal = undefined;
|
|
72
|
-
this.navItemAccount = 5;
|
|
73
|
-
this.endPageIndex = 0;
|
|
74
|
-
this.pagesArray = undefined;
|
|
75
|
-
this.currentPage = 1;
|
|
76
|
-
this.showAsEllipsisMid = !this.arrowsActive;
|
|
77
|
-
}
|
|
78
|
-
pageLimitChangedHandler(event) {
|
|
79
|
-
this.limit = event.detail.limit ? event.detail.limit : this.limit;
|
|
80
|
-
//reset offset = 0, this.currentPage = 1 when page limit changed
|
|
81
|
-
this.currentPage = 1;
|
|
82
|
-
this.offset = 0;
|
|
83
|
-
this.updatePageStatus();
|
|
84
|
-
if (event.type == 'pageLimitChanged') {
|
|
85
|
-
this.reloadPageEmitter.emit({ offset: 0, limit: this.limit, tableId: this.tableId });
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
goTo(step) {
|
|
89
|
-
if (step == '...' || step == 0 || parseInt(step.toString(), 10) > (this.endPageIndex + 1)) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
this.currentPage = step;
|
|
93
|
-
let offset = (this.currentPage - 1) * this.limit;
|
|
94
|
-
this.reloadPageEmitter.emit({ offset, limit: this.limit, tableId: this.tableId });
|
|
95
|
-
}
|
|
96
|
-
renderPageList() {
|
|
97
|
-
return h("ul", { class: 'PaginationArea' }, this.pagesArray.map((page) => {
|
|
98
|
-
return (h("li", { class: `PageItem ${this.currentPage == page ? 'Active' : ''}`, onClick: () => {
|
|
99
|
-
this.goTo(page);
|
|
100
|
-
} }, page));
|
|
101
|
-
}));
|
|
102
|
-
}
|
|
103
|
-
renderStylingWrapper() {
|
|
104
|
-
return h("general-styling-wrapper", { targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl });
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
*
|
|
108
|
-
* @param maxNavItemsCount
|
|
109
|
-
* @param ellipsisMid
|
|
110
|
-
* @private
|
|
111
|
-
*/
|
|
112
|
-
generateNavItemsByType(maxNavItemsCount, ellipsisMid) {
|
|
113
|
-
if (this.endPageIndex < maxNavItemsCount) {
|
|
114
|
-
return Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
|
|
115
|
-
}
|
|
116
|
-
let pageArray = [];
|
|
117
|
-
/**
|
|
118
|
-
* Construct numbered navigation area based on current page position
|
|
119
|
-
* if ellipsisMid => 1, 2, 3 ... 8,9,10 / 1 ... 5,6,7,...10
|
|
120
|
-
* else => 1, 2, ... / ... 2, 3,4... / ... 9, 10
|
|
121
|
-
*/
|
|
122
|
-
let halfOfMaxPageCount = Math.floor(maxNavItemsCount / 2);
|
|
123
|
-
const firstPageNo = 1, lastPageNo = this.endPageIndex + 1;
|
|
124
|
-
if (ellipsisMid) {
|
|
125
|
-
//Assume navItemAccount = 7, and totalPage = 10, in this case, we got halfOfMaxPageCount = 3,
|
|
126
|
-
if (this.currentPage < halfOfMaxPageCount || this.currentPage > (lastPageNo - halfOfMaxPageCount + 1)) {
|
|
127
|
-
//current page: (1, 2, 9, 10)
|
|
128
|
-
//Nav show as ( 1, 2, 3, ..., 8, 9, 10)
|
|
129
|
-
pageArray = Array.from({ length: halfOfMaxPageCount }, (_, i) => i + 1);
|
|
130
|
-
pageArray.push('...');
|
|
131
|
-
pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount }, (_, i) => (this.endPageIndex - 1) + i));
|
|
132
|
-
}
|
|
133
|
-
else if (this.currentPage == halfOfMaxPageCount) {
|
|
134
|
-
//current page: 3 (=halfOfMaxPageCount)
|
|
135
|
-
//Nav show as ( 1, 2, 3, 4, ..., 9,10)
|
|
136
|
-
pageArray = Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => i + 1);
|
|
137
|
-
pageArray.push('...');
|
|
138
|
-
pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => (this.endPageIndex) + i));
|
|
139
|
-
}
|
|
140
|
-
else if (this.currentPage == (lastPageNo - halfOfMaxPageCount + 1)) {
|
|
141
|
-
//current page: 8, (the page index after this.total - halfOfMaxPageCount ) Nav show as ( 1, 2, ... ,7, 8,9,10)
|
|
142
|
-
pageArray = Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => i + 1);
|
|
143
|
-
pageArray.push('...');
|
|
144
|
-
pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => (this.endPageIndex - 2) + i));
|
|
145
|
-
}
|
|
146
|
-
else {
|
|
147
|
-
//current page: > 3 and < 7, let's say is 5 Nav show as ( 1, ..., 4, 5, 6, ... ,10)
|
|
148
|
-
pageArray = [firstPageNo, '...'];
|
|
149
|
-
pageArray = pageArray.concat([this.currentPage - 1], [this.currentPage], [this.currentPage + 1]);
|
|
150
|
-
pageArray = pageArray.concat(['...', lastPageNo]);
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
else {
|
|
154
|
-
if (this.currentPage <= (maxNavItemsCount - halfOfMaxPageCount)) { // when current page is in first half of nav
|
|
155
|
-
pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => i + 1);
|
|
156
|
-
pageArray.push('...');
|
|
157
|
-
}
|
|
158
|
-
else if (this.currentPage > (lastPageNo - (maxNavItemsCount - halfOfMaxPageCount))) { // when current page is in last half of nav
|
|
159
|
-
pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => lastPageNo - (maxNavItemsCount - 2) + i);
|
|
160
|
-
pageArray.unshift('...');
|
|
161
|
-
}
|
|
162
|
-
else {
|
|
163
|
-
pageArray = Array.from({ length: (maxNavItemsCount - 2) }, (_, i) => this.currentPage + i - halfOfMaxPageCount + 1);
|
|
164
|
-
pageArray.push('...');
|
|
165
|
-
pageArray.unshift('...');
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
return pageArray;
|
|
169
|
-
}
|
|
170
|
-
updatePageStatus() {
|
|
171
|
-
this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
|
|
172
|
-
this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
|
|
173
|
-
this.pagesArray = this.generateNavItemsByType(this.navItemAccount, this.showAsEllipsisMid);
|
|
174
|
-
}
|
|
175
|
-
componentWillRender() {
|
|
176
|
-
this.currentPage = Math.floor(this.offset / this.limit) + 1;
|
|
177
|
-
this.updatePageStatus();
|
|
178
|
-
}
|
|
179
|
-
render() {
|
|
180
|
-
const startOffset = (this.currentPage - 1) * this.limit + 1;
|
|
181
|
-
const endOffset = this.currentPage * this.limit > this.total ? this.total : this.currentPage * this.limit;
|
|
182
|
-
return h("div", { key: '77610598f3ce40796b8d486fd27725fc68b61878', class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && h("span", { key: '879bd2f268a18ea3c9cb2bb706d23c8db0634592', class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
|
|
183
|
-
values: {
|
|
184
|
-
start: startOffset,
|
|
185
|
-
end: endOffset,
|
|
186
|
-
total: this.total
|
|
187
|
-
}
|
|
188
|
-
})), h("div", { key: '590af1c2fcb70d782b318c505deb507a8376e13b', class: 'PageNavigation' }, this.arrowsActive &&
|
|
189
|
-
h("div", { key: '2d4746e889a43d6199ad7f305676d79bdbaa4f04', class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
|
|
190
|
-
this.goTo(1);
|
|
191
|
-
} }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
|
|
192
|
-
h("span", { key: '89b588abdf7b77e3cdc00f44bbad27c432146f97', class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
|
|
193
|
-
this.goTo(this.currentPage - 1);
|
|
194
|
-
} }, translate('prePage', this.language)), this.displayPageNumbers && this.renderPageList(), this.secondaryArrowsActive &&
|
|
195
|
-
h("span", { key: '097710df72de15cd1b0c03dfb2ac7870c99e12c0', class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
|
|
196
|
-
this.goTo(this.currentPage + 1);
|
|
197
|
-
} }, translate('nextPage', this.language)), this.arrowsActive &&
|
|
198
|
-
h("div", { key: 'a61296f3e627bc012545618c0fda239a1356da1f', class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
|
|
199
|
-
this.goTo(this.endPageIndex + 1);
|
|
200
|
-
} }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
|
|
201
|
-
}
|
|
202
|
-
};
|
|
203
|
-
BonusPaginationNav.style = BonusPaginationNavStyle0;
|
|
204
|
-
|
|
205
|
-
export { BonusPaginationNav as bonus_pagination_nav };
|