123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366 |
- import { g as getDocument } from '../shared/ssr-window.esm.mjs';
- import { m as makeElementsArray, i as classesToTokens, c as createElement, n as nextTick, b as elementOffset } from '../shared/utils.mjs';
- import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';
- import { c as classesToSelector } from '../shared/classes-to-selector.mjs';
- function Scrollbar(_ref) {
- let {
- swiper,
- extendParams,
- on,
- emit
- } = _ref;
- const document = getDocument();
- let isTouched = false;
- let timeout = null;
- let dragTimeout = null;
- let dragStartPos;
- let dragSize;
- let trackSize;
- let divider;
- extendParams({
- scrollbar: {
- el: null,
- dragSize: 'auto',
- hide: false,
- draggable: false,
- snapOnRelease: true,
- lockClass: 'swiper-scrollbar-lock',
- dragClass: 'swiper-scrollbar-drag',
- scrollbarDisabledClass: 'swiper-scrollbar-disabled',
- horizontalClass: `swiper-scrollbar-horizontal`,
- verticalClass: `swiper-scrollbar-vertical`
- }
- });
- swiper.scrollbar = {
- el: null,
- dragEl: null
- };
- function setTranslate() {
- if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
- const {
- scrollbar,
- rtlTranslate: rtl
- } = swiper;
- const {
- dragEl,
- el
- } = scrollbar;
- const params = swiper.params.scrollbar;
- const progress = swiper.params.loop ? swiper.progressLoop : swiper.progress;
- let newSize = dragSize;
- let newPos = (trackSize - dragSize) * progress;
- if (rtl) {
- newPos = -newPos;
- if (newPos > 0) {
- newSize = dragSize - newPos;
- newPos = 0;
- } else if (-newPos + dragSize > trackSize) {
- newSize = trackSize + newPos;
- }
- } else if (newPos < 0) {
- newSize = dragSize + newPos;
- newPos = 0;
- } else if (newPos + dragSize > trackSize) {
- newSize = trackSize - newPos;
- }
- if (swiper.isHorizontal()) {
- dragEl.style.transform = `translate3d(${newPos}px, 0, 0)`;
- dragEl.style.width = `${newSize}px`;
- } else {
- dragEl.style.transform = `translate3d(0px, ${newPos}px, 0)`;
- dragEl.style.height = `${newSize}px`;
- }
- if (params.hide) {
- clearTimeout(timeout);
- el.style.opacity = 1;
- timeout = setTimeout(() => {
- el.style.opacity = 0;
- el.style.transitionDuration = '400ms';
- }, 1000);
- }
- }
- function setTransition(duration) {
- if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
- swiper.scrollbar.dragEl.style.transitionDuration = `${duration}ms`;
- }
- function updateSize() {
- if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
- const {
- scrollbar
- } = swiper;
- const {
- dragEl,
- el
- } = scrollbar;
- dragEl.style.width = '';
- dragEl.style.height = '';
- trackSize = swiper.isHorizontal() ? el.offsetWidth : el.offsetHeight;
- divider = swiper.size / (swiper.virtualSize + swiper.params.slidesOffsetBefore - (swiper.params.centeredSlides ? swiper.snapGrid[0] : 0));
- if (swiper.params.scrollbar.dragSize === 'auto') {
- dragSize = trackSize * divider;
- } else {
- dragSize = parseInt(swiper.params.scrollbar.dragSize, 10);
- }
- if (swiper.isHorizontal()) {
- dragEl.style.width = `${dragSize}px`;
- } else {
- dragEl.style.height = `${dragSize}px`;
- }
- if (divider >= 1) {
- el.style.display = 'none';
- } else {
- el.style.display = '';
- }
- if (swiper.params.scrollbar.hide) {
- el.style.opacity = 0;
- }
- if (swiper.params.watchOverflow && swiper.enabled) {
- scrollbar.el.classList[swiper.isLocked ? 'add' : 'remove'](swiper.params.scrollbar.lockClass);
- }
- }
- function getPointerPosition(e) {
- return swiper.isHorizontal() ? e.clientX : e.clientY;
- }
- function setDragPosition(e) {
- const {
- scrollbar,
- rtlTranslate: rtl
- } = swiper;
- const {
- el
- } = scrollbar;
- let positionRatio;
- positionRatio = (getPointerPosition(e) - elementOffset(el)[swiper.isHorizontal() ? 'left' : 'top'] - (dragStartPos !== null ? dragStartPos : dragSize / 2)) / (trackSize - dragSize);
- positionRatio = Math.max(Math.min(positionRatio, 1), 0);
- if (rtl) {
- positionRatio = 1 - positionRatio;
- }
- const position = swiper.minTranslate() + (swiper.maxTranslate() - swiper.minTranslate()) * positionRatio;
- swiper.updateProgress(position);
- swiper.setTranslate(position);
- swiper.updateActiveIndex();
- swiper.updateSlidesClasses();
- }
- function onDragStart(e) {
- const params = swiper.params.scrollbar;
- const {
- scrollbar,
- wrapperEl
- } = swiper;
- const {
- el,
- dragEl
- } = scrollbar;
- isTouched = true;
- dragStartPos = e.target === dragEl ? getPointerPosition(e) - e.target.getBoundingClientRect()[swiper.isHorizontal() ? 'left' : 'top'] : null;
- e.preventDefault();
- e.stopPropagation();
- wrapperEl.style.transitionDuration = '100ms';
- dragEl.style.transitionDuration = '100ms';
- setDragPosition(e);
- clearTimeout(dragTimeout);
- el.style.transitionDuration = '0ms';
- if (params.hide) {
- el.style.opacity = 1;
- }
- if (swiper.params.cssMode) {
- swiper.wrapperEl.style['scroll-snap-type'] = 'none';
- }
- emit('scrollbarDragStart', e);
- }
- function onDragMove(e) {
- const {
- scrollbar,
- wrapperEl
- } = swiper;
- const {
- el,
- dragEl
- } = scrollbar;
- if (!isTouched) return;
- if (e.preventDefault && e.cancelable) e.preventDefault();else e.returnValue = false;
- setDragPosition(e);
- wrapperEl.style.transitionDuration = '0ms';
- el.style.transitionDuration = '0ms';
- dragEl.style.transitionDuration = '0ms';
- emit('scrollbarDragMove', e);
- }
- function onDragEnd(e) {
- const params = swiper.params.scrollbar;
- const {
- scrollbar,
- wrapperEl
- } = swiper;
- const {
- el
- } = scrollbar;
- if (!isTouched) return;
- isTouched = false;
- if (swiper.params.cssMode) {
- swiper.wrapperEl.style['scroll-snap-type'] = '';
- wrapperEl.style.transitionDuration = '';
- }
- if (params.hide) {
- clearTimeout(dragTimeout);
- dragTimeout = nextTick(() => {
- el.style.opacity = 0;
- el.style.transitionDuration = '400ms';
- }, 1000);
- }
- emit('scrollbarDragEnd', e);
- if (params.snapOnRelease) {
- swiper.slideToClosest();
- }
- }
- function events(method) {
- const {
- scrollbar,
- params
- } = swiper;
- const el = scrollbar.el;
- if (!el) return;
- const target = el;
- const activeListener = params.passiveListeners ? {
- passive: false,
- capture: false
- } : false;
- const passiveListener = params.passiveListeners ? {
- passive: true,
- capture: false
- } : false;
- if (!target) return;
- const eventMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';
- target[eventMethod]('pointerdown', onDragStart, activeListener);
- document[eventMethod]('pointermove', onDragMove, activeListener);
- document[eventMethod]('pointerup', onDragEnd, passiveListener);
- }
- function enableDraggable() {
- if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
- events('on');
- }
- function disableDraggable() {
- if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
- events('off');
- }
- function init() {
- const {
- scrollbar,
- el: swiperEl
- } = swiper;
- swiper.params.scrollbar = createElementIfNotDefined(swiper, swiper.originalParams.scrollbar, swiper.params.scrollbar, {
- el: 'swiper-scrollbar'
- });
- const params = swiper.params.scrollbar;
- if (!params.el) return;
- let el;
- if (typeof params.el === 'string' && swiper.isElement) {
- el = swiper.el.querySelector(params.el);
- }
- if (!el && typeof params.el === 'string') {
- el = document.querySelectorAll(params.el);
- if (!el.length) return;
- } else if (!el) {
- el = params.el;
- }
- if (swiper.params.uniqueNavElements && typeof params.el === 'string' && el.length > 1 && swiperEl.querySelectorAll(params.el).length === 1) {
- el = swiperEl.querySelector(params.el);
- }
- if (el.length > 0) el = el[0];
- el.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
- let dragEl;
- if (el) {
- dragEl = el.querySelector(classesToSelector(swiper.params.scrollbar.dragClass));
- if (!dragEl) {
- dragEl = createElement('div', swiper.params.scrollbar.dragClass);
- el.append(dragEl);
- }
- }
- Object.assign(scrollbar, {
- el,
- dragEl
- });
- if (params.draggable) {
- enableDraggable();
- }
- if (el) {
- el.classList[swiper.enabled ? 'remove' : 'add'](...classesToTokens(swiper.params.scrollbar.lockClass));
- }
- }
- function destroy() {
- const params = swiper.params.scrollbar;
- const el = swiper.scrollbar.el;
- if (el) {
- el.classList.remove(...classesToTokens(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass));
- }
- disableDraggable();
- }
- on('changeDirection', () => {
- if (!swiper.scrollbar || !swiper.scrollbar.el) return;
- const params = swiper.params.scrollbar;
- let {
- el
- } = swiper.scrollbar;
- el = makeElementsArray(el);
- el.forEach(subEl => {
- subEl.classList.remove(params.horizontalClass, params.verticalClass);
- subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
- });
- });
- on('init', () => {
- if (swiper.params.scrollbar.enabled === false) {
- // eslint-disable-next-line
- disable();
- } else {
- init();
- updateSize();
- setTranslate();
- }
- });
- on('update resize observerUpdate lock unlock changeDirection', () => {
- updateSize();
- });
- on('setTranslate', () => {
- setTranslate();
- });
- on('setTransition', (_s, duration) => {
- setTransition(duration);
- });
- on('enable disable', () => {
- const {
- el
- } = swiper.scrollbar;
- if (el) {
- el.classList[swiper.enabled ? 'remove' : 'add'](...classesToTokens(swiper.params.scrollbar.lockClass));
- }
- });
- on('destroy', () => {
- destroy();
- });
- const enable = () => {
- swiper.el.classList.remove(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
- if (swiper.scrollbar.el) {
- swiper.scrollbar.el.classList.remove(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
- }
- init();
- updateSize();
- setTranslate();
- };
- const disable = () => {
- swiper.el.classList.add(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
- if (swiper.scrollbar.el) {
- swiper.scrollbar.el.classList.add(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
- }
- destroy();
- };
- Object.assign(swiper.scrollbar, {
- enable,
- disable,
- updateSize,
- setTranslate,
- init,
- destroy
- });
- }
- export { Scrollbar as default };
|