Меню
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 канал: Видео на Bst

Блог-note: заметки разработчика

Получить цены товаров с помощью D7-ORM в 1С-Битрикс

Веб-разработка часто требует работы с базой данных для получения и обработки информации о товарах, в том числе и их цен...

Быстрая отписка от всех рассылок модуля "E-mail маркетинг", в кабинете пользователя

Задача: дать пользователям возможность отписаться от всех рассылок "E-mail маркетинга", не только по ссылке из...

Номера страниц в Title и Description при постраничной навигации каталога

Задача: Часто SEO-специалисты просят добавить номер страницы, из постраничной навигации, в заголовок и описание раздела ...

Кастомизация поля input type file, свой внешний вид

Задача: Поле input type="file" предоставляет возможность загрузки файлов на веб-странице. Однако стандартный в...

Вывести разделы инфоблока по первым буквам не меняя структуру каталога. Алфавитный указатель

Например: у нас есть инфоблок с большим количеством разделов. И мы хотим, на сайте разбить разделы по буквам. Самый прос...

Подключение SSL на Битрикс виртуальная машина

С первого января 2017 года, наличие безопасного соединения HTTPS становится практически обязательным. Ваши сайты будут з...

Работа с HTTP-запросами в Bitrix: Обзор возможностей класса \Bitrix\Main\HttpRequest

Класс \Bitrix\Main\HttpRequest, является наследником класса Request, представляет собой мощный инструмент для работы с д...

Сниппеты типографики bootstrap, для Битрикс

Если вы подключили bootstrap к своему сайту, или сверстали весь шаблон, подключив bootstrap из ядра битрикс. Имеет смысл...

Отфильтровать элементы в Битрикс по свойству привязка к разделам

При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо обычной навигации каталогу со...