thm
/
line-and-surface
1
0
Fork 0
Code Issues 17 Pull Requests Packages Projects Releases Wiki Activity

Revert all the way back before "turn <img> in VideoScroll into its own component"

master
Tomáš Mládek 2021-01-16 22:06:48 +01:00
parent 91d6af38a0
commit 15b377d4a2
2 changed files with 51 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
app/src/components/VideoScroll.vue
View File

@ -1,29 +1,26 @@
<template>
<div class="video-scroll" ref="root">
<VideoScrollImage :definition="{fullres: definition.files[0]}"
:style="{
top: `${Math.round(definition.top)}px`,
left: `${Math.round(definition.left)}px`,
width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
rotate: `${definition.angle}deg`
}"
:visible="true"
<img class="visible loaded"
:src="definition.files[0]"
:style="{
top: `${Math.round(definition.top)}px`,
left: `${Math.round(definition.left)}px`,
width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
rotate: `${definition.angle}deg`
}"
/>
<!--suppress RequiredAttributes -->
<VideoScrollImage v-for="file in dynamicFiles"
:key="file.idx"
:data-idx="file.idx"
:definition="file.image"
:style="{
top: `${Math.round(file.top)}px`,
left: `${Math.round(file.left)}px`,
width: `${Math.round(definition.width)}px`,
height: `${Math.round(definition.height)}px`,
rotate: `${definition.angle}deg`
}"
:visible="imageVisibility[file.idx] || false"
<img v-for="file in dynamicFiles"
:data-src="file.src"
:style="{
top: `${Math.round(file.top)}px`,
left: `${Math.round(file.left)}px`,
width: `${Math.round(definition.width)}px`,
height: `${Math.round(definition.height)}px`,
rotate: `${definition.angle}deg`
}"
/>
</div>
</template>
@ -31,16 +28,9 @@
<script lang="ts">
import {defineComponent, PropType} from "vue";
import {rotate} from "@/utils";
import VideoScrollImage, {VideoScrollImageDef} from "@/components/VideoScrollImage.vue";
export default defineComponent({
name: "VideoScroll",
components: {VideoScrollImage},
data: () => {
return {
imageVisibility: [] as Boolean[]
};
},
props: {
definition: {
type: Object as PropType<VideoScrollDef>,
@ -48,14 +38,14 @@ export default defineComponent({
}
},
computed: {
dynamicFiles(): { idx: number, image: VideoScrollImageDef, top: number, left: number }[] {
dynamicFiles(): { top: number, left: number, src: string }[] {
return this.definition.files.slice(1).map((src: string, idx: number) => {
const cy = this.definition.top +
(this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0);
const cx = this.definition.left +
(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);
return {idx: idx + 1, top, left, image: {fullres: src}};
return {top, left, src};
});
},
isHorizontal(): boolean {
@ -79,7 +69,26 @@ export default defineComponent({
const observer = new IntersectionObserver((entries, _) => {
entries.forEach((entry) => {
const element = entry.target as HTMLImageElement;
this.imageVisibility[parseInt(element.dataset.idx as string)] = entry.isIntersecting;
if (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) => {
@ -109,4 +118,15 @@ export interface VideoScrollDef {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.video-scroll img {
position: absolute;
image-rendering: optimizeSpeed;
opacity: 0;
transition: opacity .5s;
}
.visible {
opacity: 1 !important;
}
</style>

89
app/src/components/VideoScrollImage.vue
View File

@ -1,89 +0,0 @@
<template>
<img ref="img" :class="['video-scroll-image', {visible, displayed, loaded}]" :src="currentSrc"/>
</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
}
},
data() {
return {
currentSrc: undefined as undefined | string,
displayed: false,
loaded: false,
};
},
watch: {
visible() {
if (!this.img) {
return;
}
if (this.visible && !this.loaded) {
console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
this.currentSrc = this.definition.fullres;
setTimeout(() => {
this.displayed = true;
}, 3000);
this.img.onload = () => {
this.displayed = true;
this.loaded = true;
// 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;
visibility: hidden;
opacity: 0;
transition: opacity .5s;
}
.video-scroll-image.visible {
visibility: visible !important;
}
.video-scroll-image.loaded {
background: transparent !important;
}
.video-scroll-image.displayed {
background: gray;
opacity: 1 !important;
}
</style>