| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286 | 1×
1×
1×
1×
396×
396×
396×
396×
396×
396×
1×
18995×
1×
395×
395×
395×
2×
2×
395×
395×
395×
395×
395×
395×
395×
1×
24×
24×
8×
1×
788×
786×
786×
786×
786×
786×
786×
7246×
7226×
20×
7246×
7246×
7246×
786×
786×
786×
786×
6288×
6288×
6272×
1×
760×
1×
6×
1×
43×
1×
1×
760×
760×
9×
760×
20×
2×
760×
1×
54×
1×
855×
294×
561×
561×
568×
568×
561×
1×
72×
72×
4×
2×
2×
2×
2×
2×
2×
2×
4×
4×
68×
68×
68×
68×
68×
68×
68×
68×
4×
4×
4×
4×
4×
64×
64×
1×
139×
11×
11×
1×
134×
47×
47×
134×
134×
1×
395×
395×
395×
395×
395×
395×
395×
1×
44×
4×
4×
4×
1×
396×
396×
396×
396×
396×
1×
1×
788×
1×
1×
784×
419×
365×
365×
365×
1×
784×
784×
784×
1×
395×
1×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../pager/pager", "../../pager/pager-dropdown", "../../pager/external-message", "../base/util", "../base/constant", "../base/string-literals"], function (require, exports, ej2_base_1, ej2_base_2, pager_1, pager_dropdown_1, external_message_1, util_1, events, literals) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Page = (function () {
function Page(parent, pageSettings) {
this.isInitialRender = true;
this.isCancel = false;
pager_1.Pager.Inject(external_message_1.ExternalMessage, pager_dropdown_1.PagerDropDown);
this.parent = parent;
this.pageSettings = pageSettings;
this.addEventListener();
}
Page.prototype.getModuleName = function () {
return 'pager';
};
Page.prototype.render = function () {
var gObj = this.parent;
this.pagerDestroy();
if (!ej2_base_2.isNullOrUndefined(this.parent.pagerTemplate)) {
this.pageSettings.template = this.parent.pagerTemplate;
this.parent.pageTemplateChange = true;
}
this.element = this.parent.createElement('div', { className: 'e-gridpager' });
var pagerObj = util_1.extend({}, ej2_base_1.extend({}, util_1.getActualProperties(this.pageSettings)), {
click: this.clickHandler.bind(this),
dropDownChanged: this.onSelect.bind(this),
enableRtl: gObj.enableRtl, locale: gObj.locale,
created: this.addAriaAttr.bind(this)
}, ['parentObj', 'propName']);
pagerObj.cssClass = this.parent.cssClass ? this.parent.cssClass : '';
this.pagerObj = new pager_1.Pager(pagerObj, undefined, this.parent);
this.pagerObj.hasParent = true;
this.pagerObj.on(events.pagerRefresh, this.renderReactPagerTemplate, this);
this.pagerObj.allowServerDataBinding = false;
};
Page.prototype.onSelect = function (e) {
this.pageSettings.pageSize = e.pageSize;
if (!this.isInitialLoad) {
this.pageSettings.currentPage = 1;
}
};
Page.prototype.addAriaAttr = function () {
if (!(this.pageSettings.template)) {
var numericContainerNew = this.parent.createElement('div', { className: 'e-numericcontainer' });
var pagerContainer = this.element.querySelector('.e-pagercontainer');
var frag = document.createDocumentFragment();
var numericContainer = this.element.querySelector('.e-numericcontainer');
var links = numericContainer.querySelectorAll('a');
for (var i = 0; i < links.length; i++) {
if (this.parent.getContentTable()) {
links[parseInt(i.toString(), 10)].setAttribute('aria-owns', this.parent.getContentTable().id + ' ' + (i + 1));
}
else {
links[parseInt(i.toString(), 10)].setAttribute('aria-owns', this.parent.element.getAttribute('id') + '_content_table' + ' ' + (i + 1));
}
var numericContainerDiv = this.parent.createElement('div');
numericContainerDiv.appendChild(links[parseInt(i.toString(), 10)]);
frag.appendChild(numericContainerDiv);
}
numericContainerNew.appendChild(frag);
pagerContainer.replaceChild(numericContainerNew, numericContainer);
var classList = ['.e-mfirst', '.e-mprev', '.e-first', '.e-prev', '.e-next', '.e-last', '.e-mnext', '.e-mlast'];
for (var j = 0; j < classList.length; j++) {
var element = this.element.querySelector(classList[parseInt(j.toString(), 10)]);
if (this.parent.getContentTable()) {
element.setAttribute('aria-owns', this.parent.getContentTable().id + classList[parseInt(j.toString(), 10)].replace('.e-', ' '));
}
}
}
};
Page.prototype.dataReady = function (e) {
this.updateModel(e);
};
Page.prototype.refresh = function () {
this.pagerObj.refresh();
};
Page.prototype.goToPage = function (pageNo) {
this.pagerObj.goToPage(pageNo);
};
Page.prototype.setPageSize = function (pageSize) {
this.pagerObj.setPageSize(pageSize);
};
Page.prototype.updateModel = function (e) {
this.parent.pageSettings.totalRecordsCount = e.count;
if (this.pagerObj.isAllPage) {
this.parent.pageSettings.pageSize = this.parent.pageSettings.totalRecordsCount;
}
if ((e.action === 'add' && e.requestType === 'save') || (e.requestType === 'batchsave')) {
if (this.pagerObj.isAllPage && (e.count === this.pageSettings.pageSize)) {
this.pagerObj.setProperties({ pageSize: e.count }, true);
}
}
this.parent.dataBind();
};
Page.prototype.onActionComplete = function (e) {
this.parent.trigger(events.actionComplete, ej2_base_1.extend(e, {
currentPage: this.parent.pageSettings.currentPage, requestType: 'paging',
type: events.actionComplete
}));
};
Page.prototype.onPropertyChanged = function (e) {
if (e.module !== this.getModuleName()) {
return;
}
var newProp = e.properties;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
this.pagerObj["" + prop] = newProp["" + prop];
}
this.pagerObj.dataBind();
};
Page.prototype.clickHandler = function (e) {
var gObj = this.parent;
if (this.isForceCancel || util_1.isActionPrevent(gObj) && !gObj.prevPageMoving && !this.isCancel) {
if (!this.isForceCancel) {
Iif (!ej2_base_2.isNullOrUndefined(e.newProp) && !ej2_base_2.isNullOrUndefined(e.newProp.pageSize)) {
gObj.notify(events.preventBatch, { instance: this, handler: this.setPageSize, arg1: e.newProp.pageSize });
this.pagerObj.setProperties({ pageSize: e.oldProp.pageSize }, true);
this.parent.setProperties({ pageSettings: { pageSize: e.oldProp.pageSize } }, true);
this.pagerObj.setProperties({
currentPage: gObj.pageSettings.currentPage === this.pagerObj.currentPage ?
this.pagerObj.previousPageNo : gObj.pageSettings.currentPage
}, true);
}
else Eif (e.currentPage) {
gObj.notify(events.preventBatch, { instance: this, handler: this.goToPage, arg1: e.currentPage });
this.pagerObj.currentPage = gObj.pageSettings.currentPage === this.pagerObj.currentPage ?
this.pagerObj.previousPageNo : gObj.pageSettings.currentPage;
}
this.isForceCancel = true;
this.pagerObj.dataBind();
}
else {
this.isForceCancel = false;
}
e.cancel = true;
return;
}
gObj.pageSettings.pageSize = this.pagerObj.pageSize;
gObj.prevPageMoving = false;
var prevPage = this.pageSettings.currentPage;
var args = {
cancel: false, requestType: 'paging', previousPage: prevPage,
currentPage: e.currentPage, pageSize: gObj.pageSettings.pageSize, type: events.actionBegin
};
Eif (!this.isCancel) {
this.pageSettings.currentPage = e.currentPage;
this.parent.notify(events.modelChanged, args);
}
if (args.cancel) {
e.cancel = true;
this.parent.setProperties({ pageSettings: { currentPage: prevPage } }, true);
this.pagerObj.setProperties({ currentPage: prevPage }, true);
this.isCancel = true;
return;
}
this.isCancel = false;
this.parent.requestTypeAction = 'paging';
};
Page.prototype.keyPressHandler = function (e) {
if (e.action in keyActions) {
e.preventDefault();
this.element.querySelector(keyActions[e.action]).click();
}
};
Page.prototype.updateExternalMessage = function (message) {
if (!this.pagerObj.enableExternalMessage) {
this.pagerObj.enableExternalMessage = true;
this.pagerObj.dataBind();
}
this.pagerObj.externalMessage = message;
this.pagerObj.dataBind();
};
Page.prototype.appendToElement = function () {
this.isInitialLoad = true;
this.parent.element.appendChild(this.element);
this.parent.setGridPager(this.element);
this.pagerObj.isReact = this.parent.isReact;
this.pagerObj.isVue = this.parent.isVue;
this.pagerObj.appendTo(this.element);
this.isInitialLoad = false;
};
Page.prototype.enableAfterRender = function (e) {
if (e.module === this.getModuleName() && e.enable) {
this.render();
this.appendToElement();
Iif (this.isReactTemplate()) {
this.pagerObj.updateTotalPages();
this.created();
}
}
};
Page.prototype.addEventListener = function () {
this.handlers = {
load: this.render,
end: this.appendToElement,
ready: this.dataReady,
complete: this.onActionComplete,
updateLayout: this.enableAfterRender,
inboundChange: this.onPropertyChanged,
keyPress: this.keyPressHandler,
created: this.created
};
Iif (this.parent.isDestroyed) {
return;
}
Iif (this.parent.isReact || this.parent.isVue) {
this.parent.addEventListener(literals.create, this.handlers.created.bind(this));
}
this.evtHandlers = [{ event: events.initialLoad, handler: this.handlers.load },
{ event: events.initialEnd, handler: this.handlers.end },
{ event: events.dataReady, handler: this.handlers.ready },
{ event: events.pageComplete, handler: this.handlers.complete },
{ event: events.uiUpdate, handler: this.handlers.updateLayout },
{ event: events.inBoundModelChanged, handler: this.handlers.inboundChange },
{ event: events.keyPressed, handler: this.handlers.keyPress },
{ event: events.destroy, handler: this.destroy }];
util_1.addRemoveEventListener(this.parent, this.evtHandlers, true, this);
};
Page.prototype.created = function () {
if (this.isInitialRender && this.isReactTemplate()) {
this.isInitialRender = false;
this.renderReactPagerTemplate();
}
};
Page.prototype.isReactTemplate = function () {
return (this.parent.isReact || this.parent.isVue) && this.pagerObj.template && typeof (this.pagerObj.template) !== 'string';
};
Page.prototype.renderReactPagerTemplate = function () {
if (!this.isInitialRender && this.isReactTemplate()) {
var result = void 0;
this.parent.destroyTemplate(['pagerTemplate']);
this.element.classList.add('e-pagertemplate');
this.pagerObj.compile(this.pagerObj.template);
var page = this.parent.pageSettings;
var data = {
currentPage: page.currentPage, pageSize: page.pageSize, pageCount: page.pageCount,
totalRecordsCount: page.totalRecordsCount, totalPages: this.pagerObj.totalPages
};
var tempId = this.parent.id + '_pagertemplate';
if (this.parent.isReact) {
this.pagerObj.templateFn(data, this.parent, 'pagerTemplate', tempId, null, null, this.pagerObj.element);
this.parent.renderTemplates();
}
else {
result = this.pagerObj.templateFn(data, this.parent, 'pagerTemplate');
util_1.appendChildren(this.pagerObj.element, result);
}
}
};
Page.prototype.removeEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
Iif (this.parent.isReact || this.parent.isVue) {
this.parent.removeEventListener(literals.create, this.handlers.created);
}
this.parent.off(events.pagerRefresh, this.renderReactPagerTemplate);
util_1.addRemoveEventListener(this.parent, this.evtHandlers, false);
};
Page.prototype.destroy = function () {
this.removeEventListener();
Iif (this.isReactTemplate()) {
this.parent.destroyTemplate(['pagerTemplate']);
}
this.pagerObj.destroy();
};
Page.prototype.pagerDestroy = function () {
Iif (this.pagerObj && !this.pagerObj.isDestroyed) {
this.pagerObj.destroy();
ej2_base_2.remove(this.element);
}
};
return Page;
}());
exports.Page = Page;
var keyActions = {
pageUp: '.e-prev',
pageDown: '.e-next',
ctrlAltPageDown: '.e-last',
ctrlAltPageUp: '.e-first',
altPageUp: '.e-pp',
altPageDown: '.e-np'
};
});
|