142 lines
4.3 KiB
JavaScript
142 lines
4.3 KiB
JavaScript
|
'use strict';
|
||
|
|
||
|
var instances = require('../instances');
|
||
|
var updateGeometry = require('../update-geometry');
|
||
|
var updateScroll = require('../update-scroll');
|
||
|
|
||
|
function bindMouseWheelHandler(element, i) {
|
||
|
var shouldPrevent = false;
|
||
|
|
||
|
function shouldPreventDefault(deltaX, deltaY) {
|
||
|
var scrollTop = element.scrollTop;
|
||
|
if (deltaX === 0) {
|
||
|
if (!i.scrollbarYActive) {
|
||
|
return false;
|
||
|
}
|
||
|
if ((scrollTop === 0 && deltaY > 0) || (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)) {
|
||
|
return !i.settings.wheelPropagation;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var scrollLeft = element.scrollLeft;
|
||
|
if (deltaY === 0) {
|
||
|
if (!i.scrollbarXActive) {
|
||
|
return false;
|
||
|
}
|
||
|
if ((scrollLeft === 0 && deltaX < 0) || (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)) {
|
||
|
return !i.settings.wheelPropagation;
|
||
|
}
|
||
|
}
|
||
|
return true;
|
||
|
}
|
||
|
|
||
|
function getDeltaFromEvent(e) {
|
||
|
var deltaX = e.deltaX;
|
||
|
var deltaY = -1 * e.deltaY;
|
||
|
|
||
|
if (typeof deltaX === "undefined" || typeof deltaY === "undefined") {
|
||
|
// OS X Safari
|
||
|
deltaX = -1 * e.wheelDeltaX / 6;
|
||
|
deltaY = e.wheelDeltaY / 6;
|
||
|
}
|
||
|
|
||
|
if (e.deltaMode && e.deltaMode === 1) {
|
||
|
// Firefox in deltaMode 1: Line scrolling
|
||
|
deltaX *= 10;
|
||
|
deltaY *= 10;
|
||
|
}
|
||
|
|
||
|
if (deltaX !== deltaX && deltaY !== deltaY/* NaN checks */) {
|
||
|
// IE in some mouse drivers
|
||
|
deltaX = 0;
|
||
|
deltaY = e.wheelDelta;
|
||
|
}
|
||
|
|
||
|
if (e.shiftKey) {
|
||
|
// reverse axis with shift key
|
||
|
return [-deltaY, -deltaX];
|
||
|
}
|
||
|
return [deltaX, deltaY];
|
||
|
}
|
||
|
|
||
|
function shouldBeConsumedByChild(deltaX, deltaY) {
|
||
|
var child = element.querySelector('textarea:hover, select[multiple]:hover, .ps-child:hover');
|
||
|
if (child) {
|
||
|
if (!window.getComputedStyle(child).overflow.match(/(scroll|auto)/)) {
|
||
|
// if not scrollable
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
var maxScrollTop = child.scrollHeight - child.clientHeight;
|
||
|
if (maxScrollTop > 0) {
|
||
|
if (!(child.scrollTop === 0 && deltaY > 0) && !(child.scrollTop === maxScrollTop && deltaY < 0)) {
|
||
|
return true;
|
||
|
}
|
||
|
}
|
||
|
var maxScrollLeft = child.scrollLeft - child.clientWidth;
|
||
|
if (maxScrollLeft > 0) {
|
||
|
if (!(child.scrollLeft === 0 && deltaX < 0) && !(child.scrollLeft === maxScrollLeft && deltaX > 0)) {
|
||
|
return true;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
function mousewheelHandler(e) {
|
||
|
var delta = getDeltaFromEvent(e);
|
||
|
|
||
|
var deltaX = delta[0];
|
||
|
var deltaY = delta[1];
|
||
|
|
||
|
if (shouldBeConsumedByChild(deltaX, deltaY)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
shouldPrevent = false;
|
||
|
if (!i.settings.useBothWheelAxes) {
|
||
|
// deltaX will only be used for horizontal scrolling and deltaY will
|
||
|
// only be used for vertical scrolling - this is the default
|
||
|
updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
|
||
|
updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
|
||
|
} else if (i.scrollbarYActive && !i.scrollbarXActive) {
|
||
|
// only vertical scrollbar is active and useBothWheelAxes option is
|
||
|
// active, so let's scroll vertical bar using both mouse wheel axes
|
||
|
if (deltaY) {
|
||
|
updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
|
||
|
} else {
|
||
|
updateScroll(element, 'top', element.scrollTop + (deltaX * i.settings.wheelSpeed));
|
||
|
}
|
||
|
shouldPrevent = true;
|
||
|
} else if (i.scrollbarXActive && !i.scrollbarYActive) {
|
||
|
// useBothWheelAxes and only horizontal bar is active, so use both
|
||
|
// wheel axes for horizontal bar
|
||
|
if (deltaX) {
|
||
|
updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
|
||
|
} else {
|
||
|
updateScroll(element, 'left', element.scrollLeft - (deltaY * i.settings.wheelSpeed));
|
||
|
}
|
||
|
shouldPrevent = true;
|
||
|
}
|
||
|
|
||
|
updateGeometry(element);
|
||
|
|
||
|
shouldPrevent = (shouldPrevent || shouldPreventDefault(deltaX, deltaY));
|
||
|
if (shouldPrevent) {
|
||
|
e.stopPropagation();
|
||
|
e.preventDefault();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (typeof window.onwheel !== "undefined") {
|
||
|
i.event.bind(element, 'wheel', mousewheelHandler);
|
||
|
} else if (typeof window.onmousewheel !== "undefined") {
|
||
|
i.event.bind(element, 'mousewheel', mousewheelHandler);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
module.exports = function (element) {
|
||
|
var i = instances.get(element);
|
||
|
bindMouseWheelHandler(element, i);
|
||
|
};
|