Configuration saving and loading operational; Tweaked styling

src/assets/xterm_config/functionality.js

@@ -99,7 +99,8 @@ document.querySelector("#save_button").addEventListener("click", () => {
 		if (option.json === true && option.type === "text") newValue = JSON.parse(newValue);
 		setItem(newConfig, option.path, newValue);
 	});
-	window.wetty_apply_config(newConfig);
+	console.log(newConfig);
+	window.wetty_save_config(newConfig);
 	window.wetty_close_config();
 });
 document.querySelector("#cancel_button").addEventListener("click", () => {

src/assets/xterm_config/style.css

@@ -4,12 +4,9 @@ body {
 	display: flex;
 	flex-flow: column nowrap;
 	font-family: monospace;
-	font-size: 1.2rem;
+	font-size: 1rem;
 	color: white;
 }
-body>* {
-	margin-bottom: 1em;
-}
 .templ { display: none; }
 h2 { text-align: center; text-decoration: underline; }
 
@@ -33,7 +30,7 @@ header button {
 	align-items: center;
 }
 .boolean_option input, .number_option input, .color_option input, .text_option input, .enum_option select {
-	margin: 0.5em;
+	margin: 0 0.5em;
 	font-size: 1em;
 	background-color: hsl(0,0%,20%);
 	color: white;

src/client/shared/elements.ts

@@ -2,4 +2,4 @@ export const overlay = document.getElementById('overlay');
 export const terminal = document.getElementById('terminal');
 export const editor = document.querySelector(
   '#options .editor',
-) as HTMLInputElement;
+) as HTMLIFrameElement;

src/client/wetty/term/confiruragtion.ts

@@ -11,19 +11,23 @@ export function configureTerm(term: Term): void {
   Object.entries(options).forEach(([key, value]) => {
     term.setOption(key, value);
   });
-  const config = JSON.stringify(options, null, 2);
-  if (!_.isNull(editor)) {
-    editor.value = config;
-    editor.addEventListener('keyup', onInput(term));
   const toggle = document.querySelector('#options .toggler');
   const optionsElem = document.getElementById('options');
-    if (!_.isNull(toggle) && !_.isNull(optionsElem)) {
+  if (editor == null || toggle == null || optionsElem == null) throw new Error("Couldn't initialize configuration menu");
+
+  function editorOnLoad() {
+    (editor.contentWindow as any).loadOptions(loadOptions());
+    (editor.contentWindow as any).wetty_close_config = () => { optionsElem!.classList.toggle('opened'); };
+    (editor.contentWindow as any).wetty_save_config = (newConfig: any) => { onInput(term, newConfig); };
+  }
+  if ((editor.contentDocument || editor.contentWindow!.document).readyState === "complete") editorOnLoad();
+  editor.addEventListener("load", editorOnLoad);
+
   toggle.addEventListener('click', e => {
+    (editor.contentWindow as any).loadOptions(loadOptions());
     optionsElem.classList.toggle('opened');
     e.preventDefault();
   });
-    }
-  }
 
   term.attachCustomKeyEventHandler(copyShortcut);
 

src/client/wetty/term/confiruragtion/editor.ts

@@ -1,11 +1,8 @@
-import JSON5 from 'json5';
-
 import type { Term } from '../../shared/type';
-import { editor } from '../../../shared/elements';
+// import { editor } from '../../../shared/elements';
 
-export const onInput = (term: Term) => (): void => {
+export const onInput = (term: Term, updated: any) => {
   try {
-    const updated = JSON5.parse(editor.value);
     const updatedConf = JSON.stringify(updated, null, 2);
     if (localStorage.options === updatedConf) return;
     Object.keys(updated).forEach(key => {
@@ -13,11 +10,11 @@ export const onInput = (term: Term) => (): void => {
       term.setOption(key, value);
     });
     term.resizeTerm();
-    editor.value = updatedConf;
+    // editor.classList.remove('error');
-    editor.classList.remove('error');
     localStorage.options = updatedConf;
-  } catch {
+  } catch (e) {
+    console.error(e);
     // skip
-    editor.classList.add('error');
+    // editor.classList.add('error');
   }
 };