adt-js-components 1.5.9 → 1.5.11

package/package.json

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

package/src/ComponentLoader.js

@@ -10,26 +10,38 @@ const init = (selector, path) => {
 		componentsConfig = JSON.parse(bodyDataset);
 	}
 
-	$.nette.ext('live').after(function($el) {
+	const observer = new MutationObserver((mutationsList) => {
 		// component is already loaded
 		if (loadedComponents.includes(path)) return;
 
-		// there is no element using this component
-		if (!document.querySelector(`[data-adt-${selector}]`)) return;
-
-		loadedComponents.push(path);
-
-		if (path.includes('/')) {
-			import('JsComponents/' + path + '/index.js').then(component => {
-				component.default.run(componentsConfig[selector] || {});
-			});
-
-		} else {
-			import('adt-js-components/src/' + path + '/index.js').then(component => {
-				component.default.run(componentsConfig[selector] || {});
-			});
+		for (const mutation of mutationsList) {
+			if (mutation.type === 'childList') {
+				const target = mutation.target.querySelector(`[data-adt-${selector}]`);
+
+				if (target) {
+					loadedComponents.push(path);
+
+					if (path.includes('/')) {
+						import('JsComponents/' + path + '/index.js').then(component => {
+							component.default.run(componentsConfig[selector] || {});
+						});
+
+					} else {
+						import('adt-js-components/src/' + path + '/index.js').then(component => {
+							component.default.run(componentsConfig[selector] || {});
+						});
+					}
+					break;
+				}
+			}
 		}
 	});
+
+	// Sleduj celý dokument pro změny ve stromu DOM
+	observer.observe(document.body, {
+		childList: true,
+		subtree: true,
+	});
 };
 
 const initCurrencyInput = () => {

package/src/SubmitForm/index.js

@@ -21,9 +21,9 @@ function scrollToFirstError(form) {
 	scrollParent.scrollBy({top: el.getBoundingClientRect().top - 100, behavior: 'smooth'});
 }
 
-function run(options, $el) {
+function run(options) {
 	function applyEventHandlers(el) {
-		$(this).find('input, textarea, select').on('input', function(e) {
+		$(el).find('input, textarea, select').on('input', function(e) {
 			this.classList.remove('is-invalid');
 			if (isList(this)) {
 				$(this).parent().parent().find('.is-invalid').removeClass('is-invalid');