adt-js-components 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adt-js-components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "JavaScript components for Nette framework",
   "main": "index.js",
   "scripts": {
@@ -22,7 +22,9 @@
     "scrollparent": "^2.0.1",
     "tinymce": "^5.7.0",
     "tinymce-i18n": "^20.12.25",
-    "nette.ajax.js": "^2.3.0"
+    "nette.ajax.js": "^2.3.0",
+    "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3"
   },
   "peerDependencies": {
     "jquery": "^3.4.1"

package/src/ComponentLoader.js

@@ -71,6 +71,9 @@ const initAjaxSelect = () => {
 const initInputClear = () => {
 	init('input-clear', 'InputClear');
 };
+const initMap = () => {
+	init('map', 'Map');
+};
 
 const getFirstDiffCharIndex = (a, b) => {
 	const longerLength = Math.max(a.length, b.length);
@@ -102,5 +105,6 @@ export default {
 	initTinyMCE,
 	initAjaxSelect,
 	initInputClear,
+	initMap,
 	loadScssModule,
 };

package/src/Map/index.js

@@ -0,0 +1,123 @@
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+import "leaflet.markercluster";
+import "leaflet.markercluster/dist/MarkerCluster.css";
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+let siteKey;
+const mapInstances = new WeakMap();
+
+async function run(options) {
+	siteKey = options.siteKey;
+
+	function applyEventHandlers(el) {
+		const { position, zoom, hideControl = false, markers = [], callback } = JSON.parse(el.dataset.adtMap);
+
+		if (mapInstances.has(el)) {
+			mapInstances.get(el).remove();
+			mapInstances.delete(el);
+		}
+
+		const map = L.map(el);
+		mapInstances.set(el, map);
+
+		L.tileLayer("https://api.mapy.cz/v1/maptiles/basic/256/{z}/{x}/{y}?apikey=" + siteKey, {
+			minZoom: 0,
+			maxZoom: 19,
+			attribution: '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. a další</a>',
+		}).addTo(map);
+		const LogoControl = L.Control.extend({
+			options: {
+				position: 'bottomleft',
+			},
+			onAdd: function (map) {
+				const container = L.DomUtil.create('div');
+				const link = L.DomUtil.create('a', '', container);
+				link.setAttribute('href', 'http://mapy.cz/');
+				link.setAttribute('target', '_blank');
+				link.innerHTML = '<img src="https://api.mapy.cz/img/api/logo.svg" />';
+				L.DomEvent.disableClickPropagation(link);
+				return container;
+			},
+		});
+		new LogoControl().addTo(map);
+
+		if (position.length) {
+			map.setView(position, zoom);
+		}
+
+		if (hideControl) {
+			map.scrollWheelZoom.disable();
+			map.zoomControl.remove();
+			map.keyboard.disable();
+			map.dragging.disable();
+		}
+
+		const markerOptions = {
+			icon: L.icon({
+				iconUrl: '//' + window.location.hostname + '/images/mapmarker.png',
+			}),
+		};
+		if (markers.length) {
+			const markerPositions = [];
+			const cluster = L.markerClusterGroup({
+				disableClusteringAtZoom: map.getMaxZoom()
+			});
+			for (const marker of markers) {
+				const mapMarker = L.marker(marker.position, markerOptions);
+				if (marker.handler) {
+					mapMarker.on('click', marker.handler);
+				}
+				if (marker.popup) {
+					mapMarker.bindPopup(marker.popup)
+				}
+				if (!marker.excludeFromBoundary) {
+					markerPositions.push(marker.position);
+				}
+				cluster.addLayer(mapMarker);
+			}
+			if (!position.length) {
+				map.fitBounds(markerPositions);
+			}
+			map.addLayer(cluster);
+		} else {
+			L.marker(position, markerOptions).addTo(map);
+		}
+
+		if (callback) {
+			map.on('zoomend', window[callback]);
+			map.on('moveend', window[callback]);
+			map.on('dragend', window[callback]);
+		}
+	}
+
+	const observer = new MutationObserver(mutations => {
+		mutations.forEach(mutation => {
+			if (mutation.type === "childList") {
+				mutation.addedNodes.forEach(node => {
+					if (node.nodeType === 1 && node.hasAttribute("data-adt-map")) {
+						handleMapElement(node);
+					}
+				});
+			}
+
+			if (mutation.type === "attributes" && mutation.attributeName === "data-adt-map") {
+				applyEventHandlers(mutation.target);
+			}
+		});
+	});
+
+	observer.observe(document.body, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ["data-adt-map"]
+	});
+
+	document.querySelectorAll('[data-adt-map]').forEach(function(el) {
+		applyEventHandlers(el);
+	});
+}
+
+export default { run }

package/src/Select2/index.js

@@ -17,7 +17,6 @@ function run(options) {
 			if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
 				$(mutation.addedNodes).each(function() {
 					if (this.nodeType === Node.ELEMENT_NODE) {
-						console.log(this);
 						if (this.hasAttribute('data-adt-select2')) {
 							applyEventHandlers(this);
 						}