first commit

components/preview.php

@@ -0,0 +1,99 @@
+<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: 35dvh !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>