Migrate to Vue 3 and Vite
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -2,37 +2,33 @@
|
||||
<canvas ref="canvas" width="32" height="32" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { decode } from "blurhash";
|
||||
import { Component, Prop, Ref, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class BlurhashImg extends Vue {
|
||||
@Prop({ type: String, required: true }) hash!: string;
|
||||
@Prop({ type: Number, default: 1 }) aspectRatio!: string;
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
@Ref("canvas") readonly canvas!: any;
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
hash: string;
|
||||
aspectRatio?: number;
|
||||
}>(),
|
||||
{ aspectRatio: 1 }
|
||||
);
|
||||
|
||||
mounted(): void {
|
||||
try {
|
||||
const pixels = decode(this.hash, 32, 32);
|
||||
const canvas = ref<HTMLCanvasElement | undefined>(undefined);
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
if (canvas.value) {
|
||||
const pixels = decode(props.hash, 32, 32);
|
||||
const imageData = new ImageData(pixels, 32, 32);
|
||||
const context = this.canvas.getContext("2d");
|
||||
context.putImageData(imageData, 0, 0);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
const context = canvas.value.getContext("2d");
|
||||
if (context) {
|
||||
context.putImageData(imageData, 0, 0);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,20 @@
|
||||
<template>
|
||||
<div ref="wrapper" class="wrapper" v-bind="$attrs">
|
||||
<div class="relative container">
|
||||
<div ref="wrapper" class="" v-bind="$attrs">
|
||||
<div class="h-full w-full">
|
||||
<!-- Show the placeholder as background -->
|
||||
<blurhash-img
|
||||
v-if="blurhash"
|
||||
:hash="blurhash"
|
||||
:aspect-ratio="height / width"
|
||||
class="top-0 left-0 transition-opacity duration-500"
|
||||
:class="isLoaded ? 'opacity-0' : 'opacity-100'"
|
||||
class="transition-opacity duration-500"
|
||||
:class="blurhashOpacity"
|
||||
/>
|
||||
|
||||
<!-- Show the real image on the top and fade in after loading -->
|
||||
<img
|
||||
ref="image"
|
||||
:width="width"
|
||||
:height="height"
|
||||
class="absolute top-0 left-0 transition-opacity duration-500"
|
||||
:class="{ isLoaded: isLoaded ? 'opacity-100' : 'opacity-0', rounded }"
|
||||
class="transition-opacity duration-500 rounded-lg object-cover w-full h-full"
|
||||
:class="imageOpacity"
|
||||
alt=""
|
||||
src=""
|
||||
/>
|
||||
@@ -24,101 +22,70 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Prop, Component, Vue, Ref, Watch } from "vue-property-decorator";
|
||||
<script lang="ts" setup>
|
||||
import BlurhashImg from "./BlurhashImg.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
BlurhashImg,
|
||||
},
|
||||
})
|
||||
export default class LazyImage extends Vue {
|
||||
@Prop({ type: String, required: true }) src!: string;
|
||||
@Prop({ type: String, required: false, default: null }) blurhash!: string;
|
||||
@Prop({ type: Number, default: 1 }) width!: number;
|
||||
@Prop({ type: Number, default: 1 }) height!: number;
|
||||
@Prop({ type: Boolean, default: false }) rounded!: boolean;
|
||||
import { computed, ref, onMounted, onUnmounted, watchEffect } from "vue";
|
||||
|
||||
inheritAttrs = false;
|
||||
isLoaded = false;
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
src: string;
|
||||
blurhash?: string | null;
|
||||
width?: number;
|
||||
height?: number;
|
||||
rounded?: boolean;
|
||||
}>(),
|
||||
{ blurhash: null, width: 100, height: 100, rounded: false }
|
||||
);
|
||||
|
||||
observer!: IntersectionObserver;
|
||||
const isLoaded = ref(false);
|
||||
const observer = ref<IntersectionObserver | null>(null);
|
||||
|
||||
@Ref("wrapper") readonly wrapper!: any;
|
||||
@Ref("image") image!: any;
|
||||
const wrapper = ref<HTMLElement | null>(null);
|
||||
const image = ref<HTMLImageElement | null>(null);
|
||||
|
||||
mounted(): void {
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
this.onEnter();
|
||||
}
|
||||
});
|
||||
const src = computed(() => props.src);
|
||||
|
||||
this.observer.observe(this.wrapper);
|
||||
const isIntersecting = ref(false);
|
||||
|
||||
const blurhashOpacity = computed(() =>
|
||||
isLoaded.value ? "opacity-0 hidden" : "opacity-100"
|
||||
);
|
||||
|
||||
const imageOpacity = computed(() =>
|
||||
isLoaded.value ? "opacity-100" : "opacity-0"
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
console.debug("on lazy image mounted");
|
||||
observer.value = new IntersectionObserver((entries) => {
|
||||
isIntersecting.value = entries[0].isIntersecting;
|
||||
});
|
||||
|
||||
if (wrapper.value) {
|
||||
console.debug("starting observing");
|
||||
observer.value.observe(wrapper.value);
|
||||
}
|
||||
});
|
||||
|
||||
unmounted(): void {
|
||||
this.observer.disconnect();
|
||||
onUnmounted(() => {
|
||||
if (observer.value) {
|
||||
observer.value.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
onEnter(): void {
|
||||
// Image is visible (means: has entered the viewport),
|
||||
// so start loading by setting the src attribute
|
||||
if (this.image) {
|
||||
this.image.src = this.src;
|
||||
watchEffect(() => {
|
||||
console.debug("src changed");
|
||||
// Image is visible (means: has entered the viewport),
|
||||
// so start loading by setting the src attribute
|
||||
if (image.value) {
|
||||
console.debug("image is ok, setting it");
|
||||
image.value.src = src.value;
|
||||
|
||||
this.image.onload = () => {
|
||||
// Image is loaded, so start fading in
|
||||
this.isLoaded = true;
|
||||
};
|
||||
}
|
||||
image.value.onload = () => {
|
||||
// Image is loaded, so start fading in
|
||||
isLoaded.value = true;
|
||||
};
|
||||
}
|
||||
|
||||
@Watch("src")
|
||||
updateImageWithSrcChange(): void {
|
||||
this.onEnter();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
.left-0 {
|
||||
left: 0;
|
||||
}
|
||||
.opacity-100 {
|
||||
opacity: 100%;
|
||||
}
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
.transition-opacity {
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.duration-500 {
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
.wrapper,
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
&.rounded {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,10 +8,9 @@
|
||||
:rounded="rounded"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
import { IMedia } from "@/types/media.model";
|
||||
import { PropType } from "vue";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import LazyImage from "../Image/LazyImage.vue";
|
||||
|
||||
const DEFAULT_CARD_URL = "/img/mobilizon_default_card.png";
|
||||
@@ -27,28 +26,27 @@ const DEFAULT_PICTURE = {
|
||||
},
|
||||
};
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
LazyImage,
|
||||
},
|
||||
})
|
||||
export default class LazyImageWrapper extends Vue {
|
||||
@Prop({ required: false, type: Object as PropType<IMedia | null> })
|
||||
picture!: IMedia | null;
|
||||
@Prop({ required: false, type: Boolean, default: false }) rounded!: boolean;
|
||||
|
||||
get pictureOrDefault(): Partial<IMedia> {
|
||||
if (this.picture === null) {
|
||||
return DEFAULT_PICTURE;
|
||||
}
|
||||
return {
|
||||
url: this?.picture?.url,
|
||||
metadata: {
|
||||
width: this?.picture?.metadata?.width,
|
||||
height: this?.picture?.metadata?.height,
|
||||
blurhash: this?.picture?.metadata?.blurhash,
|
||||
},
|
||||
};
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
picture?: IMedia | null;
|
||||
rounded?: boolean;
|
||||
}>(),
|
||||
{
|
||||
rounded: false,
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const pictureOrDefault = computed(() => {
|
||||
if (props.picture === null) {
|
||||
return DEFAULT_PICTURE;
|
||||
}
|
||||
return {
|
||||
url: props?.picture?.url,
|
||||
metadata: {
|
||||
width: props?.picture?.metadata?.width,
|
||||
height: props?.picture?.metadata?.height,
|
||||
blurhash: props?.picture?.metadata?.blurhash,
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
67
js/src/components/Image/test.html
Normal file
67
js/src/components/Image/test.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<link
|
||||
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<title>Tailwind CSS CDN</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="p-10">
|
||||
<!--Card 1-->
|
||||
<div class="w-full lg:max-w-full lg:flex">
|
||||
<div
|
||||
class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
|
||||
style="
|
||||
background-image: url('https://mobilizon.fr/media/70e930f488788afdf5d024be5ac2f9c9f0e1b166e16f645beb2c344cdcc65d62.jpg?name=musiquesurnantesbanner.jpg');
|
||||
"
|
||||
title="Mountain"
|
||||
></div>
|
||||
<div
|
||||
class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal"
|
||||
>
|
||||
<div class="mb-8">
|
||||
<p class="text-sm text-gray-600 flex items-center">
|
||||
<svg
|
||||
class="fill-current text-gray-500 w-3 h-3 mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"
|
||||
/>
|
||||
</svg>
|
||||
Members only
|
||||
</p>
|
||||
<div class="text-gray-900 font-bold text-xl mb-2">
|
||||
Best Mountain Trails 2020
|
||||
</div>
|
||||
<p class="text-gray-700 text-base">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Voluptatibus quia, Nonea! Maiores et perferendis eaque,
|
||||
exercitationem praesentium nihil.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
class="w-10 h-10 rounded-full mr-4"
|
||||
src="/ben.png"
|
||||
alt="Avatar of Writer"
|
||||
/>
|
||||
<div class="text-sm">
|
||||
<p class="text-gray-900 leading-none">John Smith</p>
|
||||
<p class="text-gray-600">Aug 18</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user