123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809 |
- /*!
- * better-scroll / scroll-bar
- * (c) 2016-2021 ustbhuangyi
- * Released under the MIT License.
- */
- /*! *****************************************************************************
- Copyright (c) Microsoft Corporation.
- Permission to use, copy, modify, and/or distribute this software for any
- purpose with or without fee is hereby granted.
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
- PERFORMANCE OF THIS SOFTWARE.
- ***************************************************************************** */
- var __assign = function() {
- __assign = Object.assign || function __assign(t) {
- for (var s, i = 1, n = arguments.length; i < n; i++) {
- s = arguments[i];
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
- }
- return t;
- };
- return __assign.apply(this, arguments);
- };
- function __spreadArrays() {
- for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
- for (var r = Array(s), k = 0, i = 0; i < il; i++)
- for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
- r[k] = a[j];
- return r;
- }
- function warn(msg) {
- console.error("[BScroll warn]: " + msg);
- }
- // ssr support
- var inBrowser = typeof window !== 'undefined';
- var ua = inBrowser && navigator.userAgent.toLowerCase();
- !!(ua && /wechatdevtools/.test(ua));
- ua && ua.indexOf('android') > 0;
- /* istanbul ignore next */
- ((function () {
- if (typeof ua === 'string') {
- var regex = /os (\d\d?_\d(_\d)?)/;
- var matches = regex.exec(ua);
- if (!matches)
- return false;
- var parts = matches[1].split('_').map(function (item) {
- return parseInt(item, 10);
- });
- // ios version >= 13.4 issue 982
- return !!(parts[0] === 13 && parts[1] >= 4);
- }
- return false;
- }))();
- /* istanbul ignore next */
- var supportsPassive = false;
- /* istanbul ignore next */
- if (inBrowser) {
- var EventName = 'test-passive';
- try {
- var opts = {};
- Object.defineProperty(opts, 'passive', {
- get: function () {
- supportsPassive = true;
- },
- }); // https://github.com/facebook/flow/issues/285
- window.addEventListener(EventName, function () { }, opts);
- }
- catch (e) { }
- }
- function getNow() {
- return window.performance &&
- window.performance.now &&
- window.performance.timing
- ? window.performance.now() + window.performance.timing.navigationStart
- : +new Date();
- }
- var extend = function (target, source) {
- for (var key in source) {
- target[key] = source[key];
- }
- return target;
- };
- function between(x, min, max) {
- if (x < min) {
- return min;
- }
- if (x > max) {
- return max;
- }
- return x;
- }
- var elementStyle = (inBrowser &&
- document.createElement('div').style);
- var vendor = (function () {
- /* istanbul ignore if */
- if (!inBrowser) {
- return false;
- }
- var transformNames = [
- {
- key: 'standard',
- value: 'transform',
- },
- {
- key: 'webkit',
- value: 'webkitTransform',
- },
- {
- key: 'Moz',
- value: 'MozTransform',
- },
- {
- key: 'O',
- value: 'OTransform',
- },
- {
- key: 'ms',
- value: 'msTransform',
- },
- ];
- for (var _i = 0, transformNames_1 = transformNames; _i < transformNames_1.length; _i++) {
- var obj = transformNames_1[_i];
- if (elementStyle[obj.value] !== undefined) {
- return obj.key;
- }
- }
- /* istanbul ignore next */
- return false;
- })();
- /* istanbul ignore next */
- function prefixStyle(style) {
- if (vendor === false) {
- return style;
- }
- if (vendor === 'standard') {
- if (style === 'transitionEnd') {
- return 'transitionend';
- }
- return style;
- }
- return vendor + style.charAt(0).toUpperCase() + style.substr(1);
- }
- function addEvent(el, type, fn, capture) {
- var useCapture = supportsPassive
- ? {
- passive: false,
- capture: !!capture,
- }
- : !!capture;
- el.addEventListener(type, fn, useCapture);
- }
- function removeEvent(el, type, fn, capture) {
- el.removeEventListener(type, fn, {
- capture: !!capture,
- });
- }
- vendor && vendor !== 'standard' ? '-' + vendor.toLowerCase() + '-' : '';
- var transform = prefixStyle('transform');
- var transition = prefixStyle('transition');
- inBrowser && prefixStyle('perspective') in elementStyle;
- var style = {
- transform: transform,
- transition: transition,
- transitionTimingFunction: prefixStyle('transitionTimingFunction'),
- transitionDuration: prefixStyle('transitionDuration'),
- transitionDelay: prefixStyle('transitionDelay'),
- transformOrigin: prefixStyle('transformOrigin'),
- transitionEnd: prefixStyle('transitionEnd'),
- transitionProperty: prefixStyle('transitionProperty'),
- };
- var EventEmitter = /** @class */ (function () {
- function EventEmitter(names) {
- this.events = {};
- this.eventTypes = {};
- this.registerType(names);
- }
- EventEmitter.prototype.on = function (type, fn, context) {
- if (context === void 0) { context = this; }
- this.hasType(type);
- if (!this.events[type]) {
- this.events[type] = [];
- }
- this.events[type].push([fn, context]);
- return this;
- };
- EventEmitter.prototype.once = function (type, fn, context) {
- var _this = this;
- if (context === void 0) { context = this; }
- this.hasType(type);
- var magic = function () {
- var args = [];
- for (var _i = 0; _i < arguments.length; _i++) {
- args[_i] = arguments[_i];
- }
- _this.off(type, magic);
- var ret = fn.apply(context, args);
- if (ret === true) {
- return ret;
- }
- };
- magic.fn = fn;
- this.on(type, magic);
- return this;
- };
- EventEmitter.prototype.off = function (type, fn) {
- if (!type && !fn) {
- this.events = {};
- return this;
- }
- if (type) {
- this.hasType(type);
- if (!fn) {
- this.events[type] = [];
- return this;
- }
- var events = this.events[type];
- if (!events) {
- return this;
- }
- var count = events.length;
- while (count--) {
- if (events[count][0] === fn ||
- (events[count][0] && events[count][0].fn === fn)) {
- events.splice(count, 1);
- }
- }
- return this;
- }
- };
- EventEmitter.prototype.trigger = function (type) {
- var args = [];
- for (var _i = 1; _i < arguments.length; _i++) {
- args[_i - 1] = arguments[_i];
- }
- this.hasType(type);
- var events = this.events[type];
- if (!events) {
- return;
- }
- var len = events.length;
- var eventsCopy = __spreadArrays(events);
- var ret;
- for (var i = 0; i < len; i++) {
- var event_1 = eventsCopy[i];
- var fn = event_1[0], context = event_1[1];
- if (fn) {
- ret = fn.apply(context, args);
- if (ret === true) {
- return ret;
- }
- }
- }
- };
- EventEmitter.prototype.registerType = function (names) {
- var _this = this;
- names.forEach(function (type) {
- _this.eventTypes[type] = type;
- });
- };
- EventEmitter.prototype.destroy = function () {
- this.events = {};
- this.eventTypes = {};
- };
- EventEmitter.prototype.hasType = function (type) {
- var types = this.eventTypes;
- var isType = types[type] === type;
- if (!isType) {
- warn("EventEmitter has used unknown event type: \"" + type + "\", should be oneof [" +
- ("" + Object.keys(types).map(function (_) { return JSON.stringify(_); })) +
- "]");
- }
- };
- return EventEmitter;
- }());
- var EventRegister = /** @class */ (function () {
- function EventRegister(wrapper, events) {
- this.wrapper = wrapper;
- this.events = events;
- this.addDOMEvents();
- }
- EventRegister.prototype.destroy = function () {
- this.removeDOMEvents();
- this.events = [];
- };
- EventRegister.prototype.addDOMEvents = function () {
- this.handleDOMEvents(addEvent);
- };
- EventRegister.prototype.removeDOMEvents = function () {
- this.handleDOMEvents(removeEvent);
- };
- EventRegister.prototype.handleDOMEvents = function (eventOperation) {
- var _this = this;
- var wrapper = this.wrapper;
- this.events.forEach(function (event) {
- eventOperation(wrapper, event.name, _this, !!event.capture);
- });
- };
- EventRegister.prototype.handleEvent = function (e) {
- var eventType = e.type;
- this.events.some(function (event) {
- if (event.name === eventType) {
- event.handler(e);
- return true;
- }
- return false;
- });
- };
- return EventRegister;
- }());
- var EventHandler = /** @class */ (function () {
- function EventHandler(indicator, options) {
- this.indicator = indicator;
- this.options = options;
- this.hooks = new EventEmitter(['touchStart', 'touchMove', 'touchEnd']);
- this.registerEvents();
- }
- EventHandler.prototype.registerEvents = function () {
- var _a = this.options, disableMouse = _a.disableMouse, disableTouch = _a.disableTouch;
- var startEvents = [];
- var moveEvents = [];
- var endEvents = [];
- if (!disableMouse) {
- startEvents.push({
- name: 'mousedown',
- handler: this.start.bind(this),
- });
- moveEvents.push({
- name: 'mousemove',
- handler: this.move.bind(this),
- });
- endEvents.push({
- name: 'mouseup',
- handler: this.end.bind(this),
- });
- }
- if (!disableTouch) {
- startEvents.push({
- name: 'touchstart',
- handler: this.start.bind(this),
- });
- moveEvents.push({
- name: 'touchmove',
- handler: this.move.bind(this),
- });
- endEvents.push({
- name: 'touchend',
- handler: this.end.bind(this),
- }, {
- name: 'touchcancel',
- handler: this.end.bind(this),
- });
- }
- this.startEventRegister = new EventRegister(this.indicator.indicatorEl, startEvents);
- this.moveEventRegister = new EventRegister(window, moveEvents);
- this.endEventRegister = new EventRegister(window, endEvents);
- };
- EventHandler.prototype.BScrollIsDisabled = function () {
- return !this.indicator.scroll.enabled;
- };
- EventHandler.prototype.start = function (e) {
- if (this.BScrollIsDisabled()) {
- return;
- }
- var point = (e.touches ? e.touches[0] : e);
- e.preventDefault();
- e.stopPropagation();
- this.initiated = true;
- this.lastPoint = point[this.indicator.keysMap.point];
- this.hooks.trigger(this.hooks.eventTypes.touchStart);
- };
- EventHandler.prototype.move = function (e) {
- if (!this.initiated) {
- return;
- }
- var point = (e.touches ? e.touches[0] : e);
- var pointPos = point[this.indicator.keysMap.point];
- e.preventDefault();
- e.stopPropagation();
- var delta = pointPos - this.lastPoint;
- this.lastPoint = pointPos;
- this.hooks.trigger(this.hooks.eventTypes.touchMove, delta);
- };
- EventHandler.prototype.end = function (e) {
- if (!this.initiated) {
- return;
- }
- this.initiated = false;
- e.preventDefault();
- e.stopPropagation();
- this.hooks.trigger(this.hooks.eventTypes.touchEnd);
- };
- EventHandler.prototype.destroy = function () {
- this.startEventRegister.destroy();
- this.moveEventRegister.destroy();
- this.endEventRegister.destroy();
- };
- return EventHandler;
- }());
- var Indicator = /** @class */ (function () {
- function Indicator(scroll, options) {
- this.scroll = scroll;
- this.options = options;
- this.hooksFn = [];
- this.wrapper = options.wrapper;
- this.direction = options.direction;
- this.indicatorEl = this.wrapper.children[0];
- this.keysMap = this.getKeysMap();
- this.handleFade();
- this.handleHooks();
- }
- Indicator.prototype.handleFade = function () {
- if (this.options.fade) {
- this.wrapper.style.opacity = '0';
- }
- };
- Indicator.prototype.handleHooks = function () {
- var _this = this;
- var _a = this.options, fade = _a.fade, interactive = _a.interactive, scrollbarTrackClickable = _a.scrollbarTrackClickable;
- var scroll = this.scroll;
- var scrollHooks = scroll.hooks;
- var translaterHooks = scroll.scroller.translater.hooks;
- var animaterHooks = scroll.scroller.animater.hooks;
- this.registerHooks(scrollHooks, scrollHooks.eventTypes.refresh, this.refresh);
- this.registerHooks(translaterHooks, translaterHooks.eventTypes.translate, function (pos) {
- var hasScrollKey = _this.keysMap.hasScroll;
- if (_this.scroll[hasScrollKey]) {
- _this.updatePosition(pos);
- }
- });
- this.registerHooks(animaterHooks, animaterHooks.eventTypes.time, this.transitionTime);
- this.registerHooks(animaterHooks, animaterHooks.eventTypes.timeFunction, this.transitionTimingFunction);
- if (fade) {
- this.registerHooks(scroll, scroll.eventTypes.scrollEnd, function () {
- _this.fade();
- });
- this.registerHooks(scroll, scroll.eventTypes.scrollStart, function () {
- _this.fade(true);
- });
- // for mousewheel event
- if (scroll.eventTypes.mousewheelStart &&
- scroll.eventTypes.mousewheelEnd) {
- this.registerHooks(scroll, scroll.eventTypes.mousewheelStart, function () {
- _this.fade(true);
- });
- this.registerHooks(scroll, scroll.eventTypes.mousewheelMove, function () {
- _this.fade(true);
- });
- this.registerHooks(scroll, scroll.eventTypes.mousewheelEnd, function () {
- _this.fade();
- });
- }
- }
- if (interactive) {
- var _b = this.scroll.options, disableMouse = _b.disableMouse, disableTouch = _b.disableTouch;
- this.eventHandler = new EventHandler(this, {
- disableMouse: disableMouse,
- disableTouch: disableTouch,
- });
- var eventHandlerHooks = this.eventHandler.hooks;
- this.registerHooks(eventHandlerHooks, eventHandlerHooks.eventTypes.touchStart, this.startHandler);
- this.registerHooks(eventHandlerHooks, eventHandlerHooks.eventTypes.touchMove, this.moveHandler);
- this.registerHooks(eventHandlerHooks, eventHandlerHooks.eventTypes.touchEnd, this.endHandler);
- }
- if (scrollbarTrackClickable) {
- this.bindClick();
- }
- };
- Indicator.prototype.registerHooks = function (hooks, name, handler) {
- hooks.on(name, handler, this);
- this.hooksFn.push([hooks, name, handler]);
- };
- Indicator.prototype.bindClick = function () {
- var wrapper = this.wrapper;
- this.clickEventRegister = new EventRegister(wrapper, [
- {
- name: 'click',
- handler: this.handleClick.bind(this),
- },
- ]);
- };
- Indicator.prototype.handleClick = function (e) {
- var newPos = this.calculateclickOffsetPos(e);
- var _a = this.scroll, x = _a.x, y = _a.y;
- x = this.direction === "horizontal" /* Horizontal */ ? newPos : x;
- y = this.direction === "vertical" /* Vertical */ ? newPos : y;
- this.scroll.scrollTo(x, y, this.options.scrollbarTrackOffsetTime);
- };
- Indicator.prototype.calculateclickOffsetPos = function (e) {
- var _a = this.keysMap, poinKey = _a.point, domRectKey = _a.domRect;
- var scrollbarTrackOffsetType = this.options.scrollbarTrackOffsetType;
- var clickPointOffset = e[poinKey] - this.wrapperRect[domRectKey];
- var scrollToWhere = clickPointOffset < this.currentPos ? -1 /* Up */ : 1 /* Down */;
- var delta = 0;
- var currentPos = this.currentPos;
- if (scrollbarTrackOffsetType === "step" /* Step */) {
- delta = this.scrollInfo.baseSize * scrollToWhere;
- }
- else {
- delta = 0;
- currentPos = clickPointOffset;
- }
- return this.newPos(currentPos, delta, this.scrollInfo);
- };
- Indicator.prototype.getKeysMap = function () {
- if (this.direction === "vertical" /* Vertical */) {
- return {
- hasScroll: 'hasVerticalScroll',
- size: 'height',
- wrapperSize: 'clientHeight',
- scrollerSize: 'scrollerHeight',
- maxScrollPos: 'maxScrollY',
- pos: 'y',
- point: 'pageY',
- translateProperty: 'translateY',
- domRect: 'top',
- };
- }
- return {
- hasScroll: 'hasHorizontalScroll',
- size: 'width',
- wrapperSize: 'clientWidth',
- scrollerSize: 'scrollerWidth',
- maxScrollPos: 'maxScrollX',
- pos: 'x',
- point: 'pageX',
- translateProperty: 'translateX',
- domRect: 'left',
- };
- };
- Indicator.prototype.fade = function (visible) {
- var _a = this.options, fadeInTime = _a.fadeInTime, fadeOutTime = _a.fadeOutTime;
- var time = visible ? fadeInTime : fadeOutTime;
- var wrapper = this.wrapper;
- wrapper.style[style.transitionDuration] = time + 'ms';
- wrapper.style.opacity = visible ? '1' : '0';
- };
- Indicator.prototype.refresh = function () {
- var hasScrollKey = this.keysMap.hasScroll;
- var scroll = this.scroll;
- var x = scroll.x, y = scroll.y;
- this.wrapperRect = this.wrapper.getBoundingClientRect();
- if (this.canScroll(scroll[hasScrollKey])) {
- var _a = this.keysMap, wrapperSizeKey = _a.wrapperSize, scrollerSizeKey = _a.scrollerSize, maxScrollPosKey = _a.maxScrollPos;
- this.scrollInfo = this.refreshScrollInfo(this.wrapper[wrapperSizeKey], scroll[scrollerSizeKey], scroll[maxScrollPosKey], this.indicatorEl[wrapperSizeKey]);
- this.updatePosition({
- x: x,
- y: y,
- });
- }
- };
- Indicator.prototype.transitionTime = function (time) {
- if (time === void 0) { time = 0; }
- this.indicatorEl.style[style.transitionDuration] = time + 'ms';
- };
- Indicator.prototype.transitionTimingFunction = function (easing) {
- this.indicatorEl.style[style.transitionTimingFunction] = easing;
- };
- Indicator.prototype.canScroll = function (hasScroll) {
- this.wrapper.style.display = hasScroll ? 'block' : 'none';
- return hasScroll;
- };
- Indicator.prototype.refreshScrollInfo = function (wrapperSize, scrollerSize, maxScrollPos, indicatorElSize) {
- var baseSize = Math.max(Math.round((wrapperSize * wrapperSize) / (scrollerSize || wrapperSize || 1)), this.options.minSize);
- if (this.options.isCustom) {
- baseSize = indicatorElSize;
- }
- var maxIndicatorScrollPos = wrapperSize - baseSize;
- // sizeRatio is negative
- var sizeRatio = maxIndicatorScrollPos / maxScrollPos;
- return {
- baseSize: baseSize,
- maxScrollPos: maxIndicatorScrollPos,
- minScrollPos: 0,
- sizeRatio: sizeRatio,
- };
- };
- Indicator.prototype.updatePosition = function (point) {
- var _a = this.caculatePosAndSize(point, this.scrollInfo), pos = _a.pos, size = _a.size;
- this.refreshStyle(size, pos);
- this.currentPos = pos;
- };
- Indicator.prototype.caculatePosAndSize = function (point, scrollInfo) {
- var posKey = this.keysMap.pos;
- var sizeRatio = scrollInfo.sizeRatio, baseSize = scrollInfo.baseSize, maxScrollPos = scrollInfo.maxScrollPos, minScrollPos = scrollInfo.minScrollPos;
- var minSize = this.options.minSize;
- var pos = Math.round(sizeRatio * point[posKey]);
- var size;
- // when out of boundary, slow down size reduction
- if (pos < minScrollPos) {
- size = Math.max(baseSize + pos * 3, minSize);
- pos = minScrollPos;
- }
- else if (pos > maxScrollPos) {
- size = Math.max(baseSize - (pos - maxScrollPos) * 3, minSize);
- pos = maxScrollPos + baseSize - size;
- }
- else {
- size = baseSize;
- }
- return {
- pos: pos,
- size: size,
- };
- };
- Indicator.prototype.refreshStyle = function (size, pos) {
- var _a = this.keysMap, translatePropertyKey = _a.translateProperty, sizeKey = _a.size;
- var translateZ = this.scroll.options.translateZ;
- this.indicatorEl.style[sizeKey] = size + "px";
- this.indicatorEl.style[style.transform] = translatePropertyKey + "(" + pos + "px)" + translateZ;
- };
- Indicator.prototype.startHandler = function () {
- this.moved = false;
- this.startTime = getNow();
- this.transitionTime();
- this.scroll.scroller.hooks.trigger(this.scroll.scroller.hooks.eventTypes.beforeScrollStart);
- };
- Indicator.prototype.moveHandler = function (delta) {
- if (!this.moved && !this.indicatorNotMoved(delta)) {
- this.moved = true;
- this.scroll.scroller.hooks.trigger(this.scroll.scroller.hooks.eventTypes.scrollStart);
- }
- if (this.moved) {
- var newPos = this.newPos(this.currentPos, delta, this.scrollInfo);
- this.syncBScroll(newPos);
- }
- };
- Indicator.prototype.endHandler = function () {
- if (this.moved) {
- var _a = this.scroll, x = _a.x, y = _a.y;
- this.scroll.scroller.hooks.trigger(this.scroll.scroller.hooks.eventTypes.scrollEnd, {
- x: x,
- y: y,
- });
- }
- };
- Indicator.prototype.indicatorNotMoved = function (delta) {
- var currentPos = this.currentPos;
- var _a = this.scrollInfo, maxScrollPos = _a.maxScrollPos, minScrollPos = _a.minScrollPos;
- var notMoved = (currentPos === minScrollPos && delta <= 0) ||
- (currentPos === maxScrollPos && delta >= 0);
- return notMoved;
- };
- Indicator.prototype.syncBScroll = function (newPos) {
- var timestamp = getNow();
- var _a = this.scroll, x = _a.x, y = _a.y, options = _a.options, scroller = _a.scroller, maxScrollY = _a.maxScrollY, minScrollY = _a.minScrollY, maxScrollX = _a.maxScrollX, minScrollX = _a.minScrollX;
- var probeType = options.probeType, momentumLimitTime = options.momentumLimitTime;
- var position = { x: x, y: y };
- if (this.direction === "vertical" /* Vertical */) {
- position.y = between(newPos, maxScrollY, minScrollY);
- }
- else {
- position.x = between(newPos, maxScrollX, minScrollX);
- }
- scroller.translater.translate(position);
- // dispatch scroll in interval time
- if (timestamp - this.startTime > momentumLimitTime) {
- this.startTime = timestamp;
- if (probeType === 1 /* Throttle */) {
- scroller.hooks.trigger(scroller.hooks.eventTypes.scroll, position);
- }
- }
- // dispatch scroll all the time
- if (probeType > 1 /* Throttle */) {
- scroller.hooks.trigger(scroller.hooks.eventTypes.scroll, position);
- }
- };
- Indicator.prototype.newPos = function (currentPos, delta, scrollInfo) {
- var maxScrollPos = scrollInfo.maxScrollPos, sizeRatio = scrollInfo.sizeRatio, minScrollPos = scrollInfo.minScrollPos;
- var newPos = currentPos + delta;
- newPos = between(newPos, minScrollPos, maxScrollPos);
- return Math.round(newPos / sizeRatio);
- };
- Indicator.prototype.destroy = function () {
- var _a = this.options, interactive = _a.interactive, scrollbarTrackClickable = _a.scrollbarTrackClickable, isCustom = _a.isCustom;
- if (interactive) {
- this.eventHandler.destroy();
- }
- if (scrollbarTrackClickable) {
- this.clickEventRegister.destroy();
- }
- if (!isCustom) {
- this.wrapper.parentNode.removeChild(this.wrapper);
- }
- this.hooksFn.forEach(function (item) {
- var hooks = item[0];
- var hooksName = item[1];
- var handlerFn = item[2];
- hooks.off(hooksName, handlerFn);
- });
- this.hooksFn.length = 0;
- };
- return Indicator;
- }());
- var ScrollBar = /** @class */ (function () {
- function ScrollBar(scroll) {
- this.scroll = scroll;
- this.handleOptions();
- this.createIndicators();
- this.handleHooks();
- }
- ScrollBar.prototype.handleHooks = function () {
- var _this = this;
- var scroll = this.scroll;
- scroll.hooks.on(scroll.hooks.eventTypes.destroy, function () {
- for (var _i = 0, _a = _this.indicators; _i < _a.length; _i++) {
- var indicator = _a[_i];
- indicator.destroy();
- }
- });
- };
- ScrollBar.prototype.handleOptions = function () {
- var userOptions = (this.scroll.options.scrollbar === true
- ? {}
- : this.scroll.options.scrollbar);
- var defaultOptions = {
- fade: true,
- fadeInTime: 250,
- fadeOutTime: 500,
- interactive: false,
- customElements: [],
- minSize: 8,
- scrollbarTrackClickable: false,
- scrollbarTrackOffsetType: "step" /* Step */,
- scrollbarTrackOffsetTime: 300,
- };
- this.options = extend(defaultOptions, userOptions);
- };
- ScrollBar.prototype.createIndicators = function () {
- var indicatorOptions;
- var scroll = this.scroll;
- var indicators = [];
- var scrollDirectionConfigKeys = ['scrollX', 'scrollY'];
- var indicatorDirections = [
- "horizontal" /* Horizontal */,
- "vertical" /* Vertical */,
- ];
- var customScrollbarEls = this.options.customElements;
- for (var i = 0; i < scrollDirectionConfigKeys.length; i++) {
- var key = scrollDirectionConfigKeys[i];
- // wanna scroll in specified direction
- if (scroll.options[key]) {
- var customElement = customScrollbarEls.shift();
- var direction = indicatorDirections[i];
- var isCustom = false;
- var scrollbarWrapper = customElement
- ? customElement
- : this.createScrollbarElement(direction);
- // internal scrollbar
- if (scrollbarWrapper !== customElement) {
- scroll.wrapper.appendChild(scrollbarWrapper);
- }
- else {
- // custom scrollbar passed by users
- isCustom = true;
- }
- indicatorOptions = __assign(__assign({ wrapper: scrollbarWrapper, direction: direction }, this.options), { isCustom: isCustom });
- indicators.push(new Indicator(scroll, indicatorOptions));
- }
- }
- this.indicators = indicators;
- };
- ScrollBar.prototype.createScrollbarElement = function (direction, scrollbarTrackClickable) {
- if (scrollbarTrackClickable === void 0) { scrollbarTrackClickable = this.options.scrollbarTrackClickable; }
- var scrollbarWrapperEl = document.createElement('div');
- var scrollbarIndicatorEl = document.createElement('div');
- scrollbarWrapperEl.style.cssText =
- 'position:absolute;z-index:9999;overflow:hidden;';
- scrollbarIndicatorEl.style.cssText =
- 'box-sizing:border-box;position:absolute;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);border-radius:3px;';
- scrollbarIndicatorEl.className = 'bscroll-indicator';
- if (direction === "horizontal" /* Horizontal */) {
- scrollbarWrapperEl.style.cssText +=
- 'height:7px;left:2px;right:2px;bottom:0;';
- scrollbarIndicatorEl.style.height = '100%';
- scrollbarWrapperEl.className = 'bscroll-horizontal-scrollbar';
- }
- else {
- scrollbarWrapperEl.style.cssText +=
- 'width:7px;bottom:2px;top:2px;right:1px;';
- scrollbarIndicatorEl.style.width = '100%';
- scrollbarWrapperEl.className = 'bscroll-vertical-scrollbar';
- }
- if (!scrollbarTrackClickable) {
- scrollbarWrapperEl.style.cssText += 'pointer-events:none;';
- }
- scrollbarWrapperEl.appendChild(scrollbarIndicatorEl);
- return scrollbarWrapperEl;
- };
- ScrollBar.pluginName = 'scrollbar';
- return ScrollBar;
- }());
- export default ScrollBar;
|