127 lines
6.3 KiB
PHP
127 lines
6.3 KiB
PHP
<?php
|
|
$demoBasePath = rtrim($assetsUriPrefix, '/') . "/{$indpic}";
|
|
$demoLocalPath = __DIR__ . "/../{$indpic}";
|
|
$getAssetUrl = function (int $number, string $device, string $role, string $extension = 'avif') use ($demoBasePath, $demoLocalPath): string {
|
|
$relativePath = sprintf('%02d', $number) . "_{$device}_{$role}.{$extension}";
|
|
$fullPath = $demoLocalPath . '/' . $relativePath;
|
|
$version = file_exists($fullPath) ? filemtime($fullPath) : '1';
|
|
return $demoBasePath . '/' . $relativePath . '?v=' . $version;
|
|
};
|
|
$labelBefore = Yii::t('app', 'До');
|
|
$labelAfter = Yii::t('app', 'После');
|
|
?>
|
|
<div id="examples" data-examples-state="loading" aria-busy="true">
|
|
<div data-examples-visual style="visibility:hidden" aria-hidden="true" inert>
|
|
<div class="image-compare" id="image-compare">
|
|
<img id="image-compare-source" width="728" height="395" alt="<?= htmlspecialchars($labelBefore) ?>">
|
|
<img id="image-compare-result" width="728" height="395" alt="<?= htmlspecialchars($labelAfter) ?>">
|
|
</div>
|
|
<div class="image-examples">
|
|
<div class="image-examples-label"><?= Yii::t('app', 'Примеры улучшения') ?></div>
|
|
<div class="image-examples-list">
|
|
<?php for ($i=1; $i<=5; $i++): ?>
|
|
<div class="image-examples-item <?= $i===1 ? 'active' : '' ?>" data-example="<?= $i ?>" data-index="<?= $i ?>"
|
|
data-source="<?= $getAssetUrl($i, 'desk', '1-source') ?>" data-source-webp="<?= $getAssetUrl($i, 'desk', '1-source', 'webp') ?>" data-source-jpg="<?= $getAssetUrl($i, 'desk', '1-source', 'jpg') ?>" data-result="<?= $getAssetUrl($i, 'desk', '2-result') ?>" data-result-webp="<?= $getAssetUrl($i, 'desk', '2-result', 'webp') ?>" data-result-jpg="<?= $getAssetUrl($i, 'desk', '2-result', 'jpg') ?>"
|
|
data-source-mob="<?= $getAssetUrl($i, 'mob', '1-source') ?>" data-source-mob-webp="<?= $getAssetUrl($i, 'mob', '1-source', 'webp') ?>" data-source-mob-jpg="<?= $getAssetUrl($i, 'mob', '1-source', 'jpg') ?>" data-result-mob="<?= $getAssetUrl($i, 'mob', '2-result') ?>" data-result-mob-webp="<?= $getAssetUrl($i, 'mob', '2-result', 'webp') ?>" data-result-mob-jpg="<?= $getAssetUrl($i, 'mob', '2-result', 'jpg') ?>"
|
|
data-thumb="<?= $getAssetUrl($i, 'desk', '3-thumb', 'avif') ?>" data-thumb-webp="<?= $getAssetUrl($i, 'desk', '3-thumb', 'webp') ?>" data-thumb-jpg="<?= $getAssetUrl($i, 'desk', '3-thumb', 'jpg') ?>"
|
|
data-thumb-mob="<?= $getAssetUrl($i, 'mob', '3-thumb', 'avif') ?>" data-thumb-mob-webp="<?= $getAssetUrl($i, 'mob', '3-thumb', 'webp') ?>" data-thumb-mob-jpg="<?= $getAssetUrl($i, 'mob', '3-thumb', 'jpg') ?>" aria-disabled="true" tabindex="-1">
|
|
<div class="image-examples-image"><picture><img width="100" height="100" alt="Example <?= $i ?>"></picture></div>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn button-outline examples-retry" data-examples-retry hidden><?= Yii::t('app', 'Повторить') ?></button>
|
|
</div>
|
|
<script>
|
|
<?= require __DIR__ . '/example-loader.php' ?>
|
|
function setupNativeCompare(element, labelBefore, labelAfter) {
|
|
if (!element || element.classList.contains('native-icv') || element.classList.contains('icv')) return null;
|
|
|
|
const sourceImg = element.querySelector('#image-compare-source');
|
|
const resultImg = element.querySelector('#image-compare-result');
|
|
if (!sourceImg || !resultImg) return null;
|
|
|
|
element.classList.add('native-icv');
|
|
|
|
const beforeWrap = document.createElement('div');
|
|
beforeWrap.className = 'icv__before-wrap';
|
|
|
|
resultImg.className = 'icv__after-img';
|
|
|
|
const handle = document.createElement('div');
|
|
handle.className = 'icv__handle';
|
|
const circle = document.createElement('div');
|
|
circle.className = 'icv__handle-circle';
|
|
handle.appendChild(circle);
|
|
|
|
const lblBefore = document.createElement('div');
|
|
lblBefore.className = 'icv__label icv__label-before';
|
|
lblBefore.textContent = labelBefore;
|
|
|
|
const lblAfter = document.createElement('div');
|
|
lblAfter.className = 'icv__label icv__label-after';
|
|
lblAfter.textContent = labelAfter;
|
|
|
|
beforeWrap.appendChild(sourceImg);
|
|
|
|
element.appendChild(resultImg);
|
|
element.appendChild(beforeWrap);
|
|
element.appendChild(handle);
|
|
element.appendChild(lblBefore);
|
|
element.appendChild(lblAfter);
|
|
|
|
let sliderPercent = 50;
|
|
element.addEventListener('examples:images', () => updateSlider(sliderPercent));
|
|
function updateSlider(percent) {
|
|
sliderPercent = percent;
|
|
percent = Math.max(0, Math.min(100, percent));
|
|
beforeWrap.style.width = percent + '%';
|
|
handle.style.left = percent + '%';
|
|
element.querySelector('#image-compare-source').style.width = element.clientWidth + 'px';
|
|
}
|
|
|
|
window.addEventListener('resize', () => {
|
|
element.querySelector('#image-compare-source').style.width = element.clientWidth + 'px';
|
|
});
|
|
|
|
let isDragging = false;
|
|
function getPos(e) {
|
|
const rect = element.getBoundingClientRect();
|
|
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
|
return ((clientX - rect.left) / rect.width) * 100;
|
|
}
|
|
|
|
function onStart(e) {
|
|
isDragging = true;
|
|
updateSlider(getPos(e));
|
|
}
|
|
|
|
function onMove(e) {
|
|
if (!isDragging) return;
|
|
updateSlider(getPos(e));
|
|
}
|
|
|
|
function onEnd() {
|
|
isDragging = false;
|
|
}
|
|
|
|
element.addEventListener('mousedown', onStart);
|
|
element.addEventListener('touchstart', onStart, { passive: true });
|
|
|
|
window.addEventListener('mousemove', onMove);
|
|
window.addEventListener('touchmove', onMove, { passive: true });
|
|
|
|
window.addEventListener('mouseup', onEnd);
|
|
window.addEventListener('touchend', onEnd);
|
|
|
|
updateSlider(50);
|
|
|
|
}
|
|
|
|
|
|
window.ZoomzillaExamples.attach(element => {
|
|
setupNativeCompare(element, <?= json_encode($labelBefore, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>, <?= json_encode($labelAfter, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>);
|
|
});
|
|
</script>
|