adt-js-components 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adt-js-components",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "JavaScript components for Nette framework",
   "main": "index.js",
   "scripts": {

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/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

@@ -178,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 () {