From faafd7585769e32b47a031594ceba1e948d47c6e Mon Sep 17 00:00:00 2001 From: chrisschotman Date: Wed, 8 Jul 2026 14:44:44 +0200 Subject: [PATCH 1/5] =?UTF-8?q?Patch:=20release=201.4.4=20=E2=80=94=20re-v?= =?UTF-8?q?endor=20map-components=200.5.8=20with=20dm-filter=20close=20but?= =?UTF-8?q?ton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 8 +++++ assets/vendor/draad-maps.iife.js | 52 +++++++++++++++++++++++++------- draad-maps-plugin.php | 6 ++-- package.json | 4 +-- 4 files changed, 54 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a287b449..e0b80c1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.4.4] - 2026-07-08 + +### Added +- Filter panel close button: the `dm-filter` panel header now shows a close (×) button in the top-right that closes the panel (all variants). + +### Changed +- Re-vendored `assets/vendor/draad-maps.iife.js` from `@draadnl/map-components` 0.5.8. + ## [1.4.3] - 2026-07-06 ### Fixed diff --git a/assets/vendor/draad-maps.iife.js b/assets/vendor/draad-maps.iife.js index f94ebcc5..5af4b67e 100644 --- a/assets/vendor/draad-maps.iife.js +++ b/assets/vendor/draad-maps.iife.js @@ -862,6 +862,8 @@ svg.leaflet-image-layer.leaflet-interactive path {\r .map__canvas { inline-size: 100%; block-size: 100%; + /* ponytail: own stacking context so Leaflet's pane/control z-indexes stay inside the canvas */ + isolation: isolate; } .map__list { @@ -1523,7 +1525,7 @@ svg.leaflet-image-layer.leaflet-interactive path {\r ${this.#T(v.label)} - `};let m="";c?(m+='',m+=l.map(v=>u(v,this.#r.indexOf(v))).join(""),m+='',m+=h.map(v=>u(v,this.#r.indexOf(v))).join("")):m+=this.#r.map((v,g)=>u(v,g)).join(""),n.innerHTML=m+a,this.#o>=0?s.setAttribute("aria-activedescendant",`search-option-${this.#o}`):s.removeAttribute("aria-activedescendant")}#W(e){switch(e.type){case"address":return e.subtype||"Adres";case"feature":return e.subtype||"Object";case"marker":return"Marker";default:return""}}#K(e){switch(e.type){case"address":return'';case"feature":return'';case"marker":return'';default:return""}}#V(){const e=this.#t.querySelector(".search__listbox"),n=this.#t.querySelector(".search__input"),s=this.#t.querySelector(".search__form");e.hidden=!1,n.setAttribute("aria-expanded","true"),s.dataset.open="true"}#k(){const e=this.#t.querySelector(".search__listbox"),n=this.#t.querySelector(".search__input"),s=this.#t.querySelector(".search__form");e.hidden=!0,n.setAttribute("aria-expanded","false"),n.removeAttribute("aria-activedescendant"),this.#o=-1,delete s.dataset.open}#F(e){const n=this.#r.length-1;if(n<0)return;this.#o+=e,this.#o<0?this.#o=n:this.#o>n&&(this.#o=0),this.#N();const s=this.#t.querySelector(`#search-option-${this.#o}`);s&&s.scrollIntoView({block:"nearest"})}#D(e){const n=this.#r[e];if(!n)return;const s=this.#t.querySelector(".search__input"),a=this.#t.querySelector(".search__clear");s.value=n.label,a&&(a.hidden=!n.label),this.#k(),this.#X(n),this.dispatchEvent(new CustomEvent("dm-search:select",{bubbles:!0,composed:!0,detail:{type:n.type,label:n.label,coordinates:n.coordinates,bounds:n.bounds,feature:n.feature,marker:n.marker,raw:n.raw}}))}#X(e){const n=this.#n.map;if(!n)return;this.#R(),e.geometry&&this.#O(e);let s;if(this.#l)s=this.#l.getBounds();else if(e.bounds)s=e.bounds;else if(e.coordinates){const a=O.latLng(e.coordinates[0],e.coordinates[1]),l=this.#I(e);s=a.toBounds(l)}s&&(n.fitBounds(s,{padding:[40,40]}),this.dispatchEvent(new CustomEvent("dm-search:zoom",{bubbles:!0,composed:!0,detail:{bounds:s,result:e}})))}#O(e){const n=this.#n.map;if(!n||!e.geometry)return;const s=e.geometry,a=s.type==="LineString"||s.type==="MultiLineString",l=getComputedStyle(this),h=l.getPropertyValue("--draad-map-components-search-highlight-color").trim()||l.getPropertyValue("--draad-map-components-color-primary").trim()||"#268641",c={color:h,weight:a?4:2,opacity:.8,fillColor:h,fillOpacity:a?0:.15};s.type==="Polygon"||s.type==="MultiPolygon"?this.#l=O.polygon(s.coordinates,c):s.type==="LineString"?this.#l=O.polyline(s.coordinates[0],c):s.type==="MultiLineString"&&(this.#l=O.polyline(s.coordinates,c)),this.#l&&this.#l.addTo(n)}#R(){this.#l&&this.#n?.map&&(this.#n.map.removeLayer(this.#l),this.#l=null)}#J(e){const n=this.#t.querySelector(".search__button");e?(n.classList.add("search__button--loading"),n.setAttribute("aria-busy","true")):(n.classList.remove("search__button--loading"),n.removeAttribute("aria-busy"))}#H(e){const n=this.#t.querySelector('[role="status"]');n&&(n.textContent="",setTimeout(()=>{n.textContent=e},100))}#T(e){const n=document.createElement("div");return n.textContent=e,n.innerHTML}#Z(e){return String(e).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}disconnectedCallback(){this.#i&&(this.#i.abort(),this.#i=null),this.#a&&(clearTimeout(this.#a),this.#a=null),this.#s&&(clearTimeout(this.#s),this.#s=null),this.#R(),this.#n=null,this.#r=[]}}customElements.define("dm-search",tu);const eu=`/* dm-infowindow - Card panel styling */ + `};let m="";c?(m+='',m+=l.map(v=>u(v,this.#r.indexOf(v))).join(""),m+='',m+=h.map(v=>u(v,this.#r.indexOf(v))).join("")):m+=this.#r.map((v,g)=>u(v,g)).join(""),n.innerHTML=m+a,this.#o>=0?s.setAttribute("aria-activedescendant",`search-option-${this.#o}`):s.removeAttribute("aria-activedescendant")}#W(e){switch(e.type){case"address":return e.subtype||"Adres";case"feature":return e.subtype||"Object";case"marker":return"Marker";default:return""}}#K(e){switch(e.type){case"address":return'';case"feature":return'';case"marker":return'';default:return""}}#V(){const e=this.#t.querySelector(".search__listbox"),n=this.#t.querySelector(".search__input"),s=this.#t.querySelector(".search__form");e.hidden=!1,n.setAttribute("aria-expanded","true"),s.dataset.open="true"}#k(){const e=this.#t.querySelector(".search__listbox"),n=this.#t.querySelector(".search__input"),s=this.#t.querySelector(".search__form");e.hidden=!0,n.setAttribute("aria-expanded","false"),n.removeAttribute("aria-activedescendant"),this.#o=-1,delete s.dataset.open}#F(e){const n=this.#r.length-1;if(n<0)return;this.#o+=e,this.#o<0?this.#o=n:this.#o>n&&(this.#o=0),this.#N();const s=this.#t.querySelector(`#search-option-${this.#o}`);s&&s.scrollIntoView({block:"nearest"})}#D(e){const n=this.#r[e];if(!n)return;const s=this.#t.querySelector(".search__input"),a=this.#t.querySelector(".search__clear");s.value=n.label,a&&(a.hidden=!n.label),this.#k(),this.#X(n),this.dispatchEvent(new CustomEvent("dm-search:select",{bubbles:!0,composed:!0,detail:{type:n.type,label:n.label,coordinates:n.coordinates,bounds:n.bounds,feature:n.feature,marker:n.marker,raw:n.raw}}))}#X(e){const n=this.#n.map;if(!n)return;this.#R(),e.geometry&&this.#G(e);let s;if(this.#l)s=this.#l.getBounds();else if(e.bounds)s=e.bounds;else if(e.coordinates){const a=O.latLng(e.coordinates[0],e.coordinates[1]),l=this.#I(e);s=a.toBounds(l)}s&&(n.fitBounds(s,{padding:[40,40]}),this.dispatchEvent(new CustomEvent("dm-search:zoom",{bubbles:!0,composed:!0,detail:{bounds:s,result:e}})))}#G(e){const n=this.#n.map;if(!n||!e.geometry)return;const s=e.geometry,a=s.type==="LineString"||s.type==="MultiLineString",l=getComputedStyle(this),h=l.getPropertyValue("--draad-map-components-search-highlight-color").trim()||l.getPropertyValue("--draad-map-components-color-primary").trim()||"#268641",c={color:h,weight:a?4:2,opacity:.8,fillColor:h,fillOpacity:a?0:.15};s.type==="Polygon"||s.type==="MultiPolygon"?this.#l=O.polygon(s.coordinates,c):s.type==="LineString"?this.#l=O.polyline(s.coordinates[0],c):s.type==="MultiLineString"&&(this.#l=O.polyline(s.coordinates,c)),this.#l&&this.#l.addTo(n)}#R(){this.#l&&this.#n?.map&&(this.#n.map.removeLayer(this.#l),this.#l=null)}#J(e){const n=this.#t.querySelector(".search__button");e?(n.classList.add("search__button--loading"),n.setAttribute("aria-busy","true")):(n.classList.remove("search__button--loading"),n.removeAttribute("aria-busy"))}#H(e){const n=this.#t.querySelector('[role="status"]');n&&(n.textContent="",setTimeout(()=>{n.textContent=e},100))}#T(e){const n=document.createElement("div");return n.textContent=e,n.innerHTML}#Z(e){return String(e).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}disconnectedCallback(){this.#i&&(this.#i.abort(),this.#i=null),this.#a&&(clearTimeout(this.#a),this.#a=null),this.#s&&(clearTimeout(this.#s),this.#s=null),this.#R(),this.#n=null,this.#r=[]}}customElements.define("dm-search",tu);const eu=`/* dm-infowindow - Card panel styling */ :host { display: flex; flex-direction: column; @@ -2625,6 +2627,31 @@ svg.leaflet-image-layer.leaflet-interactive path {\r color: var(--draad-map-components-filter-header-color-title, currentColor); } +.filter__close { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + padding: 4px; + margin: -4px -4px 0 8px; + border: none; + background: none; + color: inherit; + cursor: pointer; + border-radius: 4px; +} + +.filter__close svg { + inline-size: var(--draad-map-components-icon-size-lg, 20px); + block-size: var(--draad-map-components-icon-size-lg, 20px); + fill: currentColor; +} + +.filter__close:focus-visible { + outline: 2px dashed Highlight; + outline-offset: 2px; +} + .filter__subtitle { margin: 0; font-size: 0.875rem; @@ -3320,9 +3347,12 @@ svg.leaflet-image-layer.leaflet-interactive path {\r `}#N(){const e=this.#g?" filter--auto-submit":"",n=this.getAttribute("label")||"Filters";return`
-

${this.#G(n)}

+

${this.#O(n)}

+
@@ -3367,13 +3397,13 @@ svg.leaflet-image-layer.leaflet-interactive path {\r
`}#k(){if(!this.#v){this.#v=!0;try{const e=this.#t.querySelector(".filter__content");if(!e)return;if(this.#l.size===0){e.innerHTML='

Geen filterbare gegevensbronnen gevonden.

';return}const n=[];this.#l.forEach((s,a)=>{let l=this.#S(a,s);if(l||(s.sources.forEach(({element:k,property:I})=>{k.data&&this.#m(k,I)}),l=this.#S(a,s)),!l||l.values.length===0){n.push(`
-

${this.#G(s.label)}

+

${this.#O(s.label)}

Loading data...

`);return}const{values:h,valueType:c}=l,u=this.#C(a,l),m=s.collapsed,v=m?"false":"true",g=m?" hidden":"";if(u==="single"||c.single){n.push(`
${this.#F(s.label,a,v,g,` -

Value: ${this.#G(String(h[0]))}

+

Value: ${this.#O(String(h[0]))}

`)}
`);return}if(u==="range"){const k=this.#i[a]?.min??c.min,I=this.#i[a]?.max??c.max,B=` @@ -3408,7 +3438,7 @@ svg.leaflet-image-layer.leaflet-interactive path {\r
${this.#F(s.label,a,v,g,B)}
- `);return}if(u==="checkbox"){const k=s.sources.reduce((F,{element:J})=>F||this.#lt(J),null),I=this.#z(a,s),B=h.map(F=>{const J=this.#rt(a,F)?"checked":"",ot=this.#x(String(F)),et=this.#G(String(F)),Mt=I.get(String(F))||0,Q=Mt>0?` (${Mt})`:"",ht=k?.[F]?this.#ht(k[F]):this.#$();return` + `);return}if(u==="checkbox"){const k=s.sources.reduce((F,{element:J})=>F||this.#lt(J),null),I=this.#z(a,s),B=h.map(F=>{const J=this.#rt(a,F)?"checked":"",ot=this.#x(String(F)),et=this.#O(String(F)),Mt=I.get(String(F))||0,Q=Mt>0?` (${Mt})`:"",ht=k?.[F]?this.#ht(k[F]):this.#$();return`