fix(ui): согласовать первый экран и pending #16
This commit is contained in:
Panfilov Konstantin committed
1 parent
01933546a7
commit
198ba573f9
8 files changed
+187
-8
No files matched your search
@@ -23,6 +23,19 @@
|
||||
}
|
||||
output.textContent = '.'.repeat(dots);
|
||||
},
|
||||
setPending(form, pending) {
|
||||
if (pending) form.dataset.uploadPending = 'true';
|
||||
else delete form.dataset.uploadPending;
|
||||
const link = form.querySelector('[data-files-picker]');
|
||||
if (!link) return;
|
||||
if (pending) {
|
||||
link.setAttribute('aria-disabled', 'true');
|
||||
link.setAttribute('tabindex', '-1');
|
||||
} else {
|
||||
link.removeAttribute('aria-disabled');
|
||||
link.removeAttribute('tabindex');
|
||||
}
|
||||
},
|
||||
bindPicker(form, mainInput, fullAccept, onFiles) {
|
||||
if (mobile) form.dataset.mobileUpload = '1';
|
||||
const sync = () => {
|
||||
@@ -32,6 +45,36 @@
|
||||
sync();
|
||||
// Dropzone пересоздаёт input после каждого выбора: обновляем до native click.
|
||||
form.addEventListener('click', sync, true);
|
||||
// svh не меняется при движении панелей браузера. На старых движках
|
||||
// сохраняем минимальную высоту до смены ширины/ориентации.
|
||||
const index = form.closest('.index-mobile-fit');
|
||||
if (index) {
|
||||
const probe = document.createElement('span');
|
||||
probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;height:100vh;height:100svh;width:0';
|
||||
index.append(probe);
|
||||
let lastWidth = 0, fallbackHeight = Infinity;
|
||||
const fit = () => {
|
||||
if (innerWidth !== lastWidth) fallbackHeight = Infinity;
|
||||
lastWidth = innerWidth;
|
||||
const height = probe.getBoundingClientRect().height;
|
||||
fallbackHeight = Math.min(fallbackHeight, height);
|
||||
const budget = window.CSS?.supports('height', '100svh') ? height : fallbackHeight;
|
||||
index.style.setProperty('--index-small-height', budget + 'px');
|
||||
index.dataset.compactUpload = budget < 650 ? 'true' : 'false';
|
||||
const hero = index.querySelector('#image-compare');
|
||||
if (hero) hero.style.setProperty('--compare-width', hero.getBoundingClientRect().width + 'px');
|
||||
};
|
||||
fit();
|
||||
window.addEventListener('resize', fit);
|
||||
if (window.ResizeObserver) new ResizeObserver(fit).observe(index);
|
||||
}
|
||||
if (mobile && form.dataset.photoLabel && !form.querySelector('[data-other-files][multiple]')) {
|
||||
const label = form.querySelector('[data-upload-label]');
|
||||
if (label) {
|
||||
label.textContent = form.dataset.photoLabel;
|
||||
label.dataset.pickerLabel = form.dataset.photoLabel;
|
||||
}
|
||||
}
|
||||
if (!android) return;
|
||||
const link = form.querySelector('[data-files-picker]');
|
||||
const other = form.querySelector('[data-other-files]');
|
||||
|
||||
+10
-5
@@ -14,13 +14,13 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
|
||||
|
||||
?>
|
||||
|
||||
<form action="<?= htmlspecialchars($createApiUrl, ENT_QUOTES, 'UTF-8') ?>" class="dropzone-form gradient-dashed-border" id="dropzone-form" data-photo-label="<?= htmlspecialchars(Yii::t('app', 'Выбрать фото'), ENT_QUOTES, 'UTF-8') ?>" method="POST" style="background: transparent; border: unset; display: <?= ($show ?? true) ? '' : 'none'; ?>; cursor: pointer;">
|
||||
<form action="<?= htmlspecialchars($createApiUrl, ENT_QUOTES, 'UTF-8') ?>" class="dropzone-form gradient-dashed-border" id="dropzone-form" data-photo-label="<?= htmlspecialchars(Yii::t('app', 'Выберите фото'), ENT_QUOTES, 'UTF-8') ?>" method="POST" style="background: transparent; border: unset; display: <?= ($show ?? true) ? '' : 'none'; ?>; cursor: pointer;">
|
||||
|
||||
<div class="dropzone-form-inner">
|
||||
<div class="dropzone-form-icon">
|
||||
<img src="<?= $assetsUriPrefix; ?>/images/dropzone-icon.svg" alt="" height="65" width="64">
|
||||
</div>
|
||||
<div id="form-title" class="dropzone-form-text"><?= Yii::t('app', 'Загрузите изображение') ?> <br class="d-md-none"><?= Yii::t('app', 'для улучшения') ?></div>
|
||||
<div id="form-title" class="dropzone-form-text index-upload-heading"><?= Yii::t('app', 'Улучшить изображение') ?></div>
|
||||
<div class="dropzone-form-format">
|
||||
<div class="dropzone-form-format-label"><?= Yii::t('app', 'Поддерживаемые форматы') ?>:</div>
|
||||
<div class="dropzone-form-format-list">
|
||||
@@ -35,7 +35,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
|
||||
</div>
|
||||
<div class="dropzone-form-action">
|
||||
<button type="button" class="dropzone-form-button">
|
||||
<span data-upload-label><?= Yii::t('app', preg_match('/Android/i', $_SERVER['HTTP_USER_AGENT'] ?? '') ? 'Выбрать фото' : 'Загрузить изображение') ?></span>
|
||||
<span data-upload-label><?= Yii::t('app', preg_match('/Android/i', $_SERVER['HTTP_USER_AGENT'] ?? '') ? 'Выберите фото' : 'Загрузить изображение') ?></span>
|
||||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3333 14.6667C15.6345 14.6667 17.5 12.8012 17.5 10.5C17.5 8.43079 15.9917 6.71387 14.0145 6.38874C14.0113 6.38821 14.0086 6.38583 14.0078 6.38267C13.4802 4.43373 11.6992 3 9.58333 3C7.05203 3 5 5.05203 5 7.58333C5 7.75477 5.00941 7.924 5.02775 8.09055C5.0282 8.0947 5.0255 8.09856 5.02145 8.09957C3.57289 8.4621 2.5 9.77242 2.5 11.3333C2.5 13.1743 3.99238 14.6667 5.83333 14.6667H6.66667M10 8.83726V18M10 8.83726L7.5 11.3333M10 8.83726L12.5 11.3333" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
@@ -62,7 +62,10 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
|
||||
if (this.el) this.el.style.display = '';
|
||||
},
|
||||
setTitle(html) {
|
||||
if (this.titleEl) this.titleEl.innerHTML = html;
|
||||
if (this.titleEl) {
|
||||
this.titleEl.classList.remove('index-upload-heading');
|
||||
this.titleEl.innerHTML = html;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -92,7 +95,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
|
||||
pickerAccept = policy.picker_accept;
|
||||
fileInput.accept = /Android/i.test(navigator.userAgent) ? 'image/*' : pickerAccept;
|
||||
}
|
||||
if (policy?.pdf_observation_enabled === false) formEl.querySelector('[data-files-picker]').textContent = <?= json_encode(Yii::t('app', 'Выбрать файлы (другие форматы)'), JSON_UNESCAPED_UNICODE) ?>;
|
||||
if (policy?.pdf_observation_enabled === false) formEl.querySelector('[data-files-picker]').textContent = <?= json_encode(Yii::t('app', 'Файлы (другие форматы)'), JSON_UNESCAPED_UNICODE) ?>;
|
||||
if (Number.isSafeInteger(policy?.max_file_size_bytes) && policy.max_file_size_bytes > 0) {
|
||||
maxUploadBytes = policy.max_file_size_bytes;
|
||||
}
|
||||
@@ -119,6 +122,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
|
||||
function beginUploadPending() {
|
||||
if (uploadPending) return false;
|
||||
uploadPending = true;
|
||||
window.ZoomzillaUpload.setPending(formEl, true);
|
||||
uploadAttempt++;
|
||||
window.PublicNavigationGuard.activate();
|
||||
uploadDots = 1;
|
||||
@@ -136,6 +140,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
|
||||
|
||||
function resetUploadPending() {
|
||||
uploadPending = false;
|
||||
window.ZoomzillaUpload.setPending(formEl, false);
|
||||
if (uploadDotsTimer !== null) window.clearInterval(uploadDotsTimer);
|
||||
uploadDotsTimer = null;
|
||||
if (uploadButtonLabel) uploadButtonLabel.textContent = uploadButtonLabel.dataset.pickerLabel || uploadButtonDefaultLabel;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<?php /* CSS синхронна API upload-picker-links; отдельный хост без Yii assets. */ ?>
|
||||
|
||||
<span data-picker-or hidden><?= Yii::t('app', 'или') ?></span>
|
||||
<a href="#" data-files-picker hidden><?= Yii::t('app', 'Выбрать файлы (PDF и др.)') ?></a>
|
||||
<a href="#" data-files-picker hidden><?= Yii::t('app', 'Файлы (PDF и др.)') ?></a>
|
||||
<input type="file" data-other-files style="display:none">
|
||||
Reference in new issue
Block a user