@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/core/es6/grid/components/Scrollbar.js

@@ -0,0 +1,1413 @@
+/* eslint-disable */
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import Util from "../util/util.js";
+import ElementWrapper from "../components/ElementWrapper.js";
+import Reverter from "../util/Reverter.js";
+/* eslint-enable */
+
+/** @constructor
+* @extends {ElementWrapper}
+*/
+let Scrollbar = function () {
+	let t = this; // Create a shorthand to shorthen file size
+	t._addEvents(
+		"scroll",
+		"activated",
+		"deactivated",
+		"scrollStart",
+		"scrollEnd",
+		"thicknessChanged",
+		"layoutChanged",
+		"enabled",
+		"disabled"
+	);
+
+	t._onTrackScroll = t._onTrackScroll.bind(t);
+	t._onKeyDown = t._onKeyDown.bind(t);
+	t._onStartFading = t._onStartFading.bind(t);
+	t._onMouseWheel = t._onMouseWheel.bind(t);
+	t._flash = t._flash.bind(t);
+
+	t._onTouchStart = t._onTouchStart.bind(t);
+	t._onTouchMove = t._onTouchMove.bind(t);
+	t._onTouchEnd = t._onTouchEnd.bind(t);
+	t._smoothScroll = t._smoothScroll.bind(t);
+	t._updateEffectiveArea = t._updateEffectiveArea.bind(t);
+	t._onRestingPosition = t._onRestingPosition.bind(t);
+
+	t._element = document.createElement("div");
+	t._element.className = "grid-scrollbar";
+
+	t._trackContent = document.createElement("div");
+
+	t._panes = [];
+	t._paneSliders = [];
+	t._startPos = {};
+	t._endPos = {};
+	t._reverter = new Reverter(t._onRestingPosition, 300); // WORKAROUND: GRID-402
+
+	t._element.addEventListener("scroll", t._onTrackScroll);
+	t._element.addEventListener("mouseover", t._flash); // Allow interaction if scrollbar is fading
+	t._element.appendChild(t._trackContent); // WARNING: trackContent is not registered as ElementWrapper's content
+
+	t.disableKeyboardInput(false); // Enable keyboard input by default
+	t._onThicknessChanged = t._dispatch.bind(t, "thicknessChanged");
+	Scrollbar._queryNativeTrackThickness(t._onThicknessChanged);
+
+	if(!t._updateEffectiveArea()) {
+		t.listen("thicknessChanged", t._updateEffectiveArea);
+	}
+};
+Ext.inherits(Scrollbar, ElementWrapper);
+
+/** @type {boolean}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._vertical = true;
+/** @type {number}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._step = 0;
+/** @type {Element}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._parentNode = null;
+/** @type {string}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._hostClassName = "";
+
+/** @type {Element}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._trackContent = null;
+/** @type {Array.<ElementWrapper>}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._panes = null;
+/** @type {Array.<ElementWrapper>}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._paneSliders = null;
+
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._enabled = true;
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._active = false;
+/** if freeze, scroll can't be moved. Event will stopPropagation and preventDefault
+* @type {boolean}
+* @private
+*/
+Scrollbar.prototype._isFrozen = false;
+/** @type {Scrollbar}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._otherScrollbar = null;
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._autoHideScrollbar = true;
+
+/** @type {number}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._trackSize = 120;
+/** @type {number}
+* @private
+*/
+Scrollbar.prototype._tContentSize = 0;
+/** @type {number}
+* @private
+*/
+Scrollbar.prototype._tScrollVal = 0; // Track and pane may have different size and content
+/** @type {number}
+* @private
+*/
+Scrollbar.prototype._tPercentVal = 0; // Percentage [0, 1] of track scroll value
+
+/** @type {number}
+* @private
+*/
+Scrollbar.prototype._paneSize = 0;
+/** @type {number}
+* @private
+*/
+Scrollbar.prototype._pContentSize = 0;
+/** @type {number}
+* @private
+*/
+Scrollbar.prototype._pScrollVal = 0; // Track and pane may have different size and content
+
+/** @type {number}
+* @protected
+* @ignore
+*/
+Scrollbar.prototype._footerCount = 0;
+
+/** @type {number}
+* @private
+*/
+Scrollbar.prototype._fadingId = 0;
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._postponeFading = false;
+
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._layoutChanged = false;
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._contentDirty = true;
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._layoutDirty = true;
+
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._touchInput = true;
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._swiping = false;
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._touchDrag = false;
+/** @type {!Object}
+* @private
+*/
+Scrollbar.prototype._startPos;
+/** @type {!Object}
+* @private
+*/
+Scrollbar.prototype._endPos;
+
+/** @type {boolean}
+* @private
+*/
+Scrollbar.prototype._smoothing = true;
+/** @type {number}
+* @private
+*/
+Scrollbar.prototype._smoothingId = 0;
+/** @type {number}
+* @private
+*/
+Scrollbar.prototype._smoothingSpeed = 0;
+
+/** @type {string}
+* @private
+*/
+Scrollbar.prototype._wheelScrolling = "";
+/** @type {Function}
+* @private
+* @ignore
+*/
+Scrollbar.prototype._mouseWheelLogic = null;
+/** @type {Function}
+* @private
+* @ignore
+*/
+Scrollbar.prototype._onThicknessChanged = null;
+
+
+/** @type {number}
+* @private
+*/
+Scrollbar._trackThickness = 0;
+/** @type {number}
+* @private
+*/
+Scrollbar._queryTimeout = 0;
+/** @type {boolean}
+* @private
+*/
+Scrollbar._queryStarted = false;
+/** @type {Element}
+* @private
+*/
+Scrollbar._outerDummy = null;
+/** @type {Element}
+* @private
+*/
+Scrollbar._innerDummy = null;
+/** @type {Array.<Function>}
+* @private
+*/
+Scrollbar._listeners = null;
+
+
+
+/** @private
+* @return {boolean}
+*/
+Scrollbar.prototype._updateEffectiveArea = function() {
+	let thickness = this.getTrackThickness();
+	if(thickness) {
+		let prop = (this._vertical) ? "width" : "height";
+		this._element.style[prop] = (thickness + 1) + "px";
+	}
+	return thickness ? true : false;
+};
+/** @private
+* @function
+* @param {Function=} listener
+*/
+Scrollbar._queryNativeTrackThickness = function (listener) {
+	if(!Scrollbar._queryStarted) { // We only need one query for all scrollbars
+		Scrollbar._repeatQuery();
+	}
+
+	if(listener && Scrollbar._trackThickness <= 0) {
+		let listeners = Scrollbar._listeners;
+		if(!listeners) {
+			listeners = Scrollbar._listeners = [];
+		}
+		listeners.push(listener);
+	}
+};
+/** @private
+* @function
+*/
+Scrollbar._repeatQuery = function () {
+	Scrollbar._queryStarted = true;
+	if(Scrollbar._retrieveNativeTrackThinkness()) {
+		return;
+	}
+	//Re-query if the thickness is not yet available. Add some delay for each query to increase chance of getting the value.
+
+	// TODO: Use window.addEventListener("load", ); in conjunction with this to speed things up
+	Scrollbar._queryTimeout += 100;
+	if(Scrollbar._queryTimeout < 3000) { // Prevent infinite loop
+		setTimeout(Scrollbar._repeatQuery, Scrollbar._queryTimeout);
+	} else {
+		Scrollbar._trackThickness = 13; // Set to 13px as a last ditch effort
+		Scrollbar._clearStaticResources();
+	}
+};
+/** @private
+* @function
+* @return {boolean} Returns true if valid track thickness
+*/
+Scrollbar._retrieveNativeTrackThinkness = function () {
+	if(Scrollbar._trackThickness > 0) {
+		return true;
+	}
+
+	let inner = Scrollbar._innerDummy;
+	let outer = Scrollbar._outerDummy;
+	if(!inner) {
+		inner = Scrollbar._innerDummy = document.createElement('p');
+		inner.style.width = "100%";
+		inner.style.height = "200px";
+
+		outer = Scrollbar._outerDummy = document.createElement('div');
+		outer.style.position = "absolute";
+		outer.style.top = "0px";
+		outer.style.left = "0px";
+		outer.style.visibility = "hidden";
+		outer.style.width = "200px";
+		outer.style.height = "150px";
+		outer.appendChild(inner);
+	}
+
+	outer.style.overflow = "hidden";
+	document.body.appendChild(outer);
+	let w1 = inner.offsetWidth;
+	outer.style.overflow = 'scroll';
+	let w2 = inner.offsetWidth;
+
+	// Sometimes, w1 may be equal to w2 on certain browsers or devices, such as a Macbook when opened on the built-in screen. In such cases, the outer.style.overflow scroll may not change the offsetWidth, and the outer.clientWidth will be the same as the inner offsetWidth. As a result, the native track thickness may not be found
+	if(w1 == w2) {
+		w2 = outer.clientWidth;
+	}
+	document.body.removeChild(outer);
+	let scrollbarWidth = Scrollbar._trackThickness = (w1 - w2);
+	if(scrollbarWidth > 0) {
+		Scrollbar._clearStaticResources();
+		return true;
+	}
+	return false;
+};
+/** @private
+* @function
+*/
+Scrollbar._clearStaticResources = function () {
+	Scrollbar._innerDummy = Scrollbar._outerDummy = null;
+	let listeners = Scrollbar._listeners;
+	if(listeners) {
+		Scrollbar._listeners = null;
+
+		let arg = {};
+		for(let i = listeners.length; --i >= 0;) {
+			listeners[i](arg);
+		}
+	}
+};
+/** @public
+* @function
+*/
+Scrollbar.updateTrackThickness = function () {
+	Scrollbar._trackThickness = 0;
+	Scrollbar._queryTimeout = 0;
+	Scrollbar._queryStarted = false;
+	Scrollbar._queryNativeTrackThickness();
+};
+
+
+/** @override */
+Scrollbar.prototype.dispose = function () {
+	let sbListeners = Scrollbar._listeners;
+	if(sbListeners) {
+		let idx = sbListeners.indexOf(this._onThicknessChanged);
+		if(idx >= 0 ) {
+			sbListeners.splice(idx, 1);
+			this._onThicknessChanged = null;
+		}
+	}
+
+	this.unlistenAll();
+	if(this._smoothingId) {
+		clearInterval(this._smoothingId);
+		this._smoothingId = 0;
+	}
+
+	this._active = this._layoutChanged = false;
+	this._dispose();
+	for(let i = this._panes.length; --i >= 0;) {
+		this._panes[i].dispose();
+		this._paneSliders[i].dispose();
+	}
+	this._reverter.dispose();
+};
+/** @override */
+Scrollbar.prototype.getContent = function (opt_allContent) {
+	return this._paneSliders[0].getContent(opt_allContent);
+};
+/** @override */
+Scrollbar.prototype.getParent = function () {
+	return this._parentNode;
+};
+/** @override */
+Scrollbar.prototype.setParent = function (p, opt_prepend) {
+	let elem = Util.getElement(p);
+
+	let isDifferentParent = this._parentNode !== elem;
+	if(isDifferentParent && this._parentNode) {
+		this.removeWheelListener(this._parentNode);
+		this._parentNode.classList.remove(this._hostClassName);
+	}
+
+	if(this.isActive()) {
+		this._setParent(elem, opt_prepend); // This also reorder scrollbar to the top or bottom (z-order) of the view
+		this._parentNode = /** @type{Element} */(this._element.parentNode); // TODO:Change to parentElement
+		if(this._parentNode) {
+			this._parentNode.classList.add(this._hostClassName);
+		}
+	} else {
+		this._parentNode = elem;
+	}
+	if(isDifferentParent) {
+		this.addWheelListener(this._parentNode);
+	}
+};
+/** @public
+* @param {Element|Node} host
+*/
+Scrollbar.prototype.attachToExternalElement = function (host) {
+	this.setParent(host);
+	let scrollElem = this.getElement();
+	scrollElem.style.right = "0";
+	if(this._vertical) {
+		scrollElem.style.overflowX = "hidden";
+	} else {
+		scrollElem.style.overflowY = "hidden";
+	}
+	scrollElem.style.boxSizing = "border-box";
+	scrollElem.style.position = "absolute";
+	scrollElem.style.outline = "none";
+};
+
+/** @private
+*/
+Scrollbar.prototype._onActiveStateChange = function () {
+	let t = this; // Minimize file size
+	t._scrollTo(0, true); // WARNING: Reset scroll position
+	let i;
+	if(t._active) {
+		// t._element.style.display = "";
+		if(t._parentNode) {
+			t._layoutDirty = true;
+			t._setParent(t._parentNode);
+			t._parentNode.classList.add(t._hostClassName);
+		}
+		t._flash(); // WARNING: Auto flashing
+
+		// Activate scrollbar on all panes
+		for (i = t._panes.length; --i >= 0; ) {
+			t._panes[i].removeClass("scroll-disabled");
+		}
+		t._dispatch("activated", {});
+	} else {
+		// t._element.style.display = "none";
+		t._setParent(null);
+		if(t._parentNode) {
+			t._parentNode.classList.remove(t._hostClassName);
+		}
+
+		// Remove scrollbar on all panes
+		let prop = (t._vertical) ? "height" : "width";
+		for (i = t._panes.length; --i >= 0; ) {
+			t._panes[i].addClass("scroll-disabled");
+			t._panes[i].setStyle(prop, "");
+		}
+		t._dispatch("deactivated", {});
+	}
+	if(t._vertical) {
+		if(t._otherScrollbar && t._otherScrollbar.isActive()) {
+			t._otherScrollbar.invalidate(); // Vertical scrollbar can have an impact on horizontal track size
+		}
+	}
+};
+/** @private
+*/
+Scrollbar.prototype._onEnablingStateChange = function () {
+	let t = this; // Minimize file size
+	if(t._enabled) {
+		t._dispatch("enabled", {});
+	} else {
+		t._dispatch("disabled", {});
+	}
+};
+
+/** @public
+* @return {boolean}
+*/
+Scrollbar.prototype.isActive = function () {
+	return this._active;
+};
+/** @public
+* @return {boolean}
+*/
+Scrollbar.prototype.isEnabled = function () {
+	return this._enabled;
+};
+/** @public
+* @param {boolean=} opt_enabled
+*/
+Scrollbar.prototype.enable = function (opt_enabled) {
+	opt_enabled = opt_enabled !== false;
+	if(this._enabled != opt_enabled) {
+		this._enabled = opt_enabled;
+		this._updateLayout();
+		this._onEnablingStateChange();
+	}
+};
+/** @public
+* @param {boolean=} opt_disabled
+*/
+Scrollbar.prototype.disable = function (opt_disabled) {
+	this.enable(opt_disabled === false);
+};
+
+/** @public
+* @return {number}
+*/
+Scrollbar.prototype.getTrackSize = function () { return this._trackSize; };
+/** This is equivalent to clientHeight or clientWidth (i.e. view port).
+* @public
+* @ignore
+* @return {number} Pane size without zoom factor
+*/
+Scrollbar.prototype.getPaneSize = function () { return this._paneSize; };
+/** This is equivalent to scrollHeight or scrollWidth
+* @public
+* @return {number} Content size without zoom factor
+*/
+Scrollbar.prototype.getContentSize = function () { return this._pContentSize; };
+/** @public
+ * @returns {number}
+*/
+Scrollbar.prototype.getTrackThickness = function () { return Scrollbar._trackThickness; };
+
+/** Get available space for scrolling which is equivalent to content size subtracted by view size
+* @public
+* @return {number}
+* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight|scrollHeight}
+* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth|scrollWidth}
+*/
+Scrollbar.prototype.getScrollGap = function () {
+	return this._pContentSize - this.getPaneSize();
+};
+
+/** @public
+* @param {number} size
+* @param {number} paneSize
+*/
+Scrollbar.prototype.setTrackSize = function (size, paneSize) {
+	this._trackSize = size > 0 ? size : 0;
+	this._paneSize = paneSize > 0 ? paneSize : 0;
+
+	// Actually it should invoke _updateLayout() immediately for active-state updating here.
+	// But grid always invokes _updateLayout() implicitly after invokes setTrackSize(),
+	// so _updateLayout() invoking is unneccessory.
+};
+/** Must be implemented by the inheritance
+* @protected
+* @return {number}
+*/
+Scrollbar.prototype.calculateContentSize = function () { return 0; };
+
+/** @public
+* @return {boolean} Return true if there is any change, otherwise false
+*/
+Scrollbar.prototype.update = function () {
+	if(this._contentDirty) { // WARNING: Causes page recalculation
+		this._contentDirty = false;
+		let size = this.calculateContentSize();
+		if(!size || size < 0) {
+			size = 0;
+		}
+		if(this._pContentSize !== size) {
+			this._pContentSize = size;
+			this._layoutDirty = true;
+		}
+	}
+	if(this._layoutDirty) {
+		this._layoutDirty = false;
+		this._updateLayout();
+		return true;
+	}
+	return false;
+};
+/** @public
+* @param {boolean=} forceUpdate
+* @param {number=} scrollVal
+* @ignore
+*/
+Scrollbar.prototype.invalidate = function (forceUpdate, scrollVal) {
+	this._contentDirty = true;
+	this._layoutDirty = true;
+	if(scrollVal != null) {
+		this._pScrollVal = scrollVal;
+	}
+	if(forceUpdate) {
+		this.update();
+	}
+};
+/** @public
+* @ignore
+*/
+Scrollbar.prototype.invalidateContent = function () {
+	this._contentDirty = true;
+};
+/** Validates scrollbar-position against real content-size and pane-size
+* @public
+* @ignore
+* @param {number} contentSize
+* @return {boolean}
+*/
+Scrollbar.prototype.isScrollPosValid = function(contentSize) {
+	let scrollGap = contentSize - this.getPaneSize();
+	let pScrollVal = this._pScrollVal;
+	return (pScrollVal === 0) || ((pScrollVal > 0) &&
+		(scrollGap > 0) && (pScrollVal < scrollGap));
+};
+/** @public
+*/
+Scrollbar.prototype.flash = function () {
+	this.update();
+	this._flash();
+};
+
+/** @protected
+* @ignore
+* @param {number} pScrollVal
+*/
+Scrollbar.prototype._scroll = function (pScrollVal) {
+	this._scrollTo(this._pScrollVal + pScrollVal);
+};
+/** @protected
+* @ignore
+* @param {number} pScrollVal Scroll value of the pane (not the track)
+* @param {boolean=} layoutChanged Force triggering scroll event
+*/
+Scrollbar.prototype._scrollTo = function (pScrollVal, layoutChanged) {
+	if(!this._active && !layoutChanged) {
+		return;
+	}
+	pScrollVal = this._calcProperScrollValue(pScrollVal);
+
+	let dirty = false;
+	if(this._pScrollVal !== pScrollVal) {
+		this._pScrollVal = pScrollVal; // Fix asynchronous of tracking issue
+		dirty = true;
+	}
+
+	this._setTrackScrollVal(pScrollVal);
+
+	if(dirty) {
+		if(layoutChanged) {
+			this._layoutChanged = true;
+		}
+		this._dispatchScrollEvent(null); // Event is fire synchronously
+	} else if(layoutChanged) {
+		this._dispatch("layoutChanged", {});
+	}
+};
+/** @private
+* @param {number} scrollVal
+* @return {number}
+*/
+Scrollbar.prototype._calcProperScrollValue = function (scrollVal) {
+	if(!scrollVal || scrollVal - 0.5 < 0) {
+		return 0;
+	}
+	if(this._tPercentVal >= 1 && Math.abs(this._pScrollVal - scrollVal) <= 2) {
+		return this._pScrollVal; // Zooming could cause recalculation errors, so we try to snap the value to the end of the scrollbar
+	}
+
+	let scrollGap = this.getScrollGap();
+	if(scrollGap <= 0) { // Scrollbar is disabled or inactive
+		return 0;
+	} else if(scrollVal + 0.5 >= scrollGap) {
+		return scrollGap;
+	}
+
+	let step = this._step;
+	if(step) { // Step scrolling
+		scrollVal = Math.round(scrollVal / step) * step;
+		if(scrollVal - step / 2 <= 0) {
+			return 0;
+		} else if(scrollVal + step / 2 >= scrollGap) {
+			return scrollGap;
+		}
+	}
+	return Math.round(scrollVal); // Scroll value can only be integers
+};
+/** @private
+* @param {number} tScrollVal Track scroll value
+* @return {number}
+*/
+Scrollbar.prototype._convertTrackToPane = function (tScrollVal) {
+	tScrollVal = Math.round(tScrollVal); // tScrollVal may not be an integer due to zooming
+
+	// Track scroll could be changed due to browser's zoom. We need to avoid unnecessary changes
+	let trackGap = this._getTrackGap();
+	if(this._tPercentVal >= 1) {
+		if(Math.abs(this._tScrollVal - tScrollVal) <= 5) {
+			tScrollVal = trackGap;
+		}
+	}
+
+	this._tScrollVal = tScrollVal;
+	this._tPercentVal = trackGap ? tScrollVal / trackGap : 0;
+
+	// Convert track value to pane value
+	let paneGap = this.getScrollGap();
+	let pScrollVal = (trackGap === paneGap) ? tScrollVal : this._tPercentVal * paneGap;
+	return pScrollVal;
+};
+/** @private
+* @param {number} pScrollVal Pane scroll value
+* @return {boolean} Return true, if there is any change to track value
+*/
+Scrollbar.prototype._setTrackScrollVal = function(pScrollVal) {
+	let trackGap = this._getTrackGap();
+	let tScrollVal = 0;
+	if(trackGap > 0) {
+		if(pScrollVal > 0) {
+			let paneGap = this.getScrollGap();
+			tScrollVal = (trackGap === paneGap) ? pScrollVal : pScrollVal / paneGap * trackGap;
+			tScrollVal = Math.round(tScrollVal); // Avoid calculation error due to fractions from conversion
+		}
+		if(tScrollVal >= trackGap) {
+			tScrollVal = trackGap;
+		}
+	}
+
+	if(tScrollVal !== this._tScrollVal) {
+		this._tScrollVal = tScrollVal;
+		this._tPercentVal = trackGap ? tScrollVal / trackGap : 0;
+
+		// Scroll event will be fired asynchronously, if there is any change
+		let track = this._element;
+		if(this._vertical) {
+			track.scrollTop = tScrollVal;
+		} else {
+			track.scrollLeft = tScrollVal;
+		}
+		return true;
+	}
+	return false;
+};
+/** Get gap between thumb and its track
+* @private
+* @return {number}
+*/
+Scrollbar.prototype._getTrackGap = function () {
+	let trackGap = this._tContentSize - this.getTrackSize();
+	return trackGap > 0 ? trackGap : 0;
+};
+
+/** @protected
+* @ignore
+* @return {number}
+*/
+Scrollbar.prototype._getScrollValue = function () {
+	return this._pScrollVal;
+};
+/** @protected
+* @ignore
+* @return {boolean}
+*/
+Scrollbar.prototype._isEndOfScroll = function () {
+	if(!this._active) {
+		return true; // TODO: Check if inactive state means end of scrolling
+	}
+
+	return this._pScrollVal >= this.getScrollGap();
+};
+/** @protected
+* @ignore
+* @return {boolean}
+*/
+Scrollbar.prototype._isStartOfScroll = function() {
+	return !this._pScrollVal;
+};
+/** @protected
+* @ignore
+* @param {number} diff
+* @return {boolean}
+*/
+Scrollbar.prototype._isOnEdge = function (diff) {
+	return (diff < 0 && this._isStartOfScroll()) || (diff > 0 && this._isEndOfScroll());
+};
+/** @protected
+* @ignore
+*/
+Scrollbar.prototype._flash = function () {
+	if(!this._active || !this._autoHideScrollbar) { return; }
+
+	if(this._fadingId) {
+		this._postponeFading = true;
+	} else {
+		if(this._element._fading) { // This can improve performance a lot
+			this._element.classList.remove("grid-scroll-fadeout");
+			this._element._fading = false;
+		}
+		this._fadingId = setTimeout(this._onStartFading, 1000);
+	}
+};
+
+/** @protected
+* @ignore
+*/
+Scrollbar.prototype._clearAllPanes = function() {
+	for (let i = this._panes.length; --i >= 0; ) {
+		this._panes[i].setParent(null);
+		let paneSlider = this._paneSliders[i];
+		paneSlider._content = paneSlider._columns = null;
+		let elem = paneSlider.getElement();
+		while (elem.firstChild !== null) {
+			elem.removeChild(elem.firstChild);
+		}
+	}
+};
+
+/** @public
+* @param {boolean=} opt_disabled
+*/
+Scrollbar.prototype.disableKeyboardInput = function (opt_disabled) {
+	if(opt_disabled === false) {
+		this._element.setAttribute("tabindex", "-1"); // tabindex makes the element focusable. The negative value exclude it from tab key navigation
+		this._element.addEventListener("keydown", this._onKeyDown, false);
+	} else {
+		this._element.removeAttribute("tabindex");
+		this._element.removeEventListener("keydown", this._onKeyDown, false);
+	}
+};
+/** @public
+* @param {boolean=} opt_disabled
+*/
+Scrollbar.prototype.disableTouchInput = function (opt_disabled) {
+	this._touchInput = (opt_disabled === false);
+};
+
+/** Set scrollbar autohide status If set to false, scrollbar will always be shown and no fading
+* @public
+* @param {boolean} hide true if autohide, false if not
+*/
+Scrollbar.prototype.setAutoHide = function (hide) {
+	this._autoHideScrollbar = hide;
+	if(!hide) { // Always show scrollbar
+		if(this._element._fading) {
+			this._element.classList.remove("grid-scroll-fadeout");
+			this._element._fading = false;
+		}
+		if(this._fadingId) {
+			clearTimeout(this._fadingId);
+			this._fadingId = 0;
+		}
+	}
+};
+
+/** Get scrollbar autohide status
+* @public
+* @return {boolean} true if autohide, false if not
+*/
+Scrollbar.prototype.getAutoHide = function () {
+	return this._autoHideScrollbar;
+};
+
+/** Set reference to other scrollbar. For internal use only
+* @public
+* @ignore
+* @param {Scrollbar} scrollbar Other scrollbar object
+*/
+Scrollbar.prototype.setOtherScrollbar = function(scrollbar){
+	this._otherScrollbar = scrollbar;
+};
+
+/** Set number of expected frozen footer count. For internal use only.
+* @public
+* @ignore
+* @param {number} num
+*/
+Scrollbar.prototype.setFooterCount = function(num){
+	this._footerCount = num;
+};
+
+/** @private
+* @return {boolean}
+*/
+Scrollbar.prototype._calcActiveState = function () {
+	if(this._enabled) {
+		if(this.getTrackSize() > 20) {
+			let paneSize = this.getPaneSize();
+			if(paneSize > 0) {
+				return (this._pContentSize - paneSize > 0);
+			}
+		}
+	}
+	return false;
+};
+/** @private
+*/
+Scrollbar.prototype._updateLayout = function () {
+	let active = this._calcActiveState();
+	if(active !== this._active) {
+		this._active = active;
+		this._onActiveStateChange();
+	}
+	if(!this._active) {
+		return;
+	}
+
+	let trackSize = this.getTrackSize();
+	let paneSize = this.getPaneSize();
+	this._tContentSize = this._pContentSize / paneSize * trackSize;
+	if (this._vertical) {
+		this._trackContent.style.height = this._tContentSize + "px";
+
+		this._element.style.height = trackSize + "px";
+		this._panes[0].setHeight(paneSize);
+	} else {
+		this._trackContent.style.width = this._tContentSize + "px";
+
+		this._element.style.width = trackSize + "px";
+		for (let i = this._panes.length; --i >= 0;) {
+			this._panes[i].setWidth(paneSize);
+		}
+	}
+
+	// Since track could be smaller, scrollVal needs to be updated. Also UI needs to be always updated too
+	this._scrollTo(this._pScrollVal, true); // Scroll event may be fired
+};
+
+/** @public
+* @ignore
+*/
+Scrollbar.prototype.resetPaneSize = function () {
+	let prop = (this._vertical) ? "height" : "width";
+	for (let i = this._panes.length; --i >= 0;) {
+		this._panes[i].setStyle(prop, "");
+	}
+};
+
+/** @private
+* @param {MouseEvent} e
+*/
+Scrollbar._preventVScrolling = function(e) {
+	e.currentTarget.scrollTop = 0;
+};
+/** @private
+* @param {MouseEvent} e
+*/
+Scrollbar._preventHScrolling = function(e) {
+	e.currentTarget.scrollLeft = 0;
+};
+
+/** @protected
+* @ignore
+* @param {number=} opt_at
+* @returns {ElementWrapper}
+*/
+Scrollbar.prototype._addPaneAt = function (opt_at) {
+	if(opt_at == null) {
+		opt_at = this._panes.length;
+	}
+
+	let pane = this._panes[opt_at];
+	if(!pane) {
+		pane = new ElementWrapper(document.createElement("div"));
+		pane.setClass("grid-pane");
+		if(this._vertical) {
+			pane.addClass("sections"); // The pane will host multiple sections
+			pane.listen("scroll", Scrollbar._preventVScrolling);
+		} else {
+			pane.addClass("columns"); // The pane will host multiple columns
+			pane.listen("scroll", Scrollbar._preventHScrolling);
+		}
+		if(!this._active) {
+			pane.addClass("scroll-disabled");
+		}
+		if(this._paneSize && this._active) {
+			let paneSize = this.getPaneSize();
+			if(this._vertical) {
+				pane.setHeight(paneSize);
+			} else {
+				pane.setWidth(paneSize);
+			}
+		}
+		pane.listen("touchstart", this._onTouchStart);
+		pane.listen("touchmove", this._onTouchMove);
+		pane.listen("touchend", this._onTouchEnd);
+		pane.listen("touchcancel", this._onTouchEnd);
+
+		let paneSlider = new ElementWrapper(document.createElement("div"));
+		paneSlider.setClass("grid-pane-slider");
+		paneSlider.setParent(pane);
+
+		this._panes[opt_at] = pane;
+		this._paneSliders[opt_at] = paneSlider;
+	}
+	return pane;
+};
+/** @private
+* @param {!Event} e
+*/
+Scrollbar.prototype._onStartFading = function (e) {
+	this._fadingId = 0;
+	if(!this._active) { return; }
+	if(this._postponeFading) {
+		this._postponeFading = false;
+		this._flash();
+	} else {
+		if(!this._element._fading) {
+			this._element.classList.add("grid-scroll-fadeout");
+			this._element._fading = true;
+		}
+	}
+};
+/** Scrolling from the UI
+* @private
+* @param {Object} e
+*/
+Scrollbar.prototype._onTrackScroll = function (e) {
+	if(!this._element) {
+		return; // Element has been disposed
+	}
+
+	let tScrollVal = (this._vertical) ? e.target["scrollTop"] : e.target["scrollLeft"];
+	let pScrollVal = this._convertTrackToPane(tScrollVal);
+
+	pScrollVal = this._calcProperScrollValue(pScrollVal);
+
+	if(pScrollVal !== this._pScrollVal) { // Prevent duplicate event firing
+		this._pScrollVal = pScrollVal;
+		this._dispatchScrollEvent(e);
+	}
+};
+
+/** @private
+*/
+Scrollbar.prototype._onRestingPosition = function () {
+	this._setSliderPosition(-this._pScrollVal, true);
+};
+/** @private
+* @param {number} scrollVal
+* @param {boolean=} resting
+*/
+Scrollbar.prototype._setSliderPosition = function (scrollVal, resting) {
+	let translateStr = "";
+	let relativeStr = "";
+	let direction = this._vertical ? "top" : "left";
+	if(scrollVal) {
+		if(resting) {
+			relativeStr = scrollVal + "px";
+		} else {
+			translateStr = this._vertical ? "translateY" : "translateX";
+			translateStr += "(" + scrollVal + "px)";
+			this._reverter.start();
+		}
+	}
+	for (let i = this._paneSliders.length; --i >= 0; ) {
+		let paneSlider = this._paneSliders[i];
+		let paneSliderStyle = paneSlider.getElement().style;
+		if(paneSlider._titleSection) {
+			paneSliderStyle[direction] = scrollVal + "px";
+		} else {
+			paneSliderStyle.transform = translateStr;
+			paneSliderStyle[direction] = relativeStr; // WORKAROUND: GRID-402
+		}
+	}
+	if(resting) {
+		this._dispatch("scrollEnd", {});
+	} else {
+		this._dispatch("scrollStart", {});
+	}
+};
+/** @private
+* @param {Object=} e
+*/
+Scrollbar.prototype._dispatchScrollEvent = function (e) {
+	this._setSliderPosition(-this._pScrollVal, false);
+
+	this._flash(); // Slider has been updated. Flash the track's UI
+
+	// Fire scroll event synchronously
+	if(!this._isEventDispatching("scroll")) { // VScrollbar may change scroll value
+		if(!e) {
+			let target = this._element;
+			e = {
+				"currentTarget": target,
+				"srcElement": target,
+				"target": target
+			};
+		}
+		e["layoutChanged"] = this._layoutChanged;	// Do not close the editor - the scroll is due to a layout change - this a not an actual scroll - see QuoteList.js (monitor-grid)
+		if(this._vertical) {
+			e["scrollTop"] = this._pScrollVal; // For backward compatibility
+		} else {
+			e["scrollLeft"] = this._pScrollVal;
+		}
+
+		this._dispatch("scroll", e);
+	}
+};
+/** @private
+* @param {!Event} e
+*/
+Scrollbar.prototype._onKeyDown = function (e) {
+	if (this._isFrozen) {
+		Util._preventDefault(e);
+		return;
+	}
+	if (!this._active) { return; }
+
+	let isArrow = false;
+	if(this._vertical) {
+		isArrow = (e.keyCode === 38 || e.keyCode === 40);
+	} else {
+		isArrow = (e.keyCode === 37 || e.keyCode === 39);
+	}
+
+	if(isArrow) {
+		let scrollGap = this.getScrollGap();
+		let scrollVal = Math.round(scrollGap * 0.07);
+		if(scrollVal < 10) {
+			scrollVal = 10;
+		} else if(scrollVal > 100) {
+			scrollVal = 100;
+		}
+		if(e.keyCode === 37 || e.keyCode === 38) { // Left or Up
+			scrollVal *= -1;
+		}
+		this._scroll(scrollVal);
+		Util._preventDefault(e);
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+Scrollbar.prototype._onTouchStart = function (e) {
+	if (this._isFrozen) {
+		Util._preventDefault(e);
+		return;
+	}
+	if(this._swiping || !this._touchInput) {
+		return;
+	}
+	if(this._vertical) { // Vertical scrollbar is optimized, so that it will not be activated on row change event
+		this.update();
+	}
+	this._flash();
+
+	if(this._smoothingId) {
+		clearInterval(this._smoothingId);
+		this._smoothingId = 0;
+	}
+
+	this._swiping = true;
+	this._getTouchInfo(e, this._startPos);
+};
+/** @private
+* @param {Event} e
+*/
+Scrollbar.prototype._onTouchMove = function (e) {
+	let t = this;
+
+	if (t._isFrozen) {
+		Util._preventDefault(e);
+		return;
+	}
+	// Stop scrolling when scrollbar becomes inactive
+	if(!t._swiping || !t._active || !t._touchInput) {
+		return;
+	}
+
+	if(e.touches && e.touches.length > 1) {
+		return;
+	}
+
+	let sp = t._startPos;
+	let ep = t._endPos;
+	t._getTouchInfo(e, ep);
+	let diff = (this._vertical) ? sp["y"] - ep["y"] : sp["x"] - ep["x"];
+
+	if(diff > -5 && diff < 5) {
+		return;
+	} else if(t._isOnEdge(diff)) {
+		return;
+	}
+
+	if(t._touchDrag) {
+		t._scrollTo(sp["scrollValue"] + diff);
+	} else {
+		let duration = ep["timeStamp"] - sp["timeStamp"];
+		if(duration > 30) {
+			t._touchDrag = true;
+		}
+	}
+
+	if(e.cancelable) {
+		e.preventDefault();
+	}
+};
+/** @private
+* @param {Event} e
+*/
+Scrollbar.prototype._onTouchEnd = function (e) {
+	if (this._isFrozen) {
+		Util._preventDefault(e);
+		return;
+	}
+	this._swiping = false;
+	if(this._touchDrag) {
+		this._touchDrag = false;
+
+		if(e.cancelable) {
+			e.preventDefault();
+		}
+
+		if(this._smoothing && !this._smoothingId) {
+			let sp = this._startPos;
+			let ep = this._getTouchInfo(e, this._endPos);
+			let duration = ep["timeStamp"] - sp["timeStamp"];
+			let diff = (this._vertical) ? (sp["y"] - ep["y"]) : (sp["x"] - ep["x"]);
+			this._smoothingSpeed = diff * 30 / duration; // pixel per milliseconds
+			if(this._smoothingSpeed > 10 || this._smoothingSpeed < -10) {
+				this._smoothingId = setInterval(this._smoothScroll, 25);
+			}
+		}
+	}
+};
+/** @private
+* @param {Event} e
+* @param {Object=} obj
+* @return {!Object}
+*/
+Scrollbar.prototype._getTouchInfo = function(e, obj) {
+	let touch = e.changedTouches[0];
+	if(!obj) {
+		obj = {};
+	}
+	obj["x"] = touch.pageX;
+	obj["y"] = touch.pageY;
+	obj["timeStamp"] = e.timeStamp;
+	obj["scrollValue"] = this._getScrollValue();
+	return obj;
+};
+/** @private
+*/
+Scrollbar.prototype._smoothScroll = function() {
+	let ss = this._smoothingSpeed;
+	ss = (ss * 0.9) | 0; // OR operator is not equivalent to Math.floor()
+	this._smoothingSpeed = ss;
+	if(ss > 1 || ss < -1) {
+		this._scroll(ss);
+	} else {
+		clearInterval(this._smoothingId);
+		this._smoothingId = 0;
+	}
+};
+
+/** @public
+* @param {boolean=} opt_disabled
+*/
+Scrollbar.prototype.disableMouseWheel = function (opt_disabled) {
+	if(opt_disabled === false) {
+		this.setMouseWheelLogic(this._mouseWheelLogic || this._onMouseWheel);
+	} else {
+		this.setMouseWheelLogic(null);
+	}
+};
+/** @public
+* @ignore
+* @param {Function} handler
+*/
+Scrollbar.prototype.setMouseWheelLogic = function (handler) {
+	this.removeWheelListener(this._parentNode);
+
+	this._mouseWheelLogic = handler;
+
+	if(this._mouseWheelLogic) {
+		// Wheel listener should be added to parentNode (utilizing event bubbling)
+		this.addWheelListener(this._parentNode);
+	}
+};
+/** @public
+* @param {Element} elem Element that will trigger scrolling by mouse wheel
+*/
+Scrollbar.prototype.addWheelListener = function (elem) {
+	if(elem && this._mouseWheelLogic) {
+		// Note that this wheel event can not use passive options ({passive: false}) because of the need to prevent default behavior
+		elem.addEventListener("wheel", this._mouseWheelLogic, false);
+	}
+};
+/** @public
+* @param {Element} elem Element that will trigger scrolling by mouse wheel
+*/
+Scrollbar.prototype.removeWheelListener = function (elem) {
+	if(elem && this._mouseWheelLogic) {
+		elem.removeEventListener("wheel", this._mouseWheelLogic, false);
+	}
+};
+/** @public
+* @param {string} val
+*/
+Scrollbar.prototype.setMouseWheelSpeed = function (val) {
+	this._wheelScrolling = typeof val == "string" ? val : "";
+};
+/** @public
+* @ignore
+* @return {string}
+*/
+Scrollbar.prototype.getMouseWheelSpeed = function () {
+	return this._wheelScrolling;
+};
+/** @public
+* @return {function(Event)} Mouse wheel logic that is attached to this instance
+*/
+Scrollbar.prototype.getDefaultMouseWheelLogic = function () {
+	return this._onMouseWheel;
+};
+/** TODO: Support mouse wheel (currently works only touchpad wheel)
+* @private
+* @param {Event} e
+*/
+Scrollbar.prototype._onMouseWheel = function (e) {
+
+	// Blacklist for prevent triggering the scrollbar when the dialog is opened.
+	if(e.target.opened) { // get attribute method doesn't work in elf element
+		return;
+	}
+
+	if (this._isFrozen) {
+		Util._preventDefault(e);
+		return;
+	}
+	if(e.ctrlKey || e.altKey ) { return; }
+	if (!this.isActive()) { return; }
+
+	let delta = (this._vertical) ? e["deltaY"] : e["deltaX"];
+
+	if(!delta) { return; }
+
+	if(this._isOnEdge(delta)) { return; }
+
+	// We must prevent on a passive event such as "wheel" to prevent default scrolling of the window
+	Util._preventDefault(e);
+
+	// Only Firefox implements deltaMode. All other browsers use DOM_DELTA_PIXEL in most of the cases
+	// See https://github.com/w3c/uievents/issues/181 and https://github.com/svgdotjs/svg.panzoom.js/issues/67
+	// Hence, we need to normalize the delta value, so every browser have similar mousewheel behaviors.
+	if(e.deltaMode) { // https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode
+		delta = (delta > 0) ? 100 : -100; // WARNING: We use estimated value, since there is no simple way to calculate actual pixel value
+	}
+
+	if(this._wheelScrolling != "linear") {
+		let scrollSize = this.getContentSize();
+		if(scrollSize >= 4000) { // Scaling for large content
+			delta *= 1 + scrollSize / 4000 | 0; // If scrollSize == 4000, delta *= 2. If scrollSize == 8000, delta *= 3
+		}
+	}
+
+	this.update();
+	this._scroll(delta);
+};
+/** @public
+* @param {number} px
+*/
+Scrollbar.prototype.setScrollingStep = function (px) {
+	this._step = (px > 0) ? px : 0;
+};
+
+/** prevent all scrollbar action using stopPropagation and preventDefault
+* @public
+* @param {boolean=} frozen=true
+* @return {boolean} return previous frozen status
+*/
+Scrollbar.prototype.freezeScrolling = function (frozen) {
+	let prev = this._isFrozen;
+	this._isFrozen = frozen !== false;
+	return prev;
+};
+/** @public
+*/
+Scrollbar.prototype.restoreTrackPosition = function () {
+	// Scroll event will be fired asynchronously, if there is any change
+	let track = this._element;
+	if(this._vertical) {
+		track.scrollTop = this._tScrollVal;
+		if(track.scrollTop){
+			this._tScrollVal = track.scrollTop; //Check to ensure that cache equal to element's scroll
+		}
+	}
+	//TODO: handle restore scrollLeft for hscroll
+};
+
+Scrollbar._proto = Scrollbar.prototype;
+
+export default Scrollbar;
+export { Scrollbar };