refactoring interface logic

This commit is contained in:
2023-08-21 15:49:16 +02:00
parent 4d6937b933
commit 3968d902aa
3 changed files with 29 additions and 49 deletions

View File

@ -84,6 +84,7 @@
<p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Code</p>
<p rel="noopener noreferrer" id="docs_time" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time</p>
<p rel="noopener noreferrer" id="docs_sound" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Sound</p>
<p rel="noopener noreferrer" id="docs_samples" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Samples</p>
<p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
<p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>
<p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Shortcuts</p>

View File

@ -2,7 +2,9 @@ const key_shortcut = (shortcut: string): string => {
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
};
const injectAvailableSamples = (): string => {};
const injectAvailableSamples = (): string => {
return "";
};
const introduction: string = `
# Welcome
@ -523,6 +525,7 @@ export const documentation = {
code: code,
time: time,
sound: sound,
samples: samples,
midi: midi,
functions: functions,
reference: reference,

View File

@ -501,49 +501,25 @@ export class Editor {
});
tryEvaluate(this, this.universes[this.selected_universe.toString()].init);
// Setting up the documentation page
document
.getElementById("docs_introduction")!
[
"introduction",
"interface",
"code",
"time",
"sound",
"samples",
"midi",
"functions",
"reference",
"shortcuts",
"about",
].forEach((e) => {
let name = `docs_` + e;
document.getElementById(name)!
.addEventListener("click", () => {
this.currentDocumentationPane = "introduction";
this.currentDocumentationPane = e;
this.updateDocumentationContent();
});
document.getElementById("docs_interface")!.addEventListener("click", () => {
this.currentDocumentationPane = "interface";
this.updateDocumentationContent();
});
document.getElementById("docs_code")!.addEventListener("click", () => {
this.currentDocumentationPane = "code";
this.updateDocumentationContent();
});
document.getElementById("docs_time")!.addEventListener("click", () => {
this.currentDocumentationPane = "time";
this.updateDocumentationContent();
});
document.getElementById("docs_sound")!.addEventListener("click", () => {
this.currentDocumentationPane = "sound";
this.updateDocumentationContent();
});
document.getElementById("docs_midi")!.addEventListener("click", () => {
this.currentDocumentationPane = "midi";
this.updateDocumentationContent();
});
document.getElementById("docs_functions")!.addEventListener("click", () => {
this.currentDocumentationPane = "functions";
this.updateDocumentationContent();
});
document.getElementById("docs_reference")!.addEventListener("click", () => {
this.currentDocumentationPane = "reference";
this.updateDocumentationContent();
});
document.getElementById("docs_shortcuts")!.addEventListener("click", () => {
this.currentDocumentationPane = "shortcuts";
this.updateDocumentationContent();
});
document.getElementById("docs_about")!.addEventListener("click", () => {
this.currentDocumentationPane = "about";
this.updateDocumentationContent();
});
// Passing the API to the User