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

fix intersection on unloaded images (define other dimension)

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

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

@ -13,10 +13,12 @@
<!--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"
:style="{ :style="{
top: `${Math.round(definition.top)}px`, top: `${Math.round(definition.top)}px`,
left: `${Math.round(definition.left) + (definition.width * (idx + 1) * directionSign)}px`, left: `${Math.round(definition.left) + (definition.width * (idx + 1) * directionSign)}px`,
width: `${Math.round(definition.width)}px`, width: `${Math.round(definition.width)}px`,
height: `${Math.round(definition.height)}px`,
}" }"
/> />
</template> </template>
@ -33,10 +35,12 @@
<!--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"
:style="{ :style="{
top: `${Math.round(definition.top) + (definition.height * (idx + 1) * directionSign)}px`, top: `${Math.round(definition.top) + (definition.height * (idx + 1) * directionSign)}px`,
left: `${Math.round(definition.left)}px`, left: `${Math.round(definition.left)}px`,
height: `${Math.round(definition.height)}px`, height: `${Math.round(definition.height)}px`,
width: `${Math.round(definition.width)}px`,
}" }"
/> />
</template> </template>
@ -75,6 +79,11 @@ export default defineComponent({
element.classList.add("visible"); element.classList.add("visible");
if (!element.src) { if (!element.src) {
element.src = element.dataset.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.onload = () => {
element.classList.add("loaded"); element.classList.add("loaded");
}; };