adt-js-components 1.7.1 → 1.8.0

package/package.json

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

package/src/ComponentLoader.js

@@ -69,6 +69,10 @@ const initRecaptcha = () => {
 	init('recaptcha', 'Recaptcha');
 };
 
+const initRedrawSnippet = () => {
+	init('redraw-snippet', 'RedrawSnippet');
+};
+
 const initSelect2 = () => {
 	init('select2', 'Select2');
 };
@@ -122,6 +126,7 @@ export default {
 	initGLightbox,
 	initGoogleMaps,
 	initRecaptcha,
+	initRedrawSnippet,
 	initSelect2,
 	initSubmitForm,
 	initTinyMCE,

package/src/RedrawSnippet/index.js

@@ -0,0 +1,43 @@
+async function run(options) {
+	function applyEventHandlers(el) {
+		var $el= $(el);
+		if ($el.is('button, input[type="button"], input[type="submit"]')) {
+			$el.on('click', sendNetteAjax);
+		} else if ($el.is('input:not([type="button"]):not([type="submit"]), select, textarea')) {
+			$el.on('change', sendNetteAjax);
+		}
+	}
+
+	function sendNetteAjax(e) {
+		$(document).find('[name="' + $(e.currentTarget).attr('data-adt-redraw-snippet') + '"]').netteAjax(e);
+	}
+
+	const observer = new MutationObserver(mutations => {
+		mutations.forEach(mutation => {
+			if (mutation.type === "childList") {
+				mutation.addedNodes.forEach(node => {
+					if (node.nodeType === 1) {
+						if (node.hasAttribute("data-adt-redraw-snippet")) {
+							applyEventHandlers(node);
+						}
+
+						node.querySelectorAll('[data-adt-redraw-snippet]').forEach(child => {
+							applyEventHandlers(child);
+						});
+					}
+				});
+			}
+		});
+	});
+
+	observer.observe(document.body, {
+		childList: true,
+		subtree: true,
+	});
+
+	document.querySelectorAll('[data-adt-redraw-snippet]').forEach(function(el) {
+		applyEventHandlers(el);
+	});
+}
+
+export default { run }

package/src/SubmitForm/index.js

@@ -73,10 +73,16 @@ function run(options) {
 				el.innerHTML = '';
 			});
 
+			const alertErrors = [];
 			for (const error of errors) {
 				// because radio lists and checkbox lists contains one error message multiple times
-				if (!document.getElementById('snippet-' + getErrorElementId(error.element) + '-errors').innerHTML.includes(error.message)) {
-					document.getElementById('snippet-' + getErrorElementId(error.element) + '-errors').innerHTML += '<div>' + error.message + '</div>';
+				const errorElementId = 'snippet-' + getErrorElementId(error.element) + '-errors';
+				const errorElement = document.getElementById(errorElementId);
+				if (!errorElement) {
+					alertErrors.push(error.message);
+					console.warn(`Element with ID "${errorElementId}" no exist.`);
+				} else if (!errorElement.innerHTML.includes(error.message)) {
+					errorElement.innerHTML += `<div>${error.message}</div>`;
 				}
 
 				error.element.classList.add('is-invalid');
@@ -93,6 +99,10 @@ function run(options) {
 			if (errors.length) {
 				scrollToFirstError(form);
 			}
+
+			if (alertErrors.length) {
+				alert(alertErrors.join('\n'));
+			}
 		};
 	} else {
 		console.error('Package nette-forms is missing!');