From f6c6e3a4123e42efb2a8b3d95b97b2c8c8c71bbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= Date: Tue, 12 Jan 2021 00:15:42 +0100 Subject: [PATCH] allow specifying multiple directions (e.g. "up right") --- app/src/components/SVGContent.vue | 12 +++-- app/src/components/VideoScroll.vue | 70 +++++++++++++++--------------- 2 files changed, 42 insertions(+), 40 deletions(-) diff --git a/app/src/components/SVGContent.vue b/app/src/components/SVGContent.vue index be83100..14c07e4 100644 --- a/app/src/components/SVGContent.vue +++ b/app/src/components/SVGContent.vue @@ -305,9 +305,13 @@ async function processScrolls(svg: XMLDocument): Promise { 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 { angle, width: w * ratio, height: h * ratio, - direction: directionString as VideoScrollDirection, + directions, files }; }) diff --git a/app/src/components/VideoScroll.vue b/app/src/components/VideoScroll.vue index 77149d0..2e29c2a 100644 --- a/app/src/components/VideoScroll.vue +++ b/app/src/components/VideoScroll.vue @@ -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 @@ -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(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[] }