Auto-resize config editor when window is resized

This commit is contained in:
Dragory 2021-08-20 23:22:10 +03:00
parent f31ef176b4
commit a4d22e0e7a
No known key found for this signature in database
GPG key ID: 5F387BA66DF8AAC1

View file

@ -24,7 +24,6 @@
@init="editorInit" @init="editorInit"
lang="yaml" lang="yaml"
theme="tomorrow_night" theme="tomorrow_night"
:width="editorWidth"
:height="editorHeight" :height="editorHeight"
ref="aceEditor" /> ref="aceEditor" />
</div> </div>
@ -38,6 +37,7 @@
import AceEditor from "vue2-ace-editor"; import AceEditor from "vue2-ace-editor";
let editorKeybindListener; let editorKeybindListener;
let windowResizeListener;
export default { export default {
components: { components: {
@ -69,6 +69,12 @@
window.removeEventListener("keydown", editorKeybindListener); window.removeEventListener("keydown", editorKeybindListener);
editorKeybindListener = null; editorKeybindListener = null;
} }
if (windowResizeListener) {
window.removeEventListener("resize", windowResizeListener);
windowResizeListener = null;
}
next(); next();
}, },
data() { data() {
@ -105,6 +111,7 @@
tabSize: 2 tabSize: 2
}); });
// Add Ctrl+S/Cmd+S save shortcut
const isMac = /mac/i.test(navigator.platform); const isMac = /mac/i.test(navigator.platform);
const modKeyPressed = (ev: KeyboardEvent) => (isMac ? ev.metaKey : ev.ctrlKey); const modKeyPressed = (ev: KeyboardEvent) => (isMac ? ev.metaKey : ev.ctrlKey);
const nonModKeyPressed = (ev: KeyboardEvent) => (isMac ? ev.ctrlKey : ev.metaKey); const nonModKeyPressed = (ev: KeyboardEvent) => (isMac ? ev.ctrlKey : ev.metaKey);
@ -130,7 +137,24 @@
}; };
window.addEventListener("keydown", editorKeybindListener); window.addEventListener("keydown", editorKeybindListener);
// Auto-fit editor to window
this.fitEditorToWindow(); 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() { fitEditorToWindow() {
const mainContainer = document.querySelector('.dashboard'); const mainContainer = document.querySelector('.dashboard');