113 lines
3.8 KiB
Vue
113 lines
3.8 KiB
Vue
<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"
|
|
/>
|
|
|
|
<!--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"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<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>,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
dynamicFiles(): { idx: number, image: VideoScrollImageDef, top: number, left: number }[] {
|
|
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}};
|
|
});
|
|
},
|
|
isHorizontal(): boolean {
|
|
return this.definition.directions.some(
|
|
(dir: VideoScrollDirection) => dir === VideoScrollDirection.LEFT || dir === VideoScrollDirection.RIGHT
|
|
);
|
|
},
|
|
isVertical(): boolean {
|
|
return this.definition.directions.some(
|
|
(dir: VideoScrollDirection) => dir === VideoScrollDirection.UP || dir === VideoScrollDirection.DOWN
|
|
);
|
|
},
|
|
horizontalDirection(): number {
|
|
return this.definition.directions.includes(VideoScrollDirection.RIGHT) ? 1 : -1;
|
|
},
|
|
verticalDirection(): number {
|
|
return this.definition.directions.includes(VideoScrollDirection.DOWN) ? 1 : -1;
|
|
}
|
|
},
|
|
mounted() {
|
|
const observer = new IntersectionObserver((entries, _) => {
|
|
entries.forEach((entry) => {
|
|
const element = entry.target as HTMLImageElement;
|
|
this.imageVisibility[parseInt(element.dataset.idx as string)] = entry.isIntersecting;
|
|
});
|
|
});
|
|
Array.from((this.$refs.root as Element).children).forEach((el) => {
|
|
observer.observe(el);
|
|
});
|
|
}
|
|
});
|
|
|
|
export enum VideoScrollDirection {
|
|
RIGHT = "right",
|
|
LEFT = "left",
|
|
UP = "up",
|
|
DOWN = "down"
|
|
}
|
|
|
|
export interface VideoScrollDef {
|
|
top: number,
|
|
left: number,
|
|
angle: number,
|
|
width: number,
|
|
height: number,
|
|
directions: VideoScrollDirection[],
|
|
files: string[]
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
</style>
|