From d2dee8f371a52c6455f5a5ea1c3cf78f772b6867 Mon Sep 17 00:00:00 2001 From: Raphael Forment Date: Sun, 14 Apr 2024 11:43:59 +0200 Subject: [PATCH] Refactor show documentation function --- src/API.ts | 6 +-- src/Documentation.ts | 88 ++++++++++++++++++++++++++++++++------------ src/main.ts | 6 +-- 3 files changed, 69 insertions(+), 31 deletions(-) diff --git a/src/API.ts b/src/API.ts index ad9d872..4a282fc 100644 --- a/src/API.ts +++ b/src/API.ts @@ -2599,8 +2599,9 @@ export class UserAPI { */ if (n === undefined) return this.app.clock.bpm; - if (n < 1 || n > 500) console.log(`Setting bpm to ${n}`); - this.app.clock.bpm = n; + if (n < 1 || n > 500) { + this.app.clock.bpm = n; + } return n; }; // tempo = this.bpm; @@ -2648,7 +2649,6 @@ export class UserAPI { public theme = (color_scheme: string): void => { this.app.readTheme(color_scheme); - console.log("Changing color scheme for: ", color_scheme) } public themeName = (): string => { diff --git a/src/Documentation.ts b/src/Documentation.ts index 75ab410..df9356d 100644 --- a/src/Documentation.ts +++ b/src/Documentation.ts @@ -1,4 +1,4 @@ -import { type Editor } from "./main"; +import { Editor } from "./main"; // Basics import { introduction } from "./documentation/basics/welcome"; import { atelier } from "./documentation/basics/atelier"; @@ -48,6 +48,12 @@ import { createDocumentationStyle } from "./DomElements"; import { filters } from "./documentation/learning/audio_engine/filters"; showdown.setFlavor("github"); +type StyleBinding = { + type: string; + regex: RegExp; + replace: (match: string, p1: string) => string; +}; + export const key_shortcut = (shortcut: string): string => { return `${shortcut}`; }; @@ -170,34 +176,68 @@ export const documentation_factory = (application: Editor) => { }; }; -export const showDocumentation = (app: Editor) => { - /** - * Shows or hides the documentation based on the current state of the app. - * @param app - The Editor instance. - */ - if (document.getElementById("app")?.classList.contains("hidden")) { - document.getElementById("app")?.classList.remove("hidden"); - document.getElementById("documentation")?.classList.add("hidden"); + + +export const showDocumentation = (app: Editor): void => { + const toggleElementVisibility = (elementId: string, shouldHide: boolean): void => { + const element = document.getElementById(elementId); + if (element) { + element.classList.toggle("hidden", shouldHide); + } + }; + + const applyStyleBindings = (style: Record, updateContent: (bindings: StyleBinding[]) => void): void => { + const bindings: StyleBinding[] = Object.keys(style).map((key) => ({ + type: "output", + regex: new RegExp(`<${key}([^>]*)>`, "g"), + replace: (_, p1) => `<${key} class="${style[key]}" ${p1}>` + })); + updateContent(bindings); + }; + + const appHidden = document.getElementById("app")?.classList.contains("hidden"); + if (appHidden) { + toggleElementVisibility("app", false); + toggleElementVisibility("documentation", true); app.exampleIsPlaying = false; } else { - document.getElementById("app")?.classList.add("hidden"); - document.getElementById("documentation")?.classList.remove("hidden"); - // Load and convert Markdown content from the documentation file - let style = createDocumentationStyle(app); - - function update_and_assign(callback: Function) { - let bindings = Object.keys(style).map((key) => ({ - type: "output", - regex: new RegExp(`<${key}([^>]*)>`, "g"), - //@ts-ignore - replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`, - })); - callback(bindings) - } - update_and_assign((e: Object) => updateDocumentationContent(app, e)); + toggleElementVisibility("app", true); + toggleElementVisibility("documentation", false); + const style = createDocumentationStyle(app); + applyStyleBindings(style, (bindings: StyleBinding[]) => updateDocumentationContent(app, bindings)); } + + // Reset the URL to the base URL + window.history.pushState({}, '', '/'); }; +// export const showDocumentation = (app: Editor) => { +// /** +// * Shows or hides the documentation based on the current state of the app. +// * @param app - The Editor instance. +// */ +// if (document.getElementById("app")?.classList.contains("hidden")) { +// document.getElementById("app")?.classList.remove("hidden"); +// document.getElementById("documentation")?.classList.add("hidden"); +// app.exampleIsPlaying = false; +// } else { +// document.getElementById("app")?.classList.add("hidden"); +// document.getElementById("documentation")?.classList.remove("hidden"); +// // Load and convert Markdown content from the documentation file +// let style = createDocumentationStyle(app); +// function update_and_assign(callback: Function) { +// let bindings = Object.keys(style).map((key) => ({ +// type: "output", +// regex: new RegExp(`<${key}([^>]*)>`, "g"), +// //@ts-ignore +// replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`, +// })); +// callback(bindings) +// } +// update_and_assign((e: Object) => updateDocumentationContent(app, e)); +// } +// }; + export const hideDocumentation = () => { /** * Hides the documentation section and shows the main application. diff --git a/src/main.ts b/src/main.ts index 3af764a..1044498 100644 --- a/src/main.ts +++ b/src/main.ts @@ -35,9 +35,6 @@ import colors from "./colors.json"; // @ts-ignore const images = import.meta.glob("./assets/*") - - - export class Editor { // Universes and settings settings: AppSettings = new AppSettings(); @@ -214,7 +211,7 @@ export class Editor { // Set the color scheme for the application this.readTheme(this.settings.theme); - + this.documentationStyle = createDocumentationStyle(this); this.bindings = Object.keys(this.documentationStyle).map((key) => ({ type: "output", @@ -578,6 +575,7 @@ export class Editor { this.hydra = this.hydra_backend.synth; this.hydra.setResolution(1280, 768); (globalThis as any).hydra = this.hydra; + // Hydra is overriding the bpm function } private setCanvas(canvas: HTMLCanvasElement): void {