Auto-resize config editor when window is resized
This commit is contained in:
parent
f31ef176b4
commit
a4d22e0e7a
1 changed files with 25 additions and 1 deletions
|
@ -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');
|
||||||
|
|
Loading…
Add table
Reference in a new issue