99 lines
2.8 KiB
PHP
99 lines
2.8 KiB
PHP
<style>
|
|
.image-loading {
|
|
display: flex;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
border-radius: 24px;
|
|
height: 100%;
|
|
place-items: center;
|
|
justify-content: center;
|
|
}
|
|
.image-loading-progress::before {
|
|
background-image: var(--source);
|
|
filter: blur(15px) brightness(0.7);
|
|
background-size: cover;
|
|
background-position: center;
|
|
transform: scale(1.1);
|
|
}
|
|
.image-loading-progress #source {
|
|
/*height: 100%;*/
|
|
z-index: 3;
|
|
position: absolute;
|
|
filter: brightness(0.7);
|
|
object-fit: contain;
|
|
}
|
|
|
|
.image-loading-error {
|
|
display: none;
|
|
}
|
|
.image-loading-error.show {
|
|
display: block;
|
|
}
|
|
|
|
.image-loading-progress:has(.image-loading-error.show) .image-loading-icon {
|
|
opacity: 0;
|
|
}
|
|
.image-loading-progress:has(.image-loading-error.show) #source {
|
|
filter: brightness(0.4);
|
|
}
|
|
.image-loading-progress:has(.image-loading-error.show):before {
|
|
filter: blur(15px) brightness(0.4);
|
|
}
|
|
@media (max-width: 768px) {
|
|
.image-loading-progress {
|
|
height: 35svh !important;
|
|
}
|
|
.image-loading-progress #source {
|
|
position: static;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div id="preview" class="image-loading image-loading-progress" style="--source: url('<?= $source ?? '' ?>'); display: <?= ($show ?? true) ? '' : 'none'; ?>" >
|
|
<img id="source" src="<?= $source ?? '' ?>" style="height: 100%; width: 100%; object-fit: contain; flex-shrink: 0;">
|
|
|
|
<div class="image-loading-icon">
|
|
<img class="sandglass" src="<?= $assetsUriPrefix ?>/images/sandglass.svg" alt="">
|
|
<img class="spinner" src="<?= $assetsUriPrefix ?>/images/spinner.svg" alt="">
|
|
</div>
|
|
|
|
<div id="upscale-error-overlay" class="image-loading-error">
|
|
<div class="image-loading-error-icon">
|
|
<img src="<?= $assetsUriPrefix ?>/images/confused.svg" alt="">
|
|
</div>
|
|
<div class="image-loading-error-title"><?= Yii::t('app', 'Извините, что-то пошло не так') ?></div>
|
|
<div id="upscale-error-message" class="image-loading-error-text"><?= Yii::t('app', 'Максимальный допустимый размер файла 20 Мб') ?></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const preview = {
|
|
el: document.getElementById('preview'),
|
|
|
|
upscaleErrorOverlay: document.getElementById('upscale-error-overlay'),
|
|
upscaleErrorMessage: document.getElementById('upscale-error-message'),
|
|
sourceEl: document.getElementById('source'),
|
|
|
|
hide() {
|
|
this.el.style.display = 'none';
|
|
},
|
|
show() {
|
|
this.el.style.display = '';
|
|
this.upscaleErrorOverlay.classList.remove('show');
|
|
},
|
|
setSource(url) {
|
|
this.sourceEl.src = url;
|
|
this.el.style.setProperty('--source', "url('" + url + "')");
|
|
},
|
|
setDimensions(w, h) {
|
|
console.log('setSize', w, h);
|
|
},
|
|
setStage(stage) {
|
|
|
|
},
|
|
showError(message) {
|
|
this.upscaleErrorMessage.innerText = message || 'Ошибка обработки запроса.';
|
|
this.upscaleErrorOverlay.classList.add('show');
|
|
},
|
|
};
|
|
</script>
|