From b54644223b5d2f46215c2c859f253820e4496bc3 Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Mon, 13 Mar 2023 11:13:28 +0100
Subject: [PATCH] mask map

---
 assets/js/theme/blocks/partners.js      | 32 +++++++++++++++++--------
 assets/sass/_theme/blocks/partners.sass |  2 ++
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/assets/js/theme/blocks/partners.js b/assets/js/theme/blocks/partners.js
index 3b357884..f57bbfb3 100644
--- a/assets/js/theme/blocks/partners.js
+++ b/assets/js/theme/blocks/partners.js
@@ -3,14 +3,17 @@ const partnersMaps = document.querySelectorAll('.block-partners--map');
 class BlockPartners {
     constructor (dom) {
         this.dom = dom;
+        
         this.init();
     }
     init() {
+        this.markers = [];
+        this.setMap = false;
         this.content = this.dom.querySelector('#map');
         this.partnersList = this.content.querySelectorAll('.organization');
 
         this.classPartner = 'organization';
-        this.markers = [];
+        this.classHidden = 'not-active';
         
         let map = L.map('map', {
             scrollWheelZoom: false
@@ -19,25 +22,34 @@ class BlockPartners {
             iconUrl: '/assets/images/map-marker.svg',
             iconSize: [17, 26],
         });
-        this.listen(map);
-        this.getMapBounds(map);
-    }
-
-    listen (map) {
-        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            maxZoom: 19,
-            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-        }).addTo(map);
+        this.setPartners(map);
 
+        if (this.setMap) {
+            this.listen(map);
+            this.getMapBounds(map);
+        } else { 
+            this.content.classList.add(this.classHidden);
+            this.content.setAttribute("aria-hidden", "true")
+            return;
+        }
+    }
+    setPartners (map) {
         this.partnersList.forEach((partner) => {
             let latitude = parseFloat(partner.getAttribute('data-latitude')),
                 longitude = parseFloat(partner.getAttribute('data-longitude')),
                 mapLocation = [latitude, longitude];
             if (!!latitude && !!longitude) {
                 this.newMarker(map, mapLocation, partner);
+                this.setMap = true;
             }
         });
     }
+    listen (map) {
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        }).addTo(map);
+    }
 
     newMarker(map, mapLocation, partner) {
         let marker = new L.marker(mapLocation, {
diff --git a/assets/sass/_theme/blocks/partners.sass b/assets/sass/_theme/blocks/partners.sass
index 6caa8c88..fd1538b7 100644
--- a/assets/sass/_theme/blocks/partners.sass
+++ b/assets/sass/_theme/blocks/partners.sass
@@ -18,6 +18,8 @@
     .map
         height: 600px
         z-index: 1
+        &.not-active
+            display: none
         > .organization,
         .leaflet-popup-tip-container
             display: none
-- 
GitLab