path: root/library/Sortable/plugins/AutoScroll/AutoScroll.js

import {
	on,
	off,
	css,
	throttle,
	cancelThrottle,
	scrollBy,
	getParentAutoScrollElement,
	expando,
	getRect,
	getWindowScrollingElement
} from '../../src/utils.js';

import Sortable from '../../src/Sortable.js';

import { Edge, IE11OrLess, Safari } from '../../src/BrowserInfo.js';

let autoScrolls = [],
	scrollEl,
	scrollRootEl,
	scrolling = false,
	lastAutoScrollX,
	lastAutoScrollY,
	touchEvt,
	pointerElemChangedInterval;

function AutoScrollPlugin() {

	function AutoScroll() {
		this.defaults = {
			scroll: true,
			forceAutoScrollFallback: false,
			scrollSensitivity: 30,
			scrollSpeed: 10,
			bubbleScroll: true
		};

		// Bind all private methods
		for (let fn in this) {
			if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
				this[fn] = this[fn].bind(this);
			}
		}
	}

	AutoScroll.prototype = {
		dragStarted({ originalEvent }) {
			if (this.sortable.nativeDraggable) {
				on(document, 'dragover', this._handleAutoScroll);
			} else {
				if (this.options.supportPointer) {
					on(document, 'pointermove', this._handleFallbackAutoScroll);
				} else if (originalEvent.touches) {
					on(document, 'touchmove', this._handleFallbackAutoScroll);
				} else {
					on(document, 'mousemove', this._handleFallbackAutoScroll);
				}
			}
		},

		dragOverCompleted({ originalEvent }) {
			// For when bubbling is canceled and using fallback (fallback 'touchmove' always reached)
			if (!this.options.dragOverBubble && !originalEvent.rootEl) {
				this._handleAutoScroll(originalEvent);
			}
		},

		drop() {
			if (this.sortable.nativeDraggable) {
				off(document, 'dragover', this._handleAutoScroll);
			} else {
				off(document, 'pointermove', this._handleFallbackAutoScroll);
				off(document, 'touchmove', this._handleFallbackAutoScroll);
				off(document, 'mousemove', this._handleFallbackAutoScroll);
			}

			clearPointerElemChangedInterval();
			clearAutoScrolls();
			cancelThrottle();
		},

		nulling() {
			touchEvt =
			scrollRootEl =
			scrollEl =
			scrolling =
			pointerElemChangedInterval =
			lastAutoScrollX =
			lastAutoScrollY = null;

			autoScrolls.length = 0;
		},

		_handleFallbackAutoScroll(evt) {
			this._handleAutoScroll(evt, true);
		},

		_handleAutoScroll(evt, fallback) {
			const x = (evt.touches ? evt.touches[0] : evt).clientX,
				y = (evt.touches ? evt.touches[0] : evt).clientY,

				elem = document.elementFromPoint(x, y);

			touchEvt = evt;

			// IE does not seem to have native autoscroll,
			// Edge's autoscroll seems too conditional,
			// MACOS Safari does not have autoscroll,
			// Firefox and Chrome are good
			if (fallback || this.options.forceAutoScrollFallback || Edge || IE11OrLess || Safari) {
				autoScroll(evt, this.options, elem, fallback);

				// Listener for pointer element change
				let ogElemScroller = getParentAutoScrollElement(elem, true);
				if (
					scrolling &&
					(
						!pointerElemChangedInterval ||
						x !== lastAutoScrollX ||
						y !== lastAutoScrollY
					)
				) {
					pointerElemChangedInterval && clearPointerElemChangedInterval();
					// Detect for pointer elem change, emulating native DnD behaviour
					pointerElemChangedInterval = setInterval(() => {
						let newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true);
						if (newElem !== ogElemScroller) {
							ogElemScroller = newElem;
							clearAutoScrolls();
						}
						autoScroll(evt, this.options, newElem, fallback);
					}, 10);
					lastAutoScrollX = x;
					lastAutoScrollY = y;
				}
			} else {
				// if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll
				if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) {
					clearAutoScrolls();
					return;
				}
				autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false);
			}
		}
	};

	return Object.assign(AutoScroll, {
		pluginName: 'scroll',
		initializeByDefault: true
	});
}

function clearAutoScrolls() {
	autoScrolls.forEach(function(autoScroll) {
		clearInterval(autoScroll.pid);
	});
	autoScrolls = [];
}

function clearPointerElemChangedInterval() {
	clearInterval(pointerElemChangedInterval);
}


const autoScroll = throttle(function(evt, options, rootEl, isFallback) {
	// Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521
	if (!options.scroll) return;
	const x = (evt.touches ? evt.touches[0] : evt).clientX,
		y = (evt.touches ? evt.touches[0] : evt).clientY,
		sens = options.scrollSensitivity,
		speed = options.scrollSpeed,
		winScroller = getWindowScrollingElement();

	let scrollThisInstance = false,
		scrollCustomFn;

	// New scroll root, set scrollEl
	if (scrollRootEl !== rootEl) {
		scrollRootEl = rootEl;

		clearAutoScrolls();

		scrollEl = options.scroll;
		scrollCustomFn = options.scrollFn;

		if (scrollEl === true) {
			scrollEl = getParentAutoScrollElement(rootEl, true);
		}
	}


	let layersOut = 0;
	let currentParent = scrollEl;
	do {
		let	el = currentParent,
			rect = getRect(el),

			top = rect.top,
			bottom = rect.bottom,
			left = rect.left,
			right = rect.right,

			width = rect.width,
			height = rect.height,

			canScrollX,
			canScrollY,

			scrollWidth = el.scrollWidth,
			scrollHeight = el.scrollHeight,

			elCSS = css(el),

			scrollPosX = el.scrollLeft,
			scrollPosY = el.scrollTop;


		if (el === winScroller) {
			canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible');
			canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible');
		} else {
			canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll');
			canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll');
		}

		let vx = canScrollX && (Math.abs(right - x) <= sens && (scrollPosX + width) < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX);
		let vy = canScrollY && (Math.abs(bottom - y) <= sens && (scrollPosY + height) < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY);


		if (!autoScrolls[layersOut]) {
			for (let i = 0; i <= layersOut; i++) {
				if (!autoScrolls[i]) {
					autoScrolls[i] = {};
				}
			}
		}

		if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) {
			autoScrolls[layersOut].el = el;
			autoScrolls[layersOut].vx = vx;
			autoScrolls[layersOut].vy = vy;

			clearInterval(autoScrolls[layersOut].pid);

			if (vx != 0 || vy != 0) {
				scrollThisInstance = true;
				/* jshint loopfunc:true */
				autoScrolls[layersOut].pid = setInterval((function () {
					// emulate drag over during autoscroll (fallback), emulating native DnD behaviour
					if (isFallback && this.layer === 0) {
						Sortable.active._onTouchMove(touchEvt); // To move ghost if it is positioned absolutely
					}
					let scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0;
					let scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0;

					if (typeof(scrollCustomFn) === 'function') {
						if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt, autoScrolls[this.layer].el) !== 'continue') {
							return;
						}
					}

					scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY);
				}).bind({layer: layersOut}), 24);
			}
		}
		layersOut++;
	} while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false)));
	scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not
}, 30);

export default AutoScrollPlugin;