From 9645aed5f2e2723d7c16f2a79677ffc18f73e1a3 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 9 Apr 2024 14:18:46 +0200
Subject: [PATCH] Refactor to vue3

---
 client/src/components/ui/WagtailImage.vue | 103 +++++++++++++---------
 1 file changed, 59 insertions(+), 44 deletions(-)

diff --git a/client/src/components/ui/WagtailImage.vue b/client/src/components/ui/WagtailImage.vue
index 7b83105b..f1918faa 100644
--- a/client/src/components/ui/WagtailImage.vue
+++ b/client/src/components/ui/WagtailImage.vue
@@ -1,56 +1,71 @@
 <template>
-  <img :src="modifiedUrl" alt="Responsive Image" ref="imgElement" />
+  <img
+    :src="modifiedUrl"
+    alt="Responsive Image"
+    ref="imgElement"
+  />
 </template>
 
-<script>
-export default {
-  props: ['src'],
-  data() {
-    return {
-      width: 0,
-      height: 0
-    };
-  },
-  computed: {
-    modifiedUrl() {
-      // Assuming the server accepts dimensions as query parameters
-      // Check if dimensions are known, otherwise return the original src\
+<script setup>
+import { ref, computed, onMounted } from 'vue';
 
-      console.log("x, y, hdpi, retina:", this.width, this.height, this.isHighDensity(),  this.isRetina())
-      //       if (this.height && this.width){
-      //   return this.src.replace('original', 'max-' + this.width + 'x' + this.height)
-      //
-      // }
-      const density = this.isHighDensity() ? 2 :1
+// Using props in Vue 3 setup script
+const props = defineProps({
+  src: String,
+});
 
-        if (this.width) {
-          return this.src.replace('original', 'width-' + this.width * density)
-        }
-        if (this.height)
-          return  this.src.replace('original', 'height-' + this.height * density)
+const imgElement = ref(null);
+const width = ref(0);
+const height = ref(0);
 
-        return this.src
+const modifiedUrl = computed(() => {
+  console.log('x, y, hdpi, retina:', width.value, height.value, isHighDensity(), isRetina());
+  const density = isHighDensity() ? 2 : 1;
 
-    }
-  },
-  mounted() {
-    this.updateDimensions();
+  if (width.value) {
+    return props.src.replace('original', 'width-' + width.value * density);
+  }
+  if (height.value) {
+    return props.src.replace('original', 'height-' + height.value * density);
+  }
 
-  },
+  return props.src;
+});
 
-  methods: {
-    updateDimensions() {
-      const { clientWidth, clientHeight } = this.$refs.imgElement.parentElement;
-
-      this.width = clientWidth;
-      this.height = clientHeight;
-    },
-    isHighDensity(){
-    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
-},
-    isRetina(){
-    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
-}
+const updateDimensions = () => {
+  if (imgElement.value && imgElement.value.parentElement) {
+    const { clientWidth, clientHeight } = imgElement.value.parentElement;
+    width.value = clientWidth;
+    height.value = clientHeight;
   }
 };
+
+const isHighDensity = () => {
+  return (
+    (window.matchMedia &&
+      (window.matchMedia(
+        'only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)'
+      ).matches ||
+        window.matchMedia(
+          'only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)'
+        ).matches)) ||
+    (window.devicePixelRatio && window.devicePixelRatio > 1.3)
+  );
+};
+
+const isRetina = () => {
+  return (
+    ((window.matchMedia &&
+      (window.matchMedia(
+        'only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)'
+      ).matches ||
+        window.matchMedia(
+          'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)'
+        ).matches)) ||
+      (window.devicePixelRatio && window.devicePixelRatio >= 2)) &&
+    /(iPad|iPhone)/g.test(navigator.userAgent)
+  );
+};
+
+onMounted(updateDimensions);
 </script>