123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423 |
- import { getWindow } from 'ssr-window';
- import $ from '../../shared/dom.js';
- import { now, nextTick } from '../../shared/utils.js';
- export default function Mousewheel(_ref) {
- let {
- swiper,
- extendParams,
- on,
- emit
- } = _ref;
- const window = getWindow();
- extendParams({
- mousewheel: {
- enabled: false,
- releaseOnEdges: false,
- invert: false,
- forceToAxis: false,
- sensitivity: 1,
- eventsTarget: 'container',
- thresholdDelta: null,
- thresholdTime: null
- }
- });
- swiper.mousewheel = {
- enabled: false
- };
- let timeout;
- let lastScrollTime = now();
- let lastEventBeforeSnap;
- const recentWheelEvents = [];
- function normalize(e) {
-
- const PIXEL_STEP = 10;
- const LINE_HEIGHT = 40;
- const PAGE_HEIGHT = 800;
- let sX = 0;
- let sY = 0;
- let pX = 0;
- let pY = 0;
-
- if ('detail' in e) {
- sY = e.detail;
- }
- if ('wheelDelta' in e) {
- sY = -e.wheelDelta / 120;
- }
- if ('wheelDeltaY' in e) {
- sY = -e.wheelDeltaY / 120;
- }
- if ('wheelDeltaX' in e) {
- sX = -e.wheelDeltaX / 120;
- }
- if ('axis' in e && e.axis === e.HORIZONTAL_AXIS) {
- sX = sY;
- sY = 0;
- }
- pX = sX * PIXEL_STEP;
- pY = sY * PIXEL_STEP;
- if ('deltaY' in e) {
- pY = e.deltaY;
- }
- if ('deltaX' in e) {
- pX = e.deltaX;
- }
- if (e.shiftKey && !pX) {
-
- pX = pY;
- pY = 0;
- }
- if ((pX || pY) && e.deltaMode) {
- if (e.deltaMode === 1) {
-
- pX *= LINE_HEIGHT;
- pY *= LINE_HEIGHT;
- } else {
-
- pX *= PAGE_HEIGHT;
- pY *= PAGE_HEIGHT;
- }
- }
- if (pX && !sX) {
- sX = pX < 1 ? -1 : 1;
- }
- if (pY && !sY) {
- sY = pY < 1 ? -1 : 1;
- }
- return {
- spinX: sX,
- spinY: sY,
- pixelX: pX,
- pixelY: pY
- };
- }
- function handleMouseEnter() {
- if (!swiper.enabled) return;
- swiper.mouseEntered = true;
- }
- function handleMouseLeave() {
- if (!swiper.enabled) return;
- swiper.mouseEntered = false;
- }
- function animateSlider(newEvent) {
- if (swiper.params.mousewheel.thresholdDelta && newEvent.delta < swiper.params.mousewheel.thresholdDelta) {
-
- return false;
- }
- if (swiper.params.mousewheel.thresholdTime && now() - lastScrollTime < swiper.params.mousewheel.thresholdTime) {
-
- return false;
- }
-
-
- if (newEvent.delta >= 6 && now() - lastScrollTime < 60) {
-
- return true;
- }
-
-
-
-
-
-
-
-
-
-
-
- if (newEvent.direction < 0) {
- if ((!swiper.isEnd || swiper.params.loop) && !swiper.animating) {
- swiper.slideNext();
- emit('scroll', newEvent.raw);
- }
- } else if ((!swiper.isBeginning || swiper.params.loop) && !swiper.animating) {
- swiper.slidePrev();
- emit('scroll', newEvent.raw);
- }
- lastScrollTime = new window.Date().getTime();
- return false;
- }
- function releaseScroll(newEvent) {
- const params = swiper.params.mousewheel;
- if (newEvent.direction < 0) {
- if (swiper.isEnd && !swiper.params.loop && params.releaseOnEdges) {
-
- return true;
- }
- } else if (swiper.isBeginning && !swiper.params.loop && params.releaseOnEdges) {
-
- return true;
- }
- return false;
- }
- function handle(event) {
- let e = event;
- let disableParentSwiper = true;
- if (!swiper.enabled) return;
- const params = swiper.params.mousewheel;
- if (swiper.params.cssMode) {
- e.preventDefault();
- }
- let target = swiper.$el;
- if (swiper.params.mousewheel.eventsTarget !== 'container') {
- target = $(swiper.params.mousewheel.eventsTarget);
- }
- if (!swiper.mouseEntered && !target[0].contains(e.target) && !params.releaseOnEdges) return true;
- if (e.originalEvent) e = e.originalEvent;
- let delta = 0;
- const rtlFactor = swiper.rtlTranslate ? -1 : 1;
- const data = normalize(e);
- if (params.forceToAxis) {
- if (swiper.isHorizontal()) {
- if (Math.abs(data.pixelX) > Math.abs(data.pixelY)) delta = -data.pixelX * rtlFactor;else return true;
- } else if (Math.abs(data.pixelY) > Math.abs(data.pixelX)) delta = -data.pixelY;else return true;
- } else {
- delta = Math.abs(data.pixelX) > Math.abs(data.pixelY) ? -data.pixelX * rtlFactor : -data.pixelY;
- }
- if (delta === 0) return true;
- if (params.invert) delta = -delta;
- let positions = swiper.getTranslate() + delta * params.sensitivity;
- if (positions >= swiper.minTranslate()) positions = swiper.minTranslate();
- if (positions <= swiper.maxTranslate()) positions = swiper.maxTranslate();
-
-
-
-
-
-
- disableParentSwiper = swiper.params.loop ? true : !(positions === swiper.minTranslate() || positions === swiper.maxTranslate());
- if (disableParentSwiper && swiper.params.nested) e.stopPropagation();
- if (!swiper.params.freeMode || !swiper.params.freeMode.enabled) {
-
- const newEvent = {
- time: now(),
- delta: Math.abs(delta),
- direction: Math.sign(delta),
- raw: event
- };
- if (recentWheelEvents.length >= 2) {
- recentWheelEvents.shift();
- }
- const prevEvent = recentWheelEvents.length ? recentWheelEvents[recentWheelEvents.length - 1] : undefined;
- recentWheelEvents.push(newEvent);
-
-
-
-
-
- if (prevEvent) {
- if (newEvent.direction !== prevEvent.direction || newEvent.delta > prevEvent.delta || newEvent.time > prevEvent.time + 150) {
- animateSlider(newEvent);
- }
- } else {
- animateSlider(newEvent);
- }
-
- if (releaseScroll(newEvent)) {
- return true;
- }
- } else {
-
-
-
-
-
- const newEvent = {
- time: now(),
- delta: Math.abs(delta),
- direction: Math.sign(delta)
- };
- const ignoreWheelEvents = lastEventBeforeSnap && newEvent.time < lastEventBeforeSnap.time + 500 && newEvent.delta <= lastEventBeforeSnap.delta && newEvent.direction === lastEventBeforeSnap.direction;
- if (!ignoreWheelEvents) {
- lastEventBeforeSnap = undefined;
- if (swiper.params.loop) {
- swiper.loopFix();
- }
- let position = swiper.getTranslate() + delta * params.sensitivity;
- const wasBeginning = swiper.isBeginning;
- const wasEnd = swiper.isEnd;
- if (position >= swiper.minTranslate()) position = swiper.minTranslate();
- if (position <= swiper.maxTranslate()) position = swiper.maxTranslate();
- swiper.setTransition(0);
- swiper.setTranslate(position);
- swiper.updateProgress();
- swiper.updateActiveIndex();
- swiper.updateSlidesClasses();
- if (!wasBeginning && swiper.isBeginning || !wasEnd && swiper.isEnd) {
- swiper.updateSlidesClasses();
- }
- if (swiper.params.freeMode.sticky) {
-
-
-
-
-
-
-
-
-
-
-
- clearTimeout(timeout);
- timeout = undefined;
- if (recentWheelEvents.length >= 15) {
- recentWheelEvents.shift();
- }
- const prevEvent = recentWheelEvents.length ? recentWheelEvents[recentWheelEvents.length - 1] : undefined;
- const firstEvent = recentWheelEvents[0];
- recentWheelEvents.push(newEvent);
- if (prevEvent && (newEvent.delta > prevEvent.delta || newEvent.direction !== prevEvent.direction)) {
-
- recentWheelEvents.splice(0);
- } else if (recentWheelEvents.length >= 15 && newEvent.time - firstEvent.time < 500 && firstEvent.delta - newEvent.delta >= 1 && newEvent.delta <= 6) {
-
-
-
-
-
-
- const snapToThreshold = delta > 0 ? 0.8 : 0.2;
- lastEventBeforeSnap = newEvent;
- recentWheelEvents.splice(0);
- timeout = nextTick(() => {
- swiper.slideToClosest(swiper.params.speed, true, undefined, snapToThreshold);
- }, 0);
- }
- if (!timeout) {
-
-
-
- timeout = nextTick(() => {
- const snapToThreshold = 0.5;
- lastEventBeforeSnap = newEvent;
- recentWheelEvents.splice(0);
- swiper.slideToClosest(swiper.params.speed, true, undefined, snapToThreshold);
- }, 500);
- }
- }
- if (!ignoreWheelEvents) emit('scroll', e);
- if (swiper.params.autoplay && swiper.params.autoplayDisableOnInteraction) swiper.autoplay.stop();
- if (position === swiper.minTranslate() || position === swiper.maxTranslate()) return true;
- }
- }
- if (e.preventDefault) e.preventDefault();else e.returnValue = false;
- return false;
- }
- function events(method) {
- let target = swiper.$el;
- if (swiper.params.mousewheel.eventsTarget !== 'container') {
- target = $(swiper.params.mousewheel.eventsTarget);
- }
- target[method]('mouseenter', handleMouseEnter);
- target[method]('mouseleave', handleMouseLeave);
- target[method]('wheel', handle);
- }
- function enable() {
- if (swiper.params.cssMode) {
- swiper.wrapperEl.removeEventListener('wheel', handle);
- return true;
- }
- if (swiper.mousewheel.enabled) return false;
- events('on');
- swiper.mousewheel.enabled = true;
- return true;
- }
- function disable() {
- if (swiper.params.cssMode) {
- swiper.wrapperEl.addEventListener(event, handle);
- return true;
- }
- if (!swiper.mousewheel.enabled) return false;
- events('off');
- swiper.mousewheel.enabled = false;
- return true;
- }
- on('init', () => {
- if (!swiper.params.mousewheel.enabled && swiper.params.cssMode) {
- disable();
- }
- if (swiper.params.mousewheel.enabled) enable();
- });
- on('destroy', () => {
- if (swiper.params.cssMode) {
- enable();
- }
- if (swiper.mousewheel.enabled) disable();
- });
- Object.assign(swiper.mousewheel, {
- enable,
- disable
- });
- }
|