Skip to content

Commit 85d31f8

Browse files
markacatomarkacato
committed
Enrich tooltip and list view with dynamic data from the dateset. OWC-95
1 parent 84ed7a1 commit 85d31f8

9 files changed

Lines changed: 162 additions & 57 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/mix-manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=960c31f78d44969d4819c6bf4a1127d5",
2+
"/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=fa7b4f114bc538fe4683cf5f96bb35ab",
33
"/blocks/owc-openkaarten/streetmap/style.css": "/blocks/owc-openkaarten/streetmap/style.css?id=0c70cc29722d11466724176fc03cdd58",
44
"/blocks/owc-openkaarten/streetmap/editor.css": "/blocks/owc-openkaarten/streetmap/editor.css?id=f4316f0723fb86e3b028a9b448b1f3ae"
55
}

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-tooltip-card.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
export const makeTooltipCard = (location, dataset) => {
22
const { title, type } = dataset;
3+
const tooltipData = location.properties?.tooltip || [];
4+
35
return {
46
datasetTitle: title,
57
datasetId: location.id,
68
datasetType: type,
7-
locationTitle: location.title,
9+
locationTitle: tooltipData.find(t => t.layout === 'title')?.title || location.title,
10+
meta: tooltipData.find(t => t.layout === 'meta')?.meta || '',
11+
text: tooltipData.find(t => t.layout === 'text')?.text || 'Huisartsenpraktijk Westmaas B.V. ligt in het gelijknamige dorp in de regio Hoeksche Waard. Westmaas telt circa 2.065 inwoners en levert huisartsenzorg aan 2.380 patiënten.',
12+
button: tooltipData.find(t => t.layout === 'button') || null,
13+
image: tooltipData.find(t => t.layout === 'image')?.image || 'https://images.unsplash.com/photo-1525916801717-9405b53a3246?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHNwb3J0JTIwcGFya3xlbnwwfHwwfHx8MA%3D%3D',
814
properties: location.properties,
915
coordinates: location.geometry.coordinates
1016
};
11-
};
17+
}

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseListCard.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,12 @@ defineProps({
2626
<template>
2727
<div class="base-list-card">
2828
<div class="base-list-card__content">
29-
<h3 class="base-list-card__title">{{ title }}</h3>
30-
<p class="base-list-card__address" v-if="address">{{ address }}</p>
31-
<p class="base-list-card__description" v-if="description">{{ description }}</p>
32-
<a href="#" class="base-list-card__link">
33-
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
34-
<path d="M10.243 4.41a.833.833 0 0 1 1.178 0l5 5a.833.833 0 0 1 0 1.18l-5 5a.833.833 0 0 1-1.178-1.18l3.577-3.577H4.165a.833.833 0 0 1 0-1.667h9.655L10.243 5.59a.833.833 0 0 1 0-1.178Z" fill="#1261A3"/>
35-
</svg>
36-
Lees meer
37-
</a>
29+
<div>
30+
<h3 class="base-list-card__title">{{ title }}</h3>
31+
<p class="base-list-card__address" v-if="address">{{ address }}</p>
32+
<p class="base-list-card__description" v-if="description">{{ description }}</p>
33+
</div>
34+
<slot name="footer"></slot>
3835
</div>
3936
<div class="base-list-card__image" v-if="image">
4037
<img :src="image" :alt="title" />
@@ -63,6 +60,9 @@ defineProps({
6360
}
6461
6562
&__content {
63+
display: flex;
64+
flex-direction: column;
65+
justify-content: space-between;
6666
flex: 1;
6767
padding: 2rem;
6868
}

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseTooltipCard.vue‎

Lines changed: 103 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,22 @@ const props = defineProps({
99
default: '',
1010
required: true,
1111
},
12+
meta: {
13+
type: String,
14+
default: '',
15+
},
16+
text: {
17+
type: String,
18+
default: '',
19+
},
20+
button: {
21+
type: Object,
22+
default: null,
23+
},
24+
image: {
25+
type: String,
26+
default: '',
27+
},
1228
properties: {
1329
type: Object,
1430
default: () => ({}),
@@ -21,20 +37,6 @@ const props = defineProps({
2137
2238
const emit = defineEmits(['closeCard']);
2339
24-
const content = computed(() => {
25-
if (!props.properties) return null;
26-
let list = [];
27-
const propertiesCopy = { ...props.properties };
28-
delete propertiesCopy.marker;
29-
for (const [key, value] of Object.entries(propertiesCopy)) {
30-
list.push({ key, value });
31-
}
32-
33-
return `<ul class="owc-openkaarten-streetmap__tooltip-card__list">${list
34-
.map((item) => `<li><span>${item.key}:</span> <span>${item.value}</span></li>`)
35-
.join('')}</ul>`;
36-
});
37-
3840
const handleFocus = (el) => {
3941
if (el) {
4042
el.focus();
@@ -62,20 +64,40 @@ onMounted(() => {
6264
class="owc-openkaarten-streetmap__tooltip-card"
6365
tabindex="0"
6466
>
65-
<div class="owc-openkaarten-streetmap__tooltip-card__header">
66-
<h4 class="owc-openkaarten-streetmap__tooltip-card__title">
67-
{{ title }}
68-
</h4>
69-
<BaseTooltipCardClose
70-
:primaryColor="primaryColor"
71-
@closeCard="$emit('closeCard')"
72-
/>
67+
<div class="owc-openkaarten-streetmap__tooltip-card__wraper">
68+
<div v-if="image" class="owc-openkaarten-streetmap__tooltip-card__image">
69+
<img :src="image" :alt="title" />
70+
</div>
71+
<div class="owc-openkaarten-streetmap__tooltip-card__content">
72+
<div class="owc-openkaarten-streetmap__tooltip-card__header">
73+
<h4 class="owc-openkaarten-streetmap__tooltip-card__title">
74+
{{ title }}
75+
</h4>
76+
<BaseTooltipCardClose
77+
:primaryColor="primaryColor"
78+
@closeCard="$emit('closeCard')"
79+
/>
80+
</div>
81+
<div v-if="meta" class="owc-openkaarten-streetmap__tooltip-card__meta">
82+
{{ meta }}
83+
</div>
84+
<div v-if="text" class="owc-openkaarten-streetmap__tooltip-card__text">
85+
{{ text }}
86+
</div>
87+
<a
88+
v-if="button"
89+
:href="button.button_url"
90+
class="owc-openkaarten-streetmap__tooltip-card__button"
91+
target="_blank"
92+
rel="noopener noreferrer"
93+
>
94+
<svg width="20" height="21" fill="none" xmlns="http://www.w3.org/2000/svg">
95+
<path d="M10.243 4.91a.833.833 0 0 1 1.178 0l5 5a.833.833 0 0 1 0 1.18l-5 5a.833.833 0 0 1-1.178-1.18l3.577-3.577H4.165a.833.833 0 0 1 0-1.667h9.655L10.243 6.09a.833.833 0 0 1 0-1.178Z" fill="#fff"/>
96+
</svg>
97+
{{ button.button_text }}
98+
</a>
99+
</div>
73100
</div>
74-
<div
75-
class="owc-openkaarten-streetmap__tooltip-card__info"
76-
v-if="content"
77-
v-html="content"
78-
/>
79101
</div>
80102
</template>
81103

@@ -88,8 +110,20 @@ onMounted(() => {
88110
left: 12px;
89111
right: 12px;
90112
z-index: 400;
91-
border-radius: 0px 0px 4px 4px;
92-
padding: 16px;
113+
inline-size: min(100%, 360px);
114+
border-radius: 4px;
115+
116+
&__wraper {
117+
border-radius: 4px;
118+
}
119+
120+
&__content {
121+
display: flex;
122+
flex-direction: column;
123+
align-items: flex-start;
124+
gap: 16px;
125+
padding: 16px;
126+
}
93127
94128
@media only screen and (min-width: 768px) {
95129
left: auto;
@@ -106,11 +140,16 @@ onMounted(() => {
106140
align-items: center;
107141
justify-content: space-between;
108142
gap: 24px;
109-
margin-bottom: 16px;
110143
}
111144
112145
&__title {
113146
margin-block: 0;
147+
color: #001d5f;
148+
font-weight: bold;
149+
}
150+
151+
&:not(:has(img)) &__header {
152+
max-inline-size: 85%;
114153
}
115154
116155
&__list {
@@ -119,6 +158,7 @@ onMounted(() => {
119158
text-align: left;
120159
padding-left: 0;
121160
margin-block: 0;
161+
122162
li {
123163
width: 100%;
124164
display: flex;
@@ -137,6 +177,39 @@ onMounted(() => {
137177
}
138178
}
139179
}
180+
181+
&__meta {
182+
color: #666;
183+
font-size: 14px;
184+
}
185+
186+
&__image {
187+
width: 100%;
188+
height: 180px;
189+
190+
img {
191+
width: 100%;
192+
height: 100%;
193+
object-fit: cover;
194+
border-top-left-radius: 4px;
195+
border-top-right-radius: 4px;
196+
}
197+
}
198+
199+
&__button {
200+
display: inline-flex;
201+
align-items: center;
202+
gap: 8px;
203+
padding: 8px 16px;
204+
background-color: var(--owc-openkaarten-streetmap--primary-color);
205+
color: white;
206+
text-decoration: none;
207+
border-radius: 4px;
208+
209+
&:hover {
210+
opacity: 0.9;
211+
}
212+
}
140213
}
141214
}
142215
</style>

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseTooltipCardClose.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ const emit = defineEmits(['closeCard']);
3737
.owc-openkaarten-streetmap {
3838
&__tooltip-card__close-btn {
3939
cursor: pointer;
40-
// position: absolute;
41-
// top: 8px;
42-
// right: 8px;
40+
position: absolute;
41+
top: 8px;
42+
right: 8px;
4343
display: flex;
4444
justify-content: center;
4545
align-items: center;

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

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,19 @@ const props = defineProps({
2323
const filteredLocations = computed(() => {
2424
return props.datasets
2525
.filter(dataset => props.selectedDatasets.includes(dataset.id))
26-
.flatMap(dataset => dataset.features.map(feature => ({
27-
...feature,
28-
datasetId: dataset.id,
29-
datasetTitle: dataset.title,
30-
})));
26+
.flatMap(dataset => dataset.features.map(feature => {
27+
const tooltipData = feature.properties?.tooltip || [];
28+
return {
29+
...feature,
30+
datasetId: dataset.id,
31+
datasetTitle: dataset.title,
32+
title: tooltipData.find(t => t.layout === 'title')?.title || feature.title,
33+
meta: tooltipData.find(t => t.layout === 'meta')?.meta || '',
34+
text: tooltipData.find(t => t.layout === 'text')?.text || 'Huisartsenpraktijk Westmaas B.V. ligt in het gelijknamige dorp in de regio Hoeksche Waard. Westmaas telt circa 2.065 inwoners en levert huisartsenzorg aan 2.380 patiënten. ',
35+
button: tooltipData.find(t => t.layout === 'button') || null,
36+
image: tooltipData.find(t => t.layout === 'image')?.image || 'https://images.unsplash.com/photo-1525916801717-9405b53a3246?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHNwb3J0JTIwcGFya3xlbnwwfHwwfHx8MA%3D%3D'
37+
};
38+
}));
3139
});
3240
3341
const emits = defineEmits(['toggleView', 'datasetChange']);
@@ -123,13 +131,26 @@ const loadMore = () => {
123131
tabindex="0"
124132
>
125133
<BaseListCard
126-
:title="location.properties.title || location.datasetTitle"
127-
:address="location.properties.address || 'Zorg | Beatrixlaan 32 C, 3273 AB Westmaas'"
128-
:description="location.properties.description || 'Huisartsenpraktijk Westmaas B.V. ligt in het gelijknamige dorp in de regio Hoeksche Waard. Westmaas telt circa 2.065 inwoners en levert huisartsenzorg aan 2.380 patiënten.'"
129-
:image="location.properties.image || 'https://images.unsplash.com/photo-1494526585095-c41746248156?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'"
134+
:title="location.title || location.datasetTitle"
135+
:address="location.meta"
136+
:description="location.text"
137+
:image="location.image"
138+
:button="location.button"
130139
:primaryColor="primaryColor"
131140
>
132141
<template #footer>
142+
<a
143+
v-if="location.button"
144+
:href="location.button.button_url"
145+
class="base-list-card__button"
146+
target="_blank"
147+
rel="noopener noreferrer"
148+
>
149+
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
150+
<path d="M10.243 4.41a.833.833 0 0 1 1.178 0l5 5a.833.833 0 0 1 0 1.18l-5 5a.833.833 0 0 1-1.178-1.18l3.577-3.577H4.165a.833.833 0 0 1 0-1.667h9.655L10.243 5.59a.833.833 0 0 1 0-1.178Z" fill="#1261A3"/>
151+
</svg>
152+
{{ location.button.button_text }}
153+
</a>
133154
</template>
134155
</BaseListCard>
135156
</div>
@@ -153,6 +174,7 @@ const loadMore = () => {
153174
flex-direction: column;
154175
gap: 1rem;
155176
min-block-size: 660px;
177+
padding: 0.25rem;
156178
position: relative;
157179
overflow: hidden;
158180
@@ -206,7 +228,7 @@ const loadMore = () => {
206228
207229
&:focus {
208230
outline: 2px solid var(--owc-openkaarten-streetmap--primary-color);
209-
outline-offset: 4px;
231+
outline-offset: 1px;
210232
}
211233
}
212234

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,10 @@ onMounted(() => {
242242
:key="tooltipCard.datasetId"
243243
:id="tooltipCard.datasetId"
244244
:title="tooltipCard.locationTitle"
245+
:meta="tooltipCard.meta"
246+
:text="tooltipCard.text"
247+
:button="tooltipCard.button"
248+
:image="tooltipCard.image"
245249
:properties="tooltipCard.properties"
246250
:primaryColor="primaryColor"
247251
@closeCard="closeTooltipCard"

0 commit comments

Comments
 (0)