begin settings menu rework
This commit is contained in:
88
index.html
88
index.html
@ -196,60 +196,73 @@
|
||||
|
||||
<!-- This modal is used for settings -->
|
||||
<div id="modal-settings" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div class="flex flex flex-col w-full">
|
||||
<div class="grid grid-col-3 w-full">
|
||||
<div class="bg-white rounded-lg mx-48 my-48 space-y-8 px-8">
|
||||
<h1 class="mt-12 font-semibold rounded bg-gray-800 justify-center text-center text-white mx-4 text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
|
||||
|
||||
<div class="flex flex-row mr-4 ml-4">
|
||||
<!-- Font Size Selection -->
|
||||
<div class="space-y-6 w-auto min-w-screen px-4">
|
||||
<div id="font-size-selector" class="flex flex-row space-x-4 rounded-lg">
|
||||
<label id="font-size-witness" for="default-range" class="text-xs lg:text-sm font-medium text-black w-2/5 lg:w-1/5">Font Size: 22px</label>
|
||||
<input id="font-size-slider" type="range" step=1 value="22" class="align-middle w-3/5 lg:w-4/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer bg-gray-700">
|
||||
<div class="bg-gray-200 rounded-lg w-full pt-2">
|
||||
<p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">Font Settings</p>
|
||||
<div class="mb-6 mx-4 font-semibold">
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal">Size:</label>
|
||||
<input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Font Family Selection -->
|
||||
<div class="space-y-6 w-auto min-w-screen px-4">
|
||||
<label for="font" class="block ml-5 mb-2 font-medium">Font (<b>TODO</b>):</label>
|
||||
<select id="font-family" class="bg-gray-50 w-48 ml-4 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
|
||||
<option selected>Choose a font</option>
|
||||
<option value="US">IBM Plex Mono</option>
|
||||
<option value="CA">Victor Mono</option>
|
||||
<option value="FR">Courier</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Editor mode selection -->
|
||||
<div class="flex flex-row space-x-4 justify-center px-2 mx-2">
|
||||
<div class="flex items-center pl-4 border border-gray-200 rounded border-gray-700 w-full">
|
||||
<input id="normal-mode-radio" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600">
|
||||
<label id="normal-mode" for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Mode</label>
|
||||
</div>
|
||||
<div class="flex items-center pl-4 border rounded border-gray-700 w-full">
|
||||
<input checked id="vim-mode-radio" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label id="vim-mode" for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-lg ml-4 w-full pt-2">
|
||||
<p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">Editor options</p>
|
||||
<!-- Checkboxes -->
|
||||
<div class="flex flex-row">
|
||||
<div class="flex items-center mb-4 ml-8">
|
||||
<div class="pr-4">
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Vim Mode</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-8">
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Time Position</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-8">
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-8">
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Information card -->
|
||||
<div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">
|
||||
<a href="https://github.com/Bubobubobubobubo/Topos" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
|
||||
<h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-white">GitHub</h5>
|
||||
<p class="font-normal text-white">Get involved in the dev process and or file an issue for a broken feature</p>
|
||||
</a>
|
||||
<a href="https://discord.gg/aPgV7mSFZh" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
|
||||
<h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-white">Discord</h5>
|
||||
<p class="font-normal text-white">Join the community on the official Topos/Sardine Discord Server.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-200 rounded-lg ml-4 w-full pt-2">
|
||||
<p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">File Management</p>
|
||||
<div class="flex flex-col space-y-2">
|
||||
<button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Download universes</span>
|
||||
</button>
|
||||
<button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Upload universes</span>
|
||||
</button>
|
||||
<button id="upload-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold py-2 px-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<span>Destroy universes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@ -295,12 +308,17 @@
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Open settings" id="settings-button" class="lg:block sm:hidden p-2 text-gray-200 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg text-gray-200 bg-gray-800">
|
||||
<a title="Application Settings" id="settings-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- Tabs for local files -->
|
||||
|
||||
21
src/API.ts
21
src/API.ts
@ -7,6 +7,7 @@ import { SoundEvent } from "./classes/SoundEvent";
|
||||
import { MidiEvent } from "./classes/MidiEvent";
|
||||
import { LRUCache } from "lru-cache";
|
||||
import { InputOptions, Player } from "./classes/ZPlayer";
|
||||
import { template_universes } from "./AppSettings";
|
||||
import {
|
||||
samples,
|
||||
initAudioOnFirstClick,
|
||||
@ -277,7 +278,7 @@ export class UserAPI {
|
||||
evaluations: 0,
|
||||
};
|
||||
};
|
||||
cs = this.clear_script;
|
||||
cs = this.delete_script;
|
||||
|
||||
copy_script = (from: number, to: number): void => {
|
||||
/**
|
||||
@ -310,6 +311,24 @@ export class UserAPI {
|
||||
this.app.updateKnownUniversesView();
|
||||
};
|
||||
|
||||
big_bang = (): void => {
|
||||
/**
|
||||
* Clears all universes
|
||||
* TODO: add documentation. This doesn't work super well.
|
||||
*/
|
||||
if (confirm("Are you sure you want to delete all universes?")) {
|
||||
this.app.universes = {
|
||||
...template_universes,
|
||||
};
|
||||
this.app.settings.saveApplicationToLocalStorage(
|
||||
this.app.universes,
|
||||
this.app.settings
|
||||
);
|
||||
}
|
||||
this.app.selected_universe = "Default";
|
||||
this.app.updateKnownUniversesView();
|
||||
};
|
||||
|
||||
// =============================================================
|
||||
// MIDI related functions
|
||||
// =============================================================
|
||||
|
||||
224
src/main.ts
224
src/main.ts
@ -33,19 +33,24 @@ showdown.setFlavor("github");
|
||||
import showdownHighlight from "showdown-highlight";
|
||||
import { makeStringExtensions } from "./StringExtensions";
|
||||
|
||||
|
||||
// Broadcast that you're opening a page.
|
||||
localStorage.openpages = Date.now();
|
||||
window.addEventListener('storage', function(e) {
|
||||
window.addEventListener(
|
||||
"storage",
|
||||
function (e) {
|
||||
if (e.key == "openpages") {
|
||||
// Listen if anybody else is opening the same page!
|
||||
localStorage.page_available = Date.now();
|
||||
}
|
||||
if (e.key == "page_available") {
|
||||
document.getElementById("all")!.classList.add("invisible")
|
||||
alert("Topos is already opened in another tab. Close this tab now to prevent data loss.");
|
||||
document.getElementById("all")!.classList.add("invisible");
|
||||
alert(
|
||||
"Topos is already opened in another tab. Close this tab now to prevent data loss."
|
||||
);
|
||||
}
|
||||
}, false);
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
const classMap = {
|
||||
h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
|
||||
@ -135,6 +140,14 @@ export class Editor {
|
||||
"load-universe-button"
|
||||
) as HTMLButtonElement;
|
||||
|
||||
download_universe_button: HTMLButtonElement = document.getElementById(
|
||||
"download-universes"
|
||||
) as HTMLButtonElement;
|
||||
|
||||
upload_universe_button: HTMLButtonElement = document.getElementById(
|
||||
"upload-universes"
|
||||
) as HTMLButtonElement;
|
||||
|
||||
documentation_button: HTMLButtonElement = document.getElementById(
|
||||
"doc-button-1"
|
||||
) as HTMLButtonElement;
|
||||
@ -186,12 +199,19 @@ export class Editor {
|
||||
) as HTMLDivElement;
|
||||
|
||||
// Font Size Slider
|
||||
font_size_slider: HTMLInputElement = document.getElementById(
|
||||
"font-size-slider"
|
||||
font_size_input: HTMLInputElement = document.getElementById(
|
||||
"font-size-input"
|
||||
) as HTMLInputElement;
|
||||
|
||||
// Font Family Selector
|
||||
font_family_selector: HTMLSelectElement = document.getElementById(
|
||||
"font-family"
|
||||
) as HTMLSelectElement;
|
||||
|
||||
// Vim mode checkbox
|
||||
vim_mode_checkbox: HTMLInputElement = document.getElementById(
|
||||
"vim-mode"
|
||||
) as HTMLInputElement;
|
||||
font_size_witness: HTMLSpanElement = document.getElementById(
|
||||
"font-size-witness"
|
||||
) as HTMLSpanElement;
|
||||
|
||||
// Line Numbers checkbox
|
||||
line_numbers_checkbox: HTMLInputElement = document.getElementById(
|
||||
@ -245,7 +265,6 @@ export class Editor {
|
||||
public hydra: any = this.hydra_backend.synth;
|
||||
|
||||
constructor() {
|
||||
|
||||
// ================================================================================
|
||||
// Loading the settings
|
||||
// ================================================================================
|
||||
@ -264,22 +283,23 @@ export class Editor {
|
||||
|
||||
this.universes = {
|
||||
...this.settings.universes,
|
||||
...template_universes
|
||||
...template_universes,
|
||||
};
|
||||
|
||||
if (this.settings.load_demo_songs) {
|
||||
let random_example = examples[Math.floor(Math.random() * examples.length)];
|
||||
this.selected_universe = "Welcome"
|
||||
let random_example =
|
||||
examples[Math.floor(Math.random() * examples.length)];
|
||||
this.selected_universe = "Welcome";
|
||||
this.universes[this.selected_universe].global.committed = random_example;
|
||||
this.universes[this.selected_universe].global.candidate = random_example;
|
||||
} else {
|
||||
this.selected_universe = this.settings.selected_universe;
|
||||
if (this.universes[this.selected_universe] === undefined)
|
||||
this.universes[this.selected_universe] = structuredClone(template_universe)
|
||||
this.universes[this.selected_universe] =
|
||||
structuredClone(template_universe);
|
||||
}
|
||||
this.universe_viewer.innerHTML = `Topos: ${this.selected_universe}`;
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// Audio context and clock
|
||||
// ================================================================================
|
||||
@ -534,7 +554,8 @@ export class Editor {
|
||||
button.addEventListener("click", () => {
|
||||
this.setButtonHighlighting("clear", true);
|
||||
if (confirm("Do you want to reset the current universe?")) {
|
||||
this.universes[this.selected_universe] = structuredClone(template_universe);
|
||||
this.universes[this.selected_universe] =
|
||||
structuredClone(template_universe);
|
||||
this.updateEditorView();
|
||||
}
|
||||
});
|
||||
@ -544,6 +565,63 @@ export class Editor {
|
||||
this.showDocumentation();
|
||||
});
|
||||
|
||||
this.upload_universe_button.addEventListener("click", () => {
|
||||
const fileInput = document.createElement("input");
|
||||
fileInput.type = "file";
|
||||
fileInput.accept = ".json";
|
||||
|
||||
fileInput.addEventListener("change", (event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file, "UTF-8");
|
||||
|
||||
reader.onload = (evt) => {
|
||||
const data = JSON.parse(evt.target!.result as string);
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
this.universes[key] = value as Universe;
|
||||
}
|
||||
};
|
||||
reader.onerror = (evt) => {
|
||||
console.error("An error occurred reading the file:", evt);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
document.body.appendChild(fileInput);
|
||||
fileInput.click();
|
||||
document.body.removeChild(fileInput);
|
||||
});
|
||||
|
||||
this.download_universe_button.addEventListener("click", () => {
|
||||
// Trigger save of the universe before downloading
|
||||
this.settings.saveApplicationToLocalStorage(
|
||||
this.universes,
|
||||
this.settings
|
||||
);
|
||||
|
||||
// Generate a file name based on timestamp
|
||||
let fileName = `topos-universes-${Date.now()}.json`;
|
||||
|
||||
// Create Blob and Object URL
|
||||
const blob = new Blob([JSON.stringify(this.settings.universes)], {
|
||||
type: "application/json",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
// Create a temporary anchor and trigger download
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = fileName;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
|
||||
// Revoke the Object URL to free resources
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
|
||||
this.load_universe_button.addEventListener("click", () => {
|
||||
let query = this.buffer_search.value;
|
||||
if (query.length > 2 && query.length < 20 && !query.includes(" ")) {
|
||||
@ -582,35 +660,55 @@ export class Editor {
|
||||
this.changeModeFromInterface("notes")
|
||||
);
|
||||
|
||||
this.font_family_selector.addEventListener("change", () => {
|
||||
let new_font = this.font_family_selector.value;
|
||||
this.settings.font = new_font;
|
||||
let new_font_size = EditorView.theme({
|
||||
"&": { fontSize: this.settings.font_size + "px" },
|
||||
"&content": {
|
||||
fontFamily: new_font,
|
||||
fontSize: this.settings.font_size + "px",
|
||||
},
|
||||
".cm-gutters": { fontSize: this.settings.font_size + "px" },
|
||||
});
|
||||
this.view.dispatch({
|
||||
effects: this.fontSize.reconfigure(new_font_size),
|
||||
});
|
||||
});
|
||||
|
||||
this.font_size_input.addEventListener("input", () => {
|
||||
let new_value: string | number = this.font_size_input.value;
|
||||
this.settings.font_size = Math.max(8, Math.min(48, parseInt(new_value)));
|
||||
|
||||
let new_font_size = EditorView.theme({
|
||||
"&": { fontSize: new_value + "px" },
|
||||
"&content": {
|
||||
fontFamily: this.settings.font,
|
||||
fontSize: new_value + "px",
|
||||
},
|
||||
".cm-gutters": { fontSize: new_value + "px" },
|
||||
});
|
||||
this.view.dispatch({
|
||||
effects: this.fontSize.reconfigure(new_font_size),
|
||||
});
|
||||
this.settings.font_size = parseInt(new_value);
|
||||
});
|
||||
|
||||
this.settings_button.addEventListener("click", () => {
|
||||
this.font_size_slider.value = this.settings.font_size.toString();
|
||||
this.font_size_witness.innerHTML = `Font Size: ${this.settings.font_size}px`;
|
||||
this.font_size_witness?.setAttribute(
|
||||
"style",
|
||||
`font-size: ${this.settings.font_size}px;`
|
||||
);
|
||||
// Populate the font family selector
|
||||
this.font_family_selector.value = this.settings.font;
|
||||
|
||||
if (this.settings.font_size === null) {
|
||||
this.settings.font_size = 12;
|
||||
}
|
||||
this.font_size_input.value = this.settings.font_size.toString();
|
||||
|
||||
// Get the right value to update graphical widgets
|
||||
this.line_numbers_checkbox.checked = this.settings.line_numbers;
|
||||
this.time_position_checkbox.checked = this.settings.time_position;
|
||||
this.tips_checkbox.checked = this.settings.tips;
|
||||
this.load_demo_songs.checked = this.settings.load_demo_songs;
|
||||
|
||||
if (this.settings.vimMode) {
|
||||
let vim = document.getElementById("vim-mode-radio") as HTMLInputElement;
|
||||
let normal = document.getElementById(
|
||||
"normal-mode-radio"
|
||||
) as HTMLInputElement;
|
||||
vim.checked = true;
|
||||
normal.checked = false;
|
||||
} else {
|
||||
let vim = document.getElementById("vim-mode-radio") as HTMLInputElement;
|
||||
let normal = document.getElementById(
|
||||
"normal-mode-radio"
|
||||
) as HTMLInputElement;
|
||||
normal.checked = true;
|
||||
vim.checked = false;
|
||||
}
|
||||
this.vim_mode_checkbox.checked = this.settings.vimMode;
|
||||
|
||||
let modal_settings = document.getElementById("modal-settings");
|
||||
let editor = document.getElementById("editor");
|
||||
@ -624,29 +722,25 @@ export class Editor {
|
||||
let editor = document.getElementById("editor");
|
||||
modal_settings?.classList.add("invisible");
|
||||
editor?.classList.remove("invisible");
|
||||
// Update the font size once again
|
||||
this.view.dispatch({
|
||||
effects: this.fontSize.reconfigure(
|
||||
EditorView.theme({
|
||||
"&": { fontSize: this.settings.font_size + "px" },
|
||||
"&content": {
|
||||
fontFamily: this.settings.font,
|
||||
fontSize: this.settings.font_size + "px",
|
||||
},
|
||||
".cm-gutters": { fontSize: this.settings.font_size + "px" },
|
||||
})
|
||||
),
|
||||
});
|
||||
});
|
||||
|
||||
this.close_universes_button.addEventListener("click", () => {
|
||||
this.openBuffersModal();
|
||||
});
|
||||
|
||||
this.font_size_slider.addEventListener("input", () => {
|
||||
const new_value = this.font_size_slider.value;
|
||||
this.settings.font_size = parseInt(new_value);
|
||||
this.font_size_witness.style.fontSize = `${new_value}px`;
|
||||
this.font_size_witness.innerHTML = `Font Size: ${new_value}px`;
|
||||
|
||||
let new_font_size = EditorView.theme({
|
||||
"&": { fontSize: new_value + "px" },
|
||||
"&content": { fontFamily: this.settings.font },
|
||||
".cm-gutters": { fontSize: new_value + "px" },
|
||||
});
|
||||
this.view.dispatch({
|
||||
effects: this.fontSize.reconfigure(new_font_size),
|
||||
});
|
||||
this.settings.font_size = parseInt(new_value);
|
||||
});
|
||||
|
||||
this.share_button.addEventListener("click", async () => {
|
||||
// trigger a manual save
|
||||
this.currentFile().candidate = app.view.state.doc.toString();
|
||||
@ -656,9 +750,12 @@ export class Editor {
|
||||
await this.share();
|
||||
});
|
||||
|
||||
this.normal_mode_button.addEventListener("click", () => {
|
||||
this.settings.vimMode = false;
|
||||
this.view.dispatch({ effects: this.vimModeCompartment.reconfigure([]) });
|
||||
this.vim_mode_checkbox.addEventListener("change", () => {
|
||||
let checked = this.vim_mode_checkbox.checked ? true : false;
|
||||
this.settings.vimMode = checked;
|
||||
this.view.dispatch({
|
||||
effects: this.vimModeCompartment.reconfigure(checked ? vim() : []),
|
||||
});
|
||||
});
|
||||
|
||||
this.line_numbers_checkbox.addEventListener("change", () => {
|
||||
@ -695,14 +792,6 @@ export class Editor {
|
||||
this.settings.load_demo_songs = checked;
|
||||
});
|
||||
|
||||
|
||||
this.vim_mode_button.addEventListener("click", () => {
|
||||
this.settings.vimMode = true;
|
||||
this.view.dispatch({
|
||||
effects: this.vimModeCompartment.reconfigure(vim()),
|
||||
});
|
||||
});
|
||||
|
||||
this.universe_creator.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
@ -1187,4 +1276,3 @@ window.addEventListener("beforeunload", () => {
|
||||
app.clock.stop();
|
||||
return null;
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user