331 lines
12 KiB
JavaScript
331 lines
12 KiB
JavaScript
"use strict";
|
|
function _classCallCheck(t, e) {
|
|
if (! (t instanceof e)) throw new TypeError("Cannot call a class as a function")
|
|
}
|
|
var _createClass = function() {
|
|
function t(t, e) {
|
|
for (var i = 0; i < e.length; i++) {
|
|
var s = e[i];
|
|
s.enumerable = s.enumerable || !1,
|
|
s.configurable = !0,
|
|
"value" in s && (s.writable = !0),
|
|
Object.defineProperty(t, s.key, s)
|
|
}
|
|
}
|
|
return function(e, i, s) {
|
|
return i && t(e.prototype, i),
|
|
s && t(e, s),
|
|
e
|
|
}
|
|
} (),
|
|
_PTFuntil = {
|
|
throttle: function(t, e, i, s) {
|
|
var o = null,
|
|
l = null;
|
|
return function() {
|
|
var n = +new Date;
|
|
l || (l = n),
|
|
s && n - l > s ? (e.call(t), l = n, clearTimeout(o)) : (clearTimeout(o), o = setTimeout(function() {
|
|
e.call(t),
|
|
l = null
|
|
},
|
|
i))
|
|
}
|
|
},
|
|
deepMerge: function() {
|
|
var t = function(t) {
|
|
var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
|
|
i = "";
|
|
for (i in e) t[i] = t[i] && "[object Object]" === t[i].toString() ? _PTFuntil.deepMerge(t[i], e[i]) : t[i] = e[i]
|
|
};
|
|
return function() {
|
|
for (var e = {},
|
|
i = arguments.length,
|
|
s = Array(i), o = 0; o < i; o++) s[o] = arguments[o];
|
|
return s.forEach(function(i) {
|
|
t(e, i)
|
|
}),
|
|
e
|
|
}
|
|
} (),
|
|
prefixStyle: function() {
|
|
var t = document.createElement("div").style,
|
|
e = function() {
|
|
for (var e = ["t", "webkitT", "MozT", "msT", "OT"], i = 0, s = e.length; i < s; i++) if (e[i] + "ransform" in t) return e[i].substr(0, e[i].length - 1);
|
|
return ! 1
|
|
} ();
|
|
return function(t) {
|
|
return ! 1 !== e && ("" === e ? t: e + t.charAt(0).toUpperCase() + t.substr(1))
|
|
}
|
|
} ()
|
|
},
|
|
transform = _PTFuntil.prefixStyle("transform"),
|
|
transitionDuration = _PTFuntil.prefixStyle("transitionDuration"),
|
|
defaults = {
|
|
container: "body",
|
|
pull: {
|
|
dampRate: .4,
|
|
set: !0,
|
|
height: 60,
|
|
contentdown: "下拉刷新",
|
|
contentover: "释放刷新",
|
|
contentfresh: "刷新中……",
|
|
success: "刷新成功"
|
|
},
|
|
up: {
|
|
set: !0,
|
|
height: 60,
|
|
contentfresh: "正在加载……",
|
|
contentnomore: "没有更多数据了"
|
|
}
|
|
},
|
|
PullToRefresh = function() {
|
|
function t(e) {
|
|
_classCallCheck(this, t),
|
|
this.options = _PTFuntil.deepMerge({},
|
|
_PTFuntil.deepMerge(defaults, e)),
|
|
e.pull && this.options.pull.set || (this.options.pull.set = !1),
|
|
e.up && this.options.up.set || (this.options.up.set = !1),
|
|
this.dom = document.querySelector(this.options.container),
|
|
this.domHeight = this.dom.offsetHeight,
|
|
this.scrollBox = this.dom.children[0],
|
|
this.progress = null,
|
|
this.data = {
|
|
upLoading: !1,
|
|
firstFull: !1,
|
|
canPull: !0,
|
|
pullLoadding: !1,
|
|
preY: 0,
|
|
starX: 0,
|
|
starY: 0,
|
|
pullHeight: 0,
|
|
canRefresh: !1
|
|
},
|
|
this.init()
|
|
}
|
|
return _createClass(t, [{
|
|
key: "init",
|
|
value: function() {
|
|
this.dom.classList.add("refreshWrap"),
|
|
this.createPullBox(),
|
|
this.createUpbox(),
|
|
this.firstLoad(),
|
|
this.loadMoreEvent(),
|
|
this.pullEvent()
|
|
}
|
|
},
|
|
{
|
|
key: "firstLoad",
|
|
value: function() {
|
|
this.scrollBox.offsetHeight < this.domHeight + this.options.up.height && !this.data.firstFull ? this.loadMore(!0) : this.data.firstFull = !0
|
|
}
|
|
},
|
|
{
|
|
key: "createPullBox",
|
|
value: function() {
|
|
if (!this.options.pull.set) return ! 1;
|
|
this.pullBox = document.createElement("DIV"),
|
|
this.pullBox.className = "refresh",
|
|
this.pullBox.style.visibility = "hidden",
|
|
this.pullBox.innerHTML = '<i class="loading"></i><p class="loadTxt">' + this.options.pull.contentdown + "</p>",
|
|
this.dom.insertBefore(this.pullBox, this.scrollBox),
|
|
this.progress = this.pullBox.querySelector(".loading"),
|
|
this.progressTxt = this.pullBox.querySelector(".loadTxt")
|
|
}
|
|
},
|
|
{
|
|
key: "createUpbox",
|
|
value: function() {
|
|
if (!this.options.up.set) return ! 1;
|
|
var t = getComputedStyle(this.scrollBox).backgroundColor;
|
|
this.upBox = document.createElement("DIV"),
|
|
this.upBox.className = "loadingBox",
|
|
this.upBox.style.backgroundColor = t,
|
|
this.upBox.innerHTML = '<i class="loading rotate"></i><p class="loadTxt">' + this.options.up.contentfresh + "</p>",
|
|
this.dom.appendChild(this.upBox)
|
|
}
|
|
},
|
|
{
|
|
key: "loadMoreEvent",
|
|
value: function() {
|
|
this.dom.onscroll = _PTFuntil.throttle(this, this.scrollCallback, 200, 250)
|
|
}
|
|
},
|
|
{
|
|
key: "scrollCallback",
|
|
value: function() {
|
|
if (!this.data.firstFull) return ! 1;
|
|
this.loadMore()
|
|
}
|
|
},
|
|
{
|
|
key: "loadMore",
|
|
value: function() {
|
|
var t = arguments.length > 0 && void 0 !== arguments[0] && arguments[0];
|
|
if (this.data.upLoading) return ! 1;
|
|
var e = this.dom.scrollTop,
|
|
i = this.dom.scrollHeight; (t || e + this.domHeight + this.options.up.height >= i) && (this.data.upLoading = !0, this.options.up.callback && this.options.up.callback(this))
|
|
}
|
|
},
|
|
{
|
|
key: "endUpLoading",
|
|
value: function() { ! (arguments.length > 0 && void 0 !== arguments[0]) || arguments[0] ? (this.data.upLoading = !1, this.data.firstFull || this.firstLoad()) : this.UpNoMore()
|
|
}
|
|
},
|
|
{
|
|
key: "endPullRefresh",
|
|
value: function() {
|
|
var t = !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0];
|
|
this.showPullSuc(t)
|
|
}
|
|
},
|
|
{
|
|
key: "showPullSuc",
|
|
value: function(t) {
|
|
var e = this;
|
|
this.progress.classList.add("success"),
|
|
this.progress.style[transform] = "rotate(45deg)",
|
|
this.progressTxt.innerText = this.options.pull.success,
|
|
this.progress.classList.remove("rotate"),
|
|
setTimeout(function() {
|
|
e.refreshSuccess(t)
|
|
},
|
|
1e3)
|
|
}
|
|
},
|
|
{
|
|
key: "refreshSuccess",
|
|
value: function(t) {
|
|
var e = this;
|
|
if (this.data.pullLoadding = !1, this.translate(0, 300), this.data.pullHeight = 0, this.dom.scrollTop = 0, setTimeout(function() {
|
|
e.progress.classList.remove("success")
|
|
},
|
|
100), !t) return this.pullBox.style.visibility = "hidden",
|
|
this.UpNoMore(),
|
|
!1;
|
|
this.initUpLoading(),
|
|
setTimeout(function() {
|
|
e.firstLoad(),
|
|
e.pullBox.style.visibility = "hidden"
|
|
},
|
|
100)
|
|
}
|
|
},
|
|
{
|
|
key: "UpNoMore",
|
|
value: function() {
|
|
this.upBox.classList.add("noMore"),
|
|
this.upBox.querySelector(".loadTxt").innerHTML = this.options.up.contentnomore
|
|
}
|
|
},
|
|
{
|
|
key: "pullEvent",
|
|
value: function() {
|
|
var t = this;
|
|
if (!this.options.pull.set) return ! 1;
|
|
var e = function(e) {
|
|
t.data.canRefresh = !1;
|
|
var i = t.dom.scrollTop;
|
|
t.data.canPull = !(i > 0),
|
|
t.data.preY = t.data.starY = e.changedTouches[0].clientY || e.clientY,
|
|
t.data.starX = e.changedTouches[0].clientX || e.clientX
|
|
},
|
|
i = function(e) {
|
|
t.dom.scrollTop;
|
|
if (t.data.pullLoadding || !t.data.canPull) return ! 1;
|
|
t.pullBox.style.visibility = "visible";
|
|
var i = e.changedTouches[0].clientX || e.clientX,
|
|
s = e.changedTouches[0].clientY || e.clientY,
|
|
o = s - t.data.preY;
|
|
t.data.preY = s;
|
|
var l = i - t.data.starX,
|
|
n = s - t.data.starY;
|
|
return ! (Math.abs(l) > Math.abs(n)) && (n < 0 ? (t.data.canPull = !1, !1) : (e.preventDefault(), t.options.pullHeight < t.options.pull.height ? t.data.pullHeight += o: t.data.pullHeight += o < 0 ? o: o * t.options.pull.dampRate, t.data.pullHeight = Math.round(t.data.pullHeight), t.translate(t.data.pullHeight), void t.progressRote(t.data.pullHeight)))
|
|
},
|
|
s = function(e) {
|
|
t.dom.scrollTop;
|
|
return ! t.data.pullLoadding && (t.data.canPull ? (t.data.preY = 0, t.data.starY = 0, t.data.starX = 0, void(t.data.canRefresh ? t.pullRefresh() : (t.pullBox.style.visibility = "hidden", t.data.pullHeight = 0, t.translate(0, 300), t.dom.scrollTop = 0))) : (0 != t.data.pullHeight && (t.data.pullHeight = 0, t.translate(0, 0)), !1))
|
|
};
|
|
this.dom.addEventListener("touchstart",
|
|
function(t) {
|
|
e(t)
|
|
},
|
|
!1),
|
|
this.dom.addEventListener("touchmove",
|
|
function(t) {
|
|
i(t)
|
|
},
|
|
!1),
|
|
this.dom.addEventListener("touchend",
|
|
function(t) {
|
|
s()
|
|
},
|
|
!1)
|
|
}
|
|
},
|
|
{
|
|
key: "pullRefresh",
|
|
value: function() {
|
|
this.data.pullLoadding = !0,
|
|
this.translate(this.options.pull.height, 300),
|
|
this.data.pullHeight = this.options.pull.height,
|
|
this.progressTxt.innerText = this.options.pull.contentfresh,
|
|
this.options.pull.callback && this.options.pull.callback(this),
|
|
this.progress.classList.add("rotate")
|
|
}
|
|
},
|
|
{
|
|
key: "translate",
|
|
value: function() {
|
|
var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
|
|
e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0;
|
|
this.upBox.style[transitionDuration] = e + "ms",
|
|
this.upBox.style[transform] = "translate3d(0," + t + "px,0)",
|
|
this.scrollBox.style[transitionDuration] = e + "ms",
|
|
this.scrollBox.style[transform] = "translate3d(0," + t + "px,0)"
|
|
}
|
|
},
|
|
{
|
|
key: "progressRote",
|
|
value: function() {
|
|
var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
|
|
e = 360 * t / this.options.pull.height;
|
|
return this.progress.style[transform] = "rotate(" + e + "deg)",
|
|
t >= this.options.pull.height ? (this.data.canRefresh || (this.progressTxt.innerText = this.options.pull.contentover, this.data.canRefresh = !0), !1) : (this.data.canRefresh && (this.progressTxt.innerText = this.options.pull.contentdown, this.data.canRefresh = !1), !1)
|
|
}
|
|
},
|
|
{
|
|
key: "initUpLoading",
|
|
value: function() {
|
|
this.data.firstFull = !1,
|
|
this.data.upLoading = !1,
|
|
this.upBox.classList.remove("noMore"),
|
|
this.upBox.querySelector(".loadTxt").innerHTML = this.options.up.contentfresh
|
|
}
|
|
},
|
|
{
|
|
key: "scrollToTop",
|
|
value: function() {
|
|
this.dom.scrollTop = 0
|
|
}
|
|
},
|
|
{
|
|
key: "triggerPullLoading",
|
|
value: function() {
|
|
if (!this.options.pull.set) return ! 1;
|
|
this.pullBox.style.visibility = "visible",
|
|
this.scrollToTop(),
|
|
this.pullRefresh()
|
|
}
|
|
},
|
|
{
|
|
key: "triggerUpLoading",
|
|
value: function() {
|
|
this.initUpLoading(),
|
|
this.loadMore(!0)
|
|
}
|
|
}]),
|
|
t
|
|
} ();
|
|
//# sourceMappingURL=../maps/PullToRefresh.min.js.map
|