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>
<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)
const imgElement = ref(null);
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)
return this.src.replace('original', 'height-' + this.height * density)
return this.src
if (height.value) {
return props.src.replace('original', 'height-' + height.value * density);
}
},
mounted() {
this.updateDimensions();
},
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>