all files / grid/actions/ scroll.js

97.41% Statements 226/232
92.11% Branches 105/114
100% Functions 32/32
97.41% Lines 226/232
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   335× 335× 335× 335× 335× 335×   8029×   695× 695×   113×     695× 695× 695×       689×   695×   42× 42× 42× 42× 42×   274× 274× 274×   339× 335×     42× 42×   41×   336×   335× 335× 335× 335×   274×   271× 271× 271× 271×   17929× 70×     691× 691× 691× 691× 31×   29× 29× 29× 29× 29× 22× 22×           54× 54× 54×           27× 27× 27×           52× 52× 52×                         52× 52×                 11835× 11835× 339× 339× 339× 339× 339× 339× 339× 25× 25×   339× 27× 27× 27× 27× 27× 27× 27×     312× 312×   339× 13×   339× 339×   11835× 11835× 11835× 11835× 11835× 11828× 11828× 11828×   11828× 11812× 76× 76× 70×     11812× 94×     11718×   11812× 11812×   11828× 11821×   11828× 94×       11835×   317× 317× 317× 317× 317×   695× 45×     650×     63× 58×       272× 272× 272× 272× 272× 272× 272×   43×        
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "../services/width-controller"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, constant_1, width_controller_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Scroll = (function () {
        function Scroll(parent) {
            this.lastScrollTop = 0;
            this.previousValues = { top: 0, left: 0 };
            this.oneTimeReady = true;
            this.parent = parent;
            this.widthService = new width_controller_1.ColumnWidthService(parent);
            this.addEventListener();
        }
        Scroll.prototype.getModuleName = function () {
            return 'scroll';
        };
        Scroll.prototype.setWidth = function () {
            this.parent.element.style.width = ej2_base_3.formatUnit(this.parent.width);
            if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar &&
                this.parent.toolbarModule.toolbar.element) {
                this.parent.toolbarModule.toolbar.refreshOverflow();
            }
        };
        Scroll.prototype.setHeight = function () {
            var mHdrHeight = 0;
            var content = this.parent.getContent().firstChild;
            if (this.parent.frozenRows && this.parent.height !== 'auto') {
                mHdrHeight =
                    this.parent.getHeaderContent().querySelector('tbody').offsetHeight;
                content.style.height = ej2_base_3.formatUnit(this.parent.height - mHdrHeight);
            }
            else {
                content.style.height = ej2_base_3.formatUnit(this.parent.height);
            }
            this.ensureOverflow(content);
        };
        Scroll.prototype.setPadding = function () {
            var content = this.parent.getHeaderContent();
            var scrollWidth = Scroll.getScrollBarWidth() - this.getThreshold();
            var cssProps = this.getCssProperties();
            content.firstChild.style[cssProps.border] = scrollWidth > 0 ? '1px' : '0px';
            content.style[cssProps.padding] = scrollWidth > 0 ? scrollWidth + 'px' : '0px';
        };
        Scroll.prototype.removePadding = function (rtl) {
            var cssProps = this.getCssProperties(rtl);
            this.parent.getHeaderContent().firstChild.style[cssProps.border] = '';
            this.parent.getHeaderContent().firstChild.parentElement.style[cssProps.padding] = '';
        };
        Scroll.prototype.refresh = function () {
            if (this.parent.height !== '100%') {
                return;
            }
            var content = this.parent.getContent();
            this.parent.element.style.height = '100%';
            var height = this.widthService.getSiblingsHeight(content);
            content.style.height = 'calc(100% - ' + height + 'px)';
        };
        Scroll.prototype.getThreshold = function () {
            var appName = ej2_base_1.Browser.info.name;
            if (appName === 'mozilla') {
                return 0.5;
            }
            return 1;
        };
        Scroll.prototype.addEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            this.parent.on(constant_1.onEmpty, this.wireEvents, this);
            this.parent.on(constant_1.contentReady, this.wireEvents, this);
            this.parent.on(constant_1.uiUpdate, this.onPropertyChanged, this);
            this.parent.on(constant_1.headerRefreshed, this.setScrollLeft, this);
        };
        Scroll.prototype.removeEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            this.parent.off(constant_1.onEmpty, this.wireEvents);
            this.parent.off(constant_1.contentReady, this.wireEvents);
            this.parent.off(constant_1.uiUpdate, this.onPropertyChanged);
            this.parent.off(constant_1.headerRefreshed, this.setScrollLeft);
        };
        Scroll.prototype.setScrollLeft = function () {
            if (this.parent.frozenColumns) {
                this.parent.headerModule.getMovableHeader().scrollLeft = this.previousValues.left;
            }
        };
        Scroll.prototype.onContentScroll = function (scrollTarget) {
            var _this = this;
            var element = scrollTarget;
            var isHeader = element.classList.contains('e-headercontent');
            return function (e) {
                if (_this.content.querySelector('tbody') === null || _this.parent.isPreventScrollEvent) {
                    return;
                }
                var target = e.target;
                var left = target.scrollLeft;
                var sLimit = target.scrollWidth;
                var isFooter = target.classList.contains('e-summarycontent');
                if (_this.previousValues.left === left) {
                    _this.previousValues.top = !isHeader ? _this.previousValues.top : target.scrollTop;
                    return;
                }
                element.scrollLeft = left;
                Iif (isFooter) {
                    _this.header.scrollLeft = left;
                }
                _this.previousValues.left = left;
                _this.parent.notify(constant_1.scroll, { left: left });
            };
        };
        Scroll.prototype.onFreezeContentScroll = function (scrollTarget) {
            var _this = this;
            var element = scrollTarget;
            return function (e) {
                if (_this.content.querySelector('tbody') === null) {
                    return;
                }
                var target = e.target;
                var top = target.scrollTop;
                if (_this.previousValues.top === top) {
                    return;
                }
                element.scrollTop = top;
                _this.previousValues.top = top;
                if (_this.parent.isDestroyed) {
                    return;
                }
            };
        };
        Scroll.prototype.onWheelScroll = function (scrollTarget) {
            var _this = this;
            var element = scrollTarget;
            return function (e) {
                if (_this.content.querySelector('tbody') === null) {
                    return;
                }
                var top = element.scrollTop + (e.deltaMode === 1 ? e.deltaY * 30 : e.deltaY);
                Iif (_this.previousValues.top === top) {
                    return;
                }
                e.preventDefault();
                _this.parent.getContent().querySelector('.e-frozencontent').scrollTop = top;
                element.scrollTop = top;
                _this.previousValues.top = top;
            };
        };
        Scroll.prototype.onTouchScroll = function (scrollTarget) {
            var _this = this;
            var element = scrollTarget;
            return function (e) {
                Iif (e.pointerType === 'mouse') {
                    return;
                }
                var cont;
                var mHdr;
                var pageXY = _this.getPointXY(e);
                var top = element.scrollTop + (_this.pageXY.y - pageXY.y);
                var left = element.scrollLeft + (_this.pageXY.x - pageXY.x);
                if (_this.parent.getHeaderContent().contains(e.target)) {
                    mHdr = _this.parent.getFrozenColumns() ?
                        _this.parent.getHeaderContent().querySelector('.e-movableheader') : _this.parent.getHeaderContent().firstChild;
                    Iif (_this.previousValues.left === left || (left < 0 || (mHdr.scrollWidth - mHdr.clientWidth) < left)) {
                        return;
                    }
                    e.preventDefault();
                    mHdr.scrollLeft = left;
                    element.scrollLeft = left;
                    _this.pageXY.x = pageXY.x;
                    _this.previousValues.left = left;
                }
                else {
                    cont = _this.parent.getContent().querySelector('.e-frozencontent');
                    Iif (_this.previousValues.top === top || (top < 0 || (cont.scrollHeight - cont.clientHeight) < top)) {
                        return;
                    }
                    e.preventDefault();
                    cont.scrollTop = top;
                    element.scrollTop = top;
                    _this.pageXY.y = pageXY.y;
                    _this.previousValues.top = top;
                }
            };
        };
        Scroll.prototype.setPageXY = function () {
            var _this = this;
            return function (e) {
                Iif (e.pointerType === 'mouse') {
                    return;
                }
                _this.pageXY = _this.getPointXY(e);
            };
        };
        Scroll.prototype.getPointXY = function (e) {
            var pageXY = { x: 0, y: 0 };
            if (e.touches && e.touches.length) {
                pageXY.x = e.touches[0].pageX;
                pageXY.y = e.touches[0].pageY;
            }
            else {
                pageXY.x = e.pageX;
                pageXY.y = e.pageY;
            }
            return pageXY;
        };
        Scroll.prototype.wireEvents = function () {
            var _this = this;
            if (this.oneTimeReady) {
                var frzCols = this.parent.getFrozenColumns();
                this.content = this.parent.getContent().firstChild;
                this.header = this.parent.getHeaderContent().firstChild;
                var mCont = this.content.querySelector('.e-movablecontent');
                var fCont = this.content.querySelector('.e-frozencontent');
                var mHdr = this.header.querySelector('.e-movableheader');
                if (this.parent.frozenRows) {
                    ej2_base_1.EventHandler.add(frzCols ? mHdr : this.header, 'touchstart pointerdown', this.setPageXY(), this);
                    ej2_base_1.EventHandler.add(frzCols ? mHdr : this.header, 'touchmove pointermove', this.onTouchScroll(frzCols ? mCont : this.content), this);
                }
                if (frzCols) {
                    ej2_base_1.EventHandler.add(mCont, 'scroll', this.onContentScroll(mHdr), this);
                    ej2_base_1.EventHandler.add(mCont, 'scroll', this.onFreezeContentScroll(fCont), this);
                    ej2_base_1.EventHandler.add(fCont, 'scroll', this.onFreezeContentScroll(mCont), this);
                    ej2_base_1.EventHandler.add(mHdr, 'scroll', this.onContentScroll(mCont), this);
                    ej2_base_1.EventHandler.add(fCont, 'wheel', this.onWheelScroll(mCont), this);
                    ej2_base_1.EventHandler.add(fCont, 'touchstart pointerdown', this.setPageXY(), this);
                    ej2_base_1.EventHandler.add(fCont, 'touchmove pointermove', this.onTouchScroll(mCont), this);
                }
                else {
                    ej2_base_1.EventHandler.add(this.content, 'scroll', this.onContentScroll(this.header), this);
                    ej2_base_1.EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);
                }
                if (this.parent.aggregates.length) {
                    ej2_base_1.EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);
                }
                this.refresh();
                this.oneTimeReady = false;
            }
            var table = this.parent.getContentTable();
            var sLeft;
            var sHeight;
            var clientHeight;
            util_1.getUpdateUsingRaf(function () {
                sLeft = _this.header.scrollLeft;
                sHeight = table.scrollHeight;
                clientHeight = _this.parent.getContent().clientHeight;
            }, function () {
                if (!_this.parent.enableVirtualization) {
                    if (sHeight < clientHeight) {
                        ej2_base_2.addClass(table.querySelectorAll('tr:last-child td'), 'e-lastrowcell');
                        if (_this.parent.getFrozenColumns()) {
                            ej2_base_2.addClass(_this.parent.getContent().querySelector('.e-movablecontent').querySelectorAll('tr:last-child td'), 'e-lastrowcell');
                        }
                    }
                    if ((_this.parent.frozenRows > 0 || _this.parent.frozenColumns > 0) && _this.header.querySelector('.e-movableheader')) {
                        _this.header.querySelector('.e-movableheader').scrollLeft = _this.previousValues.left;
                    }
                    else {
                        _this.header.scrollLeft = _this.previousValues.left;
                    }
                    _this.content.scrollLeft = _this.previousValues.left;
                    _this.content.scrollTop = _this.previousValues.top;
                }
                if (!_this.parent.enableColumnVirtualization) {
                    _this.content.scrollLeft = sLeft;
                }
                if (_this.parent.frozenColumns && _this.header.querySelector('.e-movableheader')) {
                    _this.header.querySelector('.e-movableheader').scrollLeft =
                        _this.content.querySelector('.e-movablecontent').scrollLeft;
                }
            });
            this.parent.isPreventScrollEvent = false;
        };
        Scroll.prototype.getCssProperties = function (rtl) {
            var css = {};
            var enableRtl = ej2_base_3.isNullOrUndefined(rtl) ? this.parent.enableRtl : rtl;
            css.border = enableRtl ? 'borderLeftWidth' : 'borderRightWidth';
            css.padding = enableRtl ? 'paddingLeft' : 'paddingRight';
            return css;
        };
        Scroll.prototype.ensureOverflow = function (content) {
            if (this.parent.getFrozenColumns()) {
                content.querySelector('.e-movablecontent').style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';
            }
            else {
                content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';
            }
        };
        Scroll.prototype.onPropertyChanged = function (e) {
            if (e.module !== this.getModuleName()) {
                return;
            }
            this.setPadding();
            this.oneTimeReady = true;
            if (this.parent.height === 'auto') {
                this.removePadding();
            }
            this.wireEvents();
            this.setHeight();
            this.setWidth();
        };
        Scroll.prototype.destroy = function () {
            this.removeEventListener();
            this.removePadding();
            ej2_base_2.removeClass([this.parent.getHeaderContent().firstChild], 'e-headercontent');
            ej2_base_2.removeClass([this.parent.getContent().firstChild], 'e-content');
            this.parent.getContent().firstChild.style.height = '';
            this.parent.element.style.width = '';
            ej2_base_1.EventHandler.remove(this.parent.getContent().firstChild, 'scroll', this.onContentScroll);
        };
        Scroll.getScrollBarWidth = function () {
            return util_1.getScrollBarWidth();
        };
        return Scroll;
    }());
    exports.Scroll = Scroll;
});