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

rework classes to be more semantic, images outside of viewport are hidden

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-16 22:32:25 +01:00
parent c0ae3c7354
commit 74ef8288b1
2 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/src/components/SVGContent.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="svg-content"> <div class="svg-content">
<div :class="['loading', {loaded: loadedPercent === 100}]"> <div :class="['loading-screen', {loaded: loadedPercent === 100}]">
<div :style="{width: `${loadedPercent}%`}" class="loading-bar"></div> <div :style="{width: `${loadedPercent}%`}" class="loading-bar"></div>
</div> </div>
<div class="content" ref="root"> <div class="content" ref="root">
@ -451,7 +451,7 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
visibility: hidden; visibility: hidden;
} }
.loading { .loading-screen {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -462,7 +462,7 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
opacity: 1; opacity: 1;
} }
.loaded { .loading-screen.loaded {
opacity: 0 !important; opacity: 0 !important;
} }

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

@ -1,6 +1,6 @@
<template> <template>
<div class="video-scroll" ref="root"> <div class="video-scroll" ref="root">
<img class="visible loaded" <img class="visible displayed loaded"
:src="definition.files[0]" :src="definition.files[0]"
:style="{ :style="{
top: `${Math.round(definition.top)}px`, top: `${Math.round(definition.top)}px`,
@ -70,17 +70,16 @@ export default defineComponent({
entries.forEach((entry) => { entries.forEach((entry) => {
const element = entry.target as HTMLImageElement; const element = entry.target as HTMLImageElement;
if (entry.isIntersecting) { if (entry.isIntersecting) {
element.classList.add("visible");
if (!element.src) { if (!element.src) {
console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`); console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
element.src = element.dataset.src!; element.src = element.dataset.src!;
const grayTimeout = setTimeout(() => { setTimeout(() => {
element.classList.add("visible"); element.classList.add("displayed");
element.style.background = "grey";
}, 3000); }, 3000);
element.onload = () => { element.onload = () => {
clearTimeout(grayTimeout); element.classList.add("displayed");
element.classList.add("visible"); element.classList.add("loaded");
element.style.background = "none";
if (this.isHorizontal) { if (this.isHorizontal) {
element.style.height = "auto"; element.style.height = "auto";
} else { } else {
@ -88,6 +87,8 @@ export default defineComponent({
} }
}; };
} }
} else {
element.classList.remove("visible");
} }
}); });
}); });
@ -117,16 +118,25 @@ export interface VideoScrollDef {
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style>
.video-scroll img { .video-scroll img {
position: absolute; position: absolute;
image-rendering: optimizeSpeed; image-rendering: optimizeSpeed;
background: grey;
visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity .5s; transition: opacity .5s;
} }
.visible { .video-scroll img.visible {
visibility: visible !important;
}
.video-scroll img.displayed {
opacity: 1 !important; opacity: 1 !important;
} }
.video-scroll img.loaded {
background: transparent !important;
}
</style> </style>