faubourg-carte.git

@@ -112,7 +112,7 @@ header div#application-header h1 {

 	  transition: none;

 }

-#loader {

+.loader {

   position: absolute;

   inset: 0;

   background: rgba(255, 255, 255);

@@ -121,7 +121,7 @@ header div#application-header h1 {

   z-index: 500;

   text-align: center;

 }

-#loader p {

+.loader p {

   position: relative;

   top: 40%;

   font-size: x-large;

@@ -155,6 +155,7 @@ header div#application-header h1 {

     height: 50vh;

 }

 */

+

 .rdf-data {

   height: calc(50% - 40px);

 }

@@ -166,7 +167,7 @@ header div#application-header h1 {

  * top: 10px permet de les aligner en bas

  * top: -10px permet de combler l'espace créé en haut

  * +/- 2 px de jeu

- * à surveiller

+ * certains écarts sont trop grands pour être pris en charge par cette solution

  */

 .glide__track {

   position: relative;

@@ -175,7 +176,9 @@ header div#application-header h1 {

 .glide__slides {

   top: 10px;

 }

-

+.custom-glide {

+  position: relative;

+}

 .glide__slide {

   max-width: 100%;

   position: relative;

@@ -117,28 +117,31 @@

       layer.bindPopup(popup);

       /** Event passé automatiquement au callback */

-      layer.on("click", (e) => {

+      layer.on("popupopen", async (e) => {

+        const popupId = `id-${e.popup._leaflet_id}-`;

+

+        let response;

         let URI = feature.properties.URI;

         if (dev()) {

           if (sessionStorage.getItem("onLineTripleStore") !== "true") {

             URI = feature.properties.URI.replace("http://data.qdmtl.ca", sessionStorage.getItem("devTripleStoreUrl"));

+            devConsole("Dev triple store");

           }

         }

         /**

          * Fetching the ressource

-         * Thenable since await is not allowed if not at top level

          */

-        fetch(URI, {

+        response = await fetch(URI, {

           method: "GET",

           headers: {

             "Accept": "application/ld+json",

           }

-        })

-        .then((response) => response.json())

-        .then((jsonLD) => {

+        });

+

+        const jsonLD = await response.json();

         if (dev) {

           console.log("Dev: Response from RDF store: ", jsonLD);

@@ -146,30 +149,16 @@

         const popUpInformation = `

-            <div id="loader">

+          <div id="${popupId}loader" class="loader">

             <div class="spinner"></div>

             <p>Chargement</p>

+            <p id="${popupId}counter"></p>

           </div>

-            <div class="glide">

+          <div id="${popupId}glide" class="custom-glide">

             <div class="glide__track" data-glide-el="track">

-                <ul class="glide__slides">

-                  <li class="glide__slide">

-                    <img

-                      src="https://archivesdemontreal.ica-atom.org/uploads/r/ville-de-montreal-section-des-archives/1/7/178126/VM94C196-0132.jpg"

-                      alt="foo"

-                      title="bar">

-                    <div class="overlay"></div>

-                  </li>

-                  <li class="glide__slide">

-                    <img src="https://archivesdemontreal.ica-atom.org/uploads/r/ville-de-montreal-section-des-archives/1/8/184246/VM94C196-0839.jpg">

-                    <div class="overlay"></div>

-                  </li>

-                  <li class="glide__slide">

-                    <img src="https://archivesdemontreal.ica-atom.org/uploads/r/ville-de-montreal-section-des-archives/1/7/177798/VM94C196-0038.jpg">

-                    <div class="overlay"></div>

-                  </li>

+              <ul class="glide__slides" id="${popupId}slides">

               </ul>

             </div>

@@ -197,15 +186,10 @@

         popup.setContent(popUpInformation);

-          if (dev()) {

-            console.log("Dev popup:", popup);

-          }  

-

         /**

          * Déplacement et centrage de la punaise

          */

-          let targetLatLng = L.latLng(

-            /** Coordonnées sont inversées avec GeoJSON */

+        let targetLatLng = L.latLng(// coordonnées sont inversées avec GeoJSON */

           feature.geometry.coordinates[1],

           feature.geometry.coordinates[0],

         );

@@ -215,9 +199,81 @@

         targetLatLng = pifm.unproject(targetPoint, targetZoom);

         pifm.setView(targetLatLng, targetZoom);

-          setTimeout(() => {

+        /** Récupérer l'URI de la ressource */

+        let ressourceUri;

+        jsonLD["@graph"].forEach((ressource)=> {

+

+          if (ressource["@id"].search("http://data.qdmtl.ca/Building/") > -1) {

+            ressourceUri = ressource["@id"];

+          }

+        })

-            const glide = new Glide(".glide", {

+        /** SPARQL query for images */

+        let imagesQuery = "PREFIX rico:<https://www.ica.org/standards/RiC/ontology#>PREFIX schema:<https://schema.org/>SELECT ?f WHERE{[]a rico:Record;rico:hasInstantiation ?i;rico:hasOrHadMainSubject<";

+        imagesQuery += ressourceUri;

+        imagesQuery += ">.?i schema:image ?f.}";

+        imagesQuery  = "query=" + encodeURIComponent(imagesQuery);

+

+        /** fetch images URL */

+        response = await fetch(tripleStoreEndpointUrl, {

+          method: "POST",

+          headers: {

+            "Accept": "application/sparql-results+json",

+            "Content-Type": "application/x-www-form-urlencoded"

+          },

+          body: imagesQuery

+        });

+

+        const sparqlResponse = await response.json();

+

+        /** URLs list */

+        let imageUrls = sparqlResponse.results.bindings.map(url => {

+          return url.f.value;

+        });

+

+        /** loads an image, returns a promise */

+        const loadImage = src => {

+

+          return new Promise((resolve, reject) => {

+

+            const img = new Image();

+            img.onload = () => resolve(img);

+            img.onerror = reject;

+            img.src = src;

+          });

+        }

+

+        /** loading all ressource images, async */

+        const imagesElements = await Promise.all(imageUrls.map(loadImage));

+

+        /** printing information */

+        console.log("Nombre d'images téléchargées : ", imagesElements.length);

+        const imagesList = imagesElements.map((element) => {

+          return element.currentSrc;

+        })

+        console.log("URLs of images", imagesList);

+

+        /** update the DOM with images for the Leaflet popup */

+        imagesElements.forEach((image, index) => {

+

+          let overlay = document.createElement("div");

+          overlay.className = "overlay";

+

+          let slide = document.createElement("li");

+          slide.className = "glide__slide";

+          slide.appendChild(image);

+          slide.append(overlay);

+          

+          let slides = document.querySelector(`#${popupId}slides`);

+          slides.appendChild(slide);

+

+          /** the loop blocks the main thread so this does nothing */

+          let counter = document.querySelector(`p#${popupId}counter`);

+          counter.innerText = `${++index}/${imagesElements.length}`;

+        });

+

+        /** caroussel */

+        const glide = new Glide(`#${popupId}glide`, {

           type: 'carousel',

           perView: 2,

           focusAt: "center",

@@ -228,15 +284,11 @@

         glide.mount();

-            let loader = document.querySelector("#loader");

-

+        /** hide the spinner */

+        let loader = document.querySelector(`#${popupId}loader`);

+        setTimeout(() => { // wait to make sure it's clean

           loader.style.display = "none";

-

-          }, 1000);

-        },

-        (reason) => {

-            /* rejection handler */

-        }).catch(err => console.log(err));

+        }, 300);        

       });

     }

   }),