fix: lock upload button until tour redirect
deploy-preland / deploy barbariskatest (push) Successful in 22s
deploy-preland / deploy barbariskatest (push) Successful in 22s
This commit is contained in:
1 parent
cf651218cc
commit
700408c1e0
2 files changed
+59
-70
No files matched your search
+46
-70
@@ -31,7 +31,7 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
|
|||||||
</div>
|
</div>
|
||||||
<div class="dropzone-form-action">
|
<div class="dropzone-form-action">
|
||||||
<button type="button" class="dropzone-form-button">
|
<button type="button" class="dropzone-form-button">
|
||||||
<span><?= Yii::t('app', 'Загрузить изображение') ?></span>
|
<span data-upload-label><?= Yii::t('app', 'Загрузить изображение') ?></span>
|
||||||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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"/>
|
<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>
|
</svg>
|
||||||
@@ -86,9 +86,49 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
|
|||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
}
|
}
|
||||||
|
|
||||||
let columnsSwapped = false;
|
let uploadPending = false;
|
||||||
|
let uploadDots = 1;
|
||||||
|
let uploadDotsTimer = null;
|
||||||
|
const uploadButton = formEl.querySelector('.dropzone-form-button');
|
||||||
|
const uploadButtonLabel = uploadButton?.querySelector('[data-upload-label]');
|
||||||
|
const uploadButtonDefaultLabel = uploadButtonLabel?.textContent || '';
|
||||||
|
|
||||||
|
function renderUploadButton() {
|
||||||
|
if (uploadButtonLabel) uploadButtonLabel.textContent = 'Загрузка' + '.'.repeat(uploadDots);
|
||||||
|
}
|
||||||
|
|
||||||
|
function beginUploadPending() {
|
||||||
|
if (uploadPending) return false;
|
||||||
|
uploadPending = true;
|
||||||
|
uploadDots = 1;
|
||||||
|
renderUploadButton();
|
||||||
|
if (uploadButton) {
|
||||||
|
uploadButton.disabled = true;
|
||||||
|
uploadButton.setAttribute('aria-busy', 'true');
|
||||||
|
}
|
||||||
|
uploadDotsTimer = window.setInterval(() => {
|
||||||
|
uploadDots = uploadDots === 5 ? 1 : uploadDots + 1;
|
||||||
|
renderUploadButton();
|
||||||
|
}, 500);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetUploadPending() {
|
||||||
|
uploadPending = false;
|
||||||
|
if (uploadDotsTimer !== null) window.clearInterval(uploadDotsTimer);
|
||||||
|
uploadDotsTimer = null;
|
||||||
|
if (uploadButtonLabel) uploadButtonLabel.textContent = uploadButtonDefaultLabel;
|
||||||
|
if (uploadButton) {
|
||||||
|
uploadButton.disabled = false;
|
||||||
|
uploadButton.removeAttribute('aria-busy');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
formEl.addEventListener('click', (e) => {
|
formEl.addEventListener('click', (e) => {
|
||||||
|
if (uploadPending) {
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (e.target !== fileInput) {
|
if (e.target !== fileInput) {
|
||||||
fileInput.click();
|
fileInput.click();
|
||||||
}
|
}
|
||||||
@@ -111,6 +151,7 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
|
|||||||
});
|
});
|
||||||
|
|
||||||
formEl.addEventListener('drop', (e) => {
|
formEl.addEventListener('drop', (e) => {
|
||||||
|
if (uploadPending) return;
|
||||||
const files = e.dataTransfer?.files;
|
const files = e.dataTransfer?.files;
|
||||||
if (files && files.length > 0) {
|
if (files && files.length > 0) {
|
||||||
handleSelectedFile(files[0]);
|
handleSelectedFile(files[0]);
|
||||||
@@ -118,80 +159,15 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
|
|||||||
});
|
});
|
||||||
|
|
||||||
fileInput.addEventListener('change', () => {
|
fileInput.addEventListener('change', () => {
|
||||||
|
if (uploadPending) return;
|
||||||
if (fileInput.files && fileInput.files.length > 0) {
|
if (fileInput.files && fileInput.files.length > 0) {
|
||||||
handleSelectedFile(fileInput.files[0]);
|
handleSelectedFile(fileInput.files[0]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function swapColumns() {
|
|
||||||
if (columnsSwapped) return;
|
|
||||||
const col5 = document.querySelector('.col-md-5');
|
|
||||||
const col7 = document.querySelector('.col-md-7');
|
|
||||||
if (col5 && col7) {
|
|
||||||
const temp = document.createElement('div');
|
|
||||||
col5.replaceWith(temp);
|
|
||||||
col7.replaceWith(col5);
|
|
||||||
temp.replaceWith(col7);
|
|
||||||
columnsSwapped = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSelectedFile(file) {
|
function handleSelectedFile(file) {
|
||||||
const objectUrl = URL.createObjectURL(file);
|
if (!beginUploadPending()) return;
|
||||||
const img = new Image();
|
|
||||||
|
|
||||||
img.onload = () => {
|
|
||||||
const width = img.naturalWidth;
|
|
||||||
const height = img.naturalHeight;
|
|
||||||
|
|
||||||
form.hide();
|
|
||||||
swapColumns();
|
|
||||||
|
|
||||||
if (typeof preview !== 'undefined' && preview) {
|
|
||||||
const col7 = document.querySelector('.col-md-7');
|
|
||||||
if (col7) col7.appendChild(preview.el);
|
|
||||||
preview.hide();
|
|
||||||
preview.setSource(objectUrl);
|
|
||||||
preview.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof process !== 'undefined' && process) {
|
|
||||||
const col5 = document.querySelector('.col-md-5');
|
|
||||||
if (col5) col5.appendChild(process.el);
|
|
||||||
process.setFilename(file.name);
|
|
||||||
process.setSize(file.size);
|
|
||||||
process.setDimensions(width, height);
|
|
||||||
process.setStage(0);
|
|
||||||
process.setStatus(0);
|
|
||||||
process.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof examples !== 'undefined' && examples) {
|
|
||||||
examples.hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
uploadFile(file);
|
uploadFile(file);
|
||||||
};
|
|
||||||
|
|
||||||
img.onerror = () => {
|
|
||||||
// Browser не обязан декодировать допустимый контейнер. Не отказываем локально:
|
|
||||||
// серверный Tour gate проверит байты и при необходимости даст JPEG-preview.
|
|
||||||
form.hide();
|
|
||||||
swapColumns();
|
|
||||||
if (typeof process !== 'undefined' && process) {
|
|
||||||
const col5 = document.querySelector('.col-md-5');
|
|
||||||
if (col5) col5.appendChild(process.el);
|
|
||||||
process.setFilename(file.name);
|
|
||||||
process.setSize(file.size);
|
|
||||||
process.setDimensions(0, 0);
|
|
||||||
process.setStage(0);
|
|
||||||
process.setStatus(0);
|
|
||||||
process.show();
|
|
||||||
}
|
|
||||||
uploadFile(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
img.src = objectUrl;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function uploadFile(file) {
|
function uploadFile(file) {
|
||||||
@@ -259,7 +235,7 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showUploadError(msg) {
|
function showUploadError(msg) {
|
||||||
if (typeof process !== 'undefined' && process) process.hide();
|
resetUploadPending();
|
||||||
form.show();
|
form.show();
|
||||||
if (typeof preview !== 'undefined' && preview) preview.showError(msg);
|
if (typeof preview !== 'undefined' && preview) preview.showError(msg);
|
||||||
fileInput.value = '';
|
fileInput.value = '';
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<?php
|
||||||
|
/** Регрессия: до редиректа на Tour повторная загрузка блокируется для любого формата. */
|
||||||
|
|
||||||
|
$form = (string) file_get_contents(dirname(__DIR__) . '/components/form.php');
|
||||||
|
|
||||||
|
foreach (['function beginUploadPending', 'uploadDots', 'Загрузка', 'uploadPending'] as $needle) {
|
||||||
|
if (!str_contains($form, $needle)) {
|
||||||
|
fwrite(STDERR, "FAIL: preland uploader must contain {$needle}\n");
|
||||||
|
exit(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
echo "OK: preland upload button state\n";
|
||||||
Reference in new issue
Block a user