228 lines
11 KiB
PHP
228 lines
11 KiB
PHP
<?php
|
|
/** Общая inline-логика Index/Preland: синхронная копия в обоих репозиториях. */
|
|
return <<<'JS'
|
|
window.ZoomzillaExamples = {
|
|
attach(mount) {
|
|
const root = document.getElementById('examples');
|
|
if (!root) return;
|
|
const element = root.querySelector('#image-compare');
|
|
const visual = root.querySelector('[data-examples-visual]');
|
|
const retry = root.querySelector('[data-examples-retry]');
|
|
const items = [...root.querySelectorAll('.image-examples-item')];
|
|
const media = window.matchMedia('(max-width: 767.98px)');
|
|
const images = new Map();
|
|
const imageAttempts = new Map();
|
|
const pairs = new Map();
|
|
const failed = new Set();
|
|
const retrying = new Set();
|
|
const attemptedAt = new Map();
|
|
let generation = 0;
|
|
let active = 1;
|
|
let locked = true;
|
|
let mounted = false;
|
|
let backgroundGeneration = 0;
|
|
let retryQueue = Promise.resolve();
|
|
const device = () => media.matches ? 'mob' : 'desk';
|
|
const itemNumber = item => Number(item.dataset.example);
|
|
const pairKey = (number, variant) => variant + ':' + number;
|
|
|
|
window.examples = {
|
|
el: root,
|
|
hide() { window.scrollTo(0, 0); root.style.display = 'none'; },
|
|
show() { root.style.display = ''; },
|
|
setTitle(html) { const title = document.getElementById('form-title'); if (title) title.innerHTML = html; }
|
|
};
|
|
|
|
function loadImage(url, priority = 'low') {
|
|
if (images.has(url)) return images.get(url);
|
|
const promise = new Promise((resolve, reject) => {
|
|
const image = new Image();
|
|
image.decoding = 'async';
|
|
image.fetchPriority = priority;
|
|
const timer = window.setTimeout(() => finish(new Error('example_timeout')), 15000);
|
|
let finished = false;
|
|
function finish(error) {
|
|
if (finished) return;
|
|
finished = true;
|
|
window.clearTimeout(timer);
|
|
image.onload = image.onerror = null;
|
|
if (error) { imageAttempts.set(url, (imageAttempts.get(url) || 0) + 1); reject(error); }
|
|
else resolve(image);
|
|
}
|
|
image.onerror = () => finish(new Error('example_image_failed'));
|
|
image.onload = async () => {
|
|
try {
|
|
if (!image.naturalWidth) throw new Error('example_image_empty');
|
|
if (image.decode) await image.decode();
|
|
finish();
|
|
} catch (error) { finish(error); }
|
|
};
|
|
// WebKit может запомнить сетевой отказ URL: повтору нужен новый запрос,
|
|
// при этом успешно декодированные изображения остаются в нашем кеше.
|
|
const attempt = imageAttempts.get(url) || 0;
|
|
image.src = attempt ? url + (url.includes('?') ? '&' : '?') + '_example_retry=' + attempt : url;
|
|
});
|
|
images.set(url, promise);
|
|
promise.catch(() => { if (images.get(url) === promise) images.delete(url); });
|
|
return promise;
|
|
}
|
|
|
|
async function loadCandidates(item, role, variant, priority) {
|
|
const suffix = variant === 'mob' ? 'Mob' : '';
|
|
const candidates = [item.dataset[role + suffix]];
|
|
if (role === 'thumb') {
|
|
for (const format of ['Webp', 'Jpg']) {
|
|
const fallback = item.dataset['thumb' + suffix + format];
|
|
if (fallback) candidates.push(fallback);
|
|
}
|
|
}
|
|
let failure;
|
|
for (const url of candidates) {
|
|
try { return await loadImage(url, priority); } catch (error) { failure = error; }
|
|
}
|
|
throw failure;
|
|
}
|
|
|
|
async function preparePair(item, variant, priority = 'low') {
|
|
const key = pairKey(itemNumber(item), variant);
|
|
if (pairs.has(key)) return pairs.get(key);
|
|
const pair = await Promise.all([
|
|
loadCandidates(item, 'source', variant, priority),
|
|
loadCandidates(item, 'result', variant, priority)
|
|
]);
|
|
pairs.set(key, pair);
|
|
failed.delete(key);
|
|
return pair;
|
|
}
|
|
|
|
function replaceImage(previous, next) {
|
|
if (previous === next) return;
|
|
for (const attribute of [...previous.attributes]) {
|
|
if (!['src', 'srcset', 'sizes'].includes(attribute.name)) next.setAttribute(attribute.name, attribute.value);
|
|
}
|
|
previous.replaceWith(next);
|
|
}
|
|
|
|
function refreshItems() {
|
|
for (const item of items) {
|
|
const ready = !locked && pairs.has(pairKey(itemNumber(item), device()));
|
|
item.setAttribute('aria-disabled', String(!ready));
|
|
item.tabIndex = ready ? 0 : -1;
|
|
item.classList.toggle('active', itemNumber(item) === active);
|
|
}
|
|
}
|
|
|
|
function commitPair(number, pair) {
|
|
// Обе декодированные DOM-картинки заменяются в одном JS-такте, без промежуточного paint.
|
|
replaceImage(element.querySelector('#image-compare-source'), pair[0]);
|
|
replaceImage(element.querySelector('#image-compare-result'), pair[1]);
|
|
active = number;
|
|
if (!mounted) { mount(element); mounted = true; }
|
|
element.dispatchEvent(new Event('examples:images'));
|
|
refreshItems();
|
|
}
|
|
|
|
function select(item) {
|
|
const number = itemNumber(item);
|
|
const pair = pairs.get(pairKey(number, device()));
|
|
if (locked) return;
|
|
if (!pair) { retryFailed(item); return; }
|
|
if (number === active) return;
|
|
commitPair(number, pair);
|
|
}
|
|
|
|
async function retryFailed(item) {
|
|
const variant = device();
|
|
const key = pairKey(itemNumber(item), variant);
|
|
if (locked || backgroundGeneration === generation || !failed.has(key) || retrying.has(key) || Date.now() - (attemptedAt.get(key) || 0) < 1000) return;
|
|
const token = generation;
|
|
retrying.add(key);
|
|
attemptedAt.set(key, Date.now());
|
|
const request = retryQueue.then(() => {
|
|
if (token === generation && !locked) return preparePair(item, variant);
|
|
});
|
|
retryQueue = request.catch(() => {});
|
|
try { await request; } catch (_) { /* Сеть может всё ещё быть недоступна. */ }
|
|
finally { retrying.delete(key); if (!locked && device() === variant) refreshItems(); }
|
|
}
|
|
|
|
for (const item of items) {
|
|
item.setAttribute('role', 'button');
|
|
item.addEventListener('click', event => { event.preventDefault(); select(item); });
|
|
// Повтор не выбирает неготовую пару и не меняет оформление миниатюры.
|
|
item.addEventListener('pointerenter', () => retryFailed(item));
|
|
item.addEventListener('touchstart', () => retryFailed(item), {passive: true});
|
|
item.addEventListener('keydown', event => {
|
|
if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); select(item); }
|
|
});
|
|
}
|
|
// Сравнение заблокировано также при смене device-варианта, пока новая пара не готова.
|
|
for (const name of ['mousedown', 'mousemove', 'touchstart', 'touchmove', 'pointerdown', 'pointermove', 'keydown']) {
|
|
element.addEventListener(name, event => { if (locked) event.stopImmediatePropagation(); }, true);
|
|
}
|
|
|
|
async function run() {
|
|
const token = ++generation;
|
|
const variant = device();
|
|
locked = true;
|
|
root.dataset.examplesState = 'loading';
|
|
root.setAttribute('aria-busy', 'true');
|
|
retry.hidden = true;
|
|
refreshItems();
|
|
try {
|
|
const item = items.find(item => itemNumber(item) === active);
|
|
const pair = await preparePair(item, variant, 'high');
|
|
if (token !== generation) return;
|
|
// Только после выбранной пары разрешены запросы всех миниатюр.
|
|
const thumbs = await Promise.all(items.map(item => loadCandidates(item, 'thumb', variant, 'auto')));
|
|
if (document.fonts) await new Promise((resolve, reject) => {
|
|
const timer = window.setTimeout(() => reject(new Error('example_font_timeout')), 15000);
|
|
document.fonts.ready.then(() => { window.clearTimeout(timer); resolve(); }, error => { window.clearTimeout(timer); reject(error); });
|
|
});
|
|
if (token !== generation) return;
|
|
items.forEach((item, index) => replaceImage(item.querySelector('.image-examples-image img'), thumbs[index]));
|
|
commitPair(active, pair);
|
|
locked = false;
|
|
visual.style.visibility = 'visible';
|
|
visual.inert = false;
|
|
visual.removeAttribute('aria-hidden');
|
|
root.dataset.examplesState = 'ready';
|
|
root.setAttribute('aria-busy', 'false');
|
|
refreshItems();
|
|
// Остальные пары последовательно; две стороны одной пары — параллельно.
|
|
backgroundGeneration = token;
|
|
for (const next of items) {
|
|
if (token !== generation) return;
|
|
if (itemNumber(next) === active) continue;
|
|
try { await preparePair(next, variant); } catch (_) { failed.add(pairKey(itemNumber(next), variant)); }
|
|
if (token === generation) refreshItems();
|
|
}
|
|
if (backgroundGeneration === token) backgroundGeneration = 0;
|
|
// Один тихий повтор после очереди; затем — по возврату сети или обращению к миниатюре.
|
|
if (token === generation && items.some(item => failed.has(pairKey(itemNumber(item), variant)))) {
|
|
await new Promise(resolve => window.setTimeout(resolve, 1000));
|
|
for (const next of items) {
|
|
if (token !== generation) return;
|
|
await retryFailed(next);
|
|
}
|
|
}
|
|
} catch (_) {
|
|
if (token !== generation) return;
|
|
root.dataset.examplesState = 'error';
|
|
root.setAttribute('aria-busy', 'false');
|
|
retry.hidden = false;
|
|
}
|
|
}
|
|
retry.addEventListener('click', run);
|
|
window.addEventListener('online', () => {
|
|
if (root.dataset.examplesState === 'error') run();
|
|
else { attemptedAt.clear(); items.forEach(retryFailed); }
|
|
});
|
|
media.addEventListener('change', run);
|
|
refreshItems();
|
|
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run, {once: true});
|
|
else run();
|
|
}
|
|
};
|
|
JS;
|