turn <img> in VideoScroll into its own component
This commit is contained in:
parent
869c4ea129
commit
e77106fa1f
2 changed files with 102 additions and 51 deletions
|
@ -1,26 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="video-scroll" ref="root">
|
<div class="video-scroll" ref="root">
|
||||||
<img class="visible loaded"
|
<VideoScrollImage :definition="{fullres: definition.files[0]}"
|
||||||
:src="definition.files[0]"
|
:style="{
|
||||||
:style="{
|
top: `${Math.round(definition.top)}px`,
|
||||||
top: `${Math.round(definition.top)}px`,
|
left: `${Math.round(definition.left)}px`,
|
||||||
left: `${Math.round(definition.left)}px`,
|
width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
|
||||||
width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
|
height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
|
||||||
height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
|
rotate: `${definition.angle}deg`
|
||||||
rotate: `${definition.angle}deg`
|
}"
|
||||||
}"
|
:visible="true"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!--suppress RequiredAttributes -->
|
<!--suppress RequiredAttributes -->
|
||||||
<img v-for="file in dynamicFiles"
|
<VideoScrollImage v-for="file in dynamicFiles"
|
||||||
:data-src="file.src"
|
:data-idx="file.idx"
|
||||||
:style="{
|
:definition="file.image"
|
||||||
top: `${Math.round(file.top)}px`,
|
:style="{
|
||||||
left: `${Math.round(file.left)}px`,
|
top: `${Math.round(file.top)}px`,
|
||||||
width: `${Math.round(definition.width)}px`,
|
left: `${Math.round(file.left)}px`,
|
||||||
height: `${Math.round(definition.height)}px`,
|
width: `${Math.round(definition.width)}px`,
|
||||||
rotate: `${definition.angle}deg`
|
height: `${Math.round(definition.height)}px`,
|
||||||
}"
|
rotate: `${definition.angle}deg`
|
||||||
|
}"
|
||||||
|
:visible="imageVisibility[file.idx] || false"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -28,9 +30,16 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {defineComponent, PropType} from "vue";
|
import {defineComponent, PropType} from "vue";
|
||||||
import {rotate} from "@/utils";
|
import {rotate} from "@/utils";
|
||||||
|
import VideoScrollImage, {VideoScrollImageDef} from "@/components/VideoScrollImage.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "VideoScroll",
|
name: "VideoScroll",
|
||||||
|
components: {VideoScrollImage},
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
imageVisibility: [] as Boolean[]
|
||||||
|
};
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
definition: {
|
definition: {
|
||||||
type: Object as PropType<VideoScrollDef>,
|
type: Object as PropType<VideoScrollDef>,
|
||||||
|
@ -38,14 +47,14 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
dynamicFiles(): { top: number, left: number, src: string }[] {
|
dynamicFiles(): { idx: number, image: VideoScrollImageDef, top: number, left: number }[] {
|
||||||
return this.definition.files.slice(1).map((src: string, idx: number) => {
|
return this.definition.files.slice(1).map((src: string, idx: number) => {
|
||||||
const cy = this.definition.top +
|
const cy = this.definition.top +
|
||||||
(this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0);
|
(this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0);
|
||||||
const cx = this.definition.left +
|
const cx = this.definition.left +
|
||||||
(this.isHorizontal ? (this.definition.width * (idx + 1) * this.horizontalDirection) : 0);
|
(this.isHorizontal ? (this.definition.width * (idx + 1) * this.horizontalDirection) : 0);
|
||||||
const [left, top] = rotate(cx, cy, this.definition.left, this.definition.top, this.definition.angle);
|
const [left, top] = rotate(cx, cy, this.definition.left, this.definition.top, this.definition.angle);
|
||||||
return {top, left, src};
|
return {idx: idx + 1, top, left, image: {fullres: src}};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
isHorizontal(): boolean {
|
isHorizontal(): boolean {
|
||||||
|
@ -69,26 +78,7 @@ export default defineComponent({
|
||||||
const observer = new IntersectionObserver((entries, _) => {
|
const observer = new IntersectionObserver((entries, _) => {
|
||||||
entries.forEach((entry) => {
|
entries.forEach((entry) => {
|
||||||
const element = entry.target as HTMLImageElement;
|
const element = entry.target as HTMLImageElement;
|
||||||
if (entry.isIntersecting) {
|
this.imageVisibility[parseInt(element.dataset.idx as string)] = entry.isIntersecting;
|
||||||
if (!element.src) {
|
|
||||||
console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
|
|
||||||
element.src = element.dataset.src!;
|
|
||||||
const grayTimeout = setTimeout(() => {
|
|
||||||
element.classList.add("visible");
|
|
||||||
element.style.background = "grey";
|
|
||||||
}, 3000);
|
|
||||||
element.onload = () => {
|
|
||||||
clearTimeout(grayTimeout);
|
|
||||||
element.classList.add("visible");
|
|
||||||
element.style.background = "none";
|
|
||||||
if (this.isHorizontal) {
|
|
||||||
element.style.height = "auto";
|
|
||||||
} else {
|
|
||||||
element.style.width = "auto";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
Array.from((this.$refs.root as Element).children).forEach((el) => {
|
Array.from((this.$refs.root as Element).children).forEach((el) => {
|
||||||
|
@ -118,15 +108,4 @@ export interface VideoScrollDef {
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.video-scroll img {
|
|
||||||
position: absolute;
|
|
||||||
image-rendering: optimizeSpeed;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visible {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
72
app/src/components/VideoScrollImage.vue
Normal file
72
app/src/components/VideoScrollImage.vue
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<img ref="img" :src="currentSrc" class="video-scroll-image"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent, PropType, ref, Ref} from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "VideoScrollImage",
|
||||||
|
props: {
|
||||||
|
definition: {
|
||||||
|
type: Object as PropType<VideoScrollImageDef>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
visible() {
|
||||||
|
if (!this.img || !this.visible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
|
||||||
|
this.currentSrc = this.definition.fullres;
|
||||||
|
const grayTimeout = setTimeout(() => {
|
||||||
|
this.img!.classList.add("visible");
|
||||||
|
this.img!.style.background = "grey";
|
||||||
|
}, 3000);
|
||||||
|
this.img.onload = () => {
|
||||||
|
clearTimeout(grayTimeout);
|
||||||
|
this.img!.classList.add("visible");
|
||||||
|
this.img!.style.background = "none";
|
||||||
|
// if (this.isHorizontal) {
|
||||||
|
// this.img!.style.height = "auto";
|
||||||
|
// } else {
|
||||||
|
// this.img!.style.width = "auto";
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const img = ref<HTMLImageElement | null>(null);
|
||||||
|
const currentSrc: Ref<string | undefined> = ref(undefined);
|
||||||
|
|
||||||
|
return {
|
||||||
|
img,
|
||||||
|
currentSrc
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export interface VideoScrollImageDef {
|
||||||
|
fullres: string
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style>
|
||||||
|
.video-scroll-image {
|
||||||
|
position: absolute;
|
||||||
|
image-rendering: optimizeSpeed;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-scroll-image.visible {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in a new issue