fix(ui): загрузка и общий контракт сравнения (refs #8 #7)

components/browser-upload.php

@@ -5,6 +5,22 @@
     const android = /Android/i.test(navigator.userAgent);
     let uploadQueue = Promise.resolve();
     window.ZoomzillaUpload = {
+        // Резерв из пяти точек задаётся CSS: слово и соседняя иконка не двигаются.
+        renderLoadingLabel(label, dots, text) {
+            if (!label) return;
+            let output = label.querySelector('[data-upload-dots]');
+            if (!output) {
+                label.textContent = text + ' ';
+                const slot = document.createElement('span');
+                slot.className = 'upload-loading-dots';
+                slot.setAttribute('aria-hidden', 'true');
+                output = document.createElement('span');
+                output.dataset.uploadDots = '';
+                slot.append(output);
+                label.append(slot);
+            }
+            output.textContent = '.'.repeat(dots);
+        },
         bindPicker(form, mainInput, fullAccept, onFiles) {
             const mobile = android || /iPhone|iPad|iPod/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
             if (mobile) form.dataset.mobileUpload = '1';

components/form.php

@@ -105,7 +105,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 		const uploadButtonDefaultLabel = uploadButtonLabel?.textContent || '';
 
 		function renderUploadButton() {
-			if (uploadButtonLabel) uploadButtonLabel.textContent = 'Загрузка' + '.'.repeat(uploadDots);
+			window.ZoomzillaUpload.renderLoadingLabel(uploadButtonLabel, uploadDots, <?= json_encode(Yii::t('app', 'Загрузка'), JSON_UNESCAPED_UNICODE) ?>);
 		}
 
 		function beginUploadPending() {
@@ -118,7 +118,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 				uploadButton.setAttribute('aria-busy', 'true');
 			}
 			uploadDotsTimer = window.setInterval(() => {
-				uploadDots = uploadDots === 5 ? 1 : uploadDots + 1;
+				uploadDots = (uploadDots + 1) % 6;
 				renderUploadButton();
 			}, 500);
 			return true;