revert OWC-137

Author: merelacato

build/blocks/owc-openkaarten/streetmap/client.js

@@ -1,5 +1,5 @@
 {
-    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=bd845f4bc9af412b933a1f05a3386604",
+    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=5607c1c65ead86af83d4f477a427048c",
     "/blocks/owc-openkaarten/streetmap/style.css": "/blocks/owc-openkaarten/streetmap/style.css?id=b3188898fe0cdd30cad5c03ec8995bf6",
     "/blocks/owc-openkaarten/streetmap/editor.css": "/blocks/owc-openkaarten/streetmap/editor.css?id=f4316f0723fb86e3b028a9b448b1f3ae"
 }

build/blocks/owc-openkaarten/streetmap/client.js.map

@@ -29,7 +29,7 @@ export const makeMarkerCluster = ({
 				html: `
                 <div 
                     class="owc-openkaarten-streetmap__cluster-group__circle"
-                    data-cluster-color="${color};"
+                    style="--owc-openkaarten-streetmap--cluster-color: ${color};"
                     >
                     <span class="owc-openkaarten-streetmap__cluster-group__count">${count}</span>
                 </div>`,

build/mix-manifest.json

@@ -29,8 +29,7 @@ export const makeMarkerIcon = (L, { marker, defaultColor }) => {
 		return L.divIcon({
 			className: 'leaflet-custom-icon--hosted-svg',
 			html: L.Util.template(
-				`<div data-icon-color="${iconColor};" class="leaflet-svg"><img src=${iconSettings.iconUrl} /></div>`,
-				iconSettings
+        `<div style="--l-icon-color: ${iconColor};" class="leaflet-svg"><img src=${iconSettings.iconUrl} /></div>`,				iconSettings
 			),
 			iconAnchor: [12, 32],
 			iconSize: [25, 30],

src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-marker-cluster.js

@@ -197,28 +197,6 @@ function stripCredentialsFromUrl(url) {
 
 onMounted(() => {
   getLocations();
-
-  document.querySelectorAll('[data-primary-color]')?.forEach(el => {
-    const color = el.getAttribute('data-primary-color');
-    el.parentElement.style.setProperty('--owc-filters-primary', color);
-    el.parentElement.style.setProperty('--owc-openkaarten-streetmap--primary-color', color);
-    el.parentElement.style.setProperty('--search-primary-color', color);
-    el.parentElement.style.setProperty('--owc-openkaarten-streetmap--close-btn-color', color);
-    el.parentElement.style.setProperty('--button-color', color);
-  });
-  document.querySelectorAll('[data-cluster-color]')?.forEach(el => {
-    const color = el.getAttribute('data-cluster-color');
-    el.parentElement.style.setProperty('--owc-openkaarten-streetmap--cluster-color', color);
-  });
-  document.querySelectorAll('[data-background-color]')?.forEach(el => {
-    const color = el.getAttribute('data-background-color');
-    el.parentElement.style.backgroundColor = color;
-  });
-  document.querySelectorAll('[data-icon-color]')?.forEach(el => {
-    const color = el.getAttribute('data-icon-color');
-    el.parentElement.style.setProperty('--l-icon-color', color);
-  });
-
 });
 </script>
 

src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-marker-icon.js

@@ -125,7 +125,7 @@ onUnmounted(() => {
 	<div
 		ref="filterContainer"
 		class="owc-openkaarten-streetmap__filters"
-		:data-primary-color="primaryColor"
+    :style="{ '--owc-filters-primary': primaryColor }"
     role="dialog"
 		aria-modal="true"
 		aria-labelledby="filters-title"
@@ -154,7 +154,7 @@ onUnmounted(() => {
 						@onChange="datasetChange"
 					/>
 					<div
-						:data-background-color="getDatalayerColor(layer)"
+              :style="{'background-color': getDatalayerColor(layer)}"
 						class="owc-openkaarten-streetmap__filters__body__list-item__dl-indicator"
 					/>
 				</li>

src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/App.vue

@@ -41,7 +41,7 @@ const searchStatus = computed(() => {
     <form
       @submit="handleSubmit"
       class="search-form"
-      :data-primary-color="primaryColor"
+      :style="{ '--search-primary-color': primaryColor }"
     >
       <label class="sr-only" for="location-search">Zoek op straat en/of plaats of postcode</label>
       <div class="search-wrapper">

src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseFilters.vue

@@ -13,8 +13,8 @@ const emit = defineEmits(['closeCard']);
 	<button
 		class="owc-openkaarten-streetmap__tooltip-card__close-btn"
     aria-label="Sluit"
-		:data-primary-color="primaryColor"
-		@click="$emit('closeCard')"
+    :style="{'--owc-openkaarten-streetmap--close-btn-color': primaryColor }"
+    @click="$emit('closeCard')"
 	>
 		<svg
 			width="20"

src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseSearchInput.vue

@@ -119,9 +119,11 @@ const handleSearch = (query) => {
 <template>
   <div
     class="list-view"
-    :data-filters-primary="primaryColor"
-    :data-primary-color="primaryColor"
-    data-filters-secondary="#d2d2d2"
+    :style="{
+      '--owc-filters-primary': primaryColor,
+      '--owc-openkaarten-streetmap--primary-color': primaryColor,
+      '--owc-filters-secondary': '#d2d2d2'
+    }"
   >
     <div class="list-view__controls">
       <BaseSearchInput 
@@ -195,7 +197,7 @@ const handleSearch = (query) => {
         v-if="hasMoreItems"
         @click="loadMore"
         class="list-view__load-more"
-        :data-primary-color="primaryColor"
+        :style="{ '--button-color': primaryColor }"
       >
         Toon meer resultaten ({{ paginatedLocations.length }} van {{ filteredLocations.length }})
       </button>