;
119 |
120 | interface bar {
121 | /** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
122 | specifyBorderRadius?: boolean | string;
123 | /** How long to hide bar after mouseleave, default -> 500 */
124 | showDelay?: number;
125 | /** Whether to keep show or not, default -> false */
126 | keepShow?: boolean;
127 | /** Whether to show bar on scrolling, default -> true */
128 | onlyShowBarOnScroll?: boolean;
129 | /** Bar's background , default -> #00a650 */
130 | background?: string;
131 | /** Bar's opacity, default -> 1 */
132 | opacity?: number;
133 | // Sometimes, the nativebar maybe on the left,
134 | // See https://github.com/YvesCoding/vuescroll/issues/64
135 | verticalNativeBarPos?: 'right';
136 | // A number in a range of (0, 1),
137 | // such as 0.5, means 50%. 0.3 means 30%.
138 | minSize?: number;
139 | // fix #142
140 | size?: string;
141 | // disable bar or not
142 | disable?: boolean;
143 | }
144 |
145 | interface scrollButton {
146 | enable?: boolean;
147 | background?: string;
148 | opacity?: number;
149 | step?: number;
150 | mousedownStep?: number;
151 | }
152 |
153 | export default interface Config {
154 | vuescroll?: Container;
155 | scrollPanel?: scrollPanel;
156 | bar?: bar;
157 | rail?: rail;
158 | scrollButton?: scrollButton;
159 | }
160 |
--------------------------------------------------------------------------------
/src/mode/slide/slide-panel.js:
--------------------------------------------------------------------------------
1 | import { getComplitableStyle } from 'shared';
2 | import { __REFRESH_DOM_NAME, __LOAD_DOM_NAME } from 'shared/constants';
3 | import { isIos } from 'shared';
4 | import { h } from 'vue';
5 | import ScrollPanel from 'src/core/components/panel';
6 |
7 | export default function getPanelData(context) {
8 | // scrollPanel data start
9 | const data = {
10 | ref: 'scrollPanel',
11 | style: {
12 | 'user-select': 'none',
13 | '-webkit-user-select': 'none',
14 | 'min-width': '100%',
15 | 'min-height': '100%'
16 | },
17 | class: [],
18 | ops: context.mergedOptions.scrollPanel
19 | };
20 |
21 | data.class.push('__slide');
22 | /* istanbul ignore if */
23 | if (isIos()) {
24 | data.style = {
25 | ['-webkit-overflow-scrolling']: 'touch'
26 | };
27 | }
28 |
29 | if (context.mergedOptions.vuescroll.renderMethod == 'transform') {
30 | data.style['transform-origin'] = 'left top 0px';
31 | }
32 |
33 | const { scrollingX, scrollingY, padding } = context.mergedOptions.scrollPanel;
34 |
35 | if (scrollingX && !context.refreshLoad) {
36 | let width = getComplitableStyle('width', 'fit-content');
37 | if (width) {
38 | data.style['width'] = width;
39 | } /* istanbul ignore next */ else {
40 | data['display'] = 'inline-block';
41 | }
42 | }
43 |
44 | /* istanbul ignore if */
45 | if (!scrollingX) {
46 | data.class.push('x-hidden');
47 | }
48 | /* istanbul ignore if */
49 | if (!scrollingY) {
50 | data.class.push('y-hidden');
51 | }
52 |
53 | if (padding) {
54 | data.style.paddingRight = context.mergedOptions.rail.size;
55 | }
56 |
57 | return data;
58 | }
59 |
60 | export function getPanelChildren(context) {
61 | let renderChildren = context.$slots['scroll-panel'] || context.$slots.default;
62 | let finalChildren = [];
63 |
64 | /* istanbul ignore if */
65 | if (!renderChildren) {
66 | context.$slots.default = renderChildren = [];
67 | }
68 |
69 | // handle refresh
70 | if (context.mergedOptions.vuescroll.pullRefresh.enable) {
71 | finalChildren.push(
72 |
78 | {createTipDom(context, 'refresh', context.pullRefreshTip)}
79 |
80 | );
81 | }
82 |
83 | finalChildren.push(renderChildren());
84 |
85 | // handle load
86 | if (context.mergedOptions.vuescroll.pushLoad.enable) {
87 | finalChildren.push(
88 |
94 | {createTipDom(context, 'load', context.pushLoadTip)}
95 |
96 | );
97 | }
98 |
99 | return finalChildren;
100 | }
101 |
102 | // Create load or refresh tip dom of each stages
103 | function createTipDom(context, type, tip) {
104 | const stage = context.vuescroll.state[`${type}Stage`];
105 | let dom = null;
106 | // Return user specified animation dom
107 | /* istanbul ignore if */
108 | if ((dom = context.$slots[`${type}-${stage}`])) {
109 | return dom;
110 | }
111 |
112 | switch (stage) {
113 | // The dom will show at deactive stage
114 | case 'deactive':
115 | case 'active':
116 | {
117 | let className = 'active';
118 | if (stage == 'deactive') {
119 | className += ' deactive';
120 | }
121 |
122 | dom = (
123 |
140 | );
141 | }
142 | break;
143 | case 'start':
144 | dom = (
145 |
149 | );
150 | break;
151 | case 'beforeDeactive':
152 | dom = (
153 |
165 | );
166 | break;
167 | }
168 | return [dom, tip];
169 | }
170 |
171 | /**
172 | * create a scrollPanel
173 | *
174 | * @param {any} size
175 | * @param {any} context
176 | * @returns
177 | */
178 | export function createPanel(context) {
179 | let data = getPanelData(context);
180 |
181 | return h(ScrollPanel, data, {
182 | default() {
183 | return getPanelChildren(context);
184 | }
185 | });
186 | }
187 |
--------------------------------------------------------------------------------
/src/core/third-party/scroller/animate.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Scroller
3 | * http://github.com/zynga/scroller
4 | *
5 | * Copyright 2011, Zynga Inc.
6 | * Licensed under the MIT License.
7 | * https://raw.github.com/zynga/scroller/master/MIT-LICENSE.txt
8 | *
9 | * Based on the work of: Unify Project (unify-project.org)
10 | * http://unify-project.org
11 | * Copyright 2011, Deutsche Telekom AG
12 | * License: MIT + Apache (V2)
13 | */
14 |
15 | /**
16 | * Generic animation class with support for dropped frames both optional easing and duration.
17 | *
18 | * Optional duration is useful when the lifetime is defined by another condition than time
19 | * e.g. speed of an animating object, etc.
20 | *
21 | * Dropped frame logic allows to keep using the same updater logic independent from the actual
22 | * rendering. This eases a lot of cases where it might be pretty complex to break down a state
23 | * based on the pure time difference.
24 | */
25 | import { requestAnimationFrame } from './requestAnimationFrame';
26 |
27 | var time =
28 | Date.now ||
29 | function() {
30 | return +new Date();
31 | };
32 | var desiredFrames = 60;
33 | var millisecondsPerSecond = 1000;
34 | var running = {};
35 | var counter = 1;
36 |
37 | const core = { effect: {} };
38 | let global = null;
39 |
40 | if (typeof window !== 'undefined') {
41 | global = window;
42 | } else {
43 | global = {};
44 | }
45 |
46 | core.effect.Animate = {
47 | /**
48 | * A requestAnimationFrame wrapper / polyfill.
49 | *
50 | * @param callback {Function} The callback to be invoked before the next repaint.
51 | * @param root {HTMLElement} The root element for the repaint
52 | */
53 | requestAnimationFrame: requestAnimationFrame(global),
54 | /**
55 | * Stops the given animation.
56 | *
57 | * @param id {Integer} Unique animation ID
58 | * @return {Boolean} Whether the animation was stopped (aka, was running before)
59 | */
60 | stop: function(id) {
61 | var cleared = running[id] != null;
62 | if (cleared) {
63 | running[id] = null;
64 | }
65 |
66 | return cleared;
67 | },
68 |
69 | /**
70 | * Whether the given animation is still running.
71 | *
72 | * @param id {Integer} Unique animation ID
73 | * @return {Boolean} Whether the animation is still running
74 | */
75 | isRunning: function(id) {
76 | return running[id] != null;
77 | },
78 |
79 | /**
80 | * Start the animation.
81 | *
82 | * @param stepCallback {Function} Pointer to function which is executed on every step.
83 | * Signature of the method should be `function(percent, now, virtual) { return continueWithAnimation; }`
84 | * @param verifyCallback {Function} Executed before every animation step.
85 | * Signature of the method should be `function() { return continueWithAnimation; }`
86 | * @param completedCallback {Function}
87 | * Signature of the method should be `function(droppedFrames, finishedAnimation) {}`
88 | * @param duration {Integer} Milliseconds to run the animation
89 | * @param easingMethod {Function} Pointer to easing function
90 | * Signature of the method should be `function(percent) { return modifiedValue; }`
91 | * @param root {Element ? document.body} Render root, when available. Used for internal
92 | * usage of requestAnimationFrame.
93 | * @return {Integer} Identifier of animation. Can be used to stop it any time.
94 | */
95 | start: function(
96 | stepCallback,
97 | verifyCallback,
98 | completedCallback,
99 | duration,
100 | easingMethod,
101 | root
102 | ) {
103 | var start = time();
104 | var lastFrame = start;
105 | var percent = 0;
106 | var dropCounter = 0;
107 | var id = counter++;
108 |
109 | if (!root) {
110 | root = document.body;
111 | }
112 |
113 | // Compacting running db automatically every few new animations
114 | if (id % 20 === 0) {
115 | var newRunning = {};
116 | for (var usedId in running) {
117 | newRunning[usedId] = true;
118 | }
119 | running = newRunning;
120 | }
121 |
122 | // This is the internal step method which is called every few milliseconds
123 | var step = function(virtual) {
124 | // Normalize virtual value
125 | var render = virtual !== true;
126 |
127 | // Get current time
128 | var now = time();
129 |
130 | // Verification is executed before next animation step
131 | if (!running[id] || (verifyCallback && !verifyCallback(id))) {
132 | running[id] = null;
133 | completedCallback &&
134 | completedCallback(
135 | desiredFrames -
136 | dropCounter / ((now - start) / millisecondsPerSecond),
137 | id,
138 | false
139 | );
140 | return;
141 | }
142 |
143 | // For the current rendering to apply let's update omitted steps in memory.
144 | // This is important to bring internal state variables up-to-date with progress in time.
145 | if (render) {
146 | var droppedFrames =
147 | Math.round(
148 | (now - lastFrame) / (millisecondsPerSecond / desiredFrames)
149 | ) - 1;
150 | for (var j = 0; j < Math.min(droppedFrames, 4); j++) {
151 | step(true);
152 | dropCounter++;
153 | }
154 | }
155 |
156 | if (!running[id]) {
157 | return;
158 | }
159 |
160 | // Compute percent value
161 | if (duration) {
162 | percent = (now - start) / duration;
163 | if (percent > 1) {
164 | percent = 1;
165 | }
166 | }
167 |
168 | // Execute step callback, then...
169 | var value = easingMethod ? easingMethod(percent) : percent;
170 | if (
171 | (stepCallback(value, now, render) === false || percent === 1) &&
172 | render
173 | ) {
174 | running[id] = null;
175 | completedCallback &&
176 | completedCallback(
177 | desiredFrames -
178 | dropCounter / ((now - start) / millisecondsPerSecond),
179 | id,
180 | percent === 1 || duration == null
181 | );
182 | } else if (render) {
183 | lastFrame = now;
184 | core.effect.Animate.requestAnimationFrame(step, root);
185 | }
186 | };
187 |
188 | // Mark as running
189 | running[id] = true;
190 |
191 | // Init first step
192 | core.effect.Animate.requestAnimationFrame(step, root);
193 |
194 | // Return unique animation ID
195 | return id;
196 | }
197 | };
198 |
199 | export { core };
200 |
--------------------------------------------------------------------------------
/src/mode/slide/core.js:
--------------------------------------------------------------------------------
1 | import { installResizeDetection } from 'core/third-party/resize-detector/index';
2 | import mixins from './mixins';
3 |
4 | export default {
5 | mixins,
6 | mounted() {
7 | this.$nextTick(() => {
8 | if (!this._isDestroyed && !this.renderError) {
9 | this.updatedCbs.push(() => {
10 | this.updateScroller();
11 | });
12 |
13 | this.$watch(
14 | 'mergedOptions.vuescroll.scroller.disable',
15 | (newVal) => {
16 | if (this.scroller) {
17 | this.scroller.__disable = newVal;
18 | }
19 | },
20 | {
21 | sync: true
22 | }
23 | );
24 | }
25 | });
26 | },
27 | methods: {
28 | destroy() {
29 | /* istanbul ignore next */
30 | if (this.destroyScroller) {
31 | this.scroller.stop();
32 | this.destroyScroller();
33 | this.destroyScroller = null;
34 | }
35 |
36 | /* istanbul ignore next */
37 | if (this.destroyResize) {
38 | this.destroyResize();
39 | }
40 | },
41 | getCurrentviewDom() {
42 | return this.getCurrentviewDomSlide();
43 | },
44 | internalScrollTo(destX, destY, speed, sasing) {
45 | this.slideScrollTo(destX, destY, speed, sasing);
46 | },
47 | handleScroll(nativeEvent) {
48 | this.updateBarStateAndEmitEvent('handle-scroll', nativeEvent);
49 | },
50 | updateBarStateAndEmitEvent(eventType, nativeEvent = null) {
51 | if (!this.scroller) {
52 | return;
53 | }
54 | this.updateSlideModeBarState();
55 | if (eventType) {
56 | this.emitEvent(eventType, nativeEvent);
57 | }
58 | if (this.mergedOptions.bar.onlyShowBarOnScroll) {
59 | if (
60 | eventType == 'handle-scroll' ||
61 | eventType == 'handle-resize' ||
62 | eventType == 'refresh-status' ||
63 | eventType == 'window-resize' ||
64 | eventType == 'options-change'
65 | ) {
66 | this.showAndDefferedHideBar(true /* forceHideBar: true */);
67 | }
68 | } else {
69 | this.showAndDefferedHideBar();
70 | }
71 | },
72 | getScrollProcess() {
73 | let {
74 | scrollHeight,
75 | scrollWidth,
76 | clientHeight,
77 | clientWidth,
78 | scrollTop,
79 | scrollLeft
80 | } = this.scrollPanelElm;
81 |
82 | scrollHeight = this.scroller.__contentHeight;
83 | scrollWidth = this.scroller.__contentWidth;
84 | scrollTop = this.scroller.__scrollTop;
85 | scrollLeft = this.scroller.__scrollLeft;
86 | clientHeight = this.$el.clientHeight;
87 | clientWidth = this.$el.clientWidth;
88 |
89 | const v = Math.min(scrollTop / (scrollHeight - clientHeight || 1), 1);
90 | const h = Math.min(scrollLeft / (scrollWidth - clientWidth || 1), 1);
91 |
92 | return {
93 | v,
94 | h
95 | };
96 | },
97 | emitEvent(eventType, nativeEvent = null) {
98 | const vertical = {
99 | type: 'vertical'
100 | };
101 | const horizontal = {
102 | type: 'horizontal'
103 | };
104 | const { scrollTop, scrollLeft } = this.getPosition();
105 | const { v, h } = this.getScrollProcess();
106 |
107 | vertical.process = v;
108 | horizontal.process = h;
109 |
110 | vertical['barSize'] = this.bar.vBar.state.size;
111 | horizontal['barSize'] = this.bar.hBar.state.size;
112 | vertical['scrollTop'] = scrollTop;
113 | horizontal['scrollLeft'] = scrollLeft;
114 |
115 | this.$emit(eventType, vertical, horizontal, nativeEvent);
116 | },
117 | initVariables() {
118 | this.$el._isVuescroll = true;
119 | },
120 | refreshMode() {
121 | let initPos;
122 | if (this.scroller) {
123 | initPos = this.scroller.getValues();
124 | }
125 |
126 | if (this.destroyScroller) {
127 | this.scroller.stop();
128 | this.destroyScroller();
129 | this.destroyScroller = null;
130 | }
131 | this.destroyScroller = this.registryScroller(initPos);
132 | },
133 | refreshInternalStatus() {
134 | // 1.set vuescroll height or width according to
135 | // sizeStrategy
136 | this.setVsSize();
137 | // 2. registry resize event
138 | this.registryResize();
139 | // 3. registry scroller if mode is 'slide'
140 | // or remove 'transform origin' is the mode is not `slide`
141 | this.refreshMode();
142 | // 4. update scrollbar's height/width
143 | this.updateBarStateAndEmitEvent('refresh-status');
144 | },
145 |
146 | registryResize() {
147 | const resizeEnable = this.mergedOptions.vuescroll.detectResize;
148 |
149 | /* istanbul ignore next */
150 | if (this.destroyResize && resizeEnable) {
151 | return;
152 | }
153 |
154 | if (this.destroyResize) {
155 | this.destroyResize();
156 | }
157 |
158 | if (!resizeEnable) {
159 | return;
160 | }
161 |
162 | let contentElm = this.scrollPanelElm;
163 | const vm = this;
164 | const handleWindowResize = function () /* istanbul ignore next */ {
165 | vm.updateBarStateAndEmitEvent('window-resize');
166 | vm.updatedCbs.push(vm.updateScroller);
167 | vm.$forceUpdate();
168 | };
169 |
170 | const handleDomResize = () => {
171 | let currentSize = {};
172 | currentSize['width'] = this.scroller.__contentWidth;
173 | currentSize['height'] = this.scroller.__contentHeight;
174 | this.updateBarStateAndEmitEvent('handle-resize', currentSize);
175 | // update scroller should after rendering
176 | this.updatedCbs.push(this.updateScroller);
177 | this.$forceUpdate();
178 |
179 | // Since content sie changes, we should tell parent to set
180 | // correct size to fit content's size
181 | this.setVsSize();
182 | };
183 | window.addEventListener('resize', handleWindowResize, false);
184 | const destroyDomResize = resizeEnable
185 | ? installResizeDetection(contentElm, handleDomResize)
186 | : NOOP;
187 | const destroyWindowResize = () => {
188 | window.removeEventListener('resize', handleWindowResize, false);
189 | };
190 |
191 | this.destroyResize = () => {
192 | destroyWindowResize();
193 | destroyDomResize();
194 |
195 | this.destroyResize = null;
196 | };
197 | },
198 | getPosition() {
199 | return this.getSlidePosition();
200 | }
201 | }
202 | };
203 |
--------------------------------------------------------------------------------
/dist/vuescroll-native.d.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | /**
4 | * Augment the typings of Vue.js
5 | */
6 | declare module 'vue/types/vue' {
7 | interface Vue {
8 | $vuescrollConfig: Config;
9 | }
10 | }
11 |
12 | interface Container {
13 | sizeStrategy?: 'percent' | 'number';
14 | detectResize?: boolean;
15 | wheelScrollDuration?: number;
16 | wheelDirectionReverse?: boolean;
17 | checkShiftKey?: boolean;
18 | locking?:boolean;
19 | }
20 |
21 | type Position = {
22 | scrollTop?: number;
23 | scrollLeft?: number;
24 | };
25 |
26 | declare type easing =
27 | | 'easeInQuad'
28 | | 'easeInOutQuad'
29 | | 'easeInCubic'
30 | | 'easeOutCubic'
31 | | 'easeInOutCubic'
32 | | 'easeInQuart'
33 | | 'easeOutQuart'
34 | | 'easeInOutQuart'
35 | | 'easeInQuint'
36 | | 'easeOutQuint'
37 | | 'easeInOutQuint';
38 |
39 | interface scrollPanel {
40 | initialScrollY?: false | string | number;
41 | initialScrollX?: false | string | number;
42 | scrollingX?: boolean;
43 | scrollingY?: boolean;
44 | speed?: number;
45 | easing?: easing | undefined;
46 | padding?: boolean;
47 | verticalNativeBarPos?: 'right' | 'left';
48 | maxHeight?: number;
49 | maxWidth?: number;
50 | }
51 |
52 | interface rail {
53 | border?: string;
54 | /** Specify rail's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
55 | specifyBorderRadius?: boolean | string;
56 | /** Rail's background , default -> #01a99a */
57 | background?: string;
58 | /** Rail's opacity, default -> 0 */
59 | opacity?: number;
60 | /** Rail's size(Height/Width) , default -> 6px */
61 | size?: string;
62 | /** Rail the distance from the two ends of the X axis and Y axis. **/
63 | gutterOfEnds?: string;
64 | /** Rail the distance from the side of container. **/
65 | gutterOfSide?: string;
66 | /** Whether to keep rail show or not, default -> false, event content height is not enough */
67 | keepShow?: boolean;
68 | }
69 |
70 | type Partial = { [P in keyof T]?: T[P] };
71 | type Style = Partial;
72 |
73 | interface bar {
74 | /** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
75 | specifyBorderRadius?: boolean | string;
76 | /** How long to hide bar after mouseleave, default -> 500 */
77 | showDelay?: number;
78 | /** Whether to keep show or not, default -> false */
79 | keepShow?: boolean;
80 | /** Whether to show bar on scrolling, default -> true */
81 | onlyShowBarOnScroll?: boolean;
82 | /** Bar's background , default -> #00a650 */
83 | background?: string;
84 | /** Bar's opacity, default -> 1 */
85 | opacity?: number;
86 | // Sometimes, the nativebar maybe on the left,
87 | // See https://github.com/YvesCoding/vuescroll/issues/64
88 | verticalNativeBarPos?: 'right';
89 | // A number in a range of (0, 1),
90 | // such as 0.5, means 50%. 0.3 means 30%.
91 | minSize?: number;
92 | // fix #142
93 | size?: string;
94 | // disable bar or not
95 | disable?: boolean;
96 | // the percent of delta of native scroll while mouse wheeling. defalut 1
97 | deltaPercent?:number
98 | }
99 |
100 | interface scrollButton {
101 | enable?: boolean;
102 | background?: string;
103 | opacity?: number;
104 | step?: number;
105 | mousedownStep?: number;
106 | }
107 |
108 | export interface Config {
109 | vuescroll?: Container;
110 | scrollPanel?: scrollPanel;
111 | scrollConent?: scrollConent;
112 | bar?: bar;
113 | rail?: rail;
114 | scrollButton?: scrollButton;
115 | }
116 |
117 | type Pos = {
118 | x?: number | string;
119 | y?: number | string;
120 | };
121 |
122 | type Page = {
123 | x?: number;
124 | y?: number;
125 | };
126 |
127 | export default interface vuescroll extends Vue {
128 | // ----------------------- Static methods --------------------
129 | static install(vue: typeof Vue): void;
130 | static refreshAll(): void;
131 | static scrollTo(
132 | elm: Document | Element,
133 | x: string | number,
134 | y: string | number,
135 | speed?: number,
136 | easing?: easing,
137 | animate?: boolean,
138 | scrollingComplete?: (x: string | number, y: string | number) => void
139 | ): void;
140 |
141 | // ----------------------- Api -------------------------
142 |
143 | /**
144 | * @description Refresh the current vuescroll's all states
145 | * @memberof vuescroll
146 | */
147 | refresh(): void;
148 |
149 | /**
150 | * @description
151 | * @param {Pos} position The position you want to scroll to
152 | * @param {number} speed the speed of the scrolling, the smaller, the faster.
153 | * @param {easing} easing the animation of scrolling.
154 | * @memberof vuescroll
155 | */
156 | scrollTo(position: Pos, speed?: number, easing?: easing): void;
157 |
158 | /**
159 | * @description
160 | * @param {Pos} delta The delta you want to scroll based on current position
161 | * @param {number} speed the speed of the scrolling, the smaller, the faster.
162 | * @param {easing} easing the animation of scrolling.
163 | * @memberof vuescroll
164 | */
165 | scrollBy(delta: Pos, speed?: number, easing?: easing): void;
166 |
167 | /**
168 | * @description Get the current doms you can see in the container!
169 | * @returns {Array}
170 | * @memberof vuescroll
171 | */
172 | getCurrentviewDom(): Array;
173 |
174 | /**
175 | * @description Scroll the element of vuescroll to your viewport!
176 | * @param {(Element | string)} elm
177 | * @param {boolean} [animate]
178 | * @memberof vuescroll
179 | */
180 | scrollIntoView(elm: Element | string, animate?: boolean): void;
181 |
182 | /**
183 | * @description Get the times you have scrolled
184 | * @author wangyi7099
185 | * @memberof vuescroll
186 | */
187 | getScrollingTimes(): void;
188 |
189 | /**
190 | * @description Clear the times you have scrolled
191 | * @author wangyi7099
192 | * @memberof vuescroll
193 | */
194 | clearScrollingTimes(): void;
195 | /**
196 | * @description Stop current scrolling, can be only used in native
197 | * @author wangyi7099
198 | * @memberof vuescroll
199 | */
200 | stop(): void;
201 | /**
202 | * @description Pause current scrolling, can be only used in native
203 | * @author wangyi7099
204 | * @memberof vuescroll
205 | */
206 | pause(): void;
207 |
208 | /**
209 | * @description Continue the paused scrolling, can be only used in native
210 | * @author wangyi7099
211 | * @memberof vuescroll
212 | */
213 | continue(): void;
214 |
215 | /**
216 | * @description Get current position
217 | * @author wangyi7099
218 | * @memberof vuescroll
219 | */
220 | getPosition(): Position;
221 | }
222 |
--------------------------------------------------------------------------------
/types/vuescroll-native.d.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | /**
4 | * Augment the typings of Vue.js
5 | */
6 | declare module 'vue/types/vue' {
7 | interface Vue {
8 | $vuescrollConfig: Config;
9 | }
10 | }
11 |
12 | interface Container {
13 | sizeStrategy?: 'percent' | 'number';
14 | detectResize?: boolean;
15 | wheelScrollDuration?: number;
16 | wheelDirectionReverse?: boolean;
17 | checkShiftKey?: boolean;
18 | locking?:boolean;
19 | }
20 |
21 | type Position = {
22 | scrollTop?: number;
23 | scrollLeft?: number;
24 | };
25 |
26 | declare type easing =
27 | | 'easeInQuad'
28 | | 'easeInOutQuad'
29 | | 'easeInCubic'
30 | | 'easeOutCubic'
31 | | 'easeInOutCubic'
32 | | 'easeInQuart'
33 | | 'easeOutQuart'
34 | | 'easeInOutQuart'
35 | | 'easeInQuint'
36 | | 'easeOutQuint'
37 | | 'easeInOutQuint';
38 |
39 | interface scrollPanel {
40 | initialScrollY?: false | string | number;
41 | initialScrollX?: false | string | number;
42 | scrollingX?: boolean;
43 | scrollingY?: boolean;
44 | speed?: number;
45 | easing?: easing | undefined;
46 | padding?: boolean;
47 | verticalNativeBarPos?: 'right' | 'left';
48 | maxHeight?: number;
49 | maxWidth?: number;
50 | }
51 |
52 | interface rail {
53 | border?: string;
54 | /** Specify rail's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
55 | specifyBorderRadius?: boolean | string;
56 | /** Rail's background , default -> #01a99a */
57 | background?: string;
58 | /** Rail's opacity, default -> 0 */
59 | opacity?: number;
60 | /** Rail's size(Height/Width) , default -> 6px */
61 | size?: string;
62 | /** Rail the distance from the two ends of the X axis and Y axis. **/
63 | gutterOfEnds?: string;
64 | /** Rail the distance from the side of container. **/
65 | gutterOfSide?: string;
66 | /** Whether to keep rail show or not, default -> false, event content height is not enough */
67 | keepShow?: boolean;
68 | }
69 |
70 | type Partial = { [P in keyof T]?: T[P] };
71 | type Style = Partial;
72 |
73 | interface bar {
74 | /** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
75 | specifyBorderRadius?: boolean | string;
76 | /** How long to hide bar after mouseleave, default -> 500 */
77 | showDelay?: number;
78 | /** Whether to keep show or not, default -> false */
79 | keepShow?: boolean;
80 | /** Whether to show bar on scrolling, default -> true */
81 | onlyShowBarOnScroll?: boolean;
82 | /** Bar's background , default -> #00a650 */
83 | background?: string;
84 | /** Bar's opacity, default -> 1 */
85 | opacity?: number;
86 | // Sometimes, the nativebar maybe on the left,
87 | // See https://github.com/YvesCoding/vuescroll/issues/64
88 | verticalNativeBarPos?: 'right';
89 | // A number in a range of (0, 1),
90 | // such as 0.5, means 50%. 0.3 means 30%.
91 | minSize?: number;
92 | // fix #142
93 | size?: string;
94 | // disable bar or not
95 | disable?: boolean;
96 | // the percent of delta of native scroll while mouse wheeling. defalut 1
97 | deltaPercent?:number
98 | }
99 |
100 | interface scrollButton {
101 | enable?: boolean;
102 | background?: string;
103 | opacity?: number;
104 | step?: number;
105 | mousedownStep?: number;
106 | }
107 |
108 | export interface Config {
109 | vuescroll?: Container;
110 | scrollPanel?: scrollPanel;
111 | scrollConent?: scrollConent;
112 | bar?: bar;
113 | rail?: rail;
114 | scrollButton?: scrollButton;
115 | }
116 |
117 | type Pos = {
118 | x?: number | string;
119 | y?: number | string;
120 | };
121 |
122 | type Page = {
123 | x?: number;
124 | y?: number;
125 | };
126 |
127 | export default interface vuescroll extends Vue {
128 | // ----------------------- Static methods --------------------
129 | static install(vue: typeof Vue): void;
130 | static refreshAll(): void;
131 | static scrollTo(
132 | elm: Document | Element,
133 | x: string | number,
134 | y: string | number,
135 | speed?: number,
136 | easing?: easing,
137 | animate?: boolean,
138 | scrollingComplete?: (x: string | number, y: string | number) => void
139 | ): void;
140 |
141 | // ----------------------- Api -------------------------
142 |
143 | /**
144 | * @description Refresh the current vuescroll's all states
145 | * @memberof vuescroll
146 | */
147 | refresh(): void;
148 |
149 | /**
150 | * @description
151 | * @param {Pos} position The position you want to scroll to
152 | * @param {number} speed the speed of the scrolling, the smaller, the faster.
153 | * @param {easing} easing the animation of scrolling.
154 | * @memberof vuescroll
155 | */
156 | scrollTo(position: Pos, speed?: number, easing?: easing): void;
157 |
158 | /**
159 | * @description
160 | * @param {Pos} delta The delta you want to scroll based on current position
161 | * @param {number} speed the speed of the scrolling, the smaller, the faster.
162 | * @param {easing} easing the animation of scrolling.
163 | * @memberof vuescroll
164 | */
165 | scrollBy(delta: Pos, speed?: number, easing?: easing): void;
166 |
167 | /**
168 | * @description Get the current doms you can see in the container!
169 | * @returns {Array}
170 | * @memberof vuescroll
171 | */
172 | getCurrentviewDom(): Array;
173 |
174 | /**
175 | * @description Scroll the element of vuescroll to your viewport!
176 | * @param {(Element | string)} elm
177 | * @param {boolean} [animate]
178 | * @memberof vuescroll
179 | */
180 | scrollIntoView(elm: Element | string, animate?: boolean): void;
181 |
182 | /**
183 | * @description Get the times you have scrolled
184 | * @author wangyi7099
185 | * @memberof vuescroll
186 | */
187 | getScrollingTimes(): void;
188 |
189 | /**
190 | * @description Clear the times you have scrolled
191 | * @author wangyi7099
192 | * @memberof vuescroll
193 | */
194 | clearScrollingTimes(): void;
195 | /**
196 | * @description Stop current scrolling, can be only used in native
197 | * @author wangyi7099
198 | * @memberof vuescroll
199 | */
200 | stop(): void;
201 | /**
202 | * @description Pause current scrolling, can be only used in native
203 | * @author wangyi7099
204 | * @memberof vuescroll
205 | */
206 | pause(): void;
207 |
208 | /**
209 | * @description Continue the paused scrolling, can be only used in native
210 | * @author wangyi7099
211 | * @memberof vuescroll
212 | */
213 | continue(): void;
214 |
215 | /**
216 | * @description Get current position
217 | * @author wangyi7099
218 | * @memberof vuescroll
219 | */
220 | getPosition(): Position;
221 | }
222 |
--------------------------------------------------------------------------------
/src/mode/mix/core.js:
--------------------------------------------------------------------------------
1 | import { installResizeDetection } from 'core/third-party/resize-detector/index';
2 | import mixins from './mixins';
3 |
4 | export default {
5 | mixins,
6 | mounted() {
7 | if (!this._isDestroyed && !this.renderError) {
8 | if (this.mode == 'slide') {
9 | this.updatedCbs.push(this.updateScroller);
10 | }
11 |
12 | this.$watch(
13 | () => this.mergedOptions.vuescroll.scroller.disable,
14 | (newVal) => {
15 | if (this.scroller) {
16 | this.scroller.__disable = newVal;
17 | }
18 | },
19 | {
20 | flush: 'sync'
21 | }
22 | );
23 | }
24 | },
25 | computed: {
26 | mode() {
27 | return this.mergedOptions.vuescroll.mode;
28 | }
29 | },
30 | methods: {
31 | destroy() {
32 | if (this.destroyScroller) {
33 | this.scroller.stop();
34 | this.destroyScroller();
35 | this.destroyScroller = null;
36 | }
37 |
38 | /* istanbul ignore next */
39 | if (this.destroyResize) {
40 | this.destroyResize();
41 | }
42 | },
43 | handleScroll(nativeEvent) {
44 | this.updateBarStateAndEmitEvent('handle-scroll', nativeEvent);
45 | },
46 | updateBarStateAndEmitEvent(eventType, nativeEvent = null) {
47 | if (this.mode == 'native') {
48 | this.updateNativeModeBarState();
49 | } else if (this.mode == 'slide') {
50 | /* istanbul ignore if */
51 | if (!this.scroller) {
52 | return;
53 | }
54 |
55 | this.updateSlideModeBarState();
56 | }
57 | if (eventType) {
58 | this.emitEvent(eventType, nativeEvent);
59 | }
60 | if (this.mergedOptions.bar.onlyShowBarOnScroll) {
61 | if (
62 | eventType == 'handle-scroll' ||
63 | eventType == 'handle-resize' ||
64 | eventType == 'refresh-status' ||
65 | eventType == 'window-resize' ||
66 | eventType == 'options-change'
67 | ) {
68 | this.showAndDefferedHideBar(true /* forceHideBar: true */);
69 | }
70 | } else {
71 | this.showAndDefferedHideBar();
72 | }
73 | },
74 | getScrollProcess() {
75 | let {
76 | scrollHeight,
77 | scrollWidth,
78 | clientHeight,
79 | clientWidth,
80 | scrollTop,
81 | scrollLeft
82 | } = this.scrollPanelElm;
83 |
84 | if (this.mode == 'slide') {
85 | scrollHeight = this.scroller.__contentHeight;
86 | scrollWidth = this.scroller.__contentWidth;
87 | scrollTop = this.scroller.__scrollTop;
88 | scrollLeft = this.scroller.__scrollLeft;
89 | clientHeight = this.$el.clientHeight;
90 | clientWidth = this.$el.clientWidth;
91 | }
92 |
93 | const v = Math.min(scrollTop / (scrollHeight - clientHeight || 1), 1);
94 | const h = Math.min(scrollLeft / (scrollWidth - clientWidth || 1), 1);
95 |
96 | return {
97 | v,
98 | h
99 | };
100 | },
101 | emitEvent(eventType, nativeEvent = null) {
102 | let { scrollTop, scrollLeft } = this.scrollPanelElm;
103 |
104 | const vertical = {
105 | type: 'vertical'
106 | };
107 | const horizontal = {
108 | type: 'horizontal'
109 | };
110 |
111 | const { v, h } = this.getScrollProcess();
112 | vertical['process'] = v;
113 | horizontal['process'] = h;
114 |
115 | vertical['barSize'] = this.bar.vBar.state.size;
116 | horizontal['barSize'] = this.bar.hBar.state.size;
117 | vertical['scrollTop'] = scrollTop;
118 | horizontal['scrollLeft'] = scrollLeft;
119 |
120 | this.$emit(eventType, vertical, horizontal, nativeEvent);
121 | },
122 | initVariables() {
123 | this.lastMode = this.mode;
124 | this.$el._isVuescroll = true;
125 | },
126 | refreshMode() {
127 | let initPos;
128 | if (this.scroller) {
129 | initPos = this.scroller.getValues();
130 | }
131 |
132 | if (this.destroyScroller) {
133 | this.scroller.stop();
134 | this.destroyScroller();
135 | this.destroyScroller = null;
136 | }
137 |
138 | if (this.mode == 'slide') {
139 | this.destroyScroller = this.registryScroller(initPos);
140 | } else if (this.mode == 'native') {
141 | // remove the legacy transform style attribute
142 | this.scrollPanelElm.style.transform = '';
143 | this.scrollPanelElm.style.transformOrigin = '';
144 | }
145 | },
146 | refreshInternalStatus() {
147 | // 1.set vuescroll height or width according to
148 | // sizeStrategy
149 | this.setVsSize();
150 | // 2. registry resize event
151 | this.registryResize();
152 | // 3. registry scroller if mode is 'slide'
153 | // or remove 'transform origin' is the mode is not `slide`
154 | this.refreshMode();
155 | // 4. update scrollbar's height/width
156 | this.updateBarStateAndEmitEvent('refresh-status');
157 | },
158 |
159 | registryResize() {
160 | const resizeEnable = this.mergedOptions.vuescroll.detectResize;
161 | let modeChanged = false;
162 |
163 | if (this.lastMode != this.mode) {
164 | modeChanged = true;
165 | this.lastMode = this.mode;
166 | }
167 |
168 | /* istanbul ignore next */
169 | if (this.destroyResize && resizeEnable && !modeChanged) {
170 | return;
171 | }
172 |
173 | if (this.destroyResize) {
174 | this.destroyResize();
175 | }
176 |
177 | if (!resizeEnable) {
178 | return;
179 | }
180 |
181 | let contentElm = null;
182 | if (this.mode == 'slide') {
183 | contentElm = this.scrollPanelElm;
184 | } else if (this.mode == 'native') {
185 | // scrollContent maybe a vue-component or a pure-dom
186 | contentElm = this.scrollContentElm;
187 | }
188 |
189 | const vm = this;
190 | const handleWindowResize = function () /* istanbul ignore next */ {
191 | vm.updateBarStateAndEmitEvent('window-resize');
192 | if (vm.mode == 'slide') {
193 | vm.updatedCbs.push(vm.updateScroller);
194 | vm.$forceUpdate();
195 | }
196 | };
197 |
198 | const handleDomResize = () => {
199 | let currentSize = {};
200 | if (this.mode == 'slide') {
201 | currentSize['width'] = this.scroller.__contentWidth;
202 | currentSize['height'] = this.scroller.__contentHeight;
203 | this.updateBarStateAndEmitEvent('handle-resize', currentSize);
204 | // update scroller should after rendering
205 | this.updatedCbs.push(this.updateScroller);
206 | this.$forceUpdate();
207 | } else if (this.mode == 'native') {
208 | currentSize['width'] = this.scrollPanelElm.scrollWidth;
209 | currentSize['height'] = this.scrollPanelElm.scrollHeight;
210 | this.updateBarStateAndEmitEvent('handle-resize', currentSize);
211 | }
212 |
213 | // Since content sie changes, we should tell parent to set
214 | // correct size to fit content's size
215 | this.setVsSize();
216 | };
217 | window.addEventListener('resize', handleWindowResize, false);
218 |
219 | const destroyDomResize = installResizeDetection(
220 | contentElm,
221 | handleDomResize
222 | );
223 |
224 | const destroyWindowResize = () => {
225 | window.removeEventListener('resize', handleWindowResize, false);
226 | };
227 |
228 | this.destroyResize = () => {
229 | destroyWindowResize();
230 | destroyDomResize();
231 |
232 | this.destroyResize = null;
233 | };
234 | },
235 | getPosition() {
236 | if (this.mode == 'slide') {
237 | return this.getSlidePosition();
238 | } else if (this.mode == 'native') {
239 | return this.getNativePosition();
240 | }
241 | }
242 | }
243 | };
244 |
--------------------------------------------------------------------------------
/src/core/mixins/core.js:
--------------------------------------------------------------------------------
1 | import { installResizeDetection } from 'core/third-party/resize-detector/index';
2 | import mixins from './mixins';
3 |
4 | export default {
5 | mixins,
6 | mounted() {
7 | if (!this._isDestroyed && !this.renderError) {
8 | if (this.mode == 'slide') {
9 | this.updatedCbs.push(this.updateScroller);
10 | }
11 |
12 | this.$watch(
13 | () => this.mergedOptions.vuescroll.scroller.disable,
14 | (newVal) => {
15 | if (this.scroller) {
16 | this.scroller.__disable = newVal;
17 | }
18 | },
19 | {
20 | flush: 'sync'
21 | }
22 | );
23 | }
24 | },
25 | computed: {
26 | mode() {
27 | return this.mergedOptions.vuescroll.mode;
28 | }
29 | },
30 | methods: {
31 | destroy() {
32 | if (this.destroyScroller) {
33 | this.scroller.stop();
34 | this.destroyScroller();
35 | this.destroyScroller = null;
36 | }
37 |
38 | /* istanbul ignore next */
39 | if (this.destroyResize) {
40 | this.destroyResize();
41 | }
42 | },
43 | handleScroll(nativeEvent) {
44 | this.updateBarStateAndEmitEvent('handle-scroll', nativeEvent);
45 | },
46 | updateBarStateAndEmitEvent(eventType, nativeEvent = null) {
47 | if (this.mode == 'native') {
48 | this.updateNativeModeBarState();
49 | } else if (this.mode == 'slide') {
50 | /* istanbul ignore if */
51 | if (!this.scroller) {
52 | return;
53 | }
54 |
55 | this.updateSlideModeBarState();
56 | }
57 | if (eventType) {
58 | this.emitEvent(eventType, nativeEvent);
59 | }
60 | if (this.mergedOptions.bar.onlyShowBarOnScroll) {
61 | if (
62 | eventType == 'handle-scroll' ||
63 | eventType == 'handle-resize' ||
64 | eventType == 'refresh-status' ||
65 | eventType == 'window-resize' ||
66 | eventType == 'options-change'
67 | ) {
68 | this.showAndDefferedHideBar(true /* forceHideBar: true */);
69 | }
70 | } else {
71 | this.showAndDefferedHideBar();
72 | }
73 | },
74 | getScrollProcess() {
75 | let {
76 | scrollHeight,
77 | scrollWidth,
78 | clientHeight,
79 | clientWidth,
80 | scrollTop,
81 | scrollLeft
82 | } = this.scrollPanelElm;
83 |
84 | if (this.mode == 'slide') {
85 | scrollHeight = this.scroller.__contentHeight;
86 | scrollWidth = this.scroller.__contentWidth;
87 | scrollTop = this.scroller.__scrollTop;
88 | scrollLeft = this.scroller.__scrollLeft;
89 | clientHeight = this.$el.clientHeight;
90 | clientWidth = this.$el.clientWidth;
91 | }
92 |
93 | const v = Math.min(scrollTop / (scrollHeight - clientHeight || 1), 1);
94 | const h = Math.min(scrollLeft / (scrollWidth - clientWidth || 1), 1);
95 |
96 | return {
97 | v,
98 | h
99 | };
100 | },
101 | emitEvent(eventType, nativeEvent = null) {
102 | let { scrollTop, scrollLeft } = this.scrollPanelElm;
103 |
104 | const vertical = {
105 | type: 'vertical'
106 | };
107 | const horizontal = {
108 | type: 'horizontal'
109 | };
110 |
111 | const { v, h } = this.getScrollProcess();
112 | vertical['process'] = v;
113 | horizontal['process'] = h;
114 |
115 | vertical['barSize'] = this.bar.vBar.state.size;
116 | horizontal['barSize'] = this.bar.hBar.state.size;
117 | vertical['scrollTop'] = scrollTop;
118 | horizontal['scrollLeft'] = scrollLeft;
119 |
120 | this.$emit(eventType, vertical, horizontal, nativeEvent);
121 | },
122 | initVariables() {
123 | this.lastMode = this.mode;
124 | this.$el._isVuescroll = true;
125 | },
126 | refreshMode() {
127 | let initPos;
128 | if (this.scroller) {
129 | initPos = this.scroller.getValues();
130 | }
131 |
132 | if (this.destroyScroller) {
133 | this.scroller.stop();
134 | this.destroyScroller();
135 | this.destroyScroller = null;
136 | }
137 |
138 | if (this.mode == 'slide') {
139 | this.destroyScroller = this.registryScroller(initPos);
140 | } else if (this.mode == 'native') {
141 | // remove the legacy transform style attribute
142 | this.scrollPanelElm.style.transform = '';
143 | this.scrollPanelElm.style.transformOrigin = '';
144 | }
145 | },
146 | refreshInternalStatus() {
147 | // 1.set vuescroll height or width according to
148 | // sizeStrategy
149 | this.setVsSize();
150 | // 2. registry resize event
151 | this.registryResize();
152 | // 3. registry scroller if mode is 'slide'
153 | // or remove 'transform origin' is the mode is not `slide`
154 | this.refreshMode();
155 | // 4. update scrollbar's height/width
156 | this.updateBarStateAndEmitEvent('refresh-status');
157 | },
158 |
159 | registryResize() {
160 | const resizeEnable = this.mergedOptions.vuescroll.detectResize;
161 | let modeChanged = false;
162 |
163 | if (this.lastMode != this.mode) {
164 | modeChanged = true;
165 | this.lastMode = this.mode;
166 | }
167 |
168 | /* istanbul ignore next */
169 | if (this.destroyResize && resizeEnable && !modeChanged) {
170 | return;
171 | }
172 |
173 | if (this.destroyResize) {
174 | this.destroyResize();
175 | }
176 |
177 | if (!resizeEnable) {
178 | return;
179 | }
180 |
181 | let contentElm = null;
182 | if (this.mode == 'slide') {
183 | contentElm = this.scrollPanelElm;
184 | } else if (this.mode == 'native') {
185 | // scrollContent maybe a vue-component or a pure-dom
186 | contentElm = this.scrollContentElm;
187 | }
188 |
189 | const vm = this;
190 | const handleWindowResize = function () /* istanbul ignore next */ {
191 | vm.updateBarStateAndEmitEvent('window-resize');
192 | if (vm.mode == 'slide') {
193 | vm.updatedCbs.push(vm.updateScroller);
194 | vm.$forceUpdate();
195 | }
196 | };
197 |
198 | const handleDomResize = () => {
199 | let currentSize = {};
200 | if (this.mode == 'slide') {
201 | currentSize['width'] = this.scroller.__contentWidth;
202 | currentSize['height'] = this.scroller.__contentHeight;
203 | this.updateBarStateAndEmitEvent('handle-resize', currentSize);
204 | // update scroller should after rendering
205 | this.updatedCbs.push(this.updateScroller);
206 | this.$forceUpdate();
207 | } else if (this.mode == 'native') {
208 | currentSize['width'] = this.scrollPanelElm.scrollWidth;
209 | currentSize['height'] = this.scrollPanelElm.scrollHeight;
210 | this.updateBarStateAndEmitEvent('handle-resize', currentSize);
211 | }
212 |
213 | // Since content sie changes, we should tell parent to set
214 | // correct size to fit content's size
215 | this.setVsSize();
216 | };
217 | window.addEventListener('resize', handleWindowResize, false);
218 |
219 | const destroyDomResize = installResizeDetection(
220 | contentElm,
221 | handleDomResize
222 | );
223 |
224 | const destroyWindowResize = () => {
225 | window.removeEventListener('resize', handleWindowResize, false);
226 | };
227 |
228 | this.destroyResize = () => {
229 | destroyWindowResize();
230 | destroyDomResize();
231 |
232 | this.destroyResize = null;
233 | };
234 | },
235 | getPosition() {
236 | if (this.mode == 'slide') {
237 | return this.getSlidePosition();
238 | } else if (this.mode == 'native') {
239 | return this.getNativePosition();
240 | }
241 | }
242 | }
243 | };
244 |
--------------------------------------------------------------------------------
/test/unit/specs/bar.spec.js:
--------------------------------------------------------------------------------
1 | import {
2 | destroyVM,
3 | createVue,
4 | makeTemplate,
5 | startSchedule,
6 | trigger
7 | } from 'test/unit/util';
8 |
9 | describe('rail and scrollButton', () => {
10 | let vm;
11 |
12 | afterEach(() => {
13 | destroyVM(vm);
14 | });
15 |
16 | it('vBar and hBar should scroll to middle after clicking the middle of the rail', (done) => {
17 | vm = createVue(
18 | {
19 | template: makeTemplate(
20 | {
21 | w: 200,
22 | h: 200
23 | },
24 | {
25 | w: 100,
26 | h: 100
27 | }
28 | ),
29 | data: {
30 | ops: {
31 | bar: {
32 | keepShow: true
33 | }
34 | }
35 | },
36 | methods: {}
37 | },
38 | true
39 | );
40 | const vs = vm.$refs['vs'];
41 | const panelElm = vs.$el.querySelector('.__panel');
42 | let maxScrollTop;
43 | let maxScrollLeft;
44 | startSchedule()
45 | .then(() => {
46 | maxScrollTop = panelElm.scrollHeight - panelElm.clientHeight;
47 | maxScrollLeft = panelElm.scrollWidth - panelElm.clientWidth;
48 |
49 | const vRail = vs.$el.querySelector('.__bar-wrap-is-vertical');
50 | const offset = vRail.offsetHeight;
51 | const clientY = vRail.getBoundingClientRect().top + offset / 2;
52 | trigger(vRail, 'mousedown', { clientY });
53 | })
54 | .wait(350)
55 | .then(() => {
56 | const styleOfTransform =
57 | vs.$el.querySelector('.__bar-is-vertical').style.transform;
58 | expect(styleOfTransform).toBe('translateY(50%)');
59 | expect(panelElm.scrollTop).toBe(maxScrollTop / 2);
60 | })
61 | .then(() => {
62 | const hRail = vs.$el.querySelector('.__bar-wrap-is-horizontal');
63 | const offset = hRail.offsetWidth;
64 | const clientX = hRail.getBoundingClientRect().left + offset / 2;
65 | trigger(hRail, 'mousedown', { clientX });
66 | })
67 | .wait(350)
68 | .then(() => {
69 | const styleOfTransform = vs.$el.querySelector('.__bar-is-horizontal')
70 | .style.transform;
71 | expect(styleOfTransform).toBe('translateX(50%)');
72 | expect(panelElm.scrollLeft).toBe(maxScrollLeft / 2);
73 |
74 | done();
75 | });
76 | });
77 |
78 | it('clicking scroll button on the bottom should scroll down 180', (done) => {
79 | vm = createVue(
80 | {
81 | template: makeTemplate(
82 | {
83 | w: 400,
84 | h: 400
85 | },
86 | {
87 | w: 100,
88 | h: 100
89 | }
90 | ),
91 | data: {
92 | ops: {
93 | scrollButton: {
94 | enable: true,
95 | step: 180
96 | }
97 | }
98 | },
99 | methods: {}
100 | },
101 | true
102 | );
103 | const vs = vm.$refs['vs'];
104 | const panelElm = vs.$el.querySelector('.__panel');
105 |
106 | startSchedule()
107 | .then(() => {
108 | const scrollButton = vs.$el.querySelector(
109 | '.__bar-button-is-vertical-end .__bar-button-inner'
110 | );
111 | trigger(scrollButton, 'mousedown');
112 | })
113 | .wait(350)
114 | .then(() => {
115 | expect(panelElm.scrollTop).toBe(vm.ops.scrollButton.step);
116 | trigger(document, 'mouseup');
117 | done();
118 | });
119 | });
120 |
121 | it('bar size should be 6px and rail size should be 10px', (done) => {
122 | vm = createVue(
123 | {
124 | template: makeTemplate(
125 | {
126 | w: 400,
127 | h: 400
128 | },
129 | {
130 | w: 100,
131 | h: 100
132 | }
133 | ),
134 | data: {
135 | ops: {
136 | rail: {
137 | size: '10px'
138 | },
139 | bar: {
140 | size: '6px'
141 | }
142 | }
143 | }
144 | },
145 | true
146 | );
147 | const vs = vm.$refs['vs'];
148 | startSchedule().then(() => {
149 | const hBar = vs.$el.querySelector('.__bar-is-horizontal');
150 | const hRail = vs.$el.querySelector('.__rail-is-horizontal');
151 | const vBar = vs.$el.querySelector('.__bar-is-vertical');
152 | const vRail = vs.$el.querySelector('.__rail-is-vertical');
153 |
154 | expect(hBar.style.height).toBe('6px');
155 | expect(vBar.style.width).toBe('6px');
156 |
157 | expect(hRail.style.height).toBe('10px');
158 | expect(vRail.style.width).toBe('10px');
159 |
160 | done();
161 | });
162 | });
163 |
164 | it('keep show', (done) => {
165 | vm = createVue(
166 | {
167 | template: makeTemplate(
168 | {
169 | w: 800,
170 | h: 800
171 | },
172 | {
173 | w: 400,
174 | h: 400
175 | }
176 | ),
177 | data: {
178 | ops: {
179 | bar: {
180 | onlyShowBarOnScroll: false,
181 | keepShow: true,
182 | background: 'blue'
183 | }
184 | }
185 | }
186 | },
187 | true
188 | );
189 |
190 | let vBar = null;
191 | const vsElm = vm.$refs['vs'].$el;
192 | startSchedule()
193 | .then(() => {
194 | vBar = vm.$el.querySelector('.__bar-is-vertical');
195 | trigger(vsElm, 'mouseleave');
196 | })
197 | // Test for keepShow
198 | .then(() => {
199 | expect(vBar.style.opacity).toBe('1');
200 | vm.ops.bar.keepShow = false;
201 | })
202 | .then(() => {
203 | trigger(vsElm, 'mouseleave');
204 | })
205 | .then(() => {
206 | expect(vBar.style.opacity).toBe('0');
207 | trigger(vsElm, 'mouseenter');
208 | })
209 | .then(() => {
210 | expect(vBar.style.opacity).toBe('1');
211 | done();
212 | });
213 | });
214 |
215 | it('disable bar', (done) => {
216 | vm = createVue(
217 | {
218 | template: makeTemplate(
219 | {
220 | w: 400,
221 | h: 400
222 | },
223 | {
224 | w: 100,
225 | h: 100
226 | }
227 | ),
228 | data: {
229 | ops: {
230 | bar: {
231 | disable: true
232 | }
233 | }
234 | }
235 | },
236 | true
237 | );
238 | const vs = vm.$refs['vs'];
239 | startSchedule().then(() => {
240 | const hBar = vs.$el.querySelector('.__bar-is-horizontal');
241 | const hRail = vs.$el.querySelector('.__rail-is-horizontal');
242 | const vBar = vs.$el.querySelector('.__bar-is-vertical');
243 | const vRail = vs.$el.querySelector('.__rail-is-vertical');
244 |
245 | expect(hBar).toBe(null);
246 | expect(vBar).toBe(null);
247 |
248 | expect(hRail).toBe(null);
249 | expect(vRail).toBe(null);
250 |
251 | done();
252 | });
253 | });
254 |
255 | it('bar should show when hover rail', (done) => {
256 | vm = createVue(
257 | {
258 | template: makeTemplate(
259 | {
260 | w: 800,
261 | h: 800
262 | },
263 | {
264 | w: 400,
265 | h: 400
266 | }
267 | ),
268 | data: {
269 | ops: {}
270 | }
271 | },
272 | true
273 | );
274 |
275 | let rail = null;
276 | let bar = null;
277 | startSchedule()
278 | .then(() => {
279 | rail = vm.$el.querySelector('.__rail-is-vertical');
280 | trigger(rail, 'mouseenter');
281 | })
282 | // Test for keepShow
283 | .then(() => {
284 | bar = vm.$el.querySelector('.__bar-is-vertical');
285 | expect(bar.style.opacity).toBe('1');
286 | })
287 | .then(() => {
288 | trigger(rail, 'mouseleave');
289 | })
290 | .then(() => {
291 | expect(bar.style.opacity).toBe('0');
292 | done();
293 | });
294 | });
295 | });
296 |
--------------------------------------------------------------------------------
/dist/vuescroll-slide.d.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | /**
4 | * Augment the typings of Vue.js
5 | */
6 | declare module 'vue/types/vue' {
7 | interface Vue {
8 | $vuescrollConfig: Config;
9 | }
10 | }
11 |
12 | interface Tips {
13 | deactive?: string;
14 | active?: string;
15 | start?: string;
16 | beforeDeactive?: string;
17 | }
18 |
19 | interface PullRefreshOrPushLoad {
20 | enable?: boolean;
21 | tips?: Tips;
22 | }
23 |
24 | interface PushLoad {
25 | /** Whether auto load or not */
26 | auto?: boolean;
27 | autoLoadDistance?: number;
28 | }
29 |
30 | interface Snapping {
31 | enable?: boolean;
32 | width?: number;
33 | height?: number;
34 | }
35 |
36 | /**
37 | * BounceArray: Specify the bounce direction
38 | * ['top','bottom','left','right']
39 | */
40 | type BounceArray = {
41 | top?: number;
42 | bottom?: number;
43 | left?: number;
44 | right?: number;
45 | };
46 |
47 | type Position = {
48 | scrollTop?: number;
49 | scrollLeft?: number;
50 | };
51 |
52 | interface Scroller {
53 | /** Enable bouncing (content can be slowly moved outside and jumps back after releasing) */
54 | bouncing?: BounceArray;
55 | /** Enable locking to the main axis if user moves only slightly on one of them at start */
56 | locking?: boolean;
57 | /** Minimum zoom level */
58 | minZoom?: number;
59 | /** Maximum zoom level */
60 | maxZoom?: number;
61 | /** Multiply or decrease scrolling speed **/
62 | speedMultiplier?: number;
63 | /** This configures the amount of change applied to deceleration when reaching boundaries **/
64 | penetrationDeceleration?: number;
65 | /** This configures the amount of change applied to acceleration when reaching boundaries **/
66 | penetrationAcceleration?: number;
67 | /** Whether call e.preventDefault event when sliding the content or not */
68 | preventDefault?: boolean;
69 | // whether to disable scroller
70 | disable?: boolean;
71 | }
72 |
73 | interface Container {
74 | sizeStrategy?: 'percent' | 'number';
75 | renderMethod?: 'transform' | 'position';
76 | detectResize?: boolean;
77 | pullRefresh?: PullRefreshOrPushLoad;
78 | pushLoad?: PullRefreshOrPushLoad & PushLoad;
79 | paging?: boolean;
80 | zooming?: boolean;
81 | snapping?: Snapping;
82 | scroller?: Scroller;
83 | wheelSmooth?: boolean;
84 | }
85 |
86 | declare type easing =
87 | | 'easeInQuad'
88 | | 'easeInOutQuad'
89 | | 'easeInCubic'
90 | | 'easeOutCubic'
91 | | 'easeInOutCubic'
92 | | 'easeInQuart'
93 | | 'easeOutQuart'
94 | | 'easeInOutQuart'
95 | | 'easeInQuint'
96 | | 'easeOutQuint'
97 | | 'easeInOutQuint';
98 |
99 | interface scrollPanel {
100 | initialScrollY?: false | string | number;
101 | initialScrollX?: false | string | number;
102 | scrollingX?: boolean;
103 | scrollingY?: boolean;
104 | speed?: number;
105 | easing?: easing | undefined;
106 | padding?: boolean;
107 | verticalNativeBarPos?: 'right' | 'left';
108 | }
109 |
110 | interface rail {
111 | border?: string;
112 | /** Specify rail's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
113 | specifyBorderRadius?: boolean | string;
114 | /** Rail's background , default -> #01a99a */
115 | background?: string;
116 | /** Rail's opacity, default -> 0 */
117 | opacity?: number;
118 | /** Rail's size(Height/Width) , default -> 6px */
119 | size?: string;
120 | /** Rail the distance from the two ends of the X axis and Y axis. **/
121 | gutterOfEnds?: string;
122 | /** Rail the distance from the side of container. **/
123 | gutterOfSide?: string;
124 | /** Whether to keep rail show or not, default -> false, event content height is not enough */
125 | keepShow?: boolean;
126 | }
127 |
128 | type Partial = { [P in keyof T]?: T[P] };
129 | type Style = Partial;
130 |
131 | interface bar {
132 | /** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
133 | specifyBorderRadius?: boolean | string;
134 | /** How long to hide bar after mouseleave, default -> 500 */
135 | showDelay?: number;
136 | /** Whether to keep show or not, default -> false */
137 | keepShow?: boolean;
138 | /** Whether to show bar on scrolling, default -> true */
139 | onlyShowBarOnScroll?: boolean;
140 | /** Bar's background , default -> #00a650 */
141 | background?: string;
142 | /** Bar's opacity, default -> 1 */
143 | opacity?: number;
144 | // Sometimes, the nativebar maybe on the left,
145 | // See https://github.com/YvesCoding/vuescroll/issues/64
146 | verticalNativeBarPos?: 'right';
147 | // A number in a range of (0, 1),
148 | // such as 0.5, means 50%. 0.3 means 30%.
149 | minSize?: number;
150 | // fix #142
151 | size?: string;
152 | // disable bar or not
153 | disable?: boolean;
154 | }
155 |
156 | interface scrollButton {
157 | enable: boolean;
158 | background: string;
159 | opacity: number;
160 | step: number;
161 | mousedownStep: number;
162 | }
163 |
164 | export interface Config {
165 | vuescroll?: Container;
166 | scrollPanel?: scrollPanel;
167 | scrollConent?: scrollConent;
168 | bar?: bar;
169 | rail?: rail;
170 | scrollButton?: scrollButton;
171 | }
172 |
173 | type Pos = {
174 | x?: number | string;
175 | y?: number | string;
176 | };
177 |
178 | type Page = {
179 | x?: number;
180 | y?: number;
181 | };
182 |
183 | export default interface vuescroll extends Vue {
184 | // ----------------------- Static methods --------------------
185 | static install(vue: typeof Vue): void;
186 | static refreshAll(): void;
187 | static scrollTo(
188 | elm: Document | Element,
189 | x: string | number,
190 | y: string | number,
191 | speed?: number,
192 | easing?: easing,
193 | animate?: boolean,
194 | scrollingComplete?: (x: string | number, y: string | number) => void
195 | ): void;
196 |
197 | // ----------------------- Api -------------------------
198 |
199 | /**
200 | * @description Refresh the current vuescroll's all states
201 | * @memberof vuescroll
202 | */
203 | refresh(): void;
204 | /**
205 | * @description
206 | * @param {Pos} position The position you want to scroll to
207 | * @param {number} speed the speed of the scrolling, the smaller, the faster.
208 | * @param {easing} easing the animation of scrolling.
209 | * @memberof vuescroll
210 | */
211 | scrollTo(position: Pos, speed?: number, easing?: easing): void;
212 |
213 | /**
214 | * @description
215 | * @param {Pos} delta The delta you want to scroll based on current position
216 | * @param {number} speed the speed of the scrolling, the smaller, the faster.
217 | * @param {easing} easing the animation of scrolling.
218 | * @memberof vuescroll
219 | */
220 | scrollBy(delta: Pos, speed?: number, easing?: easing): void;
221 | /**
222 | * @description zoomby, only valid in slide mode!
223 | * @param {number} factor The factor you want to zoom based on current factor
224 | * @param {boolean} [animate]
225 | * @param {number} [originLeft]
226 | * @param {number} [originTop]
227 | * @param {() => void} [callback]
228 | * @memberof vuescroll
229 | */
230 | zoomBy(
231 | factor: number,
232 | animate?: boolean,
233 | originLeft?: number,
234 | originTop?: number,
235 | callback?: () => void
236 | ): void;
237 |
238 | /**
239 | * @description zoom to a level, only valid in slide mode !
240 | * @param {number} level The level you want to zoom to.
241 | * @param {boolean} [animate]
242 | * @param {*} [originLeft]
243 | * @param {*} [originTop]
244 | * @param {*} [callback]
245 | * @memberof vuescroll
246 | */
247 | zoomTo(
248 | level: number,
249 | animate?: boolean,
250 | originLeft?: number,
251 | originTop?: number,
252 | callback?: () => void
253 | ): void;
254 |
255 | /**
256 | * @description Get the current page, only vaild in mode is slide and pagind is true!
257 | * @returns {Page}
258 | * @memberof vuescroll
259 | */
260 | getCurrentPage(): Page;
261 |
262 | /**
263 | * @description Go to a given page
264 | * @param {Page} page
265 | * @param {boolean} [animate]
266 | * @memberof vuescroll
267 | */
268 | goToPage(page: Page, animate?: boolean): void;
269 |
270 | /**
271 | * @description Trigger refresh or load's start stage directly!
272 | * @memberof vuescroll
273 | */
274 | triggerRefreshOrLoad(type: 'refresh' | 'load'): void;
275 |
276 | /**
277 | * @description Get the current doms you can see in the container!
278 | * @returns {Array}
279 | * @memberof vuescroll
280 | */
281 | getCurrentviewDom(): Array;
282 |
283 | /**
284 | * @description Scroll the element of vuescroll to your viewport!
285 | * @param {(Element | string)} elm
286 | * @param {boolean} [animate]
287 | * @memberof vuescroll
288 | */
289 | scrollIntoView(elm: Element | string, animate?: boolean): void;
290 |
291 | /**
292 | * @description Get the times you have scrolled
293 | * @author wangyi7099
294 | * @memberof vuescroll
295 | */
296 | getScrollingTimes(): void;
297 |
298 | /**
299 | * @description Clear the times you have scrolled
300 | * @author wangyi7099
301 | * @memberof vuescroll
302 | */
303 | clearScrollingTimes(): void;
304 |
305 | /**
306 | * @description Get current position
307 | * @author wangyi7099
308 | * @memberof vuescroll
309 | */
310 | getPosition(): Position;
311 | }
312 |
--------------------------------------------------------------------------------
/types/vuescroll-slide.d.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | /**
4 | * Augment the typings of Vue.js
5 | */
6 | declare module 'vue/types/vue' {
7 | interface Vue {
8 | $vuescrollConfig: Config;
9 | }
10 | }
11 |
12 | interface Tips {
13 | deactive?: string;
14 | active?: string;
15 | start?: string;
16 | beforeDeactive?: string;
17 | }
18 |
19 | interface PullRefreshOrPushLoad {
20 | enable?: boolean;
21 | tips?: Tips;
22 | }
23 |
24 | interface PushLoad {
25 | /** Whether auto load or not */
26 | auto?: boolean;
27 | autoLoadDistance?: number;
28 | }
29 |
30 | interface Snapping {
31 | enable?: boolean;
32 | width?: number;
33 | height?: number;
34 | }
35 |
36 | /**
37 | * BounceArray: Specify the bounce direction
38 | * ['top','bottom','left','right']
39 | */
40 | type BounceArray = {
41 | top?: number;
42 | bottom?: number;
43 | left?: number;
44 | right?: number;
45 | };
46 |
47 | type Position = {
48 | scrollTop?: number;
49 | scrollLeft?: number;
50 | };
51 |
52 | interface Scroller {
53 | /** Enable bouncing (content can be slowly moved outside and jumps back after releasing) */
54 | bouncing?: BounceArray;
55 | /** Enable locking to the main axis if user moves only slightly on one of them at start */
56 | locking?: boolean;
57 | /** Minimum zoom level */
58 | minZoom?: number;
59 | /** Maximum zoom level */
60 | maxZoom?: number;
61 | /** Multiply or decrease scrolling speed **/
62 | speedMultiplier?: number;
63 | /** This configures the amount of change applied to deceleration when reaching boundaries **/
64 | penetrationDeceleration?: number;
65 | /** This configures the amount of change applied to acceleration when reaching boundaries **/
66 | penetrationAcceleration?: number;
67 | /** Whether call e.preventDefault event when sliding the content or not */
68 | preventDefault?: boolean;
69 | // whether to disable scroller
70 | disable?: boolean;
71 | }
72 |
73 | interface Container {
74 | sizeStrategy?: 'percent' | 'number';
75 | renderMethod?: 'transform' | 'position';
76 | detectResize?: boolean;
77 | pullRefresh?: PullRefreshOrPushLoad;
78 | pushLoad?: PullRefreshOrPushLoad & PushLoad;
79 | paging?: boolean;
80 | zooming?: boolean;
81 | snapping?: Snapping;
82 | scroller?: Scroller;
83 | wheelSmooth?: boolean;
84 | }
85 |
86 | declare type easing =
87 | | 'easeInQuad'
88 | | 'easeInOutQuad'
89 | | 'easeInCubic'
90 | | 'easeOutCubic'
91 | | 'easeInOutCubic'
92 | | 'easeInQuart'
93 | | 'easeOutQuart'
94 | | 'easeInOutQuart'
95 | | 'easeInQuint'
96 | | 'easeOutQuint'
97 | | 'easeInOutQuint';
98 |
99 | interface scrollPanel {
100 | initialScrollY?: false | string | number;
101 | initialScrollX?: false | string | number;
102 | scrollingX?: boolean;
103 | scrollingY?: boolean;
104 | speed?: number;
105 | easing?: easing | undefined;
106 | padding?: boolean;
107 | verticalNativeBarPos?: 'right' | 'left';
108 | }
109 |
110 | interface rail {
111 | border?: string;
112 | /** Specify rail's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
113 | specifyBorderRadius?: boolean | string;
114 | /** Rail's background , default -> #01a99a */
115 | background?: string;
116 | /** Rail's opacity, default -> 0 */
117 | opacity?: number;
118 | /** Rail's size(Height/Width) , default -> 6px */
119 | size?: string;
120 | /** Rail the distance from the two ends of the X axis and Y axis. **/
121 | gutterOfEnds?: string;
122 | /** Rail the distance from the side of container. **/
123 | gutterOfSide?: string;
124 | /** Whether to keep rail show or not, default -> false, event content height is not enough */
125 | keepShow?: boolean;
126 | }
127 |
128 | type Partial = { [P in keyof T]?: T[P] };
129 | type Style = Partial;
130 |
131 | interface bar {
132 | /** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
133 | specifyBorderRadius?: boolean | string;
134 | /** How long to hide bar after mouseleave, default -> 500 */
135 | showDelay?: number;
136 | /** Whether to keep show or not, default -> false */
137 | keepShow?: boolean;
138 | /** Whether to show bar on scrolling, default -> true */
139 | onlyShowBarOnScroll?: boolean;
140 | /** Bar's background , default -> #00a650 */
141 | background?: string;
142 | /** Bar's opacity, default -> 1 */
143 | opacity?: number;
144 | // Sometimes, the nativebar maybe on the left,
145 | // See https://github.com/YvesCoding/vuescroll/issues/64
146 | verticalNativeBarPos?: 'right';
147 | // A number in a range of (0, 1),
148 | // such as 0.5, means 50%. 0.3 means 30%.
149 | minSize?: number;
150 | // fix #142
151 | size?: string;
152 | // disable bar or not
153 | disable?: boolean;
154 | }
155 |
156 | interface scrollButton {
157 | enable: boolean;
158 | background: string;
159 | opacity: number;
160 | step: number;
161 | mousedownStep: number;
162 | }
163 |
164 | export interface Config {
165 | vuescroll?: Container;
166 | scrollPanel?: scrollPanel;
167 | scrollConent?: scrollConent;
168 | bar?: bar;
169 | rail?: rail;
170 | scrollButton?: scrollButton;
171 | }
172 |
173 | type Pos = {
174 | x?: number | string;
175 | y?: number | string;
176 | };
177 |
178 | type Page = {
179 | x?: number;
180 | y?: number;
181 | };
182 |
183 | export default interface vuescroll extends Vue {
184 | // ----------------------- Static methods --------------------
185 | static install(vue: typeof Vue): void;
186 | static refreshAll(): void;
187 | static scrollTo(
188 | elm: Document | Element,
189 | x: string | number,
190 | y: string | number,
191 | speed?: number,
192 | easing?: easing,
193 | animate?: boolean,
194 | scrollingComplete?: (x: string | number, y: string | number) => void
195 | ): void;
196 |
197 | // ----------------------- Api -------------------------
198 |
199 | /**
200 | * @description Refresh the current vuescroll's all states
201 | * @memberof vuescroll
202 | */
203 | refresh(): void;
204 | /**
205 | * @description
206 | * @param {Pos} position The position you want to scroll to
207 | * @param {number} speed the speed of the scrolling, the smaller, the faster.
208 | * @param {easing} easing the animation of scrolling.
209 | * @memberof vuescroll
210 | */
211 | scrollTo(position: Pos, speed?: number, easing?: easing): void;
212 |
213 | /**
214 | * @description
215 | * @param {Pos} delta The delta you want to scroll based on current position
216 | * @param {number} speed the speed of the scrolling, the smaller, the faster.
217 | * @param {easing} easing the animation of scrolling.
218 | * @memberof vuescroll
219 | */
220 | scrollBy(delta: Pos, speed?: number, easing?: easing): void;
221 | /**
222 | * @description zoomby, only valid in slide mode!
223 | * @param {number} factor The factor you want to zoom based on current factor
224 | * @param {boolean} [animate]
225 | * @param {number} [originLeft]
226 | * @param {number} [originTop]
227 | * @param {() => void} [callback]
228 | * @memberof vuescroll
229 | */
230 | zoomBy(
231 | factor: number,
232 | animate?: boolean,
233 | originLeft?: number,
234 | originTop?: number,
235 | callback?: () => void
236 | ): void;
237 |
238 | /**
239 | * @description zoom to a level, only valid in slide mode !
240 | * @param {number} level The level you want to zoom to.
241 | * @param {boolean} [animate]
242 | * @param {*} [originLeft]
243 | * @param {*} [originTop]
244 | * @param {*} [callback]
245 | * @memberof vuescroll
246 | */
247 | zoomTo(
248 | level: number,
249 | animate?: boolean,
250 | originLeft?: number,
251 | originTop?: number,
252 | callback?: () => void
253 | ): void;
254 |
255 | /**
256 | * @description Get the current page, only vaild in mode is slide and pagind is true!
257 | * @returns {Page}
258 | * @memberof vuescroll
259 | */
260 | getCurrentPage(): Page;
261 |
262 | /**
263 | * @description Go to a given page
264 | * @param {Page} page
265 | * @param {boolean} [animate]
266 | * @memberof vuescroll
267 | */
268 | goToPage(page: Page, animate?: boolean): void;
269 |
270 | /**
271 | * @description Trigger refresh or load's start stage directly!
272 | * @memberof vuescroll
273 | */
274 | triggerRefreshOrLoad(type: 'refresh' | 'load'): void;
275 |
276 | /**
277 | * @description Get the current doms you can see in the container!
278 | * @returns {Array}
279 | * @memberof vuescroll
280 | */
281 | getCurrentviewDom(): Array;
282 |
283 | /**
284 | * @description Scroll the element of vuescroll to your viewport!
285 | * @param {(Element | string)} elm
286 | * @param {boolean} [animate]
287 | * @memberof vuescroll
288 | */
289 | scrollIntoView(elm: Element | string, animate?: boolean): void;
290 |
291 | /**
292 | * @description Get the times you have scrolled
293 | * @author wangyi7099
294 | * @memberof vuescroll
295 | */
296 | getScrollingTimes(): void;
297 |
298 | /**
299 | * @description Clear the times you have scrolled
300 | * @author wangyi7099
301 | * @memberof vuescroll
302 | */
303 | clearScrollingTimes(): void;
304 |
305 | /**
306 | * @description Get current position
307 | * @author wangyi7099
308 | * @memberof vuescroll
309 | */
310 | getPosition(): Position;
311 | }
312 |
--------------------------------------------------------------------------------
/src/shared/runtime.js:
--------------------------------------------------------------------------------
1 | import { isServer, mergeObject } from './utils';
2 | import { ZoomManager } from './zoomManager';
3 | import { h } from 'vue';
4 |
5 | let scrollBarWidth;
6 | let zoomManager;
7 | export function getGutter() {
8 | /* istanbul ignore next */
9 | if (isServer()) return 0;
10 | if (!zoomManager) {
11 | zoomManager = new ZoomManager();
12 | }
13 | if (scrollBarWidth !== undefined)
14 | return scrollBarWidth * zoomManager.getRatioBetweenPreAndCurrent();
15 | const outer = document.createElement('div');
16 | outer.style.visibility = 'hidden';
17 | outer.style.width = '100px';
18 | outer.style.position = 'absolute';
19 | outer.style.top = '-9999px';
20 | document.body.appendChild(outer);
21 |
22 | const widthNoScroll = outer.offsetWidth;
23 | outer.style.overflow = 'scroll';
24 |
25 | const inner = document.createElement('div');
26 | inner.style.width = '100%';
27 | outer.appendChild(inner);
28 |
29 | const widthWithScroll = inner.offsetWidth;
30 | outer.parentNode.removeChild(outer);
31 | scrollBarWidth = widthNoScroll - widthWithScroll;
32 | // multi the browser zoom
33 | if (!zoomManager) {
34 | zoomManager = new ZoomManager();
35 | }
36 | return scrollBarWidth * zoomManager.getRatioBetweenPreAndCurrent();
37 | }
38 |
39 | export function eventCenter(
40 | dom,
41 | eventName,
42 | hander,
43 | capture = false,
44 | type = 'on'
45 | ) {
46 | type == 'on'
47 | ? dom.addEventListener(eventName, hander, capture)
48 | : dom.removeEventListener(eventName, hander, capture);
49 | }
50 |
51 | export function isChildInParent(child, parent) {
52 | let flag = false;
53 | if (!child || !parent) {
54 | return flag;
55 | }
56 | while (
57 | child.parentNode !== parent &&
58 | child.parentNode.nodeType !== 9 &&
59 | !child.parentNode._isVuescroll
60 | ) {
61 | child = child.parentNode;
62 | }
63 | if (child.parentNode == parent) {
64 | flag = true;
65 | }
66 | return flag;
67 | }
68 |
69 | export function getPrefix(global) {
70 | var docStyle = document.documentElement.style;
71 | var engine;
72 | /* istanbul ignore if */
73 | if (
74 | global.opera &&
75 | Object.prototype.toString.call(opera) === '[object Opera]'
76 | ) {
77 | engine = 'presto';
78 | } /* istanbul ignore next */ else if ('MozAppearance' in docStyle) {
79 | engine = 'gecko';
80 | } else if ('WebkitAppearance' in docStyle) {
81 | engine = 'webkit';
82 | } /* istanbul ignore next */ else if (
83 | typeof navigator.cpuClass === 'string'
84 | ) {
85 | engine = 'trident';
86 | }
87 | var vendorPrefix = {
88 | trident: 'ms',
89 | gecko: 'moz',
90 | webkit: 'webkit',
91 | presto: 'O'
92 | }[engine];
93 | return vendorPrefix;
94 | }
95 |
96 | export function getComplitableStyle(property, value) {
97 | /* istanbul ignore if */
98 | if (isServer()) return false;
99 |
100 | const compatibleValue = `-${getPrefix(window)}-${value}`;
101 | const testElm = document.createElement('div');
102 | testElm.style[property] = compatibleValue;
103 | if (testElm.style[property] == compatibleValue) {
104 | return compatibleValue;
105 | }
106 | /* istanbul ignore next */
107 | return false;
108 | }
109 |
110 | /**
111 | * Insert children into user-passed slot at vnode level
112 | */
113 | export function insertChildrenIntoSlot(
114 | parentVnodeFunc,
115 | childVNodeFunc,
116 | data = {}
117 | ) {
118 | const parentVnode = parentVnodeFunc();
119 | const childVNode = childVNodeFunc();
120 | /* istanbul ignore if */
121 | if (parentVnode && parentVnode.length > 1) {
122 | return () => [...parentVnode, ...childVNode];
123 | }
124 |
125 | let { ch, tag } = getVnodeInfo(parentVnode);
126 |
127 | const newCh = () => [...ch, ...childVNode];
128 |
129 | return h(
130 | tag,
131 | mergeObject(
132 | data,
133 | parentVnode[0].props || {}, // merge our props and the props that user passed to custom component.
134 | false,
135 | true
136 | ),
137 | {
138 | default: newCh
139 | }
140 | );
141 | }
142 |
143 | /**
144 | * Get the info of a vnode,
145 | * vnode must be parentVnode
146 | */
147 | export function getVnodeInfo(vnode) {
148 | /* istanbul ignore if */
149 | if (!vnode || vnode.length > 1) return {};
150 |
151 | const firstVnode = vnode[0] ? vnode[0] : vnode;
152 | let ch;
153 | let tag;
154 |
155 | ch = firstVnode.children || [];
156 | tag = firstVnode.type;
157 |
158 | return {
159 | ch,
160 | tag
161 | };
162 | }
163 |
164 | /**
165 | * Get the vuescroll instance instead of
166 | * user pass component like slot.
167 | */
168 | export function getRealParent(ctx) {
169 | let parent = ctx.$parent;
170 | if (!parent.$data._isVuescrollRoot && parent) {
171 | parent = parent.$parent;
172 | }
173 | return parent;
174 | }
175 |
176 | export function createStyle(styleId, cssText) {
177 | /* istanbul ignore if */
178 | if (isServer() || document.getElementById(styleId)) {
179 | return;
180 | }
181 |
182 | const head = document.head || doc.getElementsByTagName('head')[0];
183 | const style = document.createElement('style');
184 |
185 | style.id = styleId;
186 | style.type = 'text/css';
187 |
188 | /* istanbul ignore if */
189 | if (style.styleSheet) {
190 | style.styleSheet.cssText = cssText;
191 | } else {
192 | style.appendChild(document.createTextNode(cssText));
193 | }
194 |
195 | head.appendChild(style);
196 | }
197 |
198 | // Hide the ios native scrollbar.
199 | export function createHideBarStyle() {
200 | /* istanbul ignore next */
201 | {
202 | const cssText = `.__hidebar::-webkit-scrollbar {
203 | width: 0;
204 | height: 0;
205 | }`;
206 |
207 | createStyle('vuescroll-hide-ios-bar', cssText);
208 | }
209 | }
210 |
211 | // create slide mode style
212 | export function createSlideModeStyle() {
213 | const cssText = `
214 | @-webkit-keyframes loading-rotate {
215 | to {
216 | -webkit-transform: rotate(1turn);
217 | transform: rotate(1turn);
218 | }
219 | }
220 |
221 | @keyframes loading-rotate {
222 | to {
223 | -webkit-transform: rotate(1turn);
224 | transform: rotate(1turn);
225 | }
226 | }
227 |
228 | @-webkit-keyframes loading-wipe {
229 | 0% {
230 | stroke-dasharray: 1, 200;
231 | stroke-dashoffset: 0;
232 | }
233 | 50% {
234 | stroke-dasharray: 90, 150;
235 | stroke-dashoffset: -40px;
236 | }
237 | to {
238 | stroke-dasharray: 90, 150;
239 | stroke-dashoffset: -120px;
240 | }
241 | }
242 |
243 | @keyframes loading-wipe {
244 | 0% {
245 | stroke-dasharray: 1, 200;
246 | stroke-dashoffset: 0;
247 | }
248 | 50% {
249 | stroke-dasharray: 90, 150;
250 | stroke-dashoffset: -40px;
251 | }
252 | to {
253 | stroke-dasharray: 90, 150;
254 | stroke-dashoffset: -120px;
255 | }
256 | }
257 |
258 | .__vuescroll .__refresh,
259 | .__vuescroll .__load {
260 | position: absolute;
261 | width: 100%;
262 | color: black;
263 | height: 50px;
264 | line-height: 50px;
265 | text-align: center;
266 | font-size: 16px;
267 | }
268 | .__vuescroll .__refresh svg,
269 | .__vuescroll .__load svg {
270 | margin-right: 10px;
271 | width: 25px;
272 | height: 25px;
273 | vertical-align: sub;
274 | }
275 | .__vuescroll .__refresh svg.active,
276 | .__vuescroll .__load svg.active {
277 | transition: all 0.2s;
278 | }
279 | .__vuescroll .__refresh svg.active.deactive,
280 | .__vuescroll .__load svg.active.deactive {
281 | transform: rotateZ(180deg);
282 | }
283 | .__vuescroll .__refresh svg path,
284 | .__vuescroll .__refresh svg rect,
285 | .__vuescroll .__load svg path,
286 | .__vuescroll .__load svg rect {
287 | fill: #20a0ff;
288 | }
289 | .__vuescroll .__refresh svg.start,
290 | .__vuescroll .__load svg.start {
291 | stroke: #343640;
292 | stroke-width: 4;
293 | stroke-linecap: round;
294 | -webkit-animation: loading-rotate 2s linear infinite;
295 | animation: loading-rotate 2s linear infinite;
296 | }
297 | .__vuescroll .__refresh svg.start .bg-path,
298 | .__vuescroll .__load svg.start .bg-path {
299 | stroke: #f2f2f2;
300 | fill: none;
301 | }
302 | .__vuescroll .__refresh svg.start .active-path,
303 | .__vuescroll .__load svg.start .active-path {
304 | stroke: #20a0ff;
305 | fill: none;
306 | stroke-dasharray: 90, 150;
307 | stroke-dashoffset: 0;
308 | -webkit-animation: loading-wipe 1.5s ease-in-out infinite;
309 | animation: loading-wipe 1.5s ease-in-out infinite;
310 | }
311 | `;
312 |
313 | createStyle('vuescroll-silde-mode-style', cssText);
314 | }
315 |
316 | /**
317 | * Get the children of parent those are in viewport
318 | */
319 | export function getCurrentViewportDom(parent, container) {
320 | const children = parent.children;
321 | const domFragment = [];
322 |
323 | const isCurrentview = (dom) => {
324 | const { left, top, width, height } = dom.getBoundingClientRect();
325 | const {
326 | left: parentLeft,
327 | top: parentTop,
328 | height: parentHeight,
329 | width: parentWidth
330 | } = container.getBoundingClientRect();
331 | if (
332 | left - parentLeft + width > 0 &&
333 | left - parentLeft < parentWidth &&
334 | top - parentTop + height > 0 &&
335 | top - parentTop < parentHeight
336 | ) {
337 | return true;
338 | }
339 | return false;
340 | };
341 |
342 | for (let i = 0; i < children.length; i++) {
343 | const dom = children.item(i);
344 | if (isCurrentview(dom) && !dom.isResizeElm) {
345 | domFragment.push(dom);
346 | }
347 | }
348 | return domFragment;
349 | }
350 |
--------------------------------------------------------------------------------
/test/unit/specs/assert-warn-info.spec.js:
--------------------------------------------------------------------------------
1 | // https://github.com/vuejs/vue/blob/dev/test/helpers/to-have-been-warned.js
2 | import {
3 | destroyVM,
4 | createVue,
5 | makeTemplate,
6 | startSchedule
7 | } from 'test/unit/util';
8 | import { modes } from 'src/shared/constants';
9 | import { vuescroll as _vs } from '../util';
10 |
11 | function noop() {}
12 |
13 | if (typeof console === 'undefined') {
14 | window.console = {
15 | warn: noop,
16 | error: noop
17 | };
18 | }
19 |
20 | // avoid info messages during test
21 | console.info = noop;
22 |
23 | let asserted;
24 |
25 | function createCompareFn(spy) {
26 | const hasWarned = msg => {
27 | var count = spy.calls.count();
28 | var args;
29 | while (count--) {
30 | args = spy.calls.argsFor(count);
31 | if (args.some(containsMsg)) {
32 | return true;
33 | }
34 | }
35 |
36 | function containsMsg(arg) {
37 | return arg.toString().indexOf(msg) > -1;
38 | }
39 | };
40 |
41 | return {
42 | compare: msg => {
43 | asserted = asserted.concat(msg);
44 | var warned = Array.isArray(msg) ? msg.some(hasWarned) : hasWarned(msg);
45 | return {
46 | pass: warned,
47 | message: warned
48 | ? 'Expected message "' + msg + '" not to have been warned'
49 | : 'Expected message "' + msg + '" to have been warned'
50 | };
51 | }
52 | };
53 | }
54 | describe('assert-warn-info', () => {
55 | let vm;
56 | // define custom matcher for warnings
57 | beforeEach(() => {
58 | asserted = [];
59 | spyOn(console, 'warn');
60 | spyOn(console, 'error');
61 | jasmine.addMatchers({
62 | toHaveBeenWarned: () => createCompareFn(console.error),
63 | toHaveBeenTipped: () => createCompareFn(console.warn)
64 | });
65 | });
66 |
67 | afterEach(done => {
68 | const warned = msg =>
69 | asserted.some(assertedMsg => msg.toString().indexOf(assertedMsg) > -1);
70 | let count = console.error.calls.count();
71 | let args;
72 | while (count--) {
73 | args = console.error.calls.argsFor(count);
74 | if (!warned(args[0])) {
75 | done.fail(`Unexpected console.error message: ${args[0]}`);
76 | return;
77 | }
78 | }
79 | destroyVM(vm);
80 | done();
81 | });
82 |
83 | it('test incorrect mode', () => {
84 | vm = createVue(
85 | {
86 | template: makeTemplate(
87 | {
88 | w: 200,
89 | h: 200
90 | },
91 | {
92 | w: 100,
93 | h: 100
94 | }
95 | ),
96 | data: {
97 | ops: {
98 | vuescroll: {
99 | mode: 'error-mode'
100 | }
101 | }
102 | }
103 | },
104 | true
105 | );
106 | expect(
107 | `Unknown mode: error-mode,the vuescroll's option "mode" should be one of the ${modes}`
108 | ).toHaveBeenWarned();
109 | });
110 |
111 | it('paging, snapping pull to refresh/push to load all true', () => {
112 | vm = createVue(
113 | {
114 | template: makeTemplate(
115 | {
116 | w: 200,
117 | h: 200
118 | },
119 | {
120 | w: 100,
121 | h: 100
122 | }
123 | ),
124 | data: {
125 | ops: {
126 | vuescroll: {
127 | mode: 'slide',
128 | paging: true,
129 | snapping: {
130 | enable: true
131 | },
132 | pullRefresh: /* or pushLoad */ {
133 | enable: true
134 | }
135 | }
136 | }
137 | }
138 | },
139 | true
140 | );
141 | expect(
142 | 'paging, snapping, (pullRefresh with pushLoad) can only one of them to be true'
143 | ).toHaveBeenWarned();
144 | });
145 |
146 | it('error initialScrollY/initialScrollX', () => {
147 | vm = createVue(
148 | {
149 | template: makeTemplate(
150 | {
151 | w: 200,
152 | h: 200
153 | },
154 | {
155 | w: 100,
156 | h: 100
157 | }
158 | ),
159 | data: {
160 | ops: {
161 | scrollPanel: {
162 | initialScrollY: 'aaa',
163 | initialScrollX: 'bbb'
164 | }
165 | }
166 | }
167 | },
168 | true
169 | );
170 | expect(
171 | 'The prop `initialScrollY` or `initialScrollX` should be a percent number like `10%` or an exact number that greater than or equal to 0 like `100`.'
172 | ).toHaveBeenTipped();
173 | });
174 |
175 | it('paging, snapping pull to refresh/push to load all true', () => {
176 | vm = createVue(
177 | {
178 | template: makeTemplate(
179 | {
180 | w: 200,
181 | h: 200
182 | },
183 | {
184 | w: 100,
185 | h: 100
186 | }
187 | ),
188 | data: {
189 | ops: {
190 | vuescroll: {
191 | mode: 'slide',
192 | paging: true,
193 | snapping: {
194 | enable: true
195 | },
196 | pullRefresh: /* or pushLoad */ {
197 | enable: true
198 | }
199 | }
200 | }
201 | }
202 | },
203 | true
204 | );
205 | expect(
206 | 'paging, snapping, (pullRefresh with pushLoad) can only one of them to be true'
207 | ).toHaveBeenWarned();
208 | });
209 |
210 | it('using zoomBy, zoomTo, getCurrentPage, goToPage that is not in slide mode', () => {
211 | vm = createVue(
212 | {
213 | template: makeTemplate(
214 | {
215 | w: 200,
216 | h: 200
217 | },
218 | {
219 | w: 100,
220 | h: 100
221 | }
222 | ),
223 | data: {
224 | ops: {
225 | vuescroll: {
226 | mode: 'native'
227 | }
228 | }
229 | }
230 | },
231 | true
232 | );
233 | const vs = vm.$refs['vs'];
234 | vs.zoomBy();
235 | vs.zoomTo();
236 | vs.getCurrentPage();
237 | vs.goToPage();
238 | expect(
239 | 'getCurrentPage and goToPage are only for slide mode and paging is enble!'
240 | ).toHaveBeenTipped();
241 | expect('zoomBy and zoomTo are only for slide mode!').toHaveBeenTipped();
242 | });
243 |
244 | it('The params passed to scrollIntoView that is not a child of Vuescroll ', () => {
245 | vm = createVue(
246 | {
247 | template: makeTemplate(
248 | {
249 | w: 200,
250 | h: 200
251 | },
252 | {
253 | w: 100,
254 | h: 100
255 | },
256 | '',
257 | 3
258 | ),
259 | data: {
260 | ops: {
261 | vuescroll: {
262 | mode: 'native'
263 | }
264 | }
265 | }
266 | },
267 | true
268 | );
269 | const vs = vm.$refs['vs'];
270 | vs.scrollIntoView('#d4');
271 | expect(
272 | 'The element or selector you passed is not the element of Vuescroll, please pass the element that is in Vuescroll to scrollIntoView API.'
273 | ).toHaveBeenTipped();
274 | });
275 |
276 | it('assert triggerRefreshOrLoad warn', done => {
277 | vm = createVue(
278 | {
279 | template: makeTemplate(
280 | {
281 | w: 200,
282 | h: 200
283 | },
284 | {
285 | w: 100,
286 | h: 100
287 | }
288 | ),
289 | data: {
290 | ops: {
291 | vuescroll: {
292 | mode: 'native',
293 | paging: true,
294 | snapping: {
295 | enable: false
296 | },
297 | pullRefresh: /* or pushLoad */ {
298 | enable: false
299 | }
300 | }
301 | }
302 | }
303 | },
304 | true
305 | );
306 | const vs = vm.$refs['vs'];
307 | vs.triggerRefreshOrLoad();
308 | expect(
309 | 'You can only use triggerRefreshOrLoad in slide mode!'
310 | ).toHaveBeenTipped();
311 | vm.ops.vuescroll.mode = 'slide';
312 | startSchedule().then(() => {
313 | vs.triggerRefreshOrLoad();
314 | expect('param must be one of load and refresh!').toHaveBeenTipped();
315 | vs.triggerRefreshOrLoad('refresh');
316 | expect('refresh must be enabled!').toHaveBeenTipped();
317 | vs.triggerRefreshOrLoad('load');
318 | expect(
319 | 'load must be enabled and content\'s height > container\'s height!'
320 | ).toHaveBeenTipped();
321 | done();
322 | });
323 | });
324 |
325 | // Test deprecated options warning
326 | it('Should warn when use vBar,hBar,vRail,hRail', () => {
327 | vm = createVue(
328 | {
329 | template: makeTemplate(
330 | {
331 | w: 200,
332 | h: 200
333 | },
334 | {
335 | w: 100,
336 | h: 100
337 | }
338 | ),
339 | data: {
340 | ops: {
341 | bar: {
342 | vBar: {
343 | foo: 1
344 | },
345 | hBar: {
346 | baz: 1
347 | }
348 | }
349 | }
350 | }
351 | },
352 | true
353 | );
354 |
355 | expect(
356 | 'The options: vRail, hRail, vBar, hBar have been deprecated since v4.7.0,' +
357 | 'please use corresponing rail/bar instead!'
358 | ).toHaveBeenTipped();
359 | });
360 |
361 | // scrollTo (public)
362 | it('scrollTo (public): Should tip user pass a dom for parst param.', () => {
363 | _vs.scrollTo('foo');
364 | expect(
365 | 'You must pass a dom for the first param, ' +
366 | 'for window scrolling, ' +
367 | 'you can pass document as the first param.'
368 | ).toHaveBeenTipped();
369 | });
370 | });
371 |
--------------------------------------------------------------------------------
28 | 5. When I agree, your code will merge into the `dev` branch!
29 |
30 | # 中文版本
31 |
32 | 从两方面贡献代码:
33 |
34 | ### 代码层面
35 |
36 | Vuescroll 是极其容易扩展的，你基本只需要做 2 步即可。
37 |
38 | 1. 在 [global-config.js](https://github.com/YvesCoding/blob/dev/src/shared/global-config.js) 文件中对应的模块处修改/增加对应的特性，比如，我想增加一个可以配置滚动面板颜色的特性,默认是红色，如下图：
39 |