all files / pivotview/actions/ virtualscroll.js

76.08% Statements 264/347
60.39% Branches 154/255
84.85% Functions 28/33
76.08% Lines 264/347
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 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527   273× 273× 273× 273× 273× 273×   1781×   273×   272×   301× 301× 300× 300× 300× 300× 300× 300×     300× 300× 300× 300× 300×             300× 300× 300×     300× 300× 300× 300× 300× 300× 300×   300× 2933×   300×     300×                                         900× 900× 900× 900× 96× 96×     96× 96× 96× 76×   20× 20× 20×         600× 600× 600×                                               73× 73× 73× 73× 73×     73× 73× 71× 37× 37×   37× 37× 37× 37×     32×                               34× 34×   34×   34× 34× 34× 34×   27×                                   12× 12× 12×       12× 12× 12×       12× 12×     600× 600×         600× 600× 71×   71× 71×                           71×     645× 645× 645× 645× 645× 645× 645× 645× 303×   645× 25× 25× 25×             25× 18×                                                                                                             900× 13985× 7634× 26×     7608×       6351×       6351×         300× 300× 300×   300× 60× 57× 57×                 57× 52×                                                                             92× 44×   48×   92×        
define(["require", "exports", "@syncfusion/ej2-base", "../../common/base/constant", "../../common/base/css-constant", "../../base/util", "../../common/base/constant"], function (require, exports, ej2_base_1, constant_1, cls, util_1, events) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var VirtualScroll = (function () {
        function VirtualScroll(parent) {
            this.previousValues = { top: 0, left: 0 };
            this.frozenPreviousValues = { top: 0, left: 0 };
            this.eventType = '';
            this.isFireFox = ej2_base_1.Browser.userAgent.toLowerCase().indexOf('firefox') > -1;
            this.parent = parent;
            this.addInternalEvents();
        }
        VirtualScroll.prototype.getModuleName = function () {
            return 'virtualscroll';
        };
        VirtualScroll.prototype.addInternalEvents = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            this.parent.on(constant_1.contentReady, this.wireEvents, this);
        };
        VirtualScroll.prototype.wireEvents = function () {
            this.engineModule = this.parent.dataType === 'pivot' ? this.parent.engineModule : this.parent.olapEngineModule;
            if (this.parent.displayOption.view !== 'Chart') {
                var mCont = this.parent.element.querySelector('.' + cls.CONTENT_VIRTUALTABLE_DIV);
                var gridContent = this.parent.element.querySelector('.' + cls.GRID_CONTENT);
                var mHdr = this.parent.element.querySelector('.' + cls.MOVABLEHEADER_DIV);
                var mScrollBar = gridContent.querySelector('.' + cls.VIRTUALTABLE_DIV);
                ej2_base_1.EventHandler.clearEvents(mCont);
                Iif (this.isFireFox) {
                    ej2_base_1.EventHandler.clearEvents(mHdr);
                }
                Eif (this.engineModule) {
                    var ele = this.parent.isAdaptive ? mCont : gridContent.querySelector('.' + cls.VIRTUALTABLE_DIV);
                    ej2_base_1.EventHandler.add(ele, 'scroll touchmove pointermove', this.onHorizondalScroll(mHdr, mCont), this);
                    ej2_base_1.EventHandler.add(mCont.parentElement, 'scroll wheel touchmove pointermove keyup keydown', this.onVerticalScroll(mCont.parentElement, mCont), this);
                    Iif (this.isFireFox) {
                        ej2_base_1.EventHandler.add(ele, 'mouseup touchend scroll', this.common(mHdr, mCont, mCont), this);
                        if (!this.parent.isAdaptive) {
                            ej2_base_1.EventHandler.add(mCont.parentElement, 'mouseup touchend scroll', this.common(mHdr, mCont.parentElement, mCont), this);
                        }
                    }
                    else {
                        ej2_base_1.EventHandler.add(ele, 'mouseup touchend', this.common(mHdr, mCont, mCont), this);
                        Eif (!this.parent.isAdaptive) {
                            ej2_base_1.EventHandler.add(mCont.parentElement, 'mouseup touchend', this.common(mHdr, mCont.parentElement, mCont), this);
                        }
                    }
                    ej2_base_1.EventHandler.add(mScrollBar, 'scroll', this.onCustomScrollbarScroll(mCont, mHdr), this);
                    ej2_base_1.EventHandler.add(mCont, 'scroll', this.onCustomScrollbarScroll(mScrollBar, mHdr), this);
                    ej2_base_1.EventHandler.add(mHdr, 'scroll', this.onCustomScrollbarScroll(mScrollBar, mCont), this);
                    ej2_base_1.EventHandler.add(mHdr, 'touchstart pointerdown', this.setPageXY(), this);
                    ej2_base_1.EventHandler.add(mHdr, 'touchmove pointermove', this.onTouchScroll(mHdr, mCont), this);
                    ej2_base_1.EventHandler.add(mCont, 'touchstart pointerdown', this.setPageXY(), this);
                    ej2_base_1.EventHandler.add(mCont, 'touchmove pointermove', this.onTouchScroll(mHdr, mCont), this);
                }
                this.parent.grid.on('check-scroll-reset', function (args) {
                    args.cancel = true;
                });
                this.parent.grid.on('prevent-frozen-scroll-refresh', function (args) {
                    args.cancel = true;
                });
                this.parent.grid.isPreventScrollEvent = true;
            }
        };
        VirtualScroll.prototype.onWheelScroll = function (mCont) {
            var _this = this;
            var element = mCont;
            return function (e) {
                var top = element.scrollTop + (e.deltaMode === 1 ? e.deltaY * 30 : e.deltaY);
                if (_this.frozenPreviousValues.top === top) {
                    return;
                }
                e.preventDefault();
                _this.frozenPreviousValues.top = top;
                _this.eventType = e.type;
            };
        };
        VirtualScroll.prototype.getPointXY = function (e) {
            var pageXY = { x: 0, y: 0 };
            Eif (!(e.touches && e.touches.length)) {
                pageXY.x = e.pageX;
                pageXY.y = e.pageY;
            }
            else {
                pageXY.x = e.touches[0].pageX;
                pageXY.y = e.touches[0].pageY;
            }
            return pageXY;
        };
        VirtualScroll.prototype.onCustomScrollbarScroll = function (mCont, mHdr) {
            var _this = this;
            var content = mCont;
            var header = mHdr;
            return function (e) {
                var eContent = _this.parent.element.querySelector('.' + cls.CONTENT_CLASS);
                Iif (eContent.querySelector('tbody') === null) {
                    return;
                }
                var target = e.target;
                var left = target.scrollLeft;
                if (_this.previousValues.left === left || (_this.isFireFox && target.classList.contains(cls.MOVABLEHEADER_DIV))) {
                    return;
                }
                content.scrollLeft = left;
                header.scrollLeft = left;
                Iif (_this.parent.isDestroyed) {
                    return;
                }
            };
        };
        VirtualScroll.prototype.onTouchScroll = function (mHdr, mCont) {
            var _this = this;
            var element = mCont;
            return function (e) {
                if (e.pointerType === 'mouse') {
                    return;
                }
                var pageXY = _this.getPointXY(e);
                var top = _this.parent.element.querySelector('.' + cls.GRID_CLASS + ' .' + cls.CONTENT_CLASS).scrollTop +
                    (_this.pageXY.y - pageXY.y);
                var ele = _this.parent.isAdaptive ? mCont : element.parentElement.parentElement.querySelector('.' + cls.VIRTUALTABLE_DIV);
                var left = ele.scrollLeft + (_this.pageXY.x - pageXY.x);
                if (_this.frozenPreviousValues.left === left || left < 0) {
                    return;
                }
                mHdr.scrollLeft = left;
                ele.scrollLeft = left;
                _this.pageXY.x = pageXY.x;
                _this.frozenPreviousValues.left = left;
                if (_this.frozenPreviousValues.top === top || top < 0) {
                    return;
                }
                _this.pageXY.y = pageXY.y;
                _this.frozenPreviousValues.top = top;
                _this.eventType = e.type;
            };
        };
        VirtualScroll.prototype.update = function (top, left, e, ele, mHdr, mCont) {
            var _this = this;
            var virtualTable = this.parent.element.querySelector('.' + cls.CONTENT_VIRTUALTABLE_DIV);
            this.parent.isScrolling = true;
            var engine = this.parent.dataType === 'pivot' ? this.parent.engineModule : this.parent.olapEngineModule;
            var args = {
                dataSourceSettings: util_1.PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings)
            };
            var enableOptimizedRendering = this.parent.virtualScrollSettings && this.parent.virtualScrollSettings.allowSinglePage && this.parent.dataType === 'pivot';
            if (this.parent.pageSettings && engine.pageSettings) {
                if (this.direction === 'vertical') {
                    var vScrollPos = mCont.parentElement.scrollHeight - (top + mCont.parentElement.offsetHeight);
                    var rowValues = this.parent.dataType === 'pivot' ?
                        (this.parent.dataSourceSettings.valueAxis === 'row' ? this.parent.dataSourceSettings.values.length : 1) : 1;
                    var exactSize = (this.parent.pageSettings.rowPageSize * rowValues * this.parent.gridSettings.rowHeight);
                    var section = Math.ceil(top / exactSize);
                    section += enableOptimizedRendering && vScrollPos <= 0 ? 1 : 0;
                    if (((this.parent.scrollPosObject.vertical === section || engine.pageSettings.rowPageSize >= engine.rowCount) ||
                        (virtualTable && (virtualTable.scrollHeight < (virtualTable.parentElement.clientHeight * 3)))) &&
                        !enableOptimizedRendering) {
                        return;
                    }
                    this.parent.actionObj.actionName = events.verticalScroll;
                    Iif (enableOptimizedRendering && this.parent.grid && this.parent.grid.element.querySelector('.e-spinner-inner')) {
                        ej2_base_1.addClass([this.parent.grid.element.querySelector('.e-spinner-inner')], [cls.PIVOT_HIDE_LOADER]);
                    }
                    this.parent.actionBeginMethod();
                    Eif (!enableOptimizedRendering) {
                        this.parent.showWaitingPopup();
                    }
                    this.parent.scrollPosObject.vertical = section;
                    this.parent.pageSettings.currentRowPage = engine.pageSettings.currentRowPage = section > 1 ? section : 1;
                    var rowStartPos_1 = 0;
                    this.parent.trigger(events.enginePopulating, args, function () {
                        if (_this.parent.dataType === 'pivot') {
                            Iif (_this.parent.dataSourceSettings.mode === 'Server') {
                                _this.parent.getEngine('onScroll', null, null, null, null, null, null);
                            }
                            else {
                                _this.parent.engineModule.generateGridData(_this.parent.dataSourceSettings, true, false, _this.parent.engineModule.headerCollection);
                                rowStartPos_1 = _this.parent.engineModule.rowStartPos;
                            }
                        }
                        else {
                            _this.parent.olapEngineModule.scrollPage();
                            rowStartPos_1 = _this.parent.olapEngineModule.pageRowStartPos;
                        }
                        _this.enginePopulatedEventMethod(engine);
                    });
                    var exactPage = Math.ceil(rowStartPos_1 / (this.parent.pageSettings.rowPageSize * rowValues));
                    var pos = exactSize * exactPage -
                        (engine.rowFirstLvl * rowValues * this.parent.gridSettings.rowHeight);
                    this.parent.scrollPosObject.verticalSection = pos;
                }
                else {
                    var hScrollPos = ele.scrollWidth - (ele.scrollLeft + ele.offsetWidth);
                    var colValues = this.parent.dataType === 'pivot' ?
                        (this.parent.dataSourceSettings.valueAxis === 'column' ? this.parent.dataSourceSettings.values.length : 1) : 1;
                    var exactSize = (this.parent.pageSettings.columnPageSize *
                        colValues * this.parent.gridSettings.columnWidth);
                    var section = Math.ceil(Math.abs(left) / exactSize);
                    var enableOptimizedRendering_1 = this.parent.virtualScrollSettings && this.parent.virtualScrollSettings.allowSinglePage && this.parent.dataType === 'pivot';
                    section += enableOptimizedRendering_1 && hScrollPos <= 0 ? 1 : 0;
                    if ((this.parent.scrollPosObject.horizontal === section || (virtualTable && (virtualTable.scrollWidth <
                        (virtualTable.parentElement.clientWidth * 3)))) && !enableOptimizedRendering_1) {
                        return;
                    }
                    this.parent.actionObj.actionName = events.horizontalScroll;
                    Iif (enableOptimizedRendering_1 && this.parent.grid && this.parent.grid.element.querySelector('.e-spinner-inner')) {
                        ej2_base_1.addClass([this.parent.grid.element.querySelector('.e-spinner-inner')], [cls.PIVOT_HIDE_LOADER]);
                        ej2_base_1.removeClass([mHdr, mCont], ['e-virtual-pivot-content']);
                    }
                    this.parent.actionBeginMethod();
                    Eif (!enableOptimizedRendering_1) {
                        this.parent.showWaitingPopup();
                    }
                    var pivot_1 = this.parent;
                    pivot_1.scrollPosObject.horizontal = section;
                    this.parent.pageSettings.currentColumnPage = engine.pageSettings.currentColumnPage = section > 1 ? section : 1;
                    var colStartPos_1 = 0;
                    this.parent.trigger(events.enginePopulating, args, function () {
                        Eif (pivot_1.dataType === 'pivot') {
                            Iif (_this.parent.dataSourceSettings.mode === 'Server') {
                                _this.parent.getEngine('onScroll', null, null, null, null, null, null);
                            }
                            else {
                                pivot_1.engineModule.generateGridData(pivot_1.dataSourceSettings, true, false, pivot_1.engineModule.headerCollection);
                                colStartPos_1 = pivot_1.engineModule.colStartPos;
                            }
                        }
                        else {
                            pivot_1.olapEngineModule.scrollPage();
                            colStartPos_1 = pivot_1.olapEngineModule.pageColStartPos;
                        }
                        _this.enginePopulatedEventMethod(engine);
                    });
                    var exactPage = Math.ceil(colStartPos_1 / (pivot_1.pageSettings.columnPageSize * colValues));
                    var pos = exactSize * exactPage - (engine.colFirstLvl *
                        colValues * pivot_1.gridSettings.columnWidth);
                    pivot_1.scrollPosObject.horizontalSection = pos;
                }
                this.parent.actionObj.actionName = this.parent.getActionCompleteName();
                Eif (this.parent.actionObj.actionName) {
                    this.parent.actionCompleteMethod();
                }
            }
        };
        VirtualScroll.prototype.enginePopulatedEventMethod = function (engine, control) {
            var _this = this;
            var pivot = control ? control : this.parent;
            var eventArgs = {
                dataSourceSettings: pivot.dataSourceSettings,
                pivotValues: engine.pivotValues
            };
            pivot.trigger(events.enginePopulated, eventArgs, function (observedArgs) {
                _this.parent.pivotValues = observedArgs.pivotValues;
            });
        };
        VirtualScroll.prototype.setPageXY = function () {
            var _this = this;
            return function (e) {
                Iif (e.pointerType === 'mouse') {
                    return;
                }
                _this.pageXY = _this.getPointXY(e);
            };
        };
        VirtualScroll.prototype.common = function (mHdr, mCont, fCont) {
            var _this = this;
            return function (e) {
                var ele = _this.parent.isAdaptive ? mCont :
                    ej2_base_1.closest(mCont, '.' + cls.GRID_CONTENT).querySelector('.' + cls.VIRTUALTABLE_DIV);
                var enableOptimizedRendering = _this.parent.virtualScrollSettings && _this.parent.virtualScrollSettings.allowSinglePage && _this.parent.dataType === 'pivot';
                Iif (enableOptimizedRendering) {
                    if (_this.direction === 'vertical') {
                        if (_this.parent.element.querySelector('.' + cls.PIVOT_CONTENT_LOADER)) {
                            ej2_base_1.addClass([fCont], ['e-virtual-pivot-content']);
                            ej2_base_1.removeClass([_this.parent.element.querySelector('.' + cls.PIVOT_CONTENT_LOADER)], [cls.PIVOT_HIDE_LOADER]);
                        }
                    }
                    else {
                        if (_this.parent.element.querySelector('.' + cls.PIVOT_CONTENT_LOADER)) {
                            ej2_base_1.addClass([mHdr, mCont], ['e-virtual-pivot-content']);
                            ej2_base_1.removeClass([_this.parent.element.querySelector('.' + cls.PIVOT_CONTENT_LOADER)], [cls.PIVOT_HIDE_LOADER]);
                        }
                    }
                }
                _this.update(_this.parent.element.querySelector('.' + cls.GRID_CLASS + ' .' + cls.CONTENT_CLASS).scrollTop * _this.parent.verticalScrollScale, ele.scrollLeft * _this.parent.horizontalScrollScale, e, ele, mHdr, mCont);
            };
        };
        VirtualScroll.prototype.onHorizondalScroll = function (mHdr, mCont) {
            var _this = this;
            var timeOutObj;
            var ele = this.parent.isAdaptive ? mCont : ej2_base_1.closest(mCont, '.' + cls.GRID_CONTENT).querySelector('.' + cls.VIRTUALTABLE_DIV);
            var eleScrollLeft = Math.abs(ele.scrollLeft);
            var left = eleScrollLeft * this.parent.horizontalScrollScale;
            var horiOffset = left - this.parent.scrollPosObject.horizontalSection - eleScrollLeft;
            horiOffset = this.parent.enableRtl ? horiOffset : -horiOffset;
            if (ele.style.display !== 'none') {
                this.alignFreezedCells(horiOffset, false);
            }
            return function (e) {
                eleScrollLeft = Math.abs(ele.scrollLeft);
                left = eleScrollLeft * _this.parent.horizontalScrollScale;
                Iif (e.type === 'wheel' || e.type === 'touchmove' || _this.eventType === 'wheel' || _this.eventType === 'touchmove') {
                    clearTimeout(timeOutObj);
                    timeOutObj = setTimeout(function () {
                        left = e.type === 'touchmove' ? eleScrollLeft : left;
                        _this.update(mCont.parentElement.scrollTop * _this.parent.verticalScrollScale, left, e, ele, mHdr, mCont);
                    }, 300);
                }
                if (_this.previousValues.left === left) {
                    return;
                }
                _this.parent.scrollDirection = _this.direction = 'horizondal';
                horiOffset = left - _this.parent.scrollPosObject.horizontalSection - eleScrollLeft;
                horiOffset = _this.parent.enableRtl ? horiOffset : -horiOffset;
                var vertiOffset = mCont.querySelector('.' + cls.TABLE).style.transform.split(',').length > 1 ?
                    mCont.querySelector('.' + cls.TABLE).style.transform.split(',')[1].trim() : '0px)';
                Eif (eleScrollLeft < _this.parent.scrollerBrowserLimit) {
                    ej2_base_1.setStyleAttribute(mCont.querySelector('.' + cls.TABLE), {
                        transform: 'translate(' + horiOffset + 'px,' + vertiOffset
                    });
                    ej2_base_1.setStyleAttribute(mHdr.querySelector('.' + cls.TABLE), {
                        transform: 'translate(' + horiOffset + 'px,' + 0 + 'px)'
                    });
                    _this.alignFreezedCells(horiOffset, false);
                }
                var excessMove = _this.parent.scrollPosObject.horizontalSection > left ?
                    -(_this.parent.scrollPosObject.horizontalSection - left) : ((left + (mHdr.offsetWidth -
                    mHdr.querySelector('.e-headercell.e-leftfreeze').offsetWidth)) -
                    (_this.parent.scrollPosObject.horizontalSection + (mCont.querySelector('.' + cls.TABLE).offsetWidth -
                        mCont.querySelector('.' + cls.TABLE).querySelector('.e-leftfreeze.e-rowsheader').offsetWidth)));
                var notLastPage = Math.ceil(_this.parent.scrollPosObject.horizontalSection / _this.parent.horizontalScrollScale) <
                    _this.parent.scrollerBrowserLimit;
                if (_this.parent.scrollPosObject.horizontalSection > left ? true : (excessMove > 1 && notLastPage)) {
                    var enableOptimizedRendering = _this.parent.virtualScrollSettings && _this.parent.virtualScrollSettings.allowSinglePage && _this.parent.dataType === 'pivot';
                    Iif (enableOptimizedRendering && _this.parent.element.querySelector('.' + cls.PIVOT_CONTENT_LOADER)) {
                        ej2_base_1.addClass([mHdr, mCont], ['e-virtual-pivot-content']);
                        ej2_base_1.removeClass([_this.parent.element.querySelector('.' + cls.PIVOT_CONTENT_LOADER)], [cls.PIVOT_HIDE_LOADER]);
                    }
                    Eif (left > mHdr.clientWidth) {
                        Eif (_this.parent.scrollPosObject.left < 1) {
                            _this.parent.scrollPosObject.left = mHdr.clientWidth;
                        }
                        _this.parent.scrollPosObject.left = _this.parent.scrollPosObject.left - 50;
                        excessMove = _this.parent.scrollPosObject.horizontalSection > left ?
                            (excessMove - _this.parent.scrollPosObject.left) : (excessMove + _this.parent.scrollPosObject.left);
                    }
                    else {
                        excessMove = -_this.parent.scrollPosObject.horizontalSection;
                    }
                    horiOffset = -((left - (_this.parent.scrollPosObject.horizontalSection + excessMove) - ej2_base_1.closest(mCont, '.' + cls.GRID_CONTENT).querySelector('.' + cls.VIRTUALTABLE_DIV).scrollLeft));
                    var vWidth = (_this.parent.gridSettings.columnWidth * _this.engineModule.columnCount);
                    Iif (vWidth > _this.parent.scrollerBrowserLimit) {
                        _this.parent.horizontalScrollScale = vWidth / _this.parent.scrollerBrowserLimit;
                        vWidth = _this.parent.scrollerBrowserLimit;
                    }
                    Iif (horiOffset > vWidth && horiOffset > left) {
                        horiOffset = left;
                        excessMove = 0;
                    }
                    ej2_base_1.setStyleAttribute(mCont.querySelector('.' + cls.TABLE), {
                        transform: 'translate(' + horiOffset + 'px,' + vertiOffset
                    });
                    ej2_base_1.setStyleAttribute(mHdr.querySelector('.' + cls.TABLE), {
                        transform: 'translate(' + horiOffset + 'px,' + 0 + 'px)'
                    });
                    _this.alignFreezedCells(horiOffset, false);
                    _this.parent.scrollPosObject.horizontalSection = _this.parent.scrollPosObject.horizontalSection + excessMove;
                }
                var hScrollPos = (ele.scrollWidth - (eleScrollLeft + (ele.offsetWidth -
                    _this.parent.element.querySelector('.' + cls.GRID_CLASS)
                        .querySelector('.' + cls.HEADERCELL + '.' + cls.FREEZED_CELL).offsetWidth)));
                Iif (hScrollPos <= 0) {
                    var virtualDiv = mCont.querySelector('.' + cls.VIRTUALTRACK_DIV);
                    virtualDiv.style.display = 'none';
                    var mCntScrollPos = (mCont.scrollWidth - (mCont.scrollLeft + mCont.offsetWidth));
                    virtualDiv.style.display = '';
                    var mCntVScrollPos = (mCont.scrollWidth - (mCont.scrollLeft + mCont.offsetWidth));
                    _this.parent.scrollPosObject.horizontalSection -= mCntScrollPos > hScrollPos ? mCntScrollPos : -mCntVScrollPos;
                    horiOffset = (eleScrollLeft > _this.parent.scrollerBrowserLimit) ?
                        Number(mCont.querySelector('.' + cls.TABLE).style.transform.split(',')[0].split('px')[0].trim()) :
                        -(((eleScrollLeft * _this.parent.horizontalScrollScale) -
                            _this.parent.scrollPosObject.horizontalSection - eleScrollLeft));
                    ej2_base_1.setStyleAttribute(mCont.querySelector('.' + cls.TABLE), {
                        transform: 'translate(' + horiOffset + 'px,' + vertiOffset
                    });
                    ej2_base_1.setStyleAttribute(mHdr.querySelector('.' + cls.TABLE), {
                        transform: 'translate(' + horiOffset + 'px,' + 0 + 'px)'
                    });
                    _this.alignFreezedCells(horiOffset, false);
                }
                _this.previousValues.left = left;
                _this.frozenPreviousValues.left = left;
                _this.eventType = '';
                mHdr.scrollLeft = ele.scrollLeft;
                mCont.scrollLeft = ele.scrollLeft;
            };
        };
        VirtualScroll.prototype.alignFreezedCells = function (horiOffset, isParentCells) {
            for (var i = 0, j = this.parent.element.querySelectorAll('.' + cls.FREEZED_CELL); i < j.length; i++) {
                if (isParentCells) {
                    if (this.parent.enableRtl) {
                        j[i].style.right = -horiOffset + 'px';
                    }
                    else {
                        j[i].style.left = horiOffset + 'px';
                    }
                }
                else {
                    Iif (this.parent.enableRtl) {
                        j[i].style.right = (Number(horiOffset)) + 'px';
                    }
                    else {
                        j[i].style.left = (Number(-horiOffset)) + 'px';
                    }
                }
            }
        };
        VirtualScroll.prototype.onVerticalScroll = function (mCont, fCont) {
            var _this = this;
            var timeOutObj;
            var virtualTableElement = mCont.querySelector('.' + cls.CONTENT_VIRTUALTABLE_DIV) ?
                mCont.querySelector('.' + cls.CONTENT_VIRTUALTABLE_DIV) : mCont;
            return function (e) {
                if (_this.parent.isAdaptive || (virtualTableElement.scrollHeight > (virtualTableElement.parentElement.clientHeight * 3))) {
                    var top_1 = mCont.scrollTop * _this.parent.verticalScrollScale;
                    if (e.type === 'wheel' || e.type === 'touchmove' || _this.eventType === 'wheel' || _this.eventType === 'touchmove' || e.type === 'keyup' || e.type === 'keydown') {
                        var ele_1 = _this.parent.isAdaptive ? mCont : ej2_base_1.closest(mCont, '.' + cls.GRID_CONTENT).querySelector('.' + cls.VIRTUALTABLE_DIV);
                        clearTimeout(timeOutObj);
                        timeOutObj = setTimeout(function () {
                            var scrollLeft = 0;
                            Iif (_this.parent.isAdaptive) {
                                var contentTable = ele_1.querySelector('.' + cls.CONTENT_VIRTUALTABLE_DIV);
                                scrollLeft = (ele_1.scrollLeft === contentTable.scrollLeft) ? ele_1.scrollLeft :
                                    contentTable.scrollLeft;
                            }
                            else {
                                scrollLeft = ele_1.scrollLeft;
                            }
                            _this.update(mCont.scrollTop * _this.parent.verticalScrollScale, scrollLeft * _this.parent.horizontalScrollScale, e, ele_1, null, mCont);
                        }, 300);
                    }
                    if (_this.previousValues.top === top_1) {
                        return;
                    }
                    Iif (_this.parent.scrollPosObject.horizontalSection < 0) {
                        _this.parent.scrollPosObject.horizontalSection = 0;
                    }
                    _this.parent.scrollDirection = _this.direction = 'vertical';
                    var vertiOffset = -((top_1 - _this.parent.scrollPosObject.verticalSection - mCont.scrollTop));
                    var horiOffset = mCont.querySelector('.' + cls.TABLE).style.transform.split(',')[0].trim();
                    if (vertiOffset > _this.parent.virtualDiv.clientHeight) {
                        vertiOffset = _this.parent.virtualDiv.clientHeight;
                    }
                    Eif (mCont.scrollTop < _this.parent.scrollerBrowserLimit) {
                        ej2_base_1.setStyleAttribute(mCont.querySelector('.' + cls.TABLE), {
                            transform: 'translate(' + 0 + 'px,' + vertiOffset + 'px)'
                        });
                        ej2_base_1.setStyleAttribute(mCont.querySelector('.' + cls.TABLE), {
                            transform: horiOffset + ',' + vertiOffset + 'px)'
                        });
                    }
                    var excessMove = _this.parent.scrollPosObject.verticalSection > top_1 ?
                        -(_this.parent.scrollPosObject.verticalSection - top_1) : ((top_1 + mCont.clientHeight) -
                        (_this.parent.scrollPosObject.verticalSection + mCont.querySelector('.' + cls.TABLE).offsetHeight));
                    var notLastPage = Math.ceil(_this.parent.scrollPosObject.verticalSection / _this.parent.verticalScrollScale) <
                        _this.parent.scrollerBrowserLimit;
                    if (_this.parent.scrollPosObject.verticalSection > top_1 ? true : (excessMove > 1 && notLastPage)) {
                        var enableOptimizedRendering = _this.parent.virtualScrollSettings && _this.parent.virtualScrollSettings.allowSinglePage && _this.parent.dataType === 'pivot';
                        Iif (enableOptimizedRendering && _this.parent.element.querySelector('.' + cls.PIVOT_CONTENT_LOADER)) {
                            ej2_base_1.addClass([fCont], ['e-virtual-pivot-content']);
                            ej2_base_1.removeClass([_this.parent.element.querySelector('.' + cls.PIVOT_CONTENT_LOADER)], [cls.PIVOT_HIDE_LOADER]);
                        }
                        Eif (top_1 > mCont.clientHeight) {
                            Eif (_this.parent.scrollPosObject.top < 1) {
                                _this.parent.scrollPosObject.top = mCont.clientHeight;
                            }
                            _this.parent.scrollPosObject.top = _this.parent.scrollPosObject.top - 50;
                            excessMove = _this.parent.scrollPosObject.verticalSection > top_1 ?
                                (excessMove - _this.parent.scrollPosObject.top) : (excessMove + _this.parent.scrollPosObject.top);
                        }
                        else {
                            excessMove = -_this.parent.scrollPosObject.verticalSection;
                        }
                        var movableTable = _this.parent.element.querySelector('.' + cls.CONTENT_CLASS).querySelector('.' + cls.TABLE);
                        vertiOffset = -((top_1 - (_this.parent.scrollPosObject.verticalSection + excessMove) - mCont.scrollTop));
                        var vHeight = (_this.parent.gridSettings.rowHeight * _this.engineModule.rowCount + 0.1
                            - movableTable.clientHeight);
                        Iif (vHeight > _this.parent.scrollerBrowserLimit) {
                            _this.parent.verticalScrollScale = vHeight / _this.parent.scrollerBrowserLimit;
                            vHeight = _this.parent.scrollerBrowserLimit;
                        }
                        Iif (vertiOffset > vHeight && vertiOffset > top_1) {
                            vertiOffset = top_1;
                            excessMove = 0;
                        }
                        Iif (vertiOffset > _this.parent.virtualDiv.clientHeight) {
                            vertiOffset = _this.parent.virtualDiv.clientHeight;
                        }
                        ej2_base_1.setStyleAttribute(mCont.querySelector('.' + cls.TABLE), {
                            transform: 'translate(' + 0 + 'px,' + vertiOffset + 'px)'
                        });
                        ej2_base_1.setStyleAttribute(mCont.querySelector('.' + cls.TABLE), {
                            transform: horiOffset + ',' + vertiOffset + 'px)'
                        });
                        _this.parent.scrollPosObject.verticalSection = _this.parent.scrollPosObject.verticalSection + excessMove;
                    }
                    _this.previousValues.top = top_1;
                    _this.frozenPreviousValues.top = top_1;
                    _this.eventType = '';
                }
            };
        };
        VirtualScroll.prototype.removeInternalEvents = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            this.parent.off(constant_1.contentReady, this.wireEvents);
        };
        VirtualScroll.prototype.destroy = function () {
            this.removeInternalEvents();
        };
        return VirtualScroll;
    }());
    exports.VirtualScroll = VirtualScroll;
});