adt-js-components 2.0.1 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adt-js-components",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "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/Map/index.js

@@ -23,6 +23,7 @@ const onSelectionChangeMap = new WeakMap();
 const onBeforeRouteCalculationMap = new WeakMap();
 const onAfterRouteCalculationMap = new WeakMap();
 const disableClickZoomMap = new WeakMap();
+const disableClusteringMap = new WeakMap();
 const cachedRouteLoaded = new WeakMap();
 
 const DEPOT_TYPE = {
@@ -56,7 +57,8 @@ async function run(options) {
 			markerInfoCallback = null,
 			onBeforeRouteCalculation = null,
 			onAfterRouteCalculation = null,
-			disableClickZoom = false
+			disableClickZoom = false,
+			disableClustering = false
 		} = JSON.parse(el.dataset.adtMap);
 
 		/** @type {RouteSetting} */
@@ -91,6 +93,7 @@ async function run(options) {
 		onBeforeRouteCalculationMap.set(map, onBeforeRouteCalculation);
 		onAfterRouteCalculationMap.set(map, onAfterRouteCalculation);
 		disableClickZoomMap.set(map, disableClickZoom);
+		disableClusteringMap.set(map, disableClustering);
 
 		if (mapProvider === MAP_PROVIDER.HERE) {
 			L.tileLayer(
@@ -334,21 +337,23 @@ function enableRectangleSelection(map, onSelectionChange, showSelectionOrder) {
 
 function addMarkers(map, markers, options, selectedOptions, position, selectable, onSelectionChange, showSelectionOrder, markerInfoCallback) {
 	const positionsOfMarkers = [];
-	const cluster = L.markerClusterGroup({
-		disableClusteringAtZoom: 18,
-		spiderfyOnMaxZoom: true,
-		showCoverageOnHover: false,
-		zoomToBoundsOnClick: true,
-		iconCreateFunction: function (cluster) {
-			const childCount = cluster.getChildCount();
-			const c = childCount < 10 ? 'small' : childCount < 100 ? 'medium' : 'large';
-			return new L.DivIcon({
-				html: '<div><span>' + childCount + '</span></div>',
-				className: 'marker-cluster marker-cluster-' + c,
-				iconSize: new L.Point(40, 40)
-			});
-		}
-	});
+	const cluster = disableClusteringMap.get(map)
+		? L.layerGroup()
+		: L.markerClusterGroup({
+			disableClusteringAtZoom: 18,
+			spiderfyOnMaxZoom: true,
+			showCoverageOnHover: false,
+			zoomToBoundsOnClick: true,
+			iconCreateFunction: function (cluster) {
+				const childCount = cluster.getChildCount();
+				const c = childCount < 10 ? 'small' : childCount < 100 ? 'medium' : 'large';
+				return new L.DivIcon({
+					html: '<div><span>' + childCount + '</span></div>',
+					className: 'marker-cluster marker-cluster-' + c,
+					iconSize: new L.Point(40, 40)
+				});
+			}
+		});
 
 	markerClusters.set(map, cluster);
 	let loadedCount = 0;
@@ -411,9 +416,9 @@ async function applyPreselectedMarkersVisualOnly(map, markersData) {
 	for (const markerData of preselected) {
 		const markerInstance = markerMap.get(markerData.id);
 		if (markerInstance && markerInstance._selectedIcon) {
-			if (settings && settings.color) {
+			if ((settings && settings.color) || markerData.iconStyle) {
 				const iconUrl = markerInstance._selectedIcon.options.iconUrl;
-				const newIcon = await createMarkerIcon(map, iconUrl, null);
+				const newIcon = await createMarkerIcon(map, iconUrl, null, null, markerData.iconStyle);
 				markerInstance.setIcon(newIcon);
 			} else {
 				markerInstance.setIcon(markerInstance._selectedIcon);
@@ -542,7 +547,7 @@ async function selectMarker(marker, map, showSelectionOrder) {
 	}
 
 	if (showSelectionOrder) {
-		const newIcon = await createMarkerIcon(map, marker.options.icon.options.iconUrl, newOrder);
+		const newIcon = await createMarkerIcon(map, marker.options.icon.options.iconUrl, newOrder, null, marker._markerData?.iconStyle);
 		marker.setIcon(newIcon);
 	}
 }
@@ -581,16 +586,19 @@ function deselectMarker(marker, map, showSelectionOrder) {
 async function updateMarkerOrderDisplay(map, marker, orderNumber, isSelected, color = null) {
 	if (!marker._normalIcon || !marker._normalIcon.options) return;
 	const iconUrl = isSelected && marker._selectedIcon ? marker._selectedIcon.options.iconUrl : marker._normalIcon.options.iconUrl;
-	const newIcon = await createMarkerIcon(map, iconUrl, orderNumber, color);
+	const newIcon = await createMarkerIcon(map, iconUrl, orderNumber, color, marker._markerData?.iconStyle);
 	marker.setIcon(newIcon);
 }
 
-async function createMarkerIcon(map, iconUrl, orderNumber, color = null) {
-	let inlineStyle = null;
+async function createMarkerIcon(map, iconUrl, orderNumber, color = null, iconStyle = null) {
+	let inlineStyle = '';
 	const settings = routeSettingsMap.get(map);
 	if ((settings && settings.color) || color) {
 		inlineStyle = `--marker-fill: ${color ?? settings.color};`;
 	}
+	if (iconStyle) {
+		inlineStyle += iconStyle;
+	}
 
 	let svg;
 	if (svgCache.has(iconUrl)) {
@@ -903,7 +911,7 @@ async function toggleMarker(mapElement, markerId, selected, recalculate = true)
 	}
 
 	const cluster = markerClusters.get(map);
-	if (cluster) {
+	if (cluster && typeof cluster.refreshClusters === 'function') {
 		cluster.refreshClusters(marker);
 	}
 

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