280 lines
13 KiB
JavaScript
280 lines
13 KiB
JavaScript
/**
|
||
* Вебкомпонент для ініціації оновлення сторінки (Pull-to-Refresh)
|
||
* за допомогою свайпу вниз на пристроях з iOS/iPadOS у режимі PWA.
|
||
*/
|
||
class SwipeUpdater extends HTMLElement {
|
||
constructor() {
|
||
super();
|
||
|
||
// 1. Створення Shadow DOM
|
||
// Використовуємо тіньовий DOM для інкапсуляції стилів та структури
|
||
const shadow = this.attachShadow({ mode: 'open' });
|
||
|
||
// 2. Внутрішня функція оновлення за замовчуванням
|
||
this._appReload = () => {
|
||
console.log('Стандартна функція: Перезавантаження сторінки');
|
||
// Стандартна дія - перезавантаження сторінки
|
||
window.location.reload();
|
||
};
|
||
|
||
// 3. Внутрішній стан
|
||
this._isReadyToReload = false; // Прапорець, що вказує на готовність до оновлення
|
||
this._isStandalone = false; // Кеш для перевірки PWA режиму
|
||
this._isTouching = false; // Чи тримає користувач палець на екрані
|
||
|
||
// 4. Створення елементів (Внутрішній HTML)
|
||
shadow.innerHTML = `
|
||
<div id="swipe_updater">
|
||
<div id="swipe_block">
|
||
<svg id="swipe_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-state="active">
|
||
<path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
:host {
|
||
display: block; /* Важливо для позиціонування кореневого елемента */
|
||
}
|
||
|
||
#swipe_updater {
|
||
position: absolute;
|
||
top: 0px;
|
||
width: 100%;
|
||
z-index: 0; /* Базовий z-index */
|
||
/* Використання CSS-змінних для кастомізації кольорів */
|
||
--swipe-color-theme1: var(--ColorThemes2, #525151); /* Колір фону іконки */
|
||
--swipe-color-theme2: var(--ColorThemes3, #f3f3f3); /* Колір іконки та рамки */
|
||
}
|
||
|
||
#swipe_block {
|
||
/* Розрахунок ширини та відступу для центрифікації в певних макетах */
|
||
width: calc(100% - 252px);
|
||
margin-left: 252px;
|
||
height: 50px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
position: relative;
|
||
}
|
||
|
||
#swipe_icon {
|
||
width: 20px;
|
||
fill: var(--swipe-color-theme2);
|
||
transform: rotate(0deg); /* Початковий стан: стрілка вниз */
|
||
position: absolute;
|
||
/* Початкове приховане позиціонування */
|
||
margin-top: -30px;
|
||
top: -30px;
|
||
background: var(--swipe-color-theme1);
|
||
border: 2px solid var(--swipe-color-theme2);
|
||
border-radius: 50%;
|
||
padding: 10px;
|
||
display: flex;
|
||
overflow: hidden;
|
||
height: 0;
|
||
opacity: 0;
|
||
/* Анімація: прихована іконка плавно з'являється (активується/деактивується) */
|
||
transition: height 0ms 450ms, opacity 450ms 0ms, transform 450ms;
|
||
}
|
||
|
||
#swipe_icon[data-state="active"] {
|
||
height: 20px;
|
||
margin-top: -45px;
|
||
top: -45px;
|
||
opacity: 1;
|
||
/* Анімація: активна іконка видима */
|
||
transition: height 0ms 0ms, opacity 450ms 0ms, transform 450ms;
|
||
}
|
||
|
||
/* Адаптивні стилі для зміни центрифікації на різних екранах */
|
||
@media (max-width: 1100px){
|
||
#swipe_block {
|
||
width: calc(100% - 122px);
|
||
margin-left: 122px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 700px), (max-height: 540px) {
|
||
#swipe_block {
|
||
width: 100%;
|
||
margin-left: 0;
|
||
}
|
||
/* Зміна кольорів для менших екранів */
|
||
#swipe_updater {
|
||
--swipe-color-theme1: var(--ColorThemes0, #525151);
|
||
--swipe-color-theme2: var(--ColorThemes3, #f3f3f3);;
|
||
}
|
||
}
|
||
</style>
|
||
`;
|
||
|
||
// 5. Збереження посилань на елементи Shadow DOM
|
||
this._animID = shadow.getElementById('swipe_updater');
|
||
this._animIconID = shadow.getElementById('swipe_icon');
|
||
|
||
// 6. Прив'язка контексту `this` для обробників подій
|
||
this.handleScroll = this.handleScroll.bind(this);
|
||
this.handleTouchStart = this.handleTouchStart.bind(this);
|
||
this.handleTouchEnd = this.handleTouchEnd.bind(this);
|
||
}
|
||
|
||
/**
|
||
* Метод для встановлення користувацької функції оновлення.
|
||
* Замінює стандартне перезавантаження сторінки.
|
||
* @param {function} func - Користувацька функція, що буде викликана при свайпі.
|
||
*/
|
||
setReloadFunction(func) {
|
||
if (typeof func === 'function') {
|
||
this._appReload = func;
|
||
} else {
|
||
console.error('setReloadFunction вимагає передати функцію.');
|
||
}
|
||
}
|
||
|
||
// Фіксуємо, що користувач торкнувся екрана
|
||
handleTouchStart() {
|
||
this._isTouching = true;
|
||
}
|
||
|
||
// Обробка події, коли користувач відпускає екран
|
||
handleTouchEnd() {
|
||
this._isTouching = false;
|
||
const threshold = -165;
|
||
|
||
// Якщо палець відпустили, а ефект «гумового скролу» вже повернувся вище порогу
|
||
// (тобто користувач передумав і потягнув назад вгору перед тим як відпустити)
|
||
if (window.scrollY > threshold && this._isReadyToReload) {
|
||
this._resetRefreshState();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Обробник події скролу (головна логіка Pull-to-Refresh).
|
||
* Відстежує прокручування вище верхньої межі сторінки (`window.scrollY < 0`).
|
||
*/
|
||
handleScroll() {
|
||
// Перевірка на режим Standalone (PWA) - функціональність актуальна переважно тут
|
||
if (!this._isStandalone) return;
|
||
|
||
|
||
const scrollY = window.scrollY;
|
||
const threshold = -165; // Поріг прокрутки (наприклад, -125px) для активації оновлення
|
||
|
||
// 1. Анімація іконки під час прокручування за верхню межу (scrollY < 0)
|
||
if (scrollY <= -10) {
|
||
// Зміщення іконки разом із прокруткою
|
||
this._animIconID.style.top = `${scrollY / 1.5}px`;
|
||
this._animID.style.zIndex = '115'; // Піднімаємо z-index для видимості над контентом
|
||
} else {
|
||
this._animIconID.style.top = '0px';
|
||
this._animID.style.zIndex = '0'; // Повертаємо базовий z-index
|
||
}
|
||
|
||
// 2. Логіка активації "готовий до оновлення"
|
||
if (scrollY <= threshold) {
|
||
if (!this._isReadyToReload) {
|
||
this._isReadyToReload = true;
|
||
// Поворот іконки на 180 градусів
|
||
this._animIconID.style.transform = 'rotate(180deg)';
|
||
this._animIconID.setAttribute('data-state', ''); // Деактивація стану "active"
|
||
}
|
||
}
|
||
// Скасування жесту під час руху пальцем вгору (ще до відпускання)
|
||
else if (scrollY > threshold && scrollY < 0 && this._isTouching) {
|
||
if (this._isReadyToReload) {
|
||
this._isReadyToReload = false;
|
||
this._animIconID.style.transform = 'rotate(0deg)';
|
||
this._animIconID.setAttribute('data-state', 'active');
|
||
}
|
||
}
|
||
// 3. Логіка виклику оновлення, коли сторінка повернулась до нуля
|
||
else if (scrollY >= 0) {
|
||
if (this._isReadyToReload) {
|
||
this._appReload();
|
||
this._resetRefreshState();
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
/**
|
||
* Допоміжний метод для повного скидання графічного стану
|
||
*/
|
||
_resetRefreshState() {
|
||
this._isReadyToReload = false;
|
||
this._animIconID.style.transform = 'rotate(0deg)';
|
||
this._animIconID.setAttribute('data-state', 'active');
|
||
this._animIconID.style.top = '0px';
|
||
this._animID.style.zIndex = '0';
|
||
}
|
||
|
||
|
||
/**
|
||
* Lifecycle hook: викликається при додаванні елемента в DOM.
|
||
* Додаємо обробник події прокручування.
|
||
*/
|
||
connectedCallback() {
|
||
// Перевіряємо PWA режим ОДИН раз при додаванні компонента на сторінку
|
||
this._isStandalone = window.matchMedia('(display-mode: standalone)').matches;
|
||
|
||
if (this._isStandalone) {
|
||
window.addEventListener('scroll', this.handleScroll);
|
||
// passive: true покращує продуктивність скролу на мобільних пристроях
|
||
window.addEventListener('touchstart', this.handleTouchStart, { passive: true });
|
||
window.addEventListener('touchend', this.handleTouchEnd, { passive: true });
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Lifecycle hook: викликається при видаленні елемента з DOM.
|
||
* Видаляємо обробник події прокручування для запобігання витоку пам'яті.
|
||
*/
|
||
disconnectedCallback() {
|
||
// Чистимо абсолютно всі додані слухачі
|
||
window.removeEventListener('scroll', this.handleScroll);
|
||
window.removeEventListener('touchstart', this.handleTouchStart);
|
||
window.removeEventListener('touchend', this.handleTouchEnd);
|
||
}
|
||
}
|
||
|
||
// Реєстрація веб-компонента
|
||
if (!customElements.get('swipe-updater')) {
|
||
customElements.define('swipe-updater', SwipeUpdater);
|
||
}
|
||
|
||
|
||
/*
|
||
============================
|
||
ПРИКЛАД ВИКОРИСТАННЯ
|
||
============================
|
||
*/
|
||
|
||
/*
|
||
1. Додайте цей елемент у свій HTML:
|
||
<swipe-updater id="swipe-updater"></swipe-updater>
|
||
|
||
2. Отримайте посилання на компонент у JS:
|
||
const Updater = document.querySelector('swipe-updater');
|
||
|
||
3. Користувацька функція оновлення
|
||
function customReload() {
|
||
const now = new Date().toLocaleTimeString();
|
||
console.log(`Користувацьке оновлення: оновлено о ${now}`);
|
||
document.querySelector('h1').textContent = `Сторінка оновлена о ${now}`;
|
||
// Тут можна виконати AJAX-запит, оновити DOM тощо.
|
||
}
|
||
|
||
4. Перевизначення функції оновлення компонента
|
||
if (Updater && Updater.setReloadFunction) {
|
||
Updater.setReloadFunction(customReload);
|
||
} else {
|
||
console.error('Компонент SwipeUpdater не знайдено або не готовий.');
|
||
}
|
||
|
||
|
||
💡 Приклад стандартного використання (якщо не викликати setReloadFunction):
|
||
<swipe-updater></swipe-updater>
|
||
При свайпі буде викликано window.location.reload();
|
||
|
||
*/ |