adt-js-components 2.0.3 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adt-js-components",
-  "version": "2.0.3",
+  "version": "2.2.0",
   "description": "JavaScript components for Nette framework",
   "main": "index.js",
   "scripts": {
@@ -11,6 +11,10 @@
     "url": "git+https://github.com/AppsDevTeam/js-components.git"
   },
   "dependencies": {
+    "nette.ajax.js": "^2.3.0"
+  },
+  "peerDependencies": {
+    "jquery": "^3.4.1",
     "select2": "^4.0.13",
     "select2-bootstrap-5-theme": "^1.1.1",
     "autonumeric": "^4.6.0",
@@ -23,14 +27,26 @@
     "scrollparent": "^2.0.1",
     "tinymce": "^5.7.0",
     "tinymce-i18n": "^20.12.25",
-    "nette.ajax.js": "^2.3.0",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
-    "firebase": "^12.10.0",
-    "@firebase/messaging": "^0.12.24"
+    "firebase": "^12.10.0"
   },
-  "peerDependencies": {
-    "jquery": "^3.4.1"
+  "peerDependenciesMeta": {
+    "select2": { "optional": true },
+    "select2-bootstrap-5-theme": { "optional": true },
+    "autonumeric": { "optional": true },
+    "@here/flexpolyline": { "optional": true },
+    "flatpickr": { "optional": true },
+    "script-loader": { "optional": true },
+    "timepicker": { "optional": true },
+    "glightbox": { "optional": true },
+    "@googlemaps/js-api-loader": { "optional": true },
+    "scrollparent": { "optional": true },
+    "tinymce": { "optional": true },
+    "tinymce-i18n": { "optional": true },
+    "leaflet": { "optional": true },
+    "leaflet.markercluster": { "optional": true },
+    "firebase": { "optional": true }
   },
   "author": "Apps Dev Team",
   "license": "MIT",

package/src/AjaxSelect/index.js

@@ -107,26 +107,105 @@ function run(options) {
 		this.$originalElement.select2('destroy');
 	};
 
-	function applyEventHandlers(el) {
-		new AjaxSelect($(el));
+	/**
+	 * Lazy initialization.
+	 *
+	 * Building select2 reads computed styles and layout (e.g. the mousewheel plugin bundled
+	 * in select2.full measures the line height of every results list). Right after the
+	 * previous select2 was inserted, each such read forces the browser to lay out the whole
+	 * page again, so initializing many selects at once gets quadratically slower - a form
+	 * with 300 rows took tens of seconds.
+	 *
+	 * Selects that are visible (or close to the viewport) are therefore initialized right
+	 * away and the rest only when they are about to scroll into view. Visibility of all newly
+	 * added selects is read in one pass before any of them is initialized, so the page is laid
+	 * out once, not once per select. A select that is not initialized yet is initialized on
+	 * focus as well (e.g. when the user tabs into it).
+	 *
+	 * A few selects added at once (a row added by a replicator) are always initialized right
+	 * away - that is cheap, and the code that added the row may call select2('open') on it,
+	 * even when the row ended up at the end of a long list out of the viewport.
+	 */
+	const VISIBILITY_MARGIN = 200;
+	const EAGER_LIMIT = 10;
+
+	function initialize(el) {
+		if (el.adtAjaxSelect) {
+			return;
+		}
+		el.adtAjaxSelect = new AjaxSelect($(el));
+	}
+
+	const visibilityObserver = 'IntersectionObserver' in window
+		? new IntersectionObserver(entries => {
+			entries.forEach(entry => {
+				if (entry.isIntersecting) {
+					visibilityObserver.unobserve(entry.target);
+					entry.target.removeEventListener('focus', initializeOnFocus);
+					initialize(entry.target);
+				}
+			});
+		}, { rootMargin: VISIBILITY_MARGIN + 'px' })
+		: null;
+
+	function initializeOnFocus(e) {
+		const el = e.currentTarget;
+		el.removeEventListener('focus', initializeOnFocus);
+		visibilityObserver.unobserve(el);
+		initialize(el);
+		$(el).data('select2')?.$selection.trigger('focus');
+	}
+
+	function isNearViewport(rect) {
+		// zero size = not rendered (display: none), it will be initialized once it shows up
+		return (rect.width > 0 || rect.height > 0)
+			&& rect.bottom >= -VISIBILITY_MARGIN
+			&& rect.top <= window.innerHeight + VISIBILITY_MARGIN
+			&& rect.right >= -VISIBILITY_MARGIN
+			&& rect.left <= window.innerWidth + VISIBILITY_MARGIN;
+	}
+
+	function applyEventHandlers(elements) {
+		elements = elements.filter(el => !el.adtAjaxSelect);
+
+		if (!visibilityObserver || elements.length <= EAGER_LIMIT) {
+			elements.forEach(initialize);
+			return;
+		}
+
+		// read all rects first (one layout), only then start building select2
+		const rects = elements.map(el => el.getBoundingClientRect());
+
+		elements.forEach((el, i) => {
+			if (isNearViewport(rects[i])) {
+				initialize(el);
+			} else {
+				visibilityObserver.observe(el);
+				el.addEventListener('focus', initializeOnFocus);
+			}
+		});
 	}
 
 	const observer = new MutationObserver(mutations => {
+		const elements = [];
+
 		mutations.forEach(mutation => {
 			if (mutation.type === "childList") {
 				mutation.addedNodes.forEach(node => {
 					if (node.nodeType === 1) {
 						if (node.hasAttribute("data-adt-ajax-select")) {
-							applyEventHandlers(node);
+							elements.push(node);
 						}
 
-						node.querySelectorAll('[data-adt-ajax-select]').forEach(child => {
-							applyEventHandlers(child);
-						});
+						elements.push(...node.querySelectorAll('[data-adt-ajax-select]'));
 					}
 				});
 			}
 		});
+
+		if (elements.length) {
+			applyEventHandlers(elements);
+		}
 	});
 
 	observer.observe(document.body, {
@@ -134,9 +213,7 @@ function run(options) {
 		subtree: true,
 	});
 
-	document.querySelectorAll('[data-adt-ajax-select]').forEach(function(el) {
-		applyEventHandlers(el);
-	});
+	applyEventHandlers([...document.querySelectorAll('[data-adt-ajax-select]')]);
 }
 
 export default { run }

package/src/Notifications/index.js

@@ -88,18 +88,48 @@ const run = (config) => {
         updateButtons();
     });
 
-    // Initial state: check if notifications are already enabled
-    if (Notification.permission === 'granted' && window.messaging) {
-        getToken(window.messaging, { vapidKey: config.vapidKey })
-            .then(function (currentToken) {
-                if (currentToken) {
-                    window.adtNotificationsToken = currentToken;
+    // window.messaging se inicializuje async v Messaging komponentě, která nemusí
+    // doběhnout dřív než tento init (typicky po F5). Počkáme na ni, jinak by se
+    // getToken nikdy nezavolal a window.adtNotificationsToken by zůstal nenastavený.
+    var waitForMessaging = function (timeoutMs) {
+        return new Promise(function (resolve) {
+            if (window.messaging) {
+                resolve(window.messaging);
+                return;
+            }
+            var elapsed = 0;
+            var step = 100;
+            var interval = setInterval(function () {
+                if (window.messaging) {
+                    clearInterval(interval);
+                    resolve(window.messaging);
+                } else if ((elapsed += step) >= timeoutMs) {
+                    clearInterval(interval);
+                    resolve(null);
                 }
+            }, step);
+        });
+    };
+
+    // Initial state: check if notifications are already enabled
+    if (Notification.permission === 'granted') {
+        waitForMessaging(5000).then(function (messaging) {
+            if (!messaging) {
                 updateButtons();
-            })
-            .catch(function () {
-                updateButtons();
-            });
+                return;
+            }
+
+            getToken(messaging, { vapidKey: config.vapidKey })
+                .then(function (currentToken) {
+                    if (currentToken) {
+                        window.adtNotificationsToken = currentToken;
+                    }
+                    updateButtons();
+                })
+                .catch(function () {
+                    updateButtons();
+                });
+        });
     } else {
         updateButtons();
     }

package/src/Select2/index.js

@@ -8,6 +8,14 @@ function run(options) {
 	const selector = options.selector || 'select:not(' + noSelect2Class + ')';
 
 	function applyEventHandlers(el) {
+		// AJAX selects are initialized by the AjaxSelect component with their own options.
+		// Initializing them here as well would build select2 twice and AjaxSelect would
+		// rebuild it right away. Each initialization reads computed styles, which is the
+		// most expensive part of rendering a form with many selects.
+		if (el.matches('[data-adt-ajax-select]')) {
+			return;
+		}
+
 		$(el)
 			.select2($.extend({theme: 'bootstrap-5', language: "en"}, $(el).data('adt-select2') || {}))
 			.on('change', function(e) {

package/src/SubmitForm/index.js

@@ -8,6 +8,30 @@ function getErrorElementId(el) {
 	return isList(el) ? el.id.split('-').slice(0, -1).join('-') : el.id;
 }
 
+function toggleInvalid(el, invalid) {
+	el.classList.toggle('is-invalid', invalid);
+	// because of radio lists and checkbox lists
+	if (isList(el)) {
+		el.parentNode.classList.toggle('is-invalid', invalid);
+	}
+	// because of https://github.com/twbs/bootstrap/issues/25110
+	if (el.parentNode.classList.contains('input-group')) {
+		el.parentNode.classList.toggle('has-validation', invalid);
+		el.parentNode.classList.toggle('is-invalid', invalid);
+	}
+}
+
+function hasErrors(errorElement) {
+	return Array.from(errorElement.childNodes).some(node => node.nodeName !== 'SCRIPT' && node.textContent.trim() !== '');
+}
+
+function markErrorsFor(errorElement) {
+	const el = document.getElementById(errorElement.getAttribute('data-adt-errors-for'));
+	if (el && el.tagName !== 'FORM') {
+		toggleInvalid(el, hasErrors(errorElement));
+	}
+}
+
 function scrollToFirstError(form) {
 	const el = $(form).find('.alert-danger:first, .is-invalid:first')[0];
 
@@ -28,10 +52,17 @@ function run(options) {
 			if (isList(this)) {
 				$(this).parent().parent().find('.is-invalid').removeClass('is-invalid');
 			}
+			if (this.parentNode.classList.contains('input-group')) {
+				this.parentNode.classList.remove('is-invalid');
+			}
 		});
 	}
 
 	$.nette.ext('live').after(function($el) {
+		$el.find('[data-adt-errors-for]').addBack('[data-adt-errors-for]').each(function() {
+			markErrorsFor(this);
+		});
+
 		window.addEventListener('pageshow', (e) => {
 			if (e.persisted) {
 				$el.find('[data-adt-submit-form]').each(function(e) {
@@ -85,15 +116,7 @@ function run(options) {
 					errorElement.innerHTML += `<div>${error.message}</div>`;
 				}
 
-				error.element.classList.add('is-invalid');
-				// because of radio lists and checkbox lists
-				if (isList(error.element)) {
-					error.element.parentNode.classList.add('is-invalid');
-				}
-				// because of https://github.com/twbs/bootstrap/issues/25110
-				if (error.element.parentNode.classList.contains('input-group')) {
-					error.element.parentNode.classList.add('has-validation');
-				}
+				toggleInvalid(error.element, true);
 			}
 
 			if (errors.length) {
@@ -155,7 +178,9 @@ function run(options) {
 		},
 		error: function (xhr, status, error, settings) {
 			if (settings.nette && settings.nette.form && settings.nette.form.attr('data-adt-submit-form') !== undefined) {
-				settings.nette.form.prepend('<div class="alert alert-danger">' + xhr.responseText + '</div>');
+				if (status !== 'abort') {
+					settings.nette.form.prepend('<div class="alert alert-danger">' + xhr.responseText + '</div>');
+				}
 
 				settings.nette.el.html(settings.nette.el.data('originalContent'));
 				settings.nette.form.data('enabledButtons').each(function () {