'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); };