adding documentation pane (empty)

This commit is contained in:
2023-08-18 13:05:43 +02:00
parent b79144613a
commit ddb037e944
3 changed files with 50 additions and 16 deletions

View File

@ -42,20 +42,7 @@
</a>
<nav class="py-0 flex flex-wrap items-center text-base absolute right-0">
<!--
<div id="blinkers" class="flex flex-row space-x-2 pr-4 pb-1.5 justify-center items-center">
<p id="blinker-1" class="text-white text-5xl">•</p>
<p id="blinker-2" class="text-white text-5xl">•</p>
<p id="blinker-3" class="text-white text-5xl">•</p>
<p id="blinker-4" class="text-white text-5xl">•</p>
<p id="blinker-5" class="text-white text-5xl">•</p>
<p id="blinker-6" class="text-white text-5xl">•</p>
<p id="blinker-7" class="text-white text-5xl">•</p>
<p id="blinker-8" class="text-white text-5xl">•</p>
<p id="blinker-9" class="text-white text-5xl">•</p>
</div>
-->
<a id="play-button-1" class="mr-5">
<a id="play-button-1" class="mr-5">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 14 16">
<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
</svg>
@ -75,11 +62,39 @@
<path d="M7.958 19.393a7.7 7.7 0 0 1-6.715-3.439c-2.868-4.832 0-9.376.944-10.654l.091-.122a3.286 3.286 0 0 0 .765-3.288A1 1 0 0 1 4.6.8c.133.1.313.212.525.347A10.451 10.451 0 0 1 10.6 9.3c.5-1.06.772-2.213.8-3.385a1 1 0 0 1 1.592-.758c1.636 1.205 4.638 6.081 2.019 10.441a8.177 8.177 0 0 1-7.053 3.795Z"/>
</svg>
</a>
<a id="doc-button-1" class="mr-5 hover:text-gray-900">
<svg class="w-8 h-8 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
<path d="M9 1.334C7.06.594 1.646-.84.293.653a1.158 1.158 0 0 0-.293.77v13.973c0 .193.046.383.134.55.088.167.214.306.366.403a.932.932 0 0 0 .5.147c.176 0 .348-.05.5-.147 1.059-.32 6.265.851 7.5 1.65V1.334ZM19.707.653C18.353-.84 12.94.593 11 1.333V18c1.234-.799 6.436-1.968 7.5-1.65a.931.931 0 0 0 .5.147.931.931 0 0 0 .5-.148c.152-.096.279-.235.366-.403.088-.167.134-.357.134-.55V1.423a1.158 1.158 0 0 0-.293-.77Z"/>
</svg>
</a>
</nav>
</nav>
</div>
</header>
<div id="documentation" class="hidden">
<div class="text-sm font-medium text-center text-gray-200 border-b border-gray-200 ">
<ul class="flex flex-wrap -mb-px">
<li class="mr-2">
<a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-white hover:border-gray-100 ">Basics</a>
</li>
<li class="mr-2">
<a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-white hover:border-gray-100 ">Universes</a>
</li>
<li class="mr-2">
<a href="#" class="inline-block p-4 text-white border-b-2 border-blue-600 rounded-t-lg active" aria-current="page">Notes and sounds</a>
</li>
<li class="mr-2">
<a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-white hover:border-gray-100">Functions</a>
</li>
<li class="mr-2">
<a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-white hover:border-gray-100">Reference</a>
</li>
</ul>
</div>
<p class="text-xl text-white ml-4 mr-4 mt-4">There is nothing to see! Come back later!</p>
</div>
<div id="app">
<!-- This modal is used for switching between buffers -->
@ -151,7 +166,6 @@
<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4">
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
</div>
</div>
</div>
</div>

View File

@ -52,7 +52,6 @@ export const tryEvaluate = async (
tryCatchWrapper(application, wrappedCode as string),
delay(timeout),
]);
if (isCodeValid) {
code.committed = code.candidate;
const newFunction = new Function(`"use strict";try{${wrappedCode}} catch (e) {console.log(e)};`);

View File

@ -64,6 +64,7 @@ export class Editor {
document.getElementById("clear-button-1") as HTMLButtonElement,
document.getElementById("clear-button-2") as HTMLButtonElement,
];
documentation_button: HTMLButtonElement = document.getElementById("doc-button-1") as HTMLButtonElement;
// Script selection elements
local_button: HTMLButtonElement = document.getElementById(
@ -269,6 +270,12 @@ export class Editor {
this.view.focus();
}
if (event.ctrlKey && event.key === "d") {
event.preventDefault();
this.showDocumentation();
}
if (event.ctrlKey && event.key === "i") {
event.preventDefault();
this.changeModeFromInterface("init");
@ -333,6 +340,10 @@ export class Editor {
});
});
this.documentation_button.addEventListener("click", () => {
this.showDocumentation();
})
this.pause_buttons.forEach((button) => {
button.addEventListener("click", () => {
this.setButtonHighlighting("pause", true);
@ -454,6 +465,16 @@ export class Editor {
return this.universes[this.selected_universe.toString()].locals[this.local_index];
}
showDocumentation() {
if (document.getElementById("app")?.classList.contains("hidden")) {
document.getElementById('app')?.classList.remove('hidden');
document.getElementById('documentation')?.classList.add('hidden');
} else {
document.getElementById('app')?.classList.add('hidden');
document.getElementById('documentation')?.classList.remove('hidden');
}
}
changeToLocalBuffer(i: number) {
// Updating the CSS accordingly
const tabs = document.querySelectorAll('[id^="tab-"]');