all files / pager/ numeric-container.js

98.7% Statements 227/230
91.74% Branches 111/121
100% Functions 27/27
98.68% Lines 225/228
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 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395   491×   485× 485× 485× 485×   1217× 1217× 1217×   1217× 1217×   487× 487× 487× 487× 487× 487× 4515×         4515× 467× 467×   4515×   487× 487×   485× 485×   460× 460×   460×   1217× 1217× 1217× 1217× 11193× 2720×         485×     485× 485× 485× 485× 485× 485×   485×             485×             485×   485× 485×                 485× 485×   485× 485×                 485× 485×   485×             485×             485×   31× 31× 31× 12×   31× 31× 27× 27× 27×   31×       1217× 1217× 1217× 1217× 1217× 1217× 1217×   1217× 1217×   1217× 11193× 90× 90× 90× 90× 90× 90× 90× 90× 90× 90× 60× 60× 20×             40× 40×       30× 30×       90× 90× 229× 90×   85×   80× 10× 10×                 70× 10×   60× 30×     30×       11103×   11193× 2487× 2487× 2487× 2487× 2487× 1812×     675×       8706× 8706×   11193× 11193×   1217×       1217×       1217×       1217×       1217×       1217×       1217×       1217×       1217×         1217×         1217×     1217×         1217×   1217× 1217× 1217× 1217× 1217× 1217× 5758× 1217×   1217× 1217×     1217× 1217× 1217× 1217× 1217× 110× 110× 110× 110×     1107× 1107× 1107× 1107×     1217× 53×     1164×     1217× 1217× 1217× 1217× 80× 1123×     94×     1217× 1217× 1217× 1217× 1217× 1217× 730× 730× 730× 730×     487× 487× 487× 487×          
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var NumericContainer = (function () {
        function NumericContainer(pagerModule) {
            this.pagerModule = pagerModule;
        }
        NumericContainer.prototype.render = function () {
            this.pagerElement = this.pagerModule.element;
            this.renderNumericContainer();
            this.refreshNumericLinks();
            this.wireEvents();
        };
        NumericContainer.prototype.refresh = function () {
            this.pagerModule.updateTotalPages();
            Eif (this.links.length) {
                this.updateLinksHtml();
            }
            this.refreshAriaAttrLabel();
            this.updateStyles();
        };
        NumericContainer.prototype.refreshNumericLinks = function () {
            var link;
            var pagerObj = this.pagerModule;
            var div = pagerObj.element.querySelector('.e-numericcontainer');
            var frag = document.createDocumentFragment();
            div.innerHTML = '';
            for (var i = 1; i <= pagerObj.pageCount; i++) {
                link = ej2_base_3.createElement('a', {
                    className: 'e-link e-numericitem e-spacing e-pager-default',
                    attrs: { tabindex: '-1', 'aria-label': pagerObj.getLocalizedLabel('Page') + i + pagerObj.getLocalizedLabel('Of') +
                            pagerObj.totalPages + pagerObj.getLocalizedLabel('Pages'), href: '#' }
                });
                if (pagerObj.currentPage === i) {
                    ej2_base_3.classList(link, ['e-currentitem', 'e-active'], ['e-pager-default']);
                    link.setAttribute('aria-current', 'page');
                }
                frag.appendChild(link);
            }
            div.appendChild(frag);
            this.links = [].slice.call(div.childNodes);
        };
        NumericContainer.prototype.wireEvents = function () {
            ej2_base_2.EventHandler.add(this.pagerElement, 'click', this.clickHandler, this);
            ej2_base_2.EventHandler.add(this.pagerElement, 'auxclick', this.auxiliaryClickHandler, this);
        };
        NumericContainer.prototype.unwireEvents = function () {
            ej2_base_2.EventHandler.remove(this.pagerModule.element, 'click', this.clickHandler);
            ej2_base_2.EventHandler.remove(this.pagerModule.element, 'auxclick', this.auxiliaryClickHandler);
        };
        NumericContainer.prototype.destroy = function () {
            this.unwireEvents();
        };
        NumericContainer.prototype.refreshAriaAttrLabel = function () {
            var pagerObj = this.pagerModule;
            var numericContainer = pagerObj.element.querySelector('.e-numericcontainer');
            var links = numericContainer.querySelectorAll('a');
            for (var i = 0; i < links.length; i++) {
                if (links[parseInt(i.toString(), 10)].hasAttribute('aria-label') && links[parseInt(i.toString(), 10)].hasAttribute('index')) {
                    links[parseInt(i.toString(), 10)].setAttribute('aria-label', pagerObj.getLocalizedLabel('Page') + links[parseInt(i.toString(), 10)].getAttribute('index')
                        + pagerObj.getLocalizedLabel('Of') + pagerObj.totalPages + pagerObj.getLocalizedLabel('Pages'));
                }
            }
        };
        NumericContainer.prototype.renderNumericContainer = function () {
            this.element = ej2_base_3.createElement('div', {
                className: 'e-pagercontainer', attrs: { 'role': 'navigation' }
            });
            this.renderFirstNPrev(this.element);
            this.renderPrevPagerSet(this.element);
            this.element.appendChild(ej2_base_3.createElement('div', { className: 'e-numericcontainer' }));
            this.renderNextPagerSet(this.element);
            this.renderNextNLast(this.element);
            this.pagerModule.element.appendChild(this.element);
        };
        NumericContainer.prototype.renderFirstNPrev = function (pagerContainer) {
            this.first = ej2_base_3.createElement('div', {
                className: 'e-first e-icons e-icon-first',
                attrs: {
                    title: this.pagerModule.getLocalizedLabel('firstPageTooltip'),
                    tabindex: '-1', role: 'button'
                }
            });
            this.prev = ej2_base_3.createElement('div', {
                className: 'e-prev e-icons e-icon-prev',
                attrs: {
                    title: this.pagerModule.getLocalizedLabel('previousPageTooltip'),
                    tabindex: '-1', role: 'button'
                }
            });
            ej2_base_3.append([this.first, this.prev], pagerContainer);
        };
        NumericContainer.prototype.renderPrevPagerSet = function (pagerContainer) {
            var prevPager = ej2_base_3.createElement('div');
            this.PP = ej2_base_3.createElement('a', {
                className: 'e-link e-pp e-spacing', innerHTML: '...',
                attrs: {
                    title: this.pagerModule.getLocalizedLabel('previousPagerTooltip'),
                    'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip'),
                    tabindex: '-1',
                    href: '#'
                }
            });
            prevPager.appendChild(this.PP);
            pagerContainer.appendChild(prevPager);
        };
        NumericContainer.prototype.renderNextPagerSet = function (pagerContainer) {
            var nextPager = ej2_base_3.createElement('div');
            this.NP = ej2_base_3.createElement('a', {
                className: 'e-link e-np e-spacing',
                innerHTML: '...', attrs: {
                    title: this.pagerModule.getLocalizedLabel('nextPagerTooltip'),
                    'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip'),
                    tabindex: '-1',
                    href: '#'
                }
            });
            nextPager.appendChild(this.NP);
            pagerContainer.appendChild(nextPager);
        };
        NumericContainer.prototype.renderNextNLast = function (pagerContainer) {
            this.next = ej2_base_3.createElement('div', {
                className: 'e-next e-icons e-icon-next',
                attrs: {
                    title: this.pagerModule.getLocalizedLabel('nextPageTooltip'),
                    tabindex: '-1', role: 'button'
                }
            });
            this.last = ej2_base_3.createElement('div', {
                className: 'e-last e-icons e-icon-last',
                attrs: {
                    title: this.pagerModule.getLocalizedLabel('lastPageTooltip'),
                    tabindex: '-1', role: 'button'
                }
            });
            ej2_base_3.append([this.next, this.last], pagerContainer);
        };
        NumericContainer.prototype.clickHandler = function (e) {
            var pagerObj = this.pagerModule;
            this.target = e.target;
            if (this.target.classList.contains('e-numericitem')) {
                e.preventDefault();
            }
            pagerObj.previousPageNo = pagerObj.currentPage;
            if (!this.target.classList.contains('e-disable') && !ej2_base_1.isNullOrUndefined(this.target.getAttribute('index'))) {
                pagerObj.currentPage = parseInt(this.target.getAttribute('index'), 10);
                this.pagerModule.isInteracted = true;
                pagerObj.dataBind();
            }
            return false;
        };
        NumericContainer.prototype.auxiliaryClickHandler = function (e) {
            this.target = e.target;
            Eif (this.target.classList.contains('e-numericitem') && (e.button === 1)) {
                e.preventDefault();
            }
        };
        NumericContainer.prototype.updateLinksHtml = function () {
            var pagerObj = this.pagerModule;
            var currentPageSet;
            var isLastSet;
            var pageNo;
            var numItems = this.pagerElement.querySelectorAll('.e-numericitem:not(.e-hide):not([style*="display: none"]):not(.e-np):not(.e-pp)');
            pagerObj.currentPage = pagerObj.totalPages === 1 ? 1 : pagerObj.currentPage;
            if (pagerObj.currentPage > pagerObj.totalPages && pagerObj.totalPages) {
                pagerObj.currentPage = pagerObj.totalPages;
            }
            currentPageSet = parseInt((pagerObj.currentPage / pagerObj.pageCount).toString(), 10);
            if (pagerObj.currentPage % pagerObj.pageCount === 0 && currentPageSet > 0) {
                currentPageSet = currentPageSet - 1;
            }
            for (var i = 0; i < pagerObj.pageCount; i++) {
                if (pagerObj.isPagerResized) {
                    var focusedItem = this.pagerElement.querySelector('.e-focus');
                    var focusedorTarget = this.target ? this.target : focusedItem ? focusedItem : null;
                    var prevFocused = false;
                    var nextFocused = false;
                    var firstFocused = false;
                    var lastFocused = false;
                    var numItemFocused = false;
                    var npFocused = false;
                    var ppFocused = false;
                    if (focusedorTarget) {
                        var classList_1 = focusedorTarget.classList;
                        if (classList_1.contains('e-icons')) {
                            switch (true) {
                                case classList_1.contains('e-prev'):
                                    prevFocused = true;
                                    break;
                                case classList_1.contains('e-next'):
                                    nextFocused = true;
                                    break;
                                case classList_1.contains('e-first'):
                                    firstFocused = true;
                                    break;
                                case classList_1.contains('e-last'):
                                    lastFocused = true;
                                    break;
                            }
                        }
                        else Eif (classList_1.contains('e-numericitem')) {
                            switch (true) {
                                case classList_1.contains('e-np'):
                                    npFocused = true;
                                    break;
                                case classList_1.contains('e-pp'):
                                    ppFocused = true;
                                    break;
                                default:
                                    numItemFocused = classList_1.contains('e-numericitem');
                                    break;
                            }
                        }
                    }
                    isLastSet = lastFocused || (this.pagerModule.keyAction === 'End');
                    numItems = this.pagerElement.querySelectorAll('.e-numericitem:not(.e-hide):not([style*="display: none"]):not(.e-np):not(.e-pp)');
                    var isPageAvailable = Array.from(numItems).some(function (item) { return parseInt(item.getAttribute('index'), 10) === pagerObj.currentPage; });
                    if (firstFocused || this.pagerModule.keyAction === 'Home') {
                        pageNo = 1 + i;
                    }
                    else if (lastFocused || this.pagerModule.keyAction === 'End') {
                        pageNo = (currentPageSet * pagerObj.pageCount) + 1 + i;
                    }
                    else if (nextFocused || this.pagerModule.keyAction === 'ArrowRight' || prevFocused || this.pagerModule.keyAction === 'ArrowLeft') {
                        Eif (isPageAvailable) {
                            pageNo = parseInt(numItems[0].getAttribute('index'), 10) + i;
                        }
                        else if (prevFocused || this.pagerModule.keyAction === 'ArrowLeft') {
                            pageNo = parseInt(this.PP.getAttribute('index'), 10) + i;
                        }
                        else {
                            pageNo = pagerObj.currentPage + i;
                        }
                    }
                    else if (npFocused || ppFocused) {
                        pageNo = pagerObj.currentPage + i;
                    }
                    else if (numItemFocused) {
                        pageNo = (parseInt(numItems[0].getAttribute('index'), 10) + i);
                    }
                    else {
                        pageNo = (currentPageSet * pagerObj.pageCount) + 1 + i;
                    }
                }
                else {
                    pageNo = (currentPageSet * pagerObj.pageCount) + 1 + i;
                }
                if (pageNo <= pagerObj.totalPages) {
                    this.links[parseInt(i.toString(), 10)].classList.remove('e-hide');
                    this.links[parseInt(i.toString(), 10)].style.display = '';
                    this.links[parseInt(i.toString(), 10)].setAttribute('index', pageNo.toString());
                    this.links[parseInt(i.toString(), 10)].innerHTML = !pagerObj.customText ? pageNo.toString() : pagerObj.customText + pageNo;
                    if (pagerObj.currentPage !== pageNo) {
                        this.links[parseInt(i.toString(), 10)].classList.add('e-pager-default');
                    }
                    else {
                        this.links[parseInt(i.toString(), 10)].classList.remove('e-pager-default');
                    }
                }
                else {
                    this.links[parseInt(i.toString(), 10)].innerHTML = !pagerObj.customText ? pageNo.toString() : pagerObj.customText + pageNo;
                    this.links[parseInt(i.toString(), 10)].style.display = 'none';
                }
                ej2_base_3.classList(this.links[parseInt(i.toString(), 10)], [], ['e-currentitem', 'e-active']);
                this.links[parseInt(i.toString(), 10)].removeAttribute('aria-current');
            }
            ej2_base_3.attributes(this.first, {
                'index': '1',
                'title': this.pagerModule.getLocalizedLabel('firstPageTooltip')
            });
            ej2_base_3.attributes(this.pagerElement.querySelector('.e-mfirst'), {
                'index': '1',
                'title': this.pagerModule.getLocalizedLabel('firstPageTooltip')
            });
            ej2_base_3.attributes(this.last, {
                'index': pagerObj.totalPages.toString(),
                'title': this.pagerModule.getLocalizedLabel('lastPageTooltip')
            });
            ej2_base_3.attributes(this.pagerElement.querySelector('.e-mlast'), {
                'index': pagerObj.totalPages.toString(),
                'title': this.pagerModule.getLocalizedLabel('lastPageTooltip')
            });
            ej2_base_3.attributes(this.prev, {
                'index': (pagerObj.currentPage - 1).toString(),
                'title': this.pagerModule.getLocalizedLabel('previousPageTooltip')
            });
            ej2_base_3.attributes(this.pagerElement.querySelector('.e-mprev'), {
                'index': (pagerObj.currentPage - 1).toString(),
                'title': this.pagerModule.getLocalizedLabel('previousPageTooltip')
            });
            ej2_base_3.attributes(this.next, {
                'index': (pagerObj.currentPage + 1).toString(),
                'title': this.pagerModule.getLocalizedLabel('nextPageTooltip')
            });
            ej2_base_3.attributes(this.pagerElement.querySelector('.e-mnext'), {
                'index': (pagerObj.currentPage + 1).toString(),
                'title': this.pagerModule.getLocalizedLabel('nextPageTooltip')
            });
            var ppIndex = (this.pagerModule.isPagerResized && numItems.length)
                ? isLastSet
                    ? parseInt(numItems[0].getAttribute('index'), 10) - pagerObj.avgNumItems
                    : parseInt(numItems[0].getAttribute('index'), 10) - numItems.length
                : parseInt(this.links[0].getAttribute('index'), 10) - pagerObj.pageCount;
            ej2_base_3.attributes(this.PP, {
                'index': ((ppIndex < 1) ? '1' : ppIndex.toString()),
                'title': this.pagerModule.getLocalizedLabel('previousPagerTooltip'),
                'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip')
            });
            var NPIndex = (this.pagerModule.isPagerResized && numItems.length)
                ? parseInt(numItems[numItems.length - 1].getAttribute('index'), 10)
                : parseInt(this.links[this.links.length - 1].getAttribute('index'), 10);
            ej2_base_3.attributes(this.NP, {
                'index': (NPIndex + 1).toString(),
                'title': this.pagerModule.getLocalizedLabel('nextPagerTooltip'),
                'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip')
            });
            this.target = undefined;
        };
        NumericContainer.prototype.updateStyles = function () {
            var _this = this;
            this.updateFirstNPrevStyles();
            this.updatePrevPagerSetStyles();
            this.updateNextPagerSetStyles();
            this.updateNextNLastStyles();
            Eif (this.links.length) {
                var currentPageIndex = this.links.findIndex(function (link) { return link.getAttribute('index') === _this.pagerModule.currentPage.toString(); });
                var currentPage = (this.pagerModule.isPagerResized && currentPageIndex !== -1) ? currentPageIndex
                    : ((this.pagerModule.currentPage - 1) % this.pagerModule.pageCount);
                ej2_base_3.classList(this.links[parseInt(currentPage.toString(), 10)], ['e-currentitem', 'e-active'], []);
                this.links[parseInt(currentPage.toString(), 10)].setAttribute('aria-current', 'page');
            }
        };
        NumericContainer.prototype.updateFirstNPrevStyles = function () {
            var firstPage = ['e-firstpage', 'e-pager-default'];
            var firstPageDisabled = ['e-firstpagedisabled', 'e-disable'];
            var prevPage = ['e-prevpage', 'e-pager-default'];
            var prevPageDisabled = ['e-prevpagedisabled', 'e-disable'];
            if (this.pagerModule.totalPages > 0 && this.pagerModule.currentPage > 1) {
                ej2_base_3.classList(this.prev, prevPage, prevPageDisabled);
                ej2_base_3.classList(this.first, firstPage, firstPageDisabled);
                ej2_base_3.classList(this.pagerElement.querySelector('.e-mfirst'), firstPage, firstPageDisabled);
                ej2_base_3.classList(this.pagerElement.querySelector('.e-mprev'), prevPage, prevPageDisabled);
            }
            else {
                ej2_base_3.classList(this.prev, prevPageDisabled, prevPage);
                ej2_base_3.classList(this.first, firstPageDisabled, firstPage);
                ej2_base_3.classList(this.pagerElement.querySelector('.e-mprev'), prevPageDisabled, prevPage);
                ej2_base_3.classList(this.pagerElement.querySelector('.e-mfirst'), firstPageDisabled, firstPage);
            }
        };
        NumericContainer.prototype.updatePrevPagerSetStyles = function () {
            if (this.pagerModule.currentPage > this.pagerModule.pageCount || (this.pagerModule.isPagerResized
                && this.links.findIndex(function (link) { return parseInt(link.getAttribute('index'), 10) === 1; }))) {
                ej2_base_3.classList(this.PP, ['e-numericitem', 'e-pager-default'], ['e-nextprevitemdisabled', 'e-disable']);
            }
            else {
                ej2_base_3.classList(this.PP, ['e-nextprevitemdisabled', 'e-disable'], ['e-numericitem', 'e-pager-default']);
            }
        };
        NumericContainer.prototype.updateNextPagerSetStyles = function () {
            var pagerObj = this.pagerModule;
            var firstPage = this.links[0].innerHTML.replace(pagerObj.customText, '');
            var numItems = this.pagerElement.querySelectorAll('.e-numericitem:not(.e-hide):not([style*="display: none"]):not(.e-np):not(.e-pp)');
            if (!firstPage.length || !this.links.length || (parseInt(firstPage, 10) + pagerObj.pageCount > pagerObj.totalPages)
                || (pagerObj.isPagerResized && Array.from(numItems).some(function (item) { return parseInt(item.getAttribute('index'), 10) === pagerObj.totalPages; }))) {
                ej2_base_3.classList(this.NP, ['e-nextprevitemdisabled', 'e-disable'], ['e-numericitem', 'e-pager-default']);
            }
            else {
                ej2_base_3.classList(this.NP, ['e-numericitem', 'e-pager-default'], ['e-nextprevitemdisabled', 'e-disable']);
            }
        };
        NumericContainer.prototype.updateNextNLastStyles = function () {
            var lastPage = ['e-lastpage', 'e-pager-default'];
            var lastPageDisabled = ['e-lastpagedisabled', 'e-disable'];
            var nextPage = ['e-nextpage', 'e-pager-default'];
            var nextPageDisabled = ['e-nextpagedisabled', 'e-disable'];
            var pagerObj = this.pagerModule;
            if (pagerObj.currentPage === pagerObj.totalPages || pagerObj.totalRecordsCount === 0) {
                ej2_base_3.classList(this.last, lastPageDisabled, lastPage);
                ej2_base_3.classList(this.next, nextPageDisabled, nextPage);
                ej2_base_3.classList(this.pagerElement.querySelector('.e-mlast'), lastPageDisabled, lastPage);
                ej2_base_3.classList(this.pagerElement.querySelector('.e-mnext'), nextPageDisabled, nextPage);
            }
            else {
                ej2_base_3.classList(this.last, lastPage, lastPageDisabled);
                ej2_base_3.classList(this.next, nextPage, nextPageDisabled);
                ej2_base_3.classList(this.pagerElement.querySelector('.e-mlast'), lastPage, lastPageDisabled);
                ej2_base_3.classList(this.pagerElement.querySelector('.e-mnext'), nextPage, nextPageDisabled);
            }
        };
        return NumericContainer;
    }());
    exports.NumericContainer = NumericContainer;
});