fonds, ajustements carte index projets, ajustements grille index projets, hover carte leaflet projet, ajustements collectifs des projets

web/themes/erabletheme/js/erabletheme.js

@@ -182,8 +182,8 @@
         }
 
         let imgs = document.querySelectorAll('.fullpage img');
-        let meetup = document.querySelector('.meetup_list');
-        if (!meetup) {
+        let isActus = document.querySelector('.retour_actus');
+        if (isActus) {
           for (let img of imgs) {
             if (img.height > img.width) {
               img.parentElement.style.padding = '0 12vw';
@@ -284,9 +284,6 @@
           const contentPage = document.querySelector('.projet_full');
           const contentPageTitle = contentPage.querySelector('h2').innerText;
 
-          console.log(itemTitle, contentPageTitle);
-
-
           if (itemTitle.toLowerCase() === contentPageTitle.toLowerCase()) {
             item.querySelector('a').classList.add('is-active');
           }
@@ -299,27 +296,115 @@
 
       if (document.querySelector('.projets_list')) {
         const projets = document.querySelectorAll('.projets_list > .views-row');
-        const shapesAmount = 4;
+        const shapesAmount = 6;
         for (let i = 0; i < projets.length; i++) {
           const randomShape = Math.floor(Math.random() * shapesAmount) + 1;
-          const img = projets[i].querySelector('img');
-          img.style.maskImage = `url('/themes/erabletheme/assets/shapes/shape_${randomShape}.svg')`;
+          if (projets[i].querySelector('img')) {
+            const img = projets[i].querySelector('a');
+            img.style.maskImage = `url('/themes/erabletheme/assets/shapes/shape_${randomShape}.svg')`;
+          }
         }
       }
 
+      //
+      // set bg middle placement
+      //
+
+      setBgMiddlePlacement();
+      setBgBottomPlacement();
+
+      window.addEventListener('resize', () => {
+        setBgMiddlePlacement();
+        setBgBottomPlacement();
+      });
+
+      function setBgMiddlePlacement() {
+        const bgMiddleImgs = document.querySelectorAll('#bg-middle img');
+        const carousel = document.querySelector('.carousel_container');
+        const pageHeight = document.documentElement.scrollHeight;
+        for (let img of bgMiddleImgs) {
+          if (carousel) {
+            img.style.paddingTop = `${carousel.offsetHeight}px`;
+          } else {
+            img.style.paddingTop = `${pageHeight / 2}px`;
+          }
+        }
+        if (pageHeight < 2000) {
+          const bgMiddle = document.querySelector('#bg-middle');
+          bgMiddle.style.display = 'none';
+        }
+      }
+
+      function setBgBottomPlacement() {
+        const bgBottomImgs = document.querySelectorAll('#bg-bottom img');
+        const pageHeight = document.documentElement.scrollHeight;
+        console.log(pageHeight);
+
+        for (let img of bgBottomImgs) {
+          img.style.paddingTop = `${pageHeight}px`;
+        }
+      }
+
+
     }
   }
 
-  //
-  // on projects pages, replace leaflet icons with erable leafs
-  //
   Drupal.behaviors.customLeafletInteraction = {
     attach: function (context, settings) {
       $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
-          const leafletIcons = document.querySelectorAll('.leaflet-marker-pane img');
-          for (let icon of leafletIcons) {
-            icon.setAttribute('src', '/themes/erabletheme/assets/leaf.svg');
-          }
+        //
+        // on projects pages, replace leaflet icons with erable leafs
+        //
+        const leafletIcons = document.querySelectorAll('.leaflet-marker-pane img');
+        for (let icon of leafletIcons) {
+          icon.setAttribute('src', '/themes/erabletheme/assets/leaf.svg');
+        }
+
+        //
+        // set hover on leaflet marker and zones
+        //
+
+        const leafletPlaces = document.querySelectorAll('.leaflet-marker-pane img, .leaflet-overlay-pane path');
+        const libelles = document.querySelectorAll('.libelles-carte > div > div > div');
+        console.log(leafletPlaces);
+        console.log(libelles);
+
+
+        for (let i = 0; i < leafletPlaces.length; i++) {
+          const carte = document.querySelector('.carte');
+
+          leafletPlaces[i].addEventListener('mouseenter', () => {
+            console.log("entre")
+            let div = document.createElement('div');
+            div.setAttribute('id', 'leaflet-popup');
+            div.style.zIndex = '100';
+            const x = leafletPlaces[i].getBoundingClientRect().left + leafletPlaces[i].getBoundingClientRect().width / 2;
+            const y = leafletPlaces[i].getBoundingClientRect().top;
+            setTimeout(() => {
+              div.style.opacity = 1;
+              const divHeight = div.getBoundingClientRect().height;
+              const divWidth = div.getBoundingClientRect().width;
+              setTimeout(() => {
+                div.style.left = `${x - divWidth / 2}px`;
+                div.style.top = `${y - divHeight}px`;
+              }, 10);
+            }, 10);
+
+            div.innerText = libelles[i].innerText;
+
+            carte.appendChild(div);
+          });
+          leafletPlaces[i].addEventListener('mouseleave', () => {
+            console.log("sort")
+            let divs = document.querySelectorAll('#leaflet-popup');
+            for (let div of divs) {
+              div.style.opacity = 0;
+              setTimeout(() => {
+                div.remove();
+              }, 300);
+            }
+          });
+        }
 
       });
     }