/**
* pullRefresh 5+
* @param {type} $
* @returns {undefined}
*/
(function($, document) {
if (!($.os.plus)) { //仅在5+android支持多webview的使用
return;
}
$.plusReady(function() {
if (window.__NWin_Enable__ === false) { //不支持多webview，则不用5+下拉刷新
return;
}
var CLASS_PLUS_PULLREFRESH = $.className('plus-pullrefresh');
var CLASS_VISIBILITY = $.className('visibility');
var CLASS_HIDDEN = $.className('hidden');
var CLASS_BLOCK = $.className('block');
var CLASS_PULL_CAPTION = $.className('pull-caption');
var CLASS_PULL_CAPTION_DOWN = $.className('pull-caption-down');
var CLASS_PULL_CAPTION_REFRESH = $.className('pull-caption-refresh');
var CLASS_PULL_CAPTION_NOMORE = $.className('pull-caption-nomore');
var PlusPullRefresh = $.Class.extend({
init: function(element, options) {
this.element = element;
this.options = options;
this.wrapper = this.scroller = element;
this._init();
this._initPulldownRefreshEvent();
},
_init: function() {
var self = this;
//document.addEventListener('plusscrollbottom', this);
window.addEventListener('dragup', self);
document.addEventListener("plusscrollbottom", self);
self.scrollInterval = window.setInterval(function() {
if (self.isScroll && !self.loading) {
if (window.pageYOffset + window.innerHeight + 10 >= document.documentElement.scrollHeight) {
self.isScroll = false; //放在这里是因为快速滚动的话，有可能检测时，还没到底，所以只要有滚动，没到底之前一直检测高度变化
if (self.bottomPocket) {
self.pullupLoading();
}
}
}
}, 100);
},
_initPulldownRefreshEvent: function() {
var self = this;
$.plusReady(function() {
if(self.options.down.style == "circle"){
//单webview、原生转圈
self.options.webview = plus.webview.currentWebview();
self.options.webview.setPullToRefresh({
support: true,
color:self.options.down.color || '#2BD009',
height: self.options.down.height || '50px',
range: self.options.down.range || '100px',
style: 'circle',
offset: self.options.down.offset || '0px'
}, function() {
self.options.down.callback();
});
}else if (self.topPocket && self.options.webviewId) {
var webview = plus.webview.getWebviewById(self.options.webviewId);//子窗口
if (!webview) {
return;
}
self.options.webview = webview;
var downOptions = self.options.down;
var height = downOptions.height;
webview.addEventListener('close', function() {
var attrWebviewId = self.options.webviewId && self.options.webviewId.replace(/\//g, "_"); //替换所有"/"
self.element.removeAttribute('data-pullrefresh-plus-' + attrWebviewId);
});
webview.addEventListener("dragBounce", function(e) {
if (!self.pulldown) {
self._initPulldownRefresh();
} else {
self.pullPocket.classList.add(CLASS_BLOCK);
}
switch (e.status) {
case "beforeChangeOffset": //下拉可刷新状态
self._setCaption(downOptions.contentdown);
break;
case "afterChangeOffset": //松开可刷新状态
self._setCaption(downOptions.contentover);
break;
case "dragEndAfterChangeOffset": //正在刷新状态
//执行下拉刷新所在webview的回调函数
webview.evalJS("window.mui&&mui.options.pullRefresh.down.callback()");
self._setCaption(downOptions.contentrefresh);
break;
default:
break;
}
}, false);
webview.setBounce({
position: {
top: height * 2 + 'px'
},
changeoffset: {
top: height + 'px'
}
});
}
});
},
handleEvent: function(e) {
var self = this;
if (self.stopped) {
return;
}
self.isScroll = false;
if (e.type === 'dragup' || e.type === 'plusscrollbottom') {
self.isScroll = true;
setTimeout(function() {
self.isScroll = false;
}, 1000);
}
}
}).extend($.extend({
setStopped: function(stopped) { //该方法是子页面调用的
this.stopped = !!stopped;
//TODO 此处需要设置当前webview的bounce为none,目前5+有BUG
var webview = plus.webview.currentWebview();
if (this.stopped) {
webview.setStyle({
bounce: 'none'
});
webview.setBounce({
position: {
top: 'none'
}
});
} else {
var height = this.options.down.height;
webview.setStyle({
bounce: 'vertical'
});
webview.setBounce({
position: {
top: height * 2 + 'px'
},
changeoffset: {
top: height + 'px'
}
});
}
},
beginPulldown:function() {
var self = this;
$.plusReady(function() {
//这里延时的目的是为了保证下拉刷新组件初始化完成，后续应该做成有状态的
setTimeout(function () {
if(self.options.down.style == "circle"){//单webview下拉刷新
plus.webview.currentWebview().beginPullToRefresh();
}else{//双webview模式
var webview = self.options.webview;
if(webview){
webview.setBounce({
offset: {
top: self.options.down.height + "px"
}
});
}
}
},15);
}.bind(this));
},
pulldownLoading: function () {//该方法是子页面调用的，兼容老的历史API
this.beginPulldown();
},
_pulldownLoading: function() { //该方法是父页面调用的
var self = this;
$.plusReady(function() {
var childWebview = plus.webview.getWebviewById(self.options.webviewId);
childWebview && childWebview.setBounce({
offset: {
top: self.options.down.height + "px"
}
});
});
},
endPulldown:function(){
var _wv = plus.webview.currentWebview();
//双webview的下拉刷新，需要修改父窗口提示信息
if(_wv.parent() && this.options.down.style !== "circle"){
_wv.parent().evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({
webviewId: _wv.id
}) + "')._endPulldownToRefresh()");
}else{
_wv.endPullToRefresh();
}
},
endPulldownToRefresh: function () {//该方法是子页面调用的，兼容老的历史API
this.endPulldown();
},
_endPulldownToRefresh: function() { //该方法是父页面调用的
var self = this;
if (self.topPocket && self.options.webview) {
self.options.webview.endPullToRefresh(); //下拉刷新所在webview回弹
self.loading = false;
self._setCaption(self.options.down.contentdown, true);
setTimeout(function() {
self.loading || self.topPocket.classList.remove(CLASS_BLOCK);
}, 350);
}
},
beginPullup:function(callback) {//开始上拉加载
var self = this;
if (self.isLoading) return;
self.isLoading = true;
if (self.pulldown !== false) {
self._initPullupRefresh();
} else {
this.pullPocket.classList.add(CLASS_BLOCK);
}
setTimeout(function() {
self.pullLoading.classList.add(CLASS_VISIBILITY);
self.pullLoading.classList.remove(CLASS_HIDDEN);
self.pullCaption.innerHTML = ''; //修正5+里边第一次加载时，文字显示的bug(还会显示出来个“多”,猜测应该是渲染问题导致的)
self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_REFRESH;
self.pullCaption.innerHTML = self.options.up.contentrefresh;
callback = callback || self.options.up.callback;
callback && callback.call(self);
}, 300);
},
pullupLoading:function (callback) {//兼容老的API
this.beginPullup(callback);
},
endPullup:function(finished) {//上拉加载结束
var self = this;
if (self.pullLoading) {
self.pullLoading.classList.remove(CLASS_VISIBILITY);
self.pullLoading.classList.add(CLASS_HIDDEN);
self.isLoading = false;
if (finished) {
self.finished = true;
self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_NOMORE;
self.pullCaption.innerHTML = self.options.up.contentnomore;
//取消5+的plusscrollbottom事件
document.removeEventListener('plusscrollbottom', self);
window.removeEventListener('dragup', self);
} else { //初始化时隐藏，后续不再隐藏
self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
self.pullCaption.innerHTML = self.options.up.contentdown;
}
}
},
endPullupToRefresh: function (finished) {//上拉加载结束，兼容老的API
this.endPullup(finished);
},
disablePullupToRefresh: function() {
this._initPullupRefresh();
this.bottomPocket.className = $.className('pull-bottom-pocket') + ' ' + CLASS_HIDDEN;
window.removeEventListener('dragup', this);
},
enablePullupToRefresh: function() {
this._initPullupRefresh();
this.bottomPocket.classList.remove(CLASS_HIDDEN);
this.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
this.pullCaption.innerHTML = this.options.up.contentdown;
document.addEventListener("plusscrollbottom", this);
window.addEventListener('dragup', this);
},
scrollTo: function(x, y, time) {
$.scrollTo(y, time);
},
scrollToBottom: function(time) {
$.scrollTo(document.documentElement.scrollHeight, time);
},
refresh: function(isReset) {
if (isReset && this.finished) {
this.enablePullupToRefresh();
this.finished = false;
}
}
}, $.PullRefresh));
//override h5 pullRefresh
$.fn.pullRefresh_native = function(options) {
var self;
if (this.length === 0) {
self = document.createElement('div');
self.className = 'mui-content';
document.body.appendChild(self);
} else {
self = this[0];
}
var args = options;
//一个父需要支持多个子下拉刷新
options = options || {}
if (typeof options === 'string') {
options = $.parseJSON(options);
};
!options.webviewId && (options.webviewId = (plus.webview.currentWebview().id || plus.webview.currentWebview().getURL()));
var pullRefreshApi = null;
var attrWebviewId = options.webviewId && options.webviewId.replace(/\//g, "_"); //替换所有"/"
var id = self.getAttribute('data-pullrefresh-plus-' + attrWebviewId);
if (!id && typeof args === 'undefined') {
return false;
}
if (!id) { //避免重复初始化5+ pullrefresh
id = ++$.uuid;
self.setAttribute('data-pullrefresh-plus-' + attrWebviewId, id);
document.body.classList.add(CLASS_PLUS_PULLREFRESH);
$.data[id] = pullRefreshApi = new PlusPullRefresh(self, options);
} else {
pullRefreshApi = $.data[id];
}
if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
//pullRefreshApi._pulldownLoading(); //parent webview
pullRefreshApi.beginPulldown();
} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
pullRefreshApi.beginPullup();
}
return pullRefreshApi;
};
});
})(mui, document);