Merge pull request #54 from OpenWebconcept/feature/OWC-137

OWC-137

Author: merelacato

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

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

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

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

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

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

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

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

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

@@ -41,7 +41,7 @@ const searchStatus = computed(() => {
     <form
       @submit="handleSubmit"
       class="search-form"
-      :style="{ '--search-primary-color': primaryColor }"
+      :data-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/BaseTooltipCardClose.vue

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

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

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

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

@@ -334,10 +334,8 @@ const handleSearch = async (query) => {
 <template v-cloak>
 	<div
 		class="owc-openkaarten-streetmap__map"
-		:style="{
-			'--owc-openkaarten-streetmap--primary-color': primaryColor,
-			'--owc-openkaarten-streetmap--cluster-color': props.primaryColor,
-		}"
+		:data-primary-color="primaryColor"
+		:data-cluster-color="props.primaryColor"
 	>
 		<div class="owc-openkaarten-streetmap__controls">
 			<BaseSearchInput