141 lines
6.8 KiB
PHP
141 lines
6.8 KiB
PHP
<?php
|
||
|
||
$labels = [
|
||
'stage0' => \Yii::t('app', 'Загружаем файл на сервер'),
|
||
'stage1' => \Yii::t('app', 'Улучшаем и увеличиваем'),
|
||
'stage2' => \Yii::t('app', 'Загружаем полученный результат'),
|
||
];
|
||
$labelsJson = json_encode($labels, JSON_UNESCAPED_UNICODE);
|
||
|
||
?>
|
||
|
||
<div id="process" class="dropzone-form dropzone-form-loading gradient-dashed-border" style="display: <?= ($show ?? true) ? '' : 'none'; ?>">
|
||
<div class="dropzone-form-inner">
|
||
<div id="process-title" class="dropzone-form-text"><?= \Yii::t('app', 'Загружаем файл на сервер') ?></div>
|
||
<div id="process-filename" class="dropzone-form-filename"><?= htmlspecialchars($filename ?? '', ENT_QUOTES, 'UTF-8') ?></div>
|
||
<div class="dropzone-form-loading-info">
|
||
<div class="dropzone-form-loading-info-col">
|
||
<div class="dropzone-form-loading-info-item">
|
||
<div class="dropzone-form-loading-info-icon">
|
||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 4.5V6.5H4M6 20.5V18.5H4M18 4.5V6.5H20M18 20.5V18.5H20M7 7.5H17V17.5H7V7.5Z" stroke="currentColor" stroke-linecap="square"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dropzone-form-loading-info-text">
|
||
<span id="origin_width"><?= htmlspecialchars($origin_width ?? '', ENT_QUOTES, 'UTF-8') ?></span>×<span id="origin_height"><?= htmlspecialchars($origin_height ?? '', ENT_QUOTES, 'UTF-8') ?></span> <span class="process-dimensions-unit">px</span></div>
|
||
</div>
|
||
<div class="dropzone-form-loading-info-item">
|
||
<div class="dropzone-form-loading-info-icon">
|
||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M16 17.5C18.7614 17.5 21 15.2614 21 12.5C21 10.017 19.19 7.95665 16.8174 7.56649C16.8136 7.56585 16.8104 7.56299 16.8094 7.5592C16.1762 5.22047 14.039 3.5 11.5 3.5C8.46243 3.5 6 5.96243 6 9C6 9.20572 6.01129 9.4088 6.0333 9.60866C6.03385 9.61364 6.0306 9.61827 6.02574 9.61949C4.28747 10.0545 3 11.6269 3 13.5C3 15.7091 4.79086 17.5 7 17.5H8M12 10.5047V21.5M12 10.5047L9 13.5M12 10.5047L15 13.5" stroke="currentColor" stroke-linecap="square"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dropzone-form-loading-info-text">
|
||
<span id="origin_size"><?= htmlspecialchars($origin_size ?? '', ENT_QUOTES, 'UTF-8') ?></span></div>
|
||
</div>
|
||
</div>
|
||
<div class="dropzone-form-loading-info-col dropzone-form-loading-info-arrow">
|
||
<svg width="37" height="24" viewBox="0 0 37 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M7 17L12 12L7 7M13 17L18 12L13 7" stroke="currentColor" stroke-linecap="square"/>
|
||
<path d="M20 17L25 12L20 7M26 17L31 12L26 7" stroke="currentColor" stroke-linecap="square"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dropzone-form-loading-info-col">
|
||
<div class="dropzone-form-loading-info-item">
|
||
<div class="dropzone-form-loading-info-icon">
|
||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 4.5V6.5H4M6 20.5V18.5H4M18 4.5V6.5H20M18 20.5V18.5H20M7 7.5H17V17.5H7V7.5Z" stroke="currentColor" stroke-linecap="square"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dropzone-form-loading-info-text">
|
||
<span id="upscale_width"><?= htmlspecialchars($upscale_width ?? '', ENT_QUOTES, 'UTF-8') ?></span>×<span id="upscale_height"><?= htmlspecialchars($upscale_height ?? '', ENT_QUOTES, 'UTF-8') ?></span> <span class="process-dimensions-unit">px</span></div>
|
||
</div>
|
||
<div class="dropzone-form-loading-info-item">
|
||
<div class="dropzone-form-loading-info-icon">
|
||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M16 17.5C18.7614 17.5 21 15.2614 21 12.5C21 10.017 19.19 7.95665 16.8174 7.56649C16.8136 7.56585 16.8104 7.56299 16.8094 7.5592C16.1762 5.22047 14.039 3.5 11.5 3.5C8.46243 3.5 6 5.96243 6 9C6 9.20572 6.01129 9.4088 6.0333 9.60866C6.03385 9.61364 6.0306 9.61827 6.02574 9.61949C4.28747 10.0545 3 11.6269 3 13.5C3 15.7091 4.79086 17.5 7 17.5H8M12 10.5047V21.5M12 10.5047L9 13.5M12 10.5047L15 13.5" stroke="currentColor" stroke-linecap="square"/>
|
||
</svg>
|
||
</div>
|
||
<div class="dropzone-form-loading-info-text">
|
||
≈ <span id="upscale_size"><?= htmlspecialchars($upscale_size ?? '', ENT_QUOTES, 'UTF-8') ?></span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dropzone-form-loading-progress">
|
||
<div class="progress">
|
||
<div class="progress-label">0%</div>
|
||
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dropzone-form-note"><?= Yii::t('app', 'Увеличение 4х доступно после регистрации') ?></div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const labels = <?= $labelsJson ?>;
|
||
|
||
const process = {
|
||
el: document.getElementById('process'),
|
||
|
||
barEl: document.querySelector('.progress-bar'),
|
||
labelEl: document.querySelector('.progress-label'),
|
||
|
||
titleEl: document.getElementById('process-title'),
|
||
filenameEl: document.getElementById('process-filename'),
|
||
|
||
originSizeEl: document.getElementById('origin_size'),
|
||
upscaleSizeEl: document.getElementById('upscale_size'),
|
||
originWidthEl: document.getElementById('origin_width'),
|
||
originHeightEl: document.getElementById('origin_height'),
|
||
upscaleWidthEl: document.getElementById('upscale_width'),
|
||
upscaleHeightEl: document.getElementById('upscale_height'),
|
||
|
||
status: {
|
||
current: 0,
|
||
stage: 0,
|
||
},
|
||
|
||
hide() {
|
||
if (this.el) this.el.style.display = 'none';
|
||
},
|
||
show() {
|
||
if (this.el) this.el.style.display = '';
|
||
},
|
||
setFilename(filename) {
|
||
if (this.filenameEl) this.filenameEl.innerText = filename;
|
||
},
|
||
setSize(size) {
|
||
if (this.originSizeEl) this.originSizeEl.innerText = this.formatB(size);
|
||
if (this.upscaleSizeEl) this.upscaleSizeEl.innerText = this.formatB(size * 3);
|
||
},
|
||
setDimensions(w, h) {
|
||
if (this.originWidthEl) this.originWidthEl.innerText = w;
|
||
if (this.originHeightEl) this.originHeightEl.innerText = h;
|
||
if (this.upscaleWidthEl) this.upscaleWidthEl.innerText = w * 2;
|
||
if (this.upscaleHeightEl) this.upscaleHeightEl.innerText = h * 2;
|
||
},
|
||
setStage(stage) {
|
||
if (!this.titleEl) return;
|
||
this.status.stage = stage;
|
||
this.titleEl.innerText = labels['stage' + stage] || '...';
|
||
},
|
||
setStatus(status) {
|
||
const val = Math.min(100, Math.max(0, status));
|
||
this.status.current = val;
|
||
if (this.barEl) this.barEl.style.width = val + '%';
|
||
if (this.labelEl) this.labelEl.innerText = val + '%';
|
||
},
|
||
|
||
formatB(bytes) {
|
||
if (bytes === 0 || isNaN(bytes)) return '0 B';
|
||
const units = ['B', 'Kb', 'Mb', 'Gb', 'Tb'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||
const formattedValue = (bytes / Math.pow(1024, i)).toFixed(i === 1 ? 0 : 2);
|
||
return parseFloat(formattedValue) + ' ' + units[i];
|
||
}
|
||
};
|
||
</script>
|