Pull to refresh, не большой скрипт для обновления страницы

RSS
Pull to refresh, не большой скрипт для обновления страницы, Скрипт который иммитирует обновление страницы при протягивании. Годится для мобильных версий сайтов и приложений на cordova
 
Pull to refresh, не большой скрипт  для обновления страницы, при перетягивании, на мобильных телефонах.
Можно использовать и в мобильном приложении на 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()
    }
});
 
А можно инструкцию?
 
Цитата
Гость написал:
А можно инструкцию?

Подключаете скрипт на нужной странице, например:
Код
<script  src="/ПУТЬ_К_ФАЙЛУ_СО_СКРИПТОМ.js"></script>


Для тега body задаете class app_container
Код
<body class="app_container">


При желании, можете задать свой class и поменять в скрипте в самом низу

Код
PullToRefresh.init({
    mainElement: ".CВОЙ_CLASS", onRefresh: function () {
        window.location.reload()
    }
});
Изменено: Михаил Базаров - 17.04.2022 11:25:52 (Опечатки:))
 
Михаил Базаров, В консоли ошибка когда начинаешь тянуть вниз для обновления

Жалуется на строчку в которой
return i.triggerElement.contains(j);
Изменено: Михаил Базаров - 08.09.2023 08:29:07
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Файл
 
Поблагодарить и поддержать:
Или подписаться на boosty канал: Видео на Ютубе