From a4d22e0e7a6400710be19a3607bd2c973f47c777 Mon Sep 17 00:00:00 2001 From: Dragory <2606411+Dragory@users.noreply.github.com> Date: Fri, 20 Aug 2021 23:22:10 +0300 Subject: [PATCH] Auto-resize config editor when window is resized --- .../dashboard/GuildConfigEditor.vue | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/dashboard/src/components/dashboard/GuildConfigEditor.vue b/dashboard/src/components/dashboard/GuildConfigEditor.vue index e6f780e2..191892ad 100644 --- a/dashboard/src/components/dashboard/GuildConfigEditor.vue +++ b/dashboard/src/components/dashboard/GuildConfigEditor.vue @@ -24,7 +24,6 @@ @init="editorInit" lang="yaml" theme="tomorrow_night" - :width="editorWidth" :height="editorHeight" ref="aceEditor" /> @@ -38,6 +37,7 @@ import AceEditor from "vue2-ace-editor"; let editorKeybindListener; + let windowResizeListener; export default { components: { @@ -69,6 +69,12 @@ window.removeEventListener("keydown", editorKeybindListener); editorKeybindListener = null; } + + if (windowResizeListener) { + window.removeEventListener("resize", windowResizeListener); + windowResizeListener = null; + } + next(); }, data() { @@ -105,6 +111,7 @@ tabSize: 2 }); + // Add Ctrl+S/Cmd+S save shortcut const isMac = /mac/i.test(navigator.platform); const modKeyPressed = (ev: KeyboardEvent) => (isMac ? ev.metaKey : ev.ctrlKey); const nonModKeyPressed = (ev: KeyboardEvent) => (isMac ? ev.ctrlKey : ev.metaKey); @@ -130,7 +137,24 @@ }; window.addEventListener("keydown", editorKeybindListener); + // Auto-fit editor to window this.fitEditorToWindow(); + + if (windowResizeListener) { + window.removeEventListener("resize", windowResizeListener); + } + + let debounceTimeout; + windowResizeListener = (ev: UIEvent) => { + if (debounceTimeout) { + clearTimeout(debounceTimeout); + } + + debounceTimeout = setTimeout(() => { + this.fitEditorToWindow(); + }, 350); + }; + window.addEventListener("resize", windowResizeListener); }, fitEditorToWindow() { const mainContainer = document.querySelector('.dashboard');