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

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

@ -1,49 +1,28 @@
<template> <template>
<div class="video-scroll" ref="root"> <div class="video-scroll" ref="root">
<template v-if="definition.direction === 'left' || definition.direction === 'right'"> <img class="visible loaded"
<img class="visible loaded" :src="definition.files[0]"
:src="definition.files[0]" :style="{
:style="{
top: `${Math.round(definition.top)}px`, top: `${Math.round(definition.top)}px`,
left: `${Math.round(definition.left)}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 --> <!--suppress RequiredAttributes -->
<img v-for="(file, idx) in definition.files.slice(1)" <img v-for="(file, idx) in definition.files.slice(1)"
:data-src="file" :data-src="file"
:data-direction="definition.direction" :data-direction="definition.direction"
:style="{ :style="{
top: `${Math.round(definition.top)}px`, top: `${Math.round(definition.top) +
left: `${Math.round(definition.left) + (definition.width * (idx + 1) * directionSign)}px`, (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`, width: `${Math.round(definition.width)}px`,
height: `${Math.round(definition.height)}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> </div>
</template> </template>
@ -68,6 +47,11 @@ export default defineComponent({
} }
} }
}, },
methods: {
isHorizontal(definition: VideoScrollDef): boolean {
return definition.direction === "left" || definition.direction === "right";
}
},
setup(props) { setup(props) {
const root = ref<Element | null>(null); const root = ref<Element | null>(null);