diff --git a/src/Documentation.ts b/src/Documentation.ts index d2ea9d7..d190d38 100644 --- a/src/Documentation.ts +++ b/src/Documentation.ts @@ -74,6 +74,46 @@ export const makeExampleFactory = (application: Editor): Function => { return make_example; }; +export const documentation_pages = [ + "introduction", + "sampler", + "amplitude", + "audio_basics", + "filters", + "effects", + "interface", + "interaction", + "code", + "time", + "linear", + "cyclic", + "longform", + "synths", + "chaining", + "patterns", + "ziffers_basics", + "ziffers_scales", + "ziffers_rhythm", + "ziffers_algorithmic", + "ziffers_tonnetz", + "ziffers_syncing", + "midi", + "osc", + "functions", + "generators", + "lfos", + "probabilities", + "variables", + "synchronisation", + "mouse", + "shortcuts", + "about", + "bonus", + "oscilloscope", + "sample_list", + "loading_samples", +]; + export const documentation_factory = (application: Editor) => { /** * Creates the documentation for the given application. diff --git a/src/InterfaceLogic.ts b/src/InterfaceLogic.ts index bb5eaa6..efd4270 100644 --- a/src/InterfaceLogic.ts +++ b/src/InterfaceLogic.ts @@ -4,6 +4,7 @@ import { type Editor } from "./main"; import colors from "./colors.json"; import { documentation_factory, + documentation_pages, hideDocumentation, showDocumentation, updateDocumentationContent, @@ -23,18 +24,10 @@ import { tryEvaluate } from "./Evaluator"; import { inlineHoveringTips } from "./documentation/inlineHelp"; import { lineNumbers } from "@codemirror/view"; import { jsCompletions } from "./EditorSetup"; -import { createDocumentationStyle } from "./DomElements"; import { saveState } from "./WindowBehavior"; export const installInterfaceLogic = (app: Editor) => { // Initialize style - const documentationStyle = createDocumentationStyle(app); - const bindings = Object.keys(documentationStyle).map((key) => ({ - type: "output", - regex: new RegExp(`<${key}([^>]*)>`, "g"), - //@ts-ignore - replace: (match, p1) => `<${key} class="${documentationStyle[key]}" ${p1}>`, - })); (app.interface.line_numbers_checkbox as HTMLInputElement).checked = app.settings.line_numbers; @@ -521,45 +514,7 @@ export const installInterfaceLogic = (app: Editor) => { tryEvaluate(app, app.universes[app.selected_universe.toString()].init); - [ - "introduction", - "sampler", - "amplitude", - "audio_basics", - "filters", - "effects", - "interface", - "interaction", - "code", - "time", - "linear", - "cyclic", - "longform", - "synths", - "chaining", - "patterns", - "ziffers_basics", - "ziffers_scales", - "ziffers_rhythm", - "ziffers_algorithmic", - "ziffers_tonnetz", - "ziffers_syncing", - "midi", - "osc", - "functions", - "generators", - "lfos", - "probabilities", - "variables", - "synchronisation", - "mouse", - "shortcuts", - "about", - "bonus", - "oscilloscope", - "sample_list", - "loading_samples", - ].forEach((e) => { + documentation_pages.forEach((e) => { let name = `docs_` + e; // Check if the element exists @@ -568,13 +523,17 @@ export const installInterfaceLogic = (app: Editor) => { element.addEventListener("click", async () => { if (name !== "docs_sample_list") { app.currentDocumentationPane = e; - updateDocumentationContent(app, bindings); + // Clear query params + window.history.replaceState({}, "", window.location.pathname); + // Set id as hash paremeter for uri + window.location.hash = e; + updateDocumentationContent(app, app.bindings); } else { console.log("Loading samples!"); await loadSamples().then(() => { app.docs = documentation_factory(app); app.currentDocumentationPane = e; - updateDocumentationContent(app, bindings); + updateDocumentationContent(app, app.bindings); }); } }); diff --git a/src/main.ts b/src/main.ts index a8efb33..e0581f8 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,10 +12,10 @@ import { Universe, loadUniverserFromUrl, } from "./FileManagement"; -import { singleElements, buttonGroups, ElementMap } from "./DomElements"; +import { singleElements, buttonGroups, ElementMap, createDocumentationStyle } from "./DomElements"; import { registerFillKeys, registerOnKeyDown } from "./KeyActions"; import { installEditor } from "./EditorSetup"; -import { documentation_factory } from "./Documentation"; +import { documentation_factory, documentation_pages, showDocumentation, updateDocumentationContent } from "./Documentation"; import { EditorView } from "codemirror"; import { Clock } from "./Clock"; import { loadSamples, UserAPI } from "./API"; @@ -87,6 +87,8 @@ export class Editor { mode: "scope", size: 1, }; + bindings: any[] = []; + documentationStyle: any = {}; // UserAPI api: UserAPI; @@ -191,7 +193,7 @@ export class Editor { // ================================================================================ registerFillKeys(this); - registerOnKeyDown(this); + registerOnKeyDown(this); installInterfaceLogic(this); scriptBlinkers(); @@ -219,6 +221,24 @@ export class Editor { this.settings.theme = "Everblush"; this.readTheme(this.settings.theme); } + + this.documentationStyle = createDocumentationStyle(this); + this.bindings = Object.keys(this.documentationStyle).map((key) => ({ + type: "output", + regex: new RegExp(`<${key}([^>]*)>`, "g"), + //@ts-ignore + replace: (match, p1) => `<${key} class="${this.documentationStyle[key]}" ${p1}>`, + })); + + // Get documentation id from hash parameter + const document_id = window.location.hash.slice(1); + if(document_id && document_id !== "" && documentation_pages.includes(document_id)) { + this.currentDocumentationPane = document_id + updateDocumentationContent(this, this.bindings); + showDocumentation(this); + } + + } private getBuffer(type: string): any {