fix: lock upload button until tour redirect

components/form.php

@@ -31,7 +31,7 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
 		</div>
 		<div class="dropzone-form-action">
 			<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">
 					<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>
@@ -86,9 +86,49 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
 				.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) => {
+			if (uploadPending) {
+				e.preventDefault();
+				return;
+			}
 			if (e.target !== fileInput) {
 				fileInput.click();
 			}
@@ -111,6 +151,7 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
 		});
 
 		formEl.addEventListener('drop', (e) => {
+			if (uploadPending) return;
 			const files = e.dataTransfer?.files;
 			if (files && files.length > 0) {
 				handleSelectedFile(files[0]);
@@ -118,80 +159,15 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
 		});
 
 		fileInput.addEventListener('change', () => {
+			if (uploadPending) return;
 			if (fileInput.files && fileInput.files.length > 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) {
-			const objectUrl = URL.createObjectURL(file);
-			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);
-			};
-
-			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;
+			if (!beginUploadPending()) return;
+			uploadFile(file);
 		}
 
 		function uploadFile(file) {
@@ -259,7 +235,7 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
 		}
 
 		function showUploadError(msg) {
-			if (typeof process !== 'undefined' && process) process.hide();
+			resetUploadPending();
 			form.show();
 			if (typeof preview !== 'undefined' && preview) preview.showError(msg);
 			fileInput.value = '';