https://moveoss.nl/content/themes/movenl/assets/js/offers-map-cHwanxWF.js

1import { _ as _defineProperty, t as tempStore, a as _objectSpread2, s as swiperA11yNL } from './main-module-D8UQLSsS.js';
2import { m as mapBox } from './map-BGqh6wnp.js';
3import { n as noUiSlider, m as mapboxAPI } from './nouislider-Dl-jRGqV.js';
4import { b as base64 } from './base64-D0xLjV6U.js';
5import { S as Swiper, A as A11y } from './a11y-B-zyjK_U.js';
6import { a as activities } from './activities-CcxMjSFt.js';
7import { a as activitiesHelper } from './activities-C70WWTg7.js';
8import { a as activitiesSessionMapCard, b as activitiesBundleMapCard } from './activities-session-CVJb-oHr.js';
9import { o as organizations } from './organizations-CR2eFO7J.js';
10import { o as organizationsMapCard } from './organizations-BxUvpIGf.js';
11import { l as locations } from './locations-BB_vz-r1.js';
12import { l as locationsMapCard } from './locations-CI8joycC.js';
13import { l as loading, d as doneLoading } from './loading-DICUQEYz.js';
14import './reformat-DUMoSDhI.js';
15import './sport-icons-_R8LgqHe.js';
16import './age-B6r4bODg.js';
17
18class offersMapDataDefault{constructor(){this.assetName={single:'resultaat',multiple:'resultaten'};}}
19
20class offersMapDataActivities extends offersMapDataDefault{constructor(){super();}async getMarkersData(params,id){return await activities.getMarkers(params,id);}async getCardsData(params,id){var _results$activities;const results=await activities.get(params,id);return {results:(_results$activities=results.activities)!==null&&_results$activities!==void 0?_results$activities:[],meta:results.meta};}async getCards(results){let html='';for(const result of results!==null&&results!==void 0?results:[]){const type=activitiesHelper.getType(result);let card='';switch(type){case 'bundle':card=activitiesBundleMapCard(result,'swiper-slide lg:h-auto');break;case 'session':card=activitiesSessionMapCard(result,'swiper-slide lg:h-auto');break;}html+=card;}return html;}}
21
22class offersMapDataOrganizations extends offersMapDataDefault{constructor(){super();}async getMarkersData(params,id){return await organizations.getMarkers(params,id);}async getCardsData(params,id){var _results$organization;const results=await organizations.get(params,id);return {results:(_results$organization=results.organizations)!==null&&_results$organization!==void 0?_results$organization:[],meta:results.meta};}async getCards(results){let html='';for(const result of results!==null&&results!==void 0?results:[]){html+=await organizationsMapCard(result,'swiper-slide lg:h-auto');}return html;}}
23
24class offersMapDataLocations extends offersMapDataDefault{constructor(){super();}async getMarkersData(params,id){return await locations.getMarkers(params,id);}async getCardsData(params,id){const result=await locations.get(params,id);// If single location
25if(!result.locations){return {results:[result],meta:null};}return {results:result.locations,meta:result.meta};}async getCards(results){let html='';for(const result of results!==null&&results!==void 0?results:[]){html+=await locationsMapCard(result,'swiper-slide lg:h-auto');}return html;}}
26
27class offersMap{constructor(){var _this$elements$parent;_defineProperty(this,"unSelectMapCards",()=>{this.mapCards.forEach(card=>{card.classList.remove('active');});});this.elements={parent:document.querySelector('.js-offers-map'),map:document.querySelector('.js-offers-map .js-map'),submit:document.querySelector('.js-offers-map .js-submit'),loadMore:document.querySelector('.js-offers-map .js-load-more'),results:{noResults:document.querySelector('.js-offers-map .js-no-results'),desktopSelected:{parent:document.querySelector('.js-offers-map .js-map-result-desktop-marker'),list:document.querySelector('.js-offers-map .js-map-result-desktop-marker .js-list'),back:document.querySelector('.js-offers-map .js-map-result-desktop-marker .js-back')},desktop:{parent:document.querySelector('.js-offers-map .js-map-result-desktop'),list:document.querySelector('.js-offers-map .js-map-result-desktop .js-list')},mobile:{parent:document.querySelector('.js-offers-map .js-map-result-mobile'),close:document.querySelector('.js-offers-map .js-map-result-mobile-close'),list:document.querySelector('.js-offers-map .js-map-result-mobile .js-list'),swiper:document.querySelector('.js-offers-map .js-map-result-mobile .js-swiper')}},types:{buttons:document.querySelectorAll('.js-offers-map .js-type')},distance:{slider:null,rangeInput:document.querySelector(".js-offers-map .js-range-input"),rangeValue:document.querySelector(".js-offers-map .js-range-value"),rangeWrapper:document.querySelector(".js-offers-map .js-range-wrapper"),place:document.querySelector(".js-offers-map .js-place"),feedback:document.querySelector(".js-offers-map .js-feedback"),clear:document.querySelector(".js-offers-map .js-place-clear"),acceptedIcon:document.querySelector(".js-offers-map .js-place-accepted"),failedIcon:document.querySelector(".js-offers-map .js-place-failed")},search:{input:document.querySelector(".js-offers-map .js-search-input"),label:document.querySelector(".js-offers-map .js-search-label"),clear:document.querySelector(".js-offers-map .js-search-clear")}};this.activeType=document.querySelector('.js-offers-map .js-type.active')?document.querySelector('.js-offers-map .js-type.active').dataset.type:'activities';this.map=null;this.mapCards=null;this.mapMarkers=null;this.mobileSwiper=null;this.page=1;this.pageSecondary=1;this.itemsPerPage=10;this.showSecondary=this.elements.parent.getAttribute('data-show-secondary')==='1';this.showingSecondary=false;this.includeExclusive=this.elements.parent.getAttribute('data-show-exclusive')==='1';this.distanceOptions={sliderStartValues:[5]};this.state={clusterIsSettled:false,gettingNewData:false,locationDetail

27sAreShown:false,activities:[],organizations:[],locations:[],activitiesNextUrl:'',organizationsNextUrl:'',locationsNextUrl:''};this.offersMapDataActivitiesInstance=new offersMapDataActivities();this.offersMapDataLocationsInstance=new offersMapDataLocations();this.offersMapDataOrganizationsInstance=new offersMapDataOrganizations();this.default={center:(_this$elements$parent=this.elements.parent.dataset.center)===null||_this$elements$parent===void 0||(_this$elements$parent=_this$elements$parent.split(','))===null||_this$elements$parent===void 0?void 0:_this$elements$parent.map(Number),zoom:Number(this.elements.parent.dataset.zoom)};this.filterValues={search:''};this.events={pageLoaded:new Event('pageLoaded')};}async init(){loading();tempStore.results={};await this.setupMapbox();await this.buildDistanceFilter();this.initEventListeners();await this.setupMapContent();doneLoading();}initEventListeners(){var _this=this;this.elements.submit.addEventListener('click',async function(){_this.search();});this.elements.loadMore.addEventListener('click',async function(){loading();const previousCount=_this.elements.results.desktop.list.querySelectorAll('.js-map-card').length;_this.page++;const cards=await _this.getMapCardsWithFilters(_this.page);if(!tempStore.results.loadMore){_this.elements.loadMore.style.display='none';}if(!cards.length>0){doneLoading();return;}_this.elements.results.desktop.list.scrollTop=_this.elements.results.desktop.list.scrollHeight;if(cards.length>0){_this.elements.results.desktop.list.innerHTML+=cards;}// Add eventlisteners on the map cards
28_this.mapCards=_this.elements.map.querySelectorAll('.js-map-card');_this.mapCards.forEach(card=>{_this.initMapCard(card,()=>{_this.hideMarkerResults();_this.unSelectMapCards();_this.unSelectMarkers();_this.selectMapCard(card);});});_this.elements.results.desktop.list.scrollTop+=40;// WCAG 2.1 AA — 2.4.3 Focus Order: move focus to first newly loaded card
29// Move focus to the first newly loaded card
30const firstNewCard=_this.elements.results.desktop.list.querySelectorAll('.js-map-card')[previousCount];if(firstNewCard)firstNewCard.focus();doneLoading();});/* ------------------------------- Results ------------------------------- */if(this.elements.results.mobile.close){this.elements.results.mobile.close.addEventListener('click',e=>{e.stopPropagation();this.elements.results.mobile.parent.style.display='none';if(this.mobileSwiper){this.mobileSwiper.destroy(true,true);this.mobileSwiper=null;}this.unSelectMarkers();});}this.elements.results.desktopSelected.back.addEventListener('click',async function(){_this.elements.results.desktopSelected.parent.classList.remove('lg:!flex');_this.resetMap();_this.unSelectMarkers();});/* ------------------------------- Search ------------------------------- */this.elements.search.input.addEventListener('keydown',async function(e){if(e.key==='Enter'){e.preventDefault();await _this.search();}});if(this.elements.search.clear){this.elements.search.clear.addEventListener('click',async function(){_this.resetSearch();});}if(this.elements.search.input){this.elements.search.input.addEventListener('input',()=>{if(this.elements.search.input.value.length>0){this.elements.search.clear.style.display='flex';}else {this.elements.search.clear.style.display='none';}});}/* ------------------------------- Distance ------------------------------- */this.elements.distance.place.addEventListener('keydown',async function(e){if(e.key==='Enter'){e.preventDefault();await _this.search();}});if(this.elements.distance.clear){this.elements.distance.clear.addEventListener('click',async function(){_this.resetDistanceFilter();});}if(this.elements.distance.place){this.elements.distance.place.addEventListener('input',()=>{if(this.elements.distance.place.value.length>0){this.elements.distance.clear.style.display='flex';this.enableDistanceSlider();}else {this.elements.distance.clear.style.display='none';this.disableDistanceSlider();}});}/* ------------------------------- Search ------------------------------- */// WCAG 2.1 AA — 2.1.1 Keyboard: activate map type filter buttons with Enter/Space
31this.elements.types.buttons.forEach(button=>{button.addEventListener('click',async function(){loading();_this.activeType=button.dataset.type;_this.elements.types.buttons.forEach(b=>b.classList.remove('active'));button.classList.add('active');await _this.setupMapContent();doneLoading();});});}async setupMapbox(){this.map=await mapBox.buildMap({container:this.elements.map,style:'mapbox://styles/mapbox/streets-v12',center:this.default.center,cooperativeGestures:true,zoom:this.default.zoom});}resetMap(){this.showingSecondary=false;this.pageSecondary=1;this.page=1;this.map.easeTo({center:this.default.center,zoom:this.default.zoom});this.elements.results.mobile.list.innerHTML='';}async setupMapContent(){this.resetMap();await this.setupMarkers();await this.setupCards();}async setupMarkers(){const markers=await this.getMapMarkersWithFilters();if(!markers){console.error('Api call for markers went wrong',markers);this.elements.results.noResults.style.display='block';return;}if(markers.length<=0){this.elements.results.noResults.style.display='block';}else {this.elements.results.noResults.style.display='none';}this.mapMarkers=markers;await mapBox.buildMarkers(this.map,markers);await this.settleClusterLayer();}async setupCards(){const cards=await this.getMapCardsWithFilters(this.page);if(!cards.length>0){this.elements.results.desktop.list.innerHTML=`Geen resultaten gevonden`;}else {this.elements.results.desktop.list.innerHTML=cards;}

31if(tempStore.results.loadMore){this.elements.loadMore.style.display='flex';}else {this.elements.loadMore.style.display='none';}// Add eventlisteners on the map cards
32this.mapCards=this.elements.map.querySelectorAll('.js-map-card');this.mapCards.forEach(card=>{this.initMapCard(card,()=>{this.hideMarkerResults();this.unSelectMapCards();this.unSelectMarkers();this.selectMapCard(card);});});}// WCAG 2.1 AA — 2.1.1 Keyboard / 4.1.2: make map result cards keyboard accessible with Enter/Space activation
33initMapCard(card,handler){card.setAttribute('tabindex','0');card.setAttribute('role','button');card.addEventListener('click',handler);card.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();handler();}});}hideMarkerResults(){this.elements.results.desktop.parent.display='none';this.elements.results.mobile.parent.display='none';if(this.mobileSwiper){this.mobileSwiper.destroy();}this.unSelectMarkers();// Reset view
34mapBox.setView(this.map);}async selectMapCard(cardEl){cardEl.classList.add('active');const cardId=cardEl.getAttribute('data-id');await this.selectMarker(cardId);}selectMarker(id){const primarySource=this.map.getSource('markers-primary');const secondarySource=this.map.getSource('markers-secondary');const sources=[primarySource,secondarySource];for(const source of sources){if(!(source!==null&&source!==void 0&&source._data))continue;const data=source._data;const feature=data.features.find(f=>String(f.properties.id)===String(id));if(feature){feature.properties.active=true;const[lng,lat]=feature.geometry.coordinates;mapBox.setView(this.map,[lng,lat],14);source.setData(data);return feature;}}}unSelectMarkers(){const primarySource=this.map.getSource('markers-primary');const secondarySource=this.map.getSource('markers-secondary');const sources=[primarySource,secondarySource];for(const source of sources){if(!(source!==null&&source!==void 0&&source._data))continue;const data=source._data;data.features.forEach(feature=>{feature.properties.active=false;});source.setData(data);}}async resetSearch(){this.filterValues.search='';this.elements.search.input.value='';this.elements.search.clear.style.display='none';await this.setupMapContent();}async search(){const searchResult=await this.searchDistanceFilter();if(this.elements.search.input.value.length>0){this.filterValues.search=this.elements.search.input.value;}else {this.filterValues.search='';}if(searchResult){await this.setupMapContent();}}async openMarkerCards(location_id,primary='1'){let results={};let html='';const filters=base64.encodeObject(this.filterValues);if(this.activeType==='activities'){results=await this.offersMapDataActivitiesInstance.getCardsData({location:location_id,primary:primary,filters:filters,includeExclusive:this.includeExclusive});html=await this.offersMapDataActivitiesInstance.getCards(results.results);}if(this.activeType==='locations'){results=await this.offersMapDataLocationsInstance.getCardsData({primary:primary,filters:filters,includeExclusive:this.includeExclusive},location_id);html=await this.offersMapDataLocationsInstance.getCards(results.results);}if(this.activeType==='organizations'){results=await this.offersMapDataOrganizationsInstance.getCardsData({location:location_id,primary:primary,filters:filters,includeExclusive:this.includeExclusive});html=await this.offersMapDataOrganizationsInstance.getCards(results.results);}this.elements.results.mobile.list.innerHTML=html;this.elements.results.desktopSelected.list.innerHTML=html;if(results.results&&results.results.length>1){this.mobileSwiper=new Swiper(this.elements.results.mobile.swiper,{modules:[A11y],a11y:_objectSpread2({},swiperA11yNL),slidesPerView:1});}else {if(this.mobileSwiper)this.mobileSwiper.destroy();}this.selectedCards=this.elements.results.desktopSelected.list.querySelectorAll('.js-map-card');this.selectedCards.forEach(card=>{card.addEventListener('click',e=>{e.preventDefault();this.selectedCards.forEach(card=>{card.classList.remove('active');});this.selectMapCard(card);});});this.elements.results.desktopSelected.parent.classList.add('lg:!flex');this.elements.results.mobile.parent.style.display='block';}/* ------------------------------ Distance ------------------------------ */async buildDistanceFilter(){const formatForSlider={from:function(formattedValue){return Number(formattedValue);},to:function(numericValue){return Math.round(numericValue);}};this.disableDistanceSlider();this.elements.distance.slider=noUiSlider.create(this.elements.distance.rangeInput,{start:this.distanceOptions.sliderStartValues,connect:'lower',format:formatForSlider,range:{'min':0,'max':15},handleAttributes:[{'aria-label':'Zoekafstand in kilometers'}]});this.elements.distance.slider.on('update',values=>{this.elements.distance.rangeValue.innerHTML=values[0];});this.elements.distance.slider.on('change',values=>{this.filterValues.distance=values[0];});}async searchDistanceFilter(){this.elements.distance.feedback.innerHTML='';this.elements.distance.feedback.style.display='none';const place=this.elements.distance.place.value;if(!place.length>0){delete this.filterValues.distance;return true;}// Get lat and lng
35let response=await mapboxAPI.get('forward?q='+place+'&country=nl&proximity=ip');if(!response||!response['features']||!response.features.length>0){this.elements.distance.feedback.innerHTML='Kan opgegeven plaats niet vinden';this.elements.distance.feedback.style.display='block';this.elements.distance.failedIcon.style.display='flex';return false;}this.elements.distance.place.value=response.features[0].properties.name_preferred;const distanceInMeters=this.elements.distance.slider.get()*1000;this.filterValues.distance=response.features[0].properties.coordinates.latitude+','+response.features[0].properties.coordinates.longitude+'|'+distanceInMeters;this.elements.distance.failedIcon.style.display='none';return true;}enableDistanceSlider(){this.elements.distance.rangeWrapper.style.opacity=1;this.elements.distance.rangeInput.removeAttribute('disabled');}disableDistanceSlider(){this.elements.distance.rangeWrapper.style.opacity=0.25;this.elements.distance.rangeInput.setAttribute('disabled',true);}resetDistanceSliderFilter(){this.elements.distance.slider.set(this.distanceOptions.sliderStartValues,false,true);}resetDistancePlaceFilter(){this.elements.distance.place.value='';this.elements.distance.clear.style.display='none';this.elements.distance.feedback.style.display='none';this.elements.distance.failedIcon.style.display='none';if(this.filterValues.distance)delete this.filterValues.distance;this.disableDistanceSlider();this.setupMapContent();}resetDistanceFilter(){this.resetDistanceSliderFilter();this.resetDistancePlaceFilter();}async settleClusterLayer(){const map=this.map;['unclustered-primary','unclustered-secondary'].forEach(layer=>{map.on('click',layer,e=>{var _marker$properties;const features=map.queryRenderedFeatures(e.point,{layers:[layer]});if(!features.length)return;const feature=features[0];const id=feature.properties.id;const location_id=feature.properties.location_id;this.unSelectMapCards();this.unSelectMarkers();const marker=this.selectMarker(id);this.openMarkerCards(location_id,(marker===null||marker===void 0||(_marker$properties=marker.properties)===null||_marker$properties===void 0?void 0:_marker$properties.type)==='secondary'?'0':'1');});});['clusters-primary','clusters-secondary'].forEach(layer=>{map.on('click',layer,e=>{const features=map.queryRenderedFeatures(e.point,{layers:[layer]});if(!features.length)return;const clusterId=features[0].properties.cluster_id;map.getSource(layer.includes('secondary')?'markers-secondary':'markers-primary').getClusterExpansionZoom(clusterId,(err,zoom)=>{if(err)return;map.easeTo({center:features[0].geometry.coordinates,zoom});});});});// Cursor styling
36['clusters-primary','unclustered-primary','clusters-secondary','unclustered-secondary'].forEach(layer=>{map.on('mouseenter',layer,()=>map.getCanvas().style.cursor='pointer');map.on('mouseleave',layer,()=>map.getCanvas().style.cursor='');});}/** -------------------------- Results --------------------------- **/async getMapCardsWithFilters(page=1){var _tempStore$results$ca,_tempStore$results$ca2;const typeInstance={activities:this.offersMapDataActivitiesInstance,locations:this.offersMapDataLocationsInstance,organizations:this.offersMapDataOrganizationsInstance}[this.activeType];

36if(!typeInstance)return false;// Determine if we should switch to secondary results
37const lastPage=((_tempStore$results$ca=tempStore.results.cards)===null||_tempStore$results$ca===void 0?void 0:_tempStore$results$ca.meta.pagination.current_page)>=((_tempStore$results$ca2=tempStore.results.cards)===null||_tempStore$results$ca2===void 0?void 0:_tempStore$results$ca2.meta.pagination.total_pages);const useSecondary=this.showingSecondary||page!==1&&lastPage&&this.showSecondary;if(useSecondary){this.showingSecondary=true;page=this.pageSecondary;}else {this.pageSecondary=1;}// Base request params
38const params={itemsPerPage:this.itemsPerPage,page,primary:useSecondary?'0':'1',filters:base64.encodeObject(this.filterValues),includeExclusive:this.includeExclusive};// Add search string only when needed
39if(this.filterValues.search.length>0){params.search=this.filterValues.search;}// Add section title when secondary results start
40if(useSecondary&&this.pageSecondary===1){this.elements.results.desktop.list.innerHTML+='<h3 class="w-full col-span-full mt-8 mb-0">In andere gemeenten</h3>';}if(useSecondary)this.pageSecondary++;// --- Fetch primary results ---
41tempStore.results.cards=await typeInstance.getCardsData(params);// --- Fetch secondary results for loadMore logic ---
42params.primary='0';const secondaryResults=await typeInstance.getCardsData(params);const primaryEmpty=tempStore.results.cards.results.length===0;const primaryLastPage=tempStore.results.cards.meta.pagination.current_page===tempStore.results.cards.meta.pagination.total_pages;// Handle loadMore logic
43if(useSecondary){tempStore.results.loadMore=secondaryResults.meta.pagination.current_page<secondaryResults.meta.pagination.total_pages;}else if(primaryEmpty){// No primary results → switch to secondary results if possible
44if(secondaryResults.results.length>0){this.showSecondary=true;this.pageSecondary=1;tempStore.results.cards=secondaryResults;tempStore.results.loadMore=secondaryResults.meta.pagination.current_page<secondaryResults.meta.pagination.total_pages;}else {tempStore.results.loadMore=false;}}else if(primaryLastPage){// Primary finished → display secondary if exists
45tempStore.results.loadMore=secondaryResults.results.length>0;}else {// More primary pages available
46tempStore.results.loadMore=true;}// Map cards into final format
47return await typeInstance.getCards(tempStore.results.cards.results);}async getMapMarkersWithFilters(){// Select correct data instance based on active type
48const typeInstance={activities:this.offersMapDataActivitiesInstance,locations:this.offersMapDataLocationsInstance,organizations:this.offersMapDataOrganizationsInstance}[this.activeType];if(!typeInstance)return false;// Build request params
49const params={filters:base64.encodeObject(this.filterValues),includeExclusive:this.includeExclusive};// Add search parameter only when needed
50if(this.filterValues.search.length>0){params.search=this.filterValues.search;}// --- Fetch primary markers ---
51const primaryMarkers=await typeInstance.getMarkersData(params);// --- Fetch secondary markers ---
52params.primary='0';const secondaryMarkers=await typeInstance.getMarkersData(params);// Add marker type metadata for UI rendering
53const primary=Array.isArray(primaryMarkers)?primaryMarkers:[];const secondary=Array.isArray(secondaryMarkers)?secondaryMarkers:[];return [...primary.map(m=>_objectSpread2(_objectSpread2({},m),{},{type:'default'})),...secondary.map(m=>_objectSpread2(_objectSpread2({},m),{},{type:'secondary'}))];}}const offersMapObject=new offersMap();(function(){offersMapObject.init();})();
54
55export { offersMapObject };