office-ui-fabric-react/lib-amd/utilities/AutoScroll/AutoScroll.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", '../eventGroup/EventGroup', '../scroll', '../dom'], function (require, exports, EventGroup_1, scroll_1, dom_1) {
    "use strict";
    var SCROLL_ITERATION_DELAY = 16;
    var SCROLL_GUTTER_HEIGHT = 100;
    var MAX_SCROLL_VELOCITY = 15;
    /**
     * AutoScroll simply hooks up mouse events given a parent element, and scrolls the container
     * up/down depending on how close the mouse is to the top/bottom of the container.
     *
     * Once you don't want autoscroll any more, just dispose the helper and it will unhook events.
     */
    var AutoScroll = (function () {
        function AutoScroll(element) {
            this._events = new EventGroup_1.EventGroup(this);
            this._scrollableParent = scroll_1.findScrollableParent(element);
            this._incrementScroll = this._incrementScroll.bind(this);
            this._scrollRect = dom_1.getRect(this._scrollableParent);
            if (this._scrollableParent === window) {
                this._scrollableParent = document.body;
            }
            if (this._scrollableParent) {
                this._events.on(window, 'mousemove', this._onMouseMove, true);
            }
        }
        AutoScroll.prototype.dispose = function () {
            this._events.dispose();
            this._stopScroll();
        };
        AutoScroll.prototype._onMouseMove = function (ev) {
            var scrollRectTop = this._scrollRect.top;
            var scrollClientBottom = scrollRectTop + this._scrollRect.height - SCROLL_GUTTER_HEIGHT;
            if (ev.clientY < (scrollRectTop + SCROLL_GUTTER_HEIGHT)) {
                this._scrollVelocity = Math.max(-MAX_SCROLL_VELOCITY, -MAX_SCROLL_VELOCITY * ((SCROLL_GUTTER_HEIGHT - (ev.clientY - scrollRectTop)) / SCROLL_GUTTER_HEIGHT));
            }
            else if (ev.clientY > scrollClientBottom) {
                this._scrollVelocity = Math.min(MAX_SCROLL_VELOCITY, MAX_SCROLL_VELOCITY * ((ev.clientY - scrollClientBottom) / SCROLL_GUTTER_HEIGHT));
            }
            else {
                this._scrollVelocity = 0;
            }
            if (this._scrollVelocity) {
                this._startScroll();
            }
            else {
                this._stopScroll();
            }
        };
        AutoScroll.prototype._startScroll = function () {
            if (!this._timeoutId) {
                this._incrementScroll();
            }
        };
        AutoScroll.prototype._incrementScroll = function () {
            this._scrollableParent.scrollTop += Math.round(this._scrollVelocity);
            this._timeoutId = setTimeout(this._incrementScroll, SCROLL_ITERATION_DELAY);
        };
        AutoScroll.prototype._stopScroll = function () {
            if (this._timeoutId) {
                clearTimeout(this._timeoutId);
                delete this._timeoutId;
            }
        };
        return AutoScroll;
    }());
    exports.AutoScroll = AutoScroll;
});