cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
320 lines (319 loc) • 11.6 kB
JavaScript
import { getDocument } from "../../../../ssr-window/ssr-window.esm.mjs";
import "../../utils/dom.mjs";
import { bindModuleMethods, extend, nextTick } from "../../utils/utils.mjs";
import $ from "../../../../dom7/dom7.esm.mjs";
function _extends() {
_extends = Object.assign || function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
var Scrollbar = {
setTranslate: function setTranslate() {
var swiper = this;
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el)
return;
var scrollbar = swiper.scrollbar, rtl = swiper.rtlTranslate, progress = swiper.progress;
var dragSize = scrollbar.dragSize, trackSize = scrollbar.trackSize, $dragEl = scrollbar.$dragEl, $el = scrollbar.$el;
var params = swiper.params.scrollbar;
var newSize = dragSize;
var 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.transform("translate3d(" + newPos + "px, 0, 0)");
$dragEl[0].style.width = newSize + "px";
} else {
$dragEl.transform("translate3d(0px, " + newPos + "px, 0)");
$dragEl[0].style.height = newSize + "px";
}
if (params.hide) {
clearTimeout(swiper.scrollbar.timeout);
$el[0].style.opacity = 1;
swiper.scrollbar.timeout = setTimeout(function() {
$el[0].style.opacity = 0;
$el.transition(400);
}, 1e3);
}
},
setTransition: function setTransition(duration) {
var swiper = this;
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el)
return;
swiper.scrollbar.$dragEl.transition(duration);
},
updateSize: function updateSize() {
var swiper = this;
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el)
return;
var scrollbar = swiper.scrollbar;
var $dragEl = scrollbar.$dragEl, $el = scrollbar.$el;
$dragEl[0].style.width = "";
$dragEl[0].style.height = "";
var trackSize = swiper.isHorizontal() ? $el[0].offsetWidth : $el[0].offsetHeight;
var divider = swiper.size / swiper.virtualSize;
var moveDivider = divider * (trackSize / swiper.size);
var dragSize;
if (swiper.params.scrollbar.dragSize === "auto") {
dragSize = trackSize * divider;
} else {
dragSize = parseInt(swiper.params.scrollbar.dragSize, 10);
}
if (swiper.isHorizontal()) {
$dragEl[0].style.width = dragSize + "px";
} else {
$dragEl[0].style.height = dragSize + "px";
}
if (divider >= 1) {
$el[0].style.display = "none";
} else {
$el[0].style.display = "";
}
if (swiper.params.scrollbar.hide) {
$el[0].style.opacity = 0;
}
extend(scrollbar, {
trackSize,
divider,
moveDivider,
dragSize
});
scrollbar.$el[swiper.params.watchOverflow && swiper.isLocked ? "addClass" : "removeClass"](swiper.params.scrollbar.lockClass);
},
getPointerPosition: function getPointerPosition(e) {
var swiper = this;
if (swiper.isHorizontal()) {
return e.type === "touchstart" || e.type === "touchmove" ? e.targetTouches[0].clientX : e.clientX;
}
return e.type === "touchstart" || e.type === "touchmove" ? e.targetTouches[0].clientY : e.clientY;
},
setDragPosition: function setDragPosition(e) {
var swiper = this;
var scrollbar = swiper.scrollbar, rtl = swiper.rtlTranslate;
var $el = scrollbar.$el, dragSize = scrollbar.dragSize, trackSize = scrollbar.trackSize, dragStartPos = scrollbar.dragStartPos;
var positionRatio;
positionRatio = (scrollbar.getPointerPosition(e) - $el.offset()[swiper.isHorizontal() ? "left" : "top"] - (dragStartPos !== null ? dragStartPos : dragSize / 2)) / (trackSize - dragSize);
positionRatio = Math.max(Math.min(positionRatio, 1), 0);
if (rtl) {
positionRatio = 1 - positionRatio;
}
var position = swiper.minTranslate() + (swiper.maxTranslate() - swiper.minTranslate()) * positionRatio;
swiper.updateProgress(position);
swiper.setTranslate(position);
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
},
onDragStart: function onDragStart(e) {
var swiper = this;
var params = swiper.params.scrollbar;
var scrollbar = swiper.scrollbar, $wrapperEl = swiper.$wrapperEl;
var $el = scrollbar.$el, $dragEl = scrollbar.$dragEl;
swiper.scrollbar.isTouched = true;
swiper.scrollbar.dragStartPos = e.target === $dragEl[0] || e.target === $dragEl ? scrollbar.getPointerPosition(e) - e.target.getBoundingClientRect()[swiper.isHorizontal() ? "left" : "top"] : null;
e.preventDefault();
e.stopPropagation();
$wrapperEl.transition(100);
$dragEl.transition(100);
scrollbar.setDragPosition(e);
clearTimeout(swiper.scrollbar.dragTimeout);
$el.transition(0);
if (params.hide) {
$el.css("opacity", 1);
}
if (swiper.params.cssMode) {
swiper.$wrapperEl.css("scroll-snap-type", "none");
}
swiper.emit("scrollbarDragStart", e);
},
onDragMove: function onDragMove(e) {
var swiper = this;
var scrollbar = swiper.scrollbar, $wrapperEl = swiper.$wrapperEl;
var $el = scrollbar.$el, $dragEl = scrollbar.$dragEl;
if (!swiper.scrollbar.isTouched)
return;
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
scrollbar.setDragPosition(e);
$wrapperEl.transition(0);
$el.transition(0);
$dragEl.transition(0);
swiper.emit("scrollbarDragMove", e);
},
onDragEnd: function onDragEnd(e) {
var swiper = this;
var params = swiper.params.scrollbar;
var scrollbar = swiper.scrollbar, $wrapperEl = swiper.$wrapperEl;
var $el = scrollbar.$el;
if (!swiper.scrollbar.isTouched)
return;
swiper.scrollbar.isTouched = false;
if (swiper.params.cssMode) {
swiper.$wrapperEl.css("scroll-snap-type", "");
$wrapperEl.transition("");
}
if (params.hide) {
clearTimeout(swiper.scrollbar.dragTimeout);
swiper.scrollbar.dragTimeout = nextTick(function() {
$el.css("opacity", 0);
$el.transition(400);
}, 1e3);
}
swiper.emit("scrollbarDragEnd", e);
if (params.snapOnRelease) {
swiper.slideToClosest();
}
},
enableDraggable: function enableDraggable() {
var swiper = this;
if (!swiper.params.scrollbar.el)
return;
var document = getDocument();
var scrollbar = swiper.scrollbar, touchEventsTouch = swiper.touchEventsTouch, touchEventsDesktop = swiper.touchEventsDesktop, params = swiper.params, support = swiper.support;
var $el = scrollbar.$el;
var target = $el[0];
var activeListener = support.passiveListener && params.passiveListeners ? {
passive: false,
capture: false
} : false;
var passiveListener = support.passiveListener && params.passiveListeners ? {
passive: true,
capture: false
} : false;
if (!support.touch) {
target.addEventListener(touchEventsDesktop.start, swiper.scrollbar.onDragStart, activeListener);
document.addEventListener(touchEventsDesktop.move, swiper.scrollbar.onDragMove, activeListener);
document.addEventListener(touchEventsDesktop.end, swiper.scrollbar.onDragEnd, passiveListener);
} else {
target.addEventListener(touchEventsTouch.start, swiper.scrollbar.onDragStart, activeListener);
target.addEventListener(touchEventsTouch.move, swiper.scrollbar.onDragMove, activeListener);
target.addEventListener(touchEventsTouch.end, swiper.scrollbar.onDragEnd, passiveListener);
}
},
disableDraggable: function disableDraggable() {
var swiper = this;
if (!swiper.params.scrollbar.el)
return;
var document = getDocument();
var scrollbar = swiper.scrollbar, touchEventsTouch = swiper.touchEventsTouch, touchEventsDesktop = swiper.touchEventsDesktop, params = swiper.params, support = swiper.support;
var $el = scrollbar.$el;
var target = $el[0];
var activeListener = support.passiveListener && params.passiveListeners ? {
passive: false,
capture: false
} : false;
var passiveListener = support.passiveListener && params.passiveListeners ? {
passive: true,
capture: false
} : false;
if (!support.touch) {
target.removeEventListener(touchEventsDesktop.start, swiper.scrollbar.onDragStart, activeListener);
document.removeEventListener(touchEventsDesktop.move, swiper.scrollbar.onDragMove, activeListener);
document.removeEventListener(touchEventsDesktop.end, swiper.scrollbar.onDragEnd, passiveListener);
} else {
target.removeEventListener(touchEventsTouch.start, swiper.scrollbar.onDragStart, activeListener);
target.removeEventListener(touchEventsTouch.move, swiper.scrollbar.onDragMove, activeListener);
target.removeEventListener(touchEventsTouch.end, swiper.scrollbar.onDragEnd, passiveListener);
}
},
init: function init() {
var swiper = this;
if (!swiper.params.scrollbar.el)
return;
var scrollbar = swiper.scrollbar, $swiperEl = swiper.$el;
var params = swiper.params.scrollbar;
var $el = $(params.el);
if (swiper.params.uniqueNavElements && typeof params.el === "string" && $el.length > 1 && $swiperEl.find(params.el).length === 1) {
$el = $swiperEl.find(params.el);
}
var $dragEl = $el.find("." + swiper.params.scrollbar.dragClass);
if ($dragEl.length === 0) {
$dragEl = $('<div class="' + swiper.params.scrollbar.dragClass + '"></div>');
$el.append($dragEl);
}
extend(scrollbar, {
$el,
el: $el[0],
$dragEl,
dragEl: $dragEl[0]
});
if (params.draggable) {
scrollbar.enableDraggable();
}
},
destroy: function destroy() {
var swiper = this;
swiper.scrollbar.disableDraggable();
}
};
var Scrollbar$1 = {
name: "scrollbar",
params: {
scrollbar: {
el: null,
dragSize: "auto",
hide: false,
draggable: false,
snapOnRelease: true,
lockClass: "swiper-scrollbar-lock",
dragClass: "swiper-scrollbar-drag"
}
},
create: function create() {
var swiper = this;
bindModuleMethods(swiper, {
scrollbar: _extends({
isTouched: false,
timeout: null,
dragTimeout: null
}, Scrollbar)
});
},
on: {
init: function init2(swiper) {
swiper.scrollbar.init();
swiper.scrollbar.updateSize();
swiper.scrollbar.setTranslate();
},
update: function update(swiper) {
swiper.scrollbar.updateSize();
},
resize: function resize(swiper) {
swiper.scrollbar.updateSize();
},
observerUpdate: function observerUpdate(swiper) {
swiper.scrollbar.updateSize();
},
setTranslate: function setTranslate2(swiper) {
swiper.scrollbar.setTranslate();
},
setTransition: function setTransition2(swiper, duration) {
swiper.scrollbar.setTransition(duration);
},
destroy: function destroy2(swiper) {
swiper.scrollbar.destroy();
}
}
};
export { Scrollbar$1 as default };