Можно использовать и в мобильном приложении на cordova/phonegap
API методы тут
https://github.com/BoxFactura/pulltorefresh.js
Код |
---|
/*! * pulltorefreshjs v0.1.18 * (c) Rafael Soto * Released under the MIT License. */ ;!function (b, a) { "object" == typeof exports && "undefined" != typeof module ? module.exports = a() : "function" == typeof define && define.amd ? define(a) : (b = b || self).PullToRefresh = a() }(this, function () { var f = { pullStartY: null, pullMoveY: null, handlers: [], styleEl: null, events: null, dist: 0, state: "pending", timeout: null, distResisted: 0, supportsPassive: !1, supportsPointerEvents: !!window.PointerEvent }; try { window.addEventListener("test", null, { get passive() { f.supportsPassive = !0 } }) } catch (f) { } var b = { setupDOM: function (e) { if (!e.ptrElement) { var i = document.createElement("div"); e.mainElement !== document.body ? e.mainElement.parentNode.insertBefore(i, e.mainElement) : document.body.insertBefore(i, document.body.firstChild), i.classList.add(e.classPrefix + "ptr"), i.innerHTML = e.getMarkup().replace(/__PREFIX__/g, e.classPrefix), e.ptrElement = i, "function" == typeof e.onInit && e.onInit(e), f.styleEl || (f.styleEl = document.createElement("style"), f.styleEl.setAttribute("id", "pull-to-refresh-js-style"), document.head.appendChild(f.styleEl)), f.styleEl.textContent = e.getStyles().replace(/__PREFIX__/g, e.classPrefix).replace(/\s+/g, " ") } return e }, onReset: function (e) { e.ptrElement.classList.remove(e.classPrefix + "refresh"), e.ptrElement.style[e.cssProp] = "0px", setTimeout(function () { e.ptrElement && e.ptrElement.parentNode && (e.ptrElement.parentNode.removeChild(e.ptrElement), e.ptrElement = null), f.state = "pending" }, e.refreshTimeout) }, update: function (e) { var j = e.ptrElement.querySelector("." + e.classPrefix + "icon"), i = e.ptrElement.querySelector("." + e.classPrefix + "text"); j && ("refreshing" === f.state ? j.innerHTML = e.iconRefreshing : j.innerHTML = e.iconArrow), i && ("releasing" === f.state && (i.innerHTML = e.instructionsReleaseToRefresh), "pulling" !== f.state && "pending" !== f.state || (i.innerHTML = e.instructionsPullToRefresh), "refreshing" === f.state && (i.innerHTML = e.instructionsRefreshing)) } }, h = function (e) { return f.pointerEventsEnabled && f.supportsPointerEvents ? e.screenY : e.touches[0].screenY }, c = function () { var m; function n(o) { var l = f.handlers.filter(function (i) { return i.contains(o.target) })[0]; f.enable = !!l, l && "pending" === f.state && (m = b.setupDOM(l), l.shouldPullToRefresh() && (f.pullStartY = h(o)), clearTimeout(f.timeout), b.update(l)) } function k(i) { m && m.ptrElement && f.enable && (f.pullStartY ? f.pullMoveY = h(i) : m.shouldPullToRefresh() && (f.pullStartY = h(i)), "refreshing" !== f.state ? ("pending" === f.state && (m.ptrElement.classList.add(m.classPrefix + "pull"), f.state = "pulling", b.update(m)), f.pullStartY && f.pullMoveY && (f.dist = f.pullMoveY - f.pullStartY), f.distExtra = f.dist - m.distIgnore, f.distExtra > 0 && (i.cancelable && i.preventDefault(), m.ptrElement.style[m.cssProp] = f.distResisted + "px", f.distResisted = m.resistanceFunction(f.distExtra / m.distThreshold) * Math.min(m.distMax, f.distExtra), "pulling" === f.state && f.distResisted > m.distThreshold && (m.ptrElement.classList.add(m.classPrefix + "release"), f.state = "releasing", b.update(m)), "releasing" === f.state && f.distResisted < m.distThreshold && (m.ptrElement.classList.remove(m.classPrefix + "release"), f.state = "pulling", b.update(m)))) : i.cancelable && m.shouldPullToRefresh() && f.pullStartY < f.pullMoveY && i.preventDefault()) } function p() { if (m && m.ptrElement && f.enable) { if ("releasing" === f.state && f.distResisted > m.distThreshold) { f.state = "refreshing", m.ptrElement.style[m.cssProp] = m.distReload + "px", m.ptrElement.classList.add(m.classPrefix + "refresh"), f.timeout = setTimeout(function () { var i = m.onRefresh(function () { return b.onReset(m) }); i && "function" == typeof i.then && i.then(function () { return b.onReset(m) }), i || m.onRefresh.length || b.onReset(m) }, m.refreshTimeout) } else { if ("refreshing" === f.state) { return } m.ptrElement.style[m.cssProp] = "0px", f.state = "pending" } b.update(m), m.ptrElement.classList.remove(m.classPrefix + "release"), m.ptrElement.classList.remove(m.classPrefix + "pull"), f.pullStartY = f.pullMoveY = null, f.dist = f.distResisted = 0 } } function j() { m && m.mainElement.classList.toggle(m.classPrefix + "top", m.shouldPullToRefresh()) } var e = f.supportsPassive ? {passive: f.passive || !1} : void 0; return f.pointerEventsEnabled && f.supportsPointerEvents ? (window.addEventListener("pointerup", p), window.addEventListener("pointerdown", n), window.addEventListener("pointermove", k, e)) : (window.addEventListener("touchend", p), window.addEventListener("touchstart", n), window.addEventListener("touchmove", k, e)), window.addEventListener("scroll", j), { onTouchEnd: p, onTouchStart: n, onTouchMove: k, onScroll: j, destroy: function () { f.pointerEventsEnabled && f.supportsPointerEvents ? (window.removeEventListener("pointerdown", n), window.removeEventListener("pointerup", p), window.removeEventListener("pointermove", k, e)) : (window.removeEventListener("touchstart", n), window.removeEventListener("touchend", p), window.removeEventListener("touchmove", k, e)), window.removeEventListener("scroll", j) } } }, d = { distThreshold: 60, distMax: 80, distReload: 50, distIgnore: 0, mainElement: "body", triggerElement: "body", ptrElement: ".ptr", classPrefix: "ptr--", cssProp: "min-height", iconArrow: "⇣", iconRefreshing: "…", instructionsPullToRefresh: "Pull down to refresh", instructionsReleaseToRefresh: "Release to refresh", instructionsRefreshing: "Refreshing", refreshTimeout: 500, getMarkup: function () { return '\n<div class="__PREFIX__box">\n <div class="__PREFIX__content">\n <div class="__PREFIX__icon"></div>\n <div class="__PREFIX__text"></div>\n </div>\n</div>\n' }, getStyles: function () { return "\n.__PREFIX__ptr {\n box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.12);\n pointer-events: none;\n font-size: 0.85em;\n font-weight: bold;\n top: 0;\n height: 0;\n transition: height 0.3s, min-height 0.3s;\n text-align: center;\n width: 100%;\n overflow: hidden;\n display: flex;\n align-items: flex-end;\n align-content: stretch;\n}\n\n.__PREFIX__box {\n padding: 10px;\n flex-basis: 100%;\n}\n\n.__PREFIX__pull {\n transition: none;\n}\n\n.__PREFIX__text {\n margin-top: .33em;\n color: rgba(0, 0, 0, 0.3);\n}\n\n.__PREFIX__icon {\n color: rgba(0, 0, 0, 0.3);\n transition: transform .3s;\n}\n\n/*\nWhen at the top of the page, disable vertical overscroll so passive touch\nlisteners can take over.\n*/\n.__PREFIX__top {\n touch-action: pan-x pan-down pinch-zoom;\n}\n\n.__PREFIX__release {\n .__PREFIX__icon {\n transform: rotate(180deg);\n }\n}\n" }, onInit: function () { }, onRefresh: function () { return location.reload() }, resistanceFunction: function (i) { return Math.min(1, i / 2.5) }, shouldPullToRefresh: function () { return !window.scrollY } }, a = ["mainElement", "ptrElement", "triggerElement"], g = function (e) { var i = {}; return Object.keys(d).forEach(function (j) { i[j] = e[j] || d[j] }), i.refreshTimeout = "number" == typeof e.refreshTimeout ? e.refreshTimeout : d.refreshTimeout, a.forEach(function (j) { "string" == typeof i[j] && (i[j] = document.querySelector(i[j])) }), f.events || (f.events = c()), i.contains = function (j) { return i.triggerElement.contains(j) }, i.destroy = function () { clearTimeout(f.timeout); var j = f.handlers.indexOf(i); f.handlers.splice(j, 1) }, i }; return { setPassiveMode: function (e) { f.passive = e }, setPointerEventsMode: function (e) { f.pointerEventsEnabled = e }, destroyAll: function () { f.events && (f.events.destroy(), f.events = null), f.handlers.forEach(function (i) { i.destroy() }) }, init: function (e) { void 0 === e && (e = {}); var i = g(e); return f.handlers.push(i), i }, _: {setupHandler: g, setupEvents: c, setupDOM: b.setupDOM, onReset: b.onReset, update: b.update} } }); PullToRefresh.init({ mainElement: ".app_container", onRefresh: function () { window.location.reload() } }); |