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

allow specifying multiple directions (e.g. "up right")

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-12 00:15:42 +01:00
parent 47e2e19a3c
commit f6c6e3a412
2 changed files with 42 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -305,9 +305,13 @@ async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
console.debug(`[SVG/VIDEOSCROLLS] Found video scroll #${el.id}: ${descNode?.textContent}`);
const [directionString, filesURL] = descNode!.textContent!.split("\n");
if (!Object.values(VideoScrollDirection).includes(directionString as VideoScrollDirection)) {
throw new Error("Unknown direction string.");
}
const directions: VideoScrollDirection[] = directionString.split(" ").map((direction) => {
if (!Object.values(VideoScrollDirection).includes(direction as VideoScrollDirection)) {
throw new Error(`Unknown direction string: "${direction}"`);
}
return direction as VideoScrollDirection;
});
console.debug(`[SVG/VIDEOSCROLLS] Fetching ${filesURL}...`);
const fileFetch = await fetch(`content/${filesURL}`);
@ -335,7 +339,7 @@ async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
angle,
width: w * ratio,
height: h * ratio,
direction: directionString as VideoScrollDirection,
directions,
files
};
})

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

@ -6,7 +6,7 @@
top: `${Math.round(definition.top)}px`,
left: `${Math.round(definition.left)}px`,
width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
height: isHorizontal ? 'auto' : `${Math.round(definition.height)}px`,
height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
rotate: `${definition.angle}deg`
}"
/>
@ -14,7 +14,6 @@
<!--suppress RequiredAttributes -->
<img v-for="file in dynamicFiles"
:data-src="file.src"
:data-direction="definition.direction"
:style="{
top: `${Math.round(file.top)}px`,
left: `${Math.round(file.left)}px`,
@ -27,7 +26,7 @@
</template>
<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import {defineComponent} from "vue";
import {rotate} from "@/utils";
export default defineComponent({
@ -42,54 +41,53 @@ export default defineComponent({
dynamicFiles(): { [key: string]: string } {
return this.definition.files.slice(1).map((src: string, idx: number) => {
const cy = this.definition.top +
(this.isHorizontal ? 0 : (this.definition.height * (idx + 1) * this.direction));
(this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0);
const cx = this.definition.left +
(this.isHorizontal ? (this.definition.width * (idx + 1) * this.direction) : 0);
(this.isHorizontal ? (this.definition.width * (idx + 1) * this.horizontalDirection) : 0);
const [left, top] = rotate(cx, cy, this.definition.left, this.definition.top, this.definition.angle);
return {top, left, src};
});
},
isHorizontal(): boolean {
return this.definition.direction === "left" || this.definition.direction === "right";
return this.definition.directions.some(
(dir: VideoScrollDirection) => dir === VideoScrollDirection.LEFT || dir === VideoScrollDirection.RIGHT
);
},
direction(): number {
return (this.definition.direction === "right" || this.definition.direction === "down") ? 1 : -1;
isVertical(): boolean {
return this.definition.directions.some(
(dir: VideoScrollDirection) => dir === VideoScrollDirection.UP || dir === VideoScrollDirection.DOWN
);
},
horizontalDirection(): number {
return this.definition.directions.includes(VideoScrollDirection.RIGHT) ? 1 : -1;
},
verticalDirection(): number {
return this.definition.directions.includes(VideoScrollDirection.DOWN) ? 1 : -1;
}
},
setup(props) {
const root = ref<Element | null>(null);
console.debug(`[VIDEOSCROLL] Initializing ${props.definition.files[0]}...`);
console.debug(props.definition);
onMounted(() => {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
const element = entry.target as HTMLImageElement;
if (entry.isIntersecting) {
if (!element.src) {
console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
element.src = element.dataset.src!;
if (element.dataset.direction == "left" || element.dataset.direction == "right") {
mounted() {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
const element = entry.target as HTMLImageElement;
if (entry.isIntersecting) {
if (!element.src) {
console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
element.src = element.dataset.src!;
element.onload = () => {
element.classList.add("loaded");
if (this.isHorizontal) {
element.style.height = "auto";
} else {
element.style.width = "auto";
}
element.onload = () => {
element.classList.add("loaded");
};
}
};
}
});
});
Array.from((root.value as Element).children).forEach((el) => {
observer.observe(el);
}
});
});
return {
root
};
Array.from((this.$refs.root as Element).children).forEach((el) => {
observer.observe(el);
});
}
});
@ -106,7 +104,7 @@ export interface VideoScrollDef {
angle: number,
width: number,
height: number,
direction: VideoScrollDirection,
directions: VideoScrollDirection[],
files: string[]
}