vue-files-preview-inno
Version:
A tool for previewing files such as doc, excel, pdf, image, markdown, txt, audio, and video and so on.
109 lines (108 loc) • 6.26 kB
JavaScript
import { extend as u, defer as d } from "../../utils/core.mjs";
import { EVENTS as c } from "../../utils/constants.mjs";
import f from "../../../../event-emitter/index.mjs";
const T = {
easeInCubic: function(r) {
return Math.pow(r, 3);
}
};
class m {
constructor(e, t) {
this.settings = u({
duration: 80,
minVelocity: 0.2,
minDistance: 10,
easing: T.easeInCubic
}, t || {}), this.supportsTouch = this.supportsTouch(), this.supportsTouch && this.setup(e);
}
setup(e) {
this.manager = e, this.layout = this.manager.layout, this.fullsize = this.manager.settings.fullsize, this.fullsize ? (this.element = this.manager.stage.element, this.scroller = window, this.disableScroll()) : (this.element = this.manager.stage.container, this.scroller = this.element, this.element.style.WebkitOverflowScrolling = "touch"), this.manager.settings.offset = this.layout.width, this.manager.settings.afterScrolledTimeout = this.settings.duration * 2, this.isVertical = this.manager.settings.axis === "vertical", !(!this.manager.isPaginated || this.isVertical) && (this.touchCanceler = !1, this.resizeCanceler = !1, this.snapping = !1, this.scrollLeft, this.scrollTop, this.startTouchX = void 0, this.startTouchY = void 0, this.startTime = void 0, this.endTouchX = void 0, this.endTouchY = void 0, this.endTime = void 0, this.addListeners());
}
supportsTouch() {
return !!("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
disableScroll() {
this.element.style.overflow = "hidden";
}
enableScroll() {
this.element.style.overflow = "";
}
addListeners() {
this._onResize = this.onResize.bind(this), window.addEventListener("resize", this._onResize), this._onScroll = this.onScroll.bind(this), this.scroller.addEventListener("scroll", this._onScroll), this._onTouchStart = this.onTouchStart.bind(this), this.scroller.addEventListener("touchstart", this._onTouchStart, { passive: !0 }), this.on("touchstart", this._onTouchStart), this._onTouchMove = this.onTouchMove.bind(this), this.scroller.addEventListener("touchmove", this._onTouchMove, { passive: !0 }), this.on("touchmove", this._onTouchMove), this._onTouchEnd = this.onTouchEnd.bind(this), this.scroller.addEventListener("touchend", this._onTouchEnd, { passive: !0 }), this.on("touchend", this._onTouchEnd), this._afterDisplayed = this.afterDisplayed.bind(this), this.manager.on(c.MANAGERS.ADDED, this._afterDisplayed);
}
removeListeners() {
window.removeEventListener("resize", this._onResize), this._onResize = void 0, this.scroller.removeEventListener("scroll", this._onScroll), this._onScroll = void 0, this.scroller.removeEventListener("touchstart", this._onTouchStart, { passive: !0 }), this.off("touchstart", this._onTouchStart), this._onTouchStart = void 0, this.scroller.removeEventListener("touchmove", this._onTouchMove, { passive: !0 }), this.off("touchmove", this._onTouchMove), this._onTouchMove = void 0, this.scroller.removeEventListener("touchend", this._onTouchEnd, { passive: !0 }), this.off("touchend", this._onTouchEnd), this._onTouchEnd = void 0, this.manager.off(c.MANAGERS.ADDED, this._afterDisplayed), this._afterDisplayed = void 0;
}
afterDisplayed(e) {
let t = e.contents;
["touchstart", "touchmove", "touchend"].forEach((s) => {
t.on(s, (i) => this.triggerViewEvent(i, t));
});
}
triggerViewEvent(e, t) {
this.emit(e.type, e, t);
}
onScroll(e) {
this.scrollLeft = this.fullsize ? window.scrollX : this.scroller.scrollLeft, this.scrollTop = this.fullsize ? window.scrollY : this.scroller.scrollTop;
}
onResize(e) {
this.resizeCanceler = !0;
}
onTouchStart(e) {
let { screenX: t, screenY: s } = e.touches[0];
this.fullsize && this.enableScroll(), this.touchCanceler = !0, this.startTouchX || (this.startTouchX = t, this.startTouchY = s, this.startTime = this.now()), this.endTouchX = t, this.endTouchY = s, this.endTime = this.now();
}
onTouchMove(e) {
let { screenX: t, screenY: s } = e.touches[0], i = Math.abs(s - this.endTouchY);
this.touchCanceler = !0, !this.fullsize && i < 10 && (this.element.scrollLeft -= t - this.endTouchX), this.endTouchX = t, this.endTouchY = s, this.endTime = this.now();
}
onTouchEnd(e) {
this.fullsize && this.disableScroll(), this.touchCanceler = !1;
let t = this.wasSwiped();
t !== 0 ? this.snap(t) : this.snap(), this.startTouchX = void 0, this.startTouchY = void 0, this.startTime = void 0, this.endTouchX = void 0, this.endTouchY = void 0, this.endTime = void 0;
}
wasSwiped() {
let e = this.layout.pageWidth * this.layout.divisor, t = this.endTouchX - this.startTouchX, s = Math.abs(t), i = this.endTime - this.startTime, o = t / i, n = this.settings.minVelocity;
if (s <= this.settings.minDistance || s >= e)
return 0;
if (o > n)
return -1;
if (o < -n)
return 1;
}
needsSnap() {
let e = this.scrollLeft, t = this.layout.pageWidth * this.layout.divisor;
return e % t !== 0;
}
snap(e = 0) {
let t = this.scrollLeft, s = this.layout.pageWidth * this.layout.divisor, i = Math.round(t / s) * s;
return e && (i += e * s), this.smoothScrollTo(i);
}
smoothScrollTo(e) {
const t = new d(), s = this.scrollLeft, i = this.now(), o = this.settings.duration, n = this.settings.easing;
this.snapping = !0;
function l() {
const a = this.now(), h = Math.min(1, (a - i) / o);
if (n(h), this.touchCanceler || this.resizeCanceler) {
this.resizeCanceler = !1, this.snapping = !1, t.resolve();
return;
}
h < 1 ? (window.requestAnimationFrame(l.bind(this)), this.scrollTo(s + (e - s) * h, 0)) : (this.scrollTo(e, 0), this.snapping = !1, t.resolve());
}
return l.call(this), t.promise;
}
scrollTo(e = 0, t = 0) {
this.fullsize ? window.scroll(e, t) : (this.scroller.scrollLeft = e, this.scroller.scrollTop = t);
}
now() {
return "now" in window.performance ? performance.now() : (/* @__PURE__ */ new Date()).getTime();
}
destroy() {
this.scroller && (this.fullsize && this.enableScroll(), this.removeListeners(), this.scroller = void 0);
}
}
f(m.prototype);
export {
m as default
};
//# sourceMappingURL=snap.mjs.map