Skip to content

Commit 76ec8a4

Browse files
wangyi7099wangyi7099
committed
build: release 4.5.14
Feature: Add sizeStrategy option for vuescroll To decide use a numberic size or a percent size for vuescroll while parent dom's size maybe a numberic value or a percent value close #26
1 parent 6d2029b commit 76ec8a4

File tree

13 files changed

+237
-159
lines changed

13 files changed

+237
-159
lines changed

‎.eslintrc.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ module.exports = {
55
indent: ['error', 2, { MemberExpression: 'off' }],
66
semi: ['error', 'always'],
77
'no-undef': 0,
8+
'no-unused-vars': [
9+
'error',
10+
{
11+
argsIgnorePattern: '^h$'
12+
}
13+
],
814
quotes: ['error', 'single'],
9-
excludedFiles: 'dist/*.js'
15+
excludedFiles: 'dist/*.js'.anchor,
16+
'no-console': [0]
1017
},
1118
parserOptions: {
1219
ecmaVersion: 6,

‎demo/demo-comprehensive.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,8 @@
199199
enable: false
200200
},
201201
paging: false,
202-
zooming: false
202+
zooming: false,
203+
sizeStrategy: "number"
203204
},
204205
scrollPanel: {
205206
easing: "easeInQuad",

‎dist/vuescroll.common.js‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* @name: vuescroll 4.5.13
2+
* @name: vuescroll 4.5.14
33
* @author: (c) 2018-2018 wangyi7099
44
* @description: A reactive virtual scrollbar based on vue.js 2.X
55
* @license: MIT
@@ -158,6 +158,10 @@ var GCF = {
158158
// vuescroll
159159
vuescroll: {
160160
mode: 'native',
161+
// vuescroll's size(height/width) should be a percent(100%)
162+
// or be a number that is equal to its parentNode's width or
163+
// height ?
164+
sizeStrategy: 'percent',
161165
// pullRefresh or pushLoad is only for the slide mode...
162166
pullRefresh: {
163167
enable: false,
@@ -270,23 +274,23 @@ function validateOptions(ops) {
270274
// validate vuescroll
271275

272276
if (!~modes.indexOf(vuescroll.mode)) {
273-
console.error('[vuescroll][ops]: The vuescroll\'s option "mode" should be one of the ' + modes); //eslint-disable-line
277+
console.error('[vuescroll]: The vuescroll\'s option "mode" should be one of the ' + modes);
274278
shouldStopRender = true;
275279
}
276280

277281
if (vuescroll.paging == vuescroll.snapping.enable && vuescroll.paging && (vuescroll.pullRefresh || vuescroll.pushLoad)) {
278-
console.error('[vuescroll][ops]: paging, snapping, (pullRefresh with pushLoad) can only one of them to be true.'); //eslint-disable-line
282+
console.error('[vuescroll][ops]: paging, snapping, (pullRefresh with pushLoad) can only one of them to be true.');
279283
}
280284
// validate scrollPanel
281285
var initialScrollY = scrollPanel['initialScrollY'];
282286
var initialScrollX = scrollPanel['initialScrollX'];
283287

284288
if (initialScrollY && !String(initialScrollY).match(/^\d+(\.\d+)?(%)?$/)) {
285-
console.error('[vuescroll][ops]: The prop `initialScrollY` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.'); // eslint-disable-line
289+
console.error('[vuescroll][ops]: The prop `initialScrollY` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.');
286290
}
287291

288292
if (initialScrollX && !String(initialScrollX).match(/^\d+(\.\d+)?(%)?$/)) {
289-
console.error('[vuescroll][ops]: The prop `initialScrollX` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.'); // eslint-disable-line
293+
console.error('[vuescroll][ops]: The prop `initialScrollX` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.');
290294
}
291295

292296
return shouldStopRender;
@@ -3069,7 +3073,7 @@ function findValuesByMode(mode, vm) {
30693073
return axis;
30703074
}
30713075

3072-
var vuescroll = {
3076+
var vueScrollCore = {
30733077
name: 'vueScroll',
30743078
components: { bar: bar, rail: rail, scrollContent: scrollContent, scrollPanel: scrollPanel },
30753079
props: { ops: { type: Object } },
@@ -3236,10 +3240,9 @@ var vuescroll = {
32363240

32373241
this.showBar();
32383242
if (this.vuescroll.state.timeoutId) {
3239-
clearTimeout(this.vuescroll.state.timeoutId); //eslint-disable-line
3243+
clearTimeout(this.vuescroll.state.timeoutId);
32403244
}
32413245
this.vuescroll.state.timeoutId = setTimeout(function () {
3242-
//eslint-disable-line
32433246
_this2.vuescroll.state.timeoutId = 0;
32443247
_this2.hideBar();
32453248
}, 500);
@@ -3351,12 +3354,9 @@ var vuescroll = {
33513354
};
33523355
},
33533356
registryParentResize: function registryParentResize() {
3354-
this.destroyParentDomResize = listenResize(this.$el.parentNode, this.setVsSize);
3355-
this.setVsSize();
3357+
this.destroyParentDomResize = listenResize(this.$el.parentNode, this.useNumbericSize);
33563358
},
3357-
3358-
// set its size to be equal to its parentNode
3359-
setVsSize: function setVsSize() {
3359+
useNumbericSize: function useNumbericSize() {
33603360
var parentElm = this.$el.parentNode;
33613361
var position = parentElm.style.position;
33623362

@@ -3366,6 +3366,23 @@ var vuescroll = {
33663366
this.vuescroll.state.height = parentElm.clientHeight + 'px';
33673367
this.vuescroll.state.width = parentElm.clientWidth + 'px';
33683368
},
3369+
usePercentSize: function usePercentSize() {
3370+
this.vuescroll.state.height = '100%';
3371+
this.vuescroll.state.width = '100%';
3372+
},
3373+
3374+
// set its size to be equal to its parentNode
3375+
setVsSize: function setVsSize() {
3376+
if (this.mergedOptions.vuescroll.sizeStrategy == 'number') {
3377+
this.useNumbericSize();
3378+
this.registryParentResize();
3379+
} else if (this.mergedOptions.vuescroll.sizeStrategy == 'percent') {
3380+
if (this.destroyParentDomResize) {
3381+
this.destroyParentDomResize();
3382+
}
3383+
this.usePercentSize();
3384+
}
3385+
},
33693386
recordCurrentPos: function recordCurrentPos() {
33703387
var mode = this.mode;
33713388
if (this.mode !== this.lastMode) {
@@ -3413,7 +3430,7 @@ var vuescroll = {
34133430

34143431
this.registryResize();
34153432
this.initWatch();
3416-
this.registryParentResize();
3433+
this.setVsSize();
34173434
this.$nextTick(function () {
34183435
// update state
34193436
_this5.update();
@@ -3448,11 +3465,11 @@ var scroll = {
34483465
return;
34493466
}
34503467
// registry vuescroll
3451-
Vue$$1.component(vuescroll.name, vuescroll);
3468+
Vue$$1.component(vueScrollCore.name, vueScrollCore);
34523469

34533470
Vue$$1.prototype.$vuescrollConfig = deepMerge(GCF, {});
34543471
scroll.isInstalled = true;
3455-
scroll.version = '4.5.13';
3472+
scroll.version = '4.5.14';
34563473
}
34573474
};
34583475
/* istanbul ignore if */

‎dist/vuescroll.common.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vuescroll.esm.js‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* @name: vuescroll 4.5.13
2+
* @name: vuescroll 4.5.14
33
* @author: (c) 2018-2018 wangyi7099
44
* @description: A reactive virtual scrollbar based on vue.js 2.X
55
* @license: MIT
@@ -154,6 +154,10 @@ var GCF = {
154154
// vuescroll
155155
vuescroll: {
156156
mode: 'native',
157+
// vuescroll's size(height/width) should be a percent(100%)
158+
// or be a number that is equal to its parentNode's width or
159+
// height ?
160+
sizeStrategy: 'percent',
157161
// pullRefresh or pushLoad is only for the slide mode...
158162
pullRefresh: {
159163
enable: false,
@@ -266,23 +270,23 @@ function validateOptions(ops) {
266270
// validate vuescroll
267271

268272
if (!~modes.indexOf(vuescroll.mode)) {
269-
console.error('[vuescroll][ops]: The vuescroll\'s option "mode" should be one of the ' + modes); //eslint-disable-line
273+
console.error('[vuescroll]: The vuescroll\'s option "mode" should be one of the ' + modes);
270274
shouldStopRender = true;
271275
}
272276

273277
if (vuescroll.paging == vuescroll.snapping.enable && vuescroll.paging && (vuescroll.pullRefresh || vuescroll.pushLoad)) {
274-
console.error('[vuescroll][ops]: paging, snapping, (pullRefresh with pushLoad) can only one of them to be true.'); //eslint-disable-line
278+
console.error('[vuescroll][ops]: paging, snapping, (pullRefresh with pushLoad) can only one of them to be true.');
275279
}
276280
// validate scrollPanel
277281
var initialScrollY = scrollPanel['initialScrollY'];
278282
var initialScrollX = scrollPanel['initialScrollX'];
279283

280284
if (initialScrollY && !String(initialScrollY).match(/^\d+(\.\d+)?(%)?$/)) {
281-
console.error('[vuescroll][ops]: The prop `initialScrollY` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.'); // eslint-disable-line
285+
console.error('[vuescroll][ops]: The prop `initialScrollY` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.');
282286
}
283287

284288
if (initialScrollX && !String(initialScrollX).match(/^\d+(\.\d+)?(%)?$/)) {
285-
console.error('[vuescroll][ops]: The prop `initialScrollX` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.'); // eslint-disable-line
289+
console.error('[vuescroll][ops]: The prop `initialScrollX` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.');
286290
}
287291

288292
return shouldStopRender;
@@ -3065,7 +3069,7 @@ function findValuesByMode(mode, vm) {
30653069
return axis;
30663070
}
30673071

3068-
var vuescroll = {
3072+
var vueScrollCore = {
30693073
name: 'vueScroll',
30703074
components: { bar: bar, rail: rail, scrollContent: scrollContent, scrollPanel: scrollPanel },
30713075
props: { ops: { type: Object } },
@@ -3232,10 +3236,9 @@ var vuescroll = {
32323236

32333237
this.showBar();
32343238
if (this.vuescroll.state.timeoutId) {
3235-
clearTimeout(this.vuescroll.state.timeoutId); //eslint-disable-line
3239+
clearTimeout(this.vuescroll.state.timeoutId);
32363240
}
32373241
this.vuescroll.state.timeoutId = setTimeout(function () {
3238-
//eslint-disable-line
32393242
_this2.vuescroll.state.timeoutId = 0;
32403243
_this2.hideBar();
32413244
}, 500);
@@ -3347,12 +3350,9 @@ var vuescroll = {
33473350
};
33483351
},
33493352
registryParentResize: function registryParentResize() {
3350-
this.destroyParentDomResize = listenResize(this.$el.parentNode, this.setVsSize);
3351-
this.setVsSize();
3353+
this.destroyParentDomResize = listenResize(this.$el.parentNode, this.useNumbericSize);
33523354
},
3353-
3354-
// set its size to be equal to its parentNode
3355-
setVsSize: function setVsSize() {
3355+
useNumbericSize: function useNumbericSize() {
33563356
var parentElm = this.$el.parentNode;
33573357
var position = parentElm.style.position;
33583358

@@ -3362,6 +3362,23 @@ var vuescroll = {
33623362
this.vuescroll.state.height = parentElm.clientHeight + 'px';
33633363
this.vuescroll.state.width = parentElm.clientWidth + 'px';
33643364
},
3365+
usePercentSize: function usePercentSize() {
3366+
this.vuescroll.state.height = '100%';
3367+
this.vuescroll.state.width = '100%';
3368+
},
3369+
3370+
// set its size to be equal to its parentNode
3371+
setVsSize: function setVsSize() {
3372+
if (this.mergedOptions.vuescroll.sizeStrategy == 'number') {
3373+
this.useNumbericSize();
3374+
this.registryParentResize();
3375+
} else if (this.mergedOptions.vuescroll.sizeStrategy == 'percent') {
3376+
if (this.destroyParentDomResize) {
3377+
this.destroyParentDomResize();
3378+
}
3379+
this.usePercentSize();
3380+
}
3381+
},
33653382
recordCurrentPos: function recordCurrentPos() {
33663383
var mode = this.mode;
33673384
if (this.mode !== this.lastMode) {
@@ -3409,7 +3426,7 @@ var vuescroll = {
34093426

34103427
this.registryResize();
34113428
this.initWatch();
3412-
this.registryParentResize();
3429+
this.setVsSize();
34133430
this.$nextTick(function () {
34143431
// update state
34153432
_this5.update();
@@ -3444,11 +3461,11 @@ var scroll = {
34443461
return;
34453462
}
34463463
// registry vuescroll
3447-
Vue$$1.component(vuescroll.name, vuescroll);
3464+
Vue$$1.component(vueScrollCore.name, vueScrollCore);
34483465

34493466
Vue$$1.prototype.$vuescrollConfig = deepMerge(GCF, {});
34503467
scroll.isInstalled = true;
3451-
scroll.version = '4.5.13';
3468+
scroll.version = '4.5.14';
34523469
}
34533470
};
34543471
/* istanbul ignore if */

‎dist/vuescroll.esm.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)