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

shorten VideoScroll.vue

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-11 19:29:35 +01:00
parent 3721067cca
commit 452cb267fb
1 changed files with 21 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/src/components/VideoScroll.vue
View file

@ -1,12 +1,12 @@
<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`,
width: isHorizontal(definition) ? `${Math.round(definition.width)}px` : 'auto',
height: isHorizontal(definition) ? 'auto' : `${Math.round(definition.height)}px`,
}"
/>
@ -15,35 +15,14 @@
: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`,
top: `${Math.round(definition.top) +
(isHorizontal(definition) ? 0 : (definition.height * (idx + 1) * directionSign))}px`,
left: `${Math.round(definition.left) +
(isHorizontal(definition) ? (definition.width * (idx + 1) * directionSign) : 0)}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>
@ -68,6 +47,11 @@ export default defineComponent({
}
}
},
methods: {
isHorizontal(definition: VideoScrollDef): boolean {
return definition.direction === "left" || definition.direction === "right";
}
},
setup(props) {
const root = ref<Element | null>(null);