Responsive map component

david/2024/03/26/index.html

@@ -189,10 +189,30 @@
       this.shadowRoot.appendChild(linkElement)
     }
 
+    #computeDimensions(mapContainer) {
+      // There has to be a better way but I feel lazy tonight.
+      let height = this.dataset.height
+      let width = this.dataset.width
+      // Size is in px so we strip these chars and convert to int.
+      const heightValue = Number(height.slice(0, -2))
+      const widthValue = Number(width.slice(0, -2))
+      const mediaQueryMiddle = window.matchMedia(`(max-width: ${widthValue}px)`)
+      const mediaQuerySmall = window.matchMedia(`(max-width: ${widthValue / 2}px)`)
+      if (mediaQueryMiddle.matches) {
+        height = `${heightValue / 2}px`
+        width = `${widthValue / 2}px`
+      }
+      if (mediaQuerySmall.matches) {
+        height = `${heightValue / 3}px`
+        width = `${widthValue / 3}px`
+      }
+      mapContainer.style.height = height
+      mapContainer.style.width = width
+    }
+
     #createMapContainer() {
       const mapContainer = document.createElement('div')
-      mapContainer.style.height = this.dataset.height
-      mapContainer.style.width = this.dataset.width
+      this.#computeDimensions(mapContainer)
       this.shadowRoot.appendChild(mapContainer)
       return mapContainer
     }

david/2024/_sources/2024-03-26 - GPX Viewer.html

@@ -30,10 +30,30 @@
       this.shadowRoot.appendChild(linkElement)
     }
 
+    #computeDimensions(mapContainer) {
+      // There has to be a better way but I feel lazy tonight.
+      let height = this.dataset.height
+      let width = this.dataset.width
+      // Size is in px so we strip these chars and convert to int.
+      const heightValue = Number(height.slice(0, -2))
+      const widthValue = Number(width.slice(0, -2))
+      const mediaQueryMiddle = window.matchMedia(`(max-width: ${widthValue}px)`)
+      const mediaQuerySmall = window.matchMedia(`(max-width: ${widthValue / 2}px)`)
+      if (mediaQueryMiddle.matches) {
+        height = `${heightValue / 2}px`
+        width = `${widthValue / 2}px`
+      }
+      if (mediaQuerySmall.matches) {
+        height = `${heightValue / 3}px`
+        width = `${widthValue / 3}px`
+      }
+      mapContainer.style.height = height
+      mapContainer.style.width = width
+    }
+
     #createMapContainer() {
       const mapContainer = document.createElement('div')
-      mapContainer.style.height = this.dataset.height
-      mapContainer.style.width = this.dataset.width
+      this.#computeDimensions(mapContainer)
       this.shadowRoot.appendChild(mapContainer)
       return mapContainer
     }

david/2024/apprentissage/index.html

@@ -172,10 +172,30 @@
       this.shadowRoot.appendChild(linkElement)
     }
 
+    #computeDimensions(mapContainer) {
+      // There has to be a better way but I feel lazy tonight.
+      let height = this.dataset.height
+      let width = this.dataset.width
+      // Size is in px so we strip these chars and convert to int.
+      const heightValue = Number(height.slice(0, -2))
+      const widthValue = Number(width.slice(0, -2))
+      const mediaQueryMiddle = window.matchMedia(`(max-width: ${widthValue}px)`)
+      const mediaQuerySmall = window.matchMedia(`(max-width: ${widthValue / 2}px)`)
+      if (mediaQueryMiddle.matches) {
+        height = `${heightValue / 2}px`
+        width = `${widthValue / 2}px`
+      }
+      if (mediaQuerySmall.matches) {
+        height = `${heightValue / 3}px`
+        width = `${widthValue / 3}px`
+      }
+      mapContainer.style.height = height
+      mapContainer.style.width = width
+    }
+
     #createMapContainer() {
       const mapContainer = document.createElement('div')
-      mapContainer.style.height = this.dataset.height
-      mapContainer.style.width = this.dataset.width
+      this.#computeDimensions(mapContainer)
       this.shadowRoot.appendChild(mapContainer)
       return mapContainer
     }

david/2024/technique/index.html

@@ -172,10 +172,30 @@
       this.shadowRoot.appendChild(linkElement)
     }
 
+    #computeDimensions(mapContainer) {
+      // There has to be a better way but I feel lazy tonight.
+      let height = this.dataset.height
+      let width = this.dataset.width
+      // Size is in px so we strip these chars and convert to int.
+      const heightValue = Number(height.slice(0, -2))
+      const widthValue = Number(width.slice(0, -2))
+      const mediaQueryMiddle = window.matchMedia(`(max-width: ${widthValue}px)`)
+      const mediaQuerySmall = window.matchMedia(`(max-width: ${widthValue / 2}px)`)
+      if (mediaQueryMiddle.matches) {
+        height = `${heightValue / 2}px`
+        width = `${widthValue / 2}px`
+      }
+      if (mediaQuerySmall.matches) {
+        height = `${heightValue / 3}px`
+        width = `${widthValue / 3}px`
+      }
+      mapContainer.style.height = height
+      mapContainer.style.width = width
+    }
+
     #createMapContainer() {
       const mapContainer = document.createElement('div')
-      mapContainer.style.height = this.dataset.height
-      mapContainer.style.width = this.dataset.width
+      this.#computeDimensions(mapContainer)
       this.shadowRoot.appendChild(mapContainer)
       return mapContainer
     }

david/2024/web/index.html

@@ -172,10 +172,30 @@
       this.shadowRoot.appendChild(linkElement)
     }
 
+    #computeDimensions(mapContainer) {
+      // There has to be a better way but I feel lazy tonight.
+      let height = this.dataset.height
+      let width = this.dataset.width
+      // Size is in px so we strip these chars and convert to int.
+      const heightValue = Number(height.slice(0, -2))
+      const widthValue = Number(width.slice(0, -2))
+      const mediaQueryMiddle = window.matchMedia(`(max-width: ${widthValue}px)`)
+      const mediaQuerySmall = window.matchMedia(`(max-width: ${widthValue / 2}px)`)
+      if (mediaQueryMiddle.matches) {
+        height = `${heightValue / 2}px`
+        width = `${widthValue / 2}px`
+      }
+      if (mediaQuerySmall.matches) {
+        height = `${heightValue / 3}px`
+        width = `${widthValue / 3}px`
+      }
+      mapContainer.style.height = height
+      mapContainer.style.width = width
+    }
+
     #createMapContainer() {
       const mapContainer = document.createElement('div')
-      mapContainer.style.height = this.dataset.height
-      mapContainer.style.width = this.dataset.width
+      this.#computeDimensions(mapContainer)
       this.shadowRoot.appendChild(mapContainer)
       return mapContainer
     }

david/log/index.xml

@@ -6,7 +6,7 @@
     <link href="https://larlet.fr/david/" rel="alternate" type="text/html" />
     <link href="https://larlet.fr/david/log/" rel="self" />
     <id>https://larlet.fr/david/</id>
-    <updated>2024-03-26T12:00:00+01:00</updated>
+    <updated>2024-03-27T12:00:00+01:00</updated>
     <author>
         <name>David Larlet</name>
         <uri>https://larlet.fr/david/</uri>
@@ -53,10 +53,30 @@
       this.shadowRoot.appendChild(linkElement)
     }
 
+    #computeDimensions(mapContainer) {
+      // There has to be a better way but I feel lazy tonight.
+      let height = this.dataset.height
+      let width = this.dataset.width
+      // Size is in px so we strip these chars and convert to int.
+      const heightValue = Number(height.slice(0, -2))
+      const widthValue = Number(width.slice(0, -2))
+      const mediaQueryMiddle = window.matchMedia(`(max-width: ${widthValue}px)`)
+      const mediaQuerySmall = window.matchMedia(`(max-width: ${widthValue / 2}px)`)
+      if (mediaQueryMiddle.matches) {
+        height = `${heightValue / 2}px`
+        width = `${widthValue / 2}px`
+      }
+      if (mediaQuerySmall.matches) {
+        height = `${heightValue / 3}px`
+        width = `${widthValue / 3}px`
+      }
+      mapContainer.style.height = height
+      mapContainer.style.width = width
+    }
+
     #createMapContainer() {
       const mapContainer = document.createElement(&#x27;div&#x27;)
-      mapContainer.style.height = this.dataset.height
-      mapContainer.style.width = this.dataset.width
+      this.#computeDimensions(mapContainer)
       this.shadowRoot.appendChild(mapContainer)
       return mapContainer
     }