ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Refactor to vue3

This commit is contained in:
Lorenz Padberg 2024-04-09 14:18:46 +02:00
parent 080d9f92d0
commit 9645aed5f2
1 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
client/src/components/ui/WagtailImage.vue
View File

@ -1,56 +1,71 @@
<template> <template>
<img :src="modifiedUrl" alt="Responsive Image" ref="imgElement" /> <img
:src="modifiedUrl"
alt="Responsive Image"
ref="imgElement"
/>
</template> </template>
<script> <script setup>
export default { import { ref, computed, onMounted } from 'vue';
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\
console.log("x, y, hdpi, retina:", this.width, this.height, this.isHighDensity(), this.isRetina()) // Using props in Vue 3 setup script
// if (this.height && this.width){ const props = defineProps({
// return this.src.replace('original', 'max-' + this.width + 'x' + this.height) src: String,
// });
// }
const density = this.isHighDensity() ? 2 :1
if (this.width) { const imgElement = ref(null);
return this.src.replace('original', 'width-' + this.width * density) const width = ref(0);
const height = ref(0);
const modifiedUrl = computed(() => {
console.log('x, y, hdpi, retina:', width.value, height.value, isHighDensity(), isRetina());
const density = isHighDensity() ? 2 : 1;
if (width.value) {
return props.src.replace('original', 'width-' + width.value * density);
} }
if (this.height) if (height.value) {
return this.src.replace('original', 'height-' + this.height * density) return props.src.replace('original', 'height-' + height.value * density);
return this.src
} }
},
mounted() {
this.updateDimensions();
}, return props.src;
});
methods: { const updateDimensions = () => {
updateDimensions() { if (imgElement.value && imgElement.value.parentElement) {
const { clientWidth, clientHeight } = this.$refs.imgElement.parentElement; const { clientWidth, clientHeight } = imgElement.value.parentElement;
width.value = clientWidth;
this.width = clientWidth; height.value = clientHeight;
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 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> </script>