Font size slider is now working
This commit is contained in:
13
index.html
13
index.html
@ -92,8 +92,8 @@
|
||||
<!-- 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 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="default-range" 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 dark:bg-gray-700">
|
||||
<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 dark:bg-gray-700">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Font Family Selection -->
|
||||
@ -112,22 +112,21 @@
|
||||
</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 class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
|
||||
<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-gray-900 dark:text-white">GitHub</h5>
|
||||
<p class="font-normal text-gray-700 dark:text-gray-400">Get involved in the dev process and or file an issue for a broken feature</p>
|
||||
</a>
|
||||
<a class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
|
||||
<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-gray-900 dark:text-white">Discord</h5>
|
||||
<p class="font-normal text-gray-700 dark:text-gray-400">Join the community on the official Topos/Sardine Discord Server.</p>
|
||||
</a>
|
||||
<a class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-800 hover:bg-gray-700">
|
||||
<a href="https://topos.raphaelforment.fr" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-800 hover:bg-gray-700">
|
||||
<h5 class="mb-2 text-xl lg:text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Website</h5>
|
||||
<p class="font-normal text-gray-700 dark:text-gray-400">Documentation, videos and more on the official website.</p>
|
||||
</a>
|
||||
</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 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>
|
||||
<button data-modal-hide="defaultModal" type="button" class="mt-4 mb-4 text-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Cancel</button>
|
||||
<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>
|
||||
|
||||
41
src/main.ts
41
src/main.ts
@ -30,13 +30,14 @@ export const fontSizeModif = EditorView.theme(
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
export class Editor {
|
||||
// Data structures for editor text management
|
||||
universes: Universes = template_universes;
|
||||
selected_universe: string;
|
||||
local_index: number = 1;
|
||||
editor_mode: "global" | "local" | "init" = "local";
|
||||
fontSize: Compartment;
|
||||
|
||||
|
||||
settings = new AppSettings();
|
||||
editorExtensions: Extension[] = [];
|
||||
@ -77,6 +78,9 @@ export class Editor {
|
||||
settings_button: HTMLButtonElement = document.getElementById(
|
||||
"settings-button"
|
||||
) as HTMLButtonElement;
|
||||
close_settings_button: HTMLButtonElement = document.getElementById(
|
||||
'close-settings-button'
|
||||
) as HTMLButtonElement;
|
||||
universe_viewer: HTMLDivElement = document.getElementById(
|
||||
"universe-viewer"
|
||||
) as HTMLDivElement;
|
||||
@ -94,6 +98,10 @@ export class Editor {
|
||||
"local-script-tabs"
|
||||
) as HTMLDivElement;
|
||||
|
||||
// Font Size Slider
|
||||
font_size_slider: HTMLInputElement = document.getElementById('font-size-slider') as HTMLInputElement;
|
||||
font_size_witness: HTMLSpanElement = document.getElementById('font-size-witness') as HTMLSpanElement;
|
||||
|
||||
constructor() {
|
||||
// ================================================================================
|
||||
// Loading the universe from local storage
|
||||
@ -120,10 +128,14 @@ export class Editor {
|
||||
// CodeMirror Management
|
||||
// ================================================================================
|
||||
|
||||
this.userPlugins = this.settings.vimMode ? [] : [vim()];
|
||||
this.fontSize = new Compartment();
|
||||
const vimPlugin = this.settings.vimMode ? vim() : [];
|
||||
this.userPlugins = [
|
||||
vimPlugin,
|
||||
];
|
||||
|
||||
this.editorExtensions = [
|
||||
fontSizeModif,
|
||||
this.fontSize.of(fontSizeModif),
|
||||
editorSetup,
|
||||
oneDark,
|
||||
rangeHighlighting(),
|
||||
@ -301,6 +313,29 @@ export class Editor {
|
||||
editor?.classList.add('invisible')
|
||||
})
|
||||
|
||||
this.close_settings_button.addEventListener("click", () => {
|
||||
let modal_settings = document.getElementById('modal-settings');
|
||||
let editor = document.getElementById('editor');
|
||||
modal_settings?.classList.add('invisible')
|
||||
editor?.classList.remove('invisible')
|
||||
})
|
||||
|
||||
this.font_size_slider.addEventListener("input", () => {
|
||||
const new_value = this.font_size_slider.value;
|
||||
// Change the font-size-witness font size to 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", },
|
||||
".cm-gutters": { fontSize : new_value + "px", },
|
||||
});
|
||||
this.view.dispatch({
|
||||
effects: this.fontSize.reconfigure(new_font_size)
|
||||
});
|
||||
|
||||
console.log(this.font_size_slider.value);
|
||||
})
|
||||
|
||||
this.buffer_search.addEventListener("keydown", (event) => {
|
||||
this.changeModeFromInterface("local");
|
||||
if (event.key === "Enter") {
|
||||
|
||||
Reference in New Issue
Block a user