143 lines
3.8 KiB
Vue
143 lines
3.8 KiB
Vue
<template>
|
|
<div class="video-scroll" ref="root">
|
|
<template v-if="definition.direction === 'left' || definition.direction === 'right'">
|
|
<img class="visible loaded"
|
|
:src="definition.files[0]"
|
|
:style="{
|
|
top: `${Math.round(definition.top)}px`,
|
|
left: `${Math.round(definition.left)}px`,
|
|
width: `${Math.round(definition.width)}px`,
|
|
}"
|
|
/>
|
|
|
|
<!--suppress RequiredAttributes -->
|
|
<img v-for="(file, idx) in definition.files.slice(1)"
|
|
:data-src="file"
|
|
:data-direction="definition.direction"
|
|
:style="{
|
|
top: `${Math.round(definition.top)}px`,
|
|
left: `${Math.round(definition.left) + (definition.width * (idx + 1) * directionSign)}px`,
|
|
width: `${Math.round(definition.width)}px`,
|
|
height: `${Math.round(definition.height)}px`,
|
|
}"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
<img class="visible loaded"
|
|
:src="definition.files[0]"
|
|
:style="{
|
|
top: `${Math.round(definition.top)}px`,
|
|
left: `${Math.round(definition.left)}px`,
|
|
height: `${Math.round(definition.height)}px`,
|
|
}"
|
|
/>
|
|
|
|
<!--suppress RequiredAttributes -->
|
|
<img v-for="(file, idx) in definition.files.slice(1)"
|
|
:data-src="file"
|
|
:data-direction="definition.direction"
|
|
:style="{
|
|
top: `${Math.round(definition.top) + (definition.height * (idx + 1) * directionSign)}px`,
|
|
left: `${Math.round(definition.left)}px`,
|
|
height: `${Math.round(definition.height)}px`,
|
|
width: `${Math.round(definition.width)}px`,
|
|
}"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {defineComponent, onMounted, ref} from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "VideoScroll",
|
|
props: {
|
|
definition: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
directionSign() {
|
|
if (this.definition.direction == VideoScrollDirection.RIGHT ||
|
|
this.definition.direction == VideoScrollDirection.DOWN) {
|
|
return 1;
|
|
} else {
|
|
return -1;
|
|
}
|
|
}
|
|
},
|
|
setup(props) {
|
|
const root = ref<Element | null>(null);
|
|
|
|
onMounted(() => {
|
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach((entry) => {
|
|
const element = entry.target as HTMLImageElement;
|
|
if (entry.isIntersecting) {
|
|
element.classList.add("visible");
|
|
if (!element.src) {
|
|
element.src = element.dataset.src!;
|
|
if (element.dataset.direction == "left" || element.dataset.direction == "right") {
|
|
element.style.height = "auto";
|
|
} else {
|
|
element.style.width = "auto";
|
|
}
|
|
element.onload = () => {
|
|
element.classList.add("loaded");
|
|
};
|
|
}
|
|
} else {
|
|
element.classList.remove("visible");
|
|
}
|
|
});
|
|
});
|
|
Array.from((root.value as Element).children).forEach((el) => {
|
|
observer.observe(el);
|
|
});
|
|
});
|
|
|
|
return {
|
|
root
|
|
};
|
|
}
|
|
});
|
|
|
|
export enum VideoScrollDirection {
|
|
RIGHT = "right",
|
|
LEFT = "left",
|
|
UP = "up",
|
|
DOWN = "down"
|
|
}
|
|
|
|
export interface VideoScrollDef {
|
|
top: number,
|
|
left: number,
|
|
width: number,
|
|
height: number,
|
|
direction: VideoScrollDirection,
|
|
files: string[]
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- 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;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.loaded {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.visible {
|
|
visibility: visible !important;
|
|
}
|
|
</style>
|