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

shorten VideoScroll.vue

master
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

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

@ -1,49 +1,28 @@
<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="{
<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`,
}"
/>
/>
<!--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`,
<!--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) +
(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);