Skip to content

Commit

Permalink
feat(api): add triggerRefreshOrLoad Api that you can trigger refresh …
Browse files Browse the repository at this point in the history 
…or load directly
  • Loading branch information
@wangyi7099
wangyi7099 committed May 31, 2018
1 parent 1b4b65d commit 02fb682
Show file tree
Hide file tree
Showing 15 changed files with 386 additions and 202 deletions.
122 changes: 73 additions & 49 deletions dist/vuescroll.common.js
View file
Expand Up @@ -122,8 +122,13 @@ function eventCenter(dom, eventName, hander) {

type == 'on' ? dom.addEventListener(eventName, hander, capture) : dom.removeEventListener(eventName, hander, capture);
}
// native console
var log = console;

var error = function error(msg) {
console.error('[vuescroll] ' + msg);
};
var warn = function warn(msg) {
console.warn('[vuescroll] ' + msg);
};

function isChildInParent(child, parent) {
var flag = false;
Expand Down Expand Up @@ -338,23 +343,23 @@ function validateOptions(ops) {
// validate vuescroll

if (!~modes.indexOf(vuescroll.mode)) {
log.error('[vuescroll]: The vuescroll\'s option "mode" should be one of the ' + modes);
error('The vuescroll\'s option "mode" should be one of the ' + modes);
shouldStopRender = true;
}

if (vuescroll.paging == vuescroll.snapping.enable && vuescroll.paging && (vuescroll.pullRefresh || vuescroll.pushLoad)) {
log.error('[vuescroll]: paging, snapping, (pullRefresh with pushLoad) can only one of them to be true.');
error('paging, snapping, (pullRefresh with pushLoad) can only one of them to be true.');
}
// validate scrollPanel
var initialScrollY = scrollPanel['initialScrollY'];
var initialScrollX = scrollPanel['initialScrollX'];

if (initialScrollY && !String(initialScrollY).match(/^\d+(\.\d+)?(%)?$/)) {
log.error('[vuescroll]: The prop `initialScrollY` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.');
error('The prop `initialScrollY` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.');
}

if (initialScrollX && !String(initialScrollX).match(/^\d+(\.\d+)?(%)?$/)) {
log.error('[vuescroll]: The prop `initialScrollX` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.');
error('The prop `initialScrollX` should be a percent number like 10% or an exact number that greater than or equal to 0 like 100.');
}

return shouldStopRender;
Expand Down Expand Up @@ -761,7 +766,7 @@ var api = {
},
zoomBy: function zoomBy(factor, animate, originLeft, originTop, callback) {
if (this.mode != 'slide') {
log.warn('[vuescroll]: zoomBy and zoomTo are only for slide mode!');
warn('zoomBy and zoomTo are only for slide mode!');
return;
}
this.scroller.zoomBy(factor, animate, originLeft, originTop, callback);
Expand All @@ -773,14 +778,14 @@ var api = {
var callback = arguments[4];

if (this.mode != 'slide') {
log.warn('[vuescroll]: zoomBy and zoomTo are only for slide mode!');
warn('zoomBy and zoomTo are only for slide mode!');
return;
}
this.scroller.zoomTo(level, animate, originLeft, originTop, callback);
},
getCurrentPage: function getCurrentPage() {
if (this.mode != 'slide' || !this.mergedOptions.vuescroll.paging) {
log.warn('[vuescroll]: getCurrentPage and goToPage are only for slide mode and paging is enble!');
warn('getCurrentPage and goToPage are only for slide mode and paging is enble!');
return;
}
return this.scroller.getCurrentPage();
Expand All @@ -789,11 +794,31 @@ var api = {
var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

if (this.mode != 'slide' || !this.mergedOptions.vuescroll.paging) {
log.warn('[vuescroll]: getCurrentPage and goToPage are only for slide mode and paging is enble!');
warn('getCurrentPage and goToPage are only for slide mode and paging is enble!');
return;
}
this.scroller.goToPage(dest, animate);
},
triggerRefreshOrLoad: function triggerRefreshOrLoad(type) {
if (this.mode != 'slide') {
warn('You can only use triggerRefreshOrLoad in slide mode!');
return;
}
var isRefresh = this.mergedOptions.vuescroll.pullRefresh.enable;
var isLoad = this.mergedOptions.vuescroll.pushLoad.enable;
if (type == 'refresh' && !isRefresh) {
warn('refresh must be enabled!');
return;
} else if (type == 'load' && !isLoad) {
warn('load must be enabled!');
return;
} else if (type !== 'refresh' && type !== 'load') {
warn('param must be one of load and refresh!');
return;
}
this.scroller.triggerRefreshOrLoad(type);
return true;
},
getCurrentviewDom: function getCurrentviewDom() {
var _this = this;

Expand Down Expand Up @@ -858,7 +883,7 @@ var api = {
elm = parentElm.querySelector(elm);
}
if (!isChildInParent(elm, parentElm)) {
log.warn('[vuescroll]: The element or selector you passed is not the element of Vuescroll, please pass the element that is in Vuescroll to scrollIntoView API. ');
warn('The element or selector you passed is not the element of Vuescroll, please pass the element that is in Vuescroll to scrollIntoView API. ');
return;
}
// parent elm left, top
Expand Down Expand Up @@ -1284,11 +1309,13 @@ var members = {
this.__publish(this.__scrollLeft, -this.__refreshHeight, this.__zoomLevel, true);
if (this.__refreshStart) {
this.__refreshStart();
this.__refreshActive = true;
}
} else {
this.__publish(this.__scrollLeft, this.__maxScrollTop + this.__loadHeight, this.__zoomLevel, true);
if (this.__loadStart) {
this.__loadStart();
this.__loadActive = true;
}
}
},
Expand Down Expand Up @@ -3254,25 +3281,17 @@ var vueScrollCore = {

this.initWatchOpsChange();

// setTimeout is long enough to
// make sure get correct dom's size
setTimeout(function () {
this.updateBarStateAndEmitEvent();

this.$nextTick(function () {
if (!_this._isDestroyed) {
// update again to make sure bar's size is correct.
_this.updateBarStateAndEmitEvent();
_this.initVuescrollPosition();
}
}, 0);
}
},
updated: function updated() {
var _this2 = this;

this.$nextTick(function () {
if (!_this2._isDestroyed) {
_this2.showAndDefferedHideBar();
}
});
},
beforeDestroy: function beforeDestroy() {
// remove registryed resize
if (this.destroyParentDomResize) {
Expand Down Expand Up @@ -3423,6 +3442,9 @@ var vueScrollCore = {
if (this.mode == 'native' || this.mode == 'pure-native') {
this.updateNativeModeBarState();
} else if (this.mode == 'slide') {
if (!this.scroller) {
return;
}
this.updateSlideModeBarState();
}
if (eventType) {
Expand Down Expand Up @@ -3457,16 +3479,16 @@ var vueScrollCore = {
this.vuescroll.state.isClickingBar = val;
},
showAndDefferedHideBar: function showAndDefferedHideBar() {
var _this3 = this;
var _this2 = this;

this.showBar();
if (this.timeoutId) {
clearTimeout(this.timeoutId);
this.timeoutId = 0;
}
this.timeoutId = setTimeout(function () {
_this3.timeoutId = 0;
_this3.hideBar();
_this2.timeoutId = 0;
_this2.hideBar();
}, this.mergedOptions.bar.showDelay);
},

Expand Down Expand Up @@ -3524,7 +3546,7 @@ var vueScrollCore = {
}
},
registryResize: function registryResize() {
var _this4 = this;
var _this3 = this;

/* istanbul ignore next */
if (this.destroyResize) {
Expand All @@ -3540,22 +3562,22 @@ var vueScrollCore = {
contentElm = this.scrollContentElm;
}
var handleWindowResize = function handleWindowResize() /* istanbul ignore next */{
_this4.updateBarStateAndEmitEvent();
if (_this4.mode == 'slide') {
_this4.updateScroller();
_this3.updateBarStateAndEmitEvent();
if (_this3.mode == 'slide') {
_this3.updateScroller();
}
};
var handleDomResize = function handleDomResize() {
var currentSize = {};
if (_this4.mode == 'slide') {
_this4.updateScroller();
currentSize['width'] = _this4.scroller.__contentWidth;
currentSize['height'] = _this4.scroller.__contentHeight;
} else if (_this4.mode == 'native' || _this4.mode == 'pure-native') {
currentSize['width'] = _this4.scrollPanelElm.scrollWidth;
currentSize['height'] = _this4.scrollPanelElm.scrollHeight;
if (_this3.mode == 'slide') {
_this3.updateScroller();
currentSize['width'] = _this3.scroller.__contentWidth;
currentSize['height'] = _this3.scroller.__contentHeight;
} else if (_this3.mode == 'native' || _this3.mode == 'pure-native') {
currentSize['width'] = _this3.scrollPanelElm.scrollWidth;
currentSize['height'] = _this3.scrollPanelElm.scrollHeight;
}
_this4.updateBarStateAndEmitEvent('handle-resize', currentSize);
_this3.updateBarStateAndEmitEvent('handle-resize', currentSize);
};
window.addEventListener('resize', handleWindowResize, false);
var destroyDomResize = listenResize(contentElm, handleDomResize);
Expand Down Expand Up @@ -3610,33 +3632,35 @@ var vueScrollCore = {
this.vuescroll.state.internalScrollTop = axis.y;
},
initWatchOpsChange: function initWatchOpsChange() {
var _this5 = this;
var _this4 = this;

var watchOpts = {
deep: true,
sync: true
};
this.$watch('mergedOptions', function () {
// record current position
_this5.recordCurrentPos();
_this5.$nextTick(function () {
if (_this5.isSmallChangeThisTick == true) {
_this5.isSmallChangeThisTick = false;
_this4.recordCurrentPos();
setTimeout(function () {
if (_this4.isSmallChangeThisTick == true) {
_this4.isSmallChangeThisTick = false;
_this4.updateBarStateAndEmitEvent();
return;
}
// re do them jobsin case of
// option changes
_this5.setVsSize();
_this5.registryResize();
_this5.updateMode();
});
_this4.setVsSize();
_this4.registryResize();
_this4.updateMode();
_this4.updateBarStateAndEmitEvent();
}, 0);
}, watchOpts);

smallChangeArray.forEach(function (opts) {
_this5.$watch(opts, function () {
_this4.$watch(opts, function () {
// when small changes changed,
// we need not to updateMode or registryResize
_this5.isSmallChangeThisTick = true;
_this4.isSmallChangeThisTick = true;
}, watchOpts);
});
},
Expand Down
2 changes: 1 addition & 1 deletion dist/vuescroll.common.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 02fb682

Please sign in to comment.