Adding configuration to wetty

6 years ago · 5cc2e68ca9
3 changed files with 96 additions and 1 deletions
--- a/src/client/index.ts
+++ b/src/client/index.ts
@ -15,8 +15,46 @@ const socket = io(window.location.origin, {
 socket.on('connect', () => {
  const term = new Terminal();
  term.open(document.getElementById('terminal'));
-  term.setOption('fontSize', 14);
+  const defaultOptions = { fontSize: 14 };
+  let options: any;
+  try {
+    if (localStorage.options === undefined) {
+      options = defaultOptions;
+    } else {
+      options = JSON.parse(localStorage.options);
+    }
+  } catch {
+    options = defaultOptions;
+  }
+  Object.keys(options).forEach(key => {
+    const value = options[key];
+    term.setOption(key, value);
+  });
+  const code = JSON.stringify(options, null, 2);
+  const editor = document.querySelector('#options .editor');
+  editor.value = code;
+  editor.addEventListener('keyup', e => {
+    try {
+      const updated = JSON.parse(editor.value);
+      const updatedCode = JSON.stringify(updated, null, 2);
+      editor.value = updatedCode;
+      editor.classList.remove('error');
+      localStorage.options = updatedCode;
+      Object.keys(updated).forEach(key => {
+        const value = updated[key];
+        term.setOption(key, value);
+      });
+      resize();
+    } catch {
+      // skip
+      editor.classList.add('error');
+    }
+  });
  document.getElementById('overlay').style.display = 'none';
+  document.querySelector('#options .toggler').addEventListener('click', e => {
+    document.getElementById('options').classList.toggle('opened');
+    e.preventDefault();
+  });
  window.addEventListener('beforeunload', handler, false);
  /*
    term.scrollPort_.screen_.setAttribute('contenteditable', 'false');
--- a/src/client/wetty.scss
+++ b/src/client/wetty.scss
@ -3,6 +3,7 @@
 $black: #000;
 $grey: rgba(0, 0, 0, 0.75);
 $white: #fff;
+$lgrey: #ccc;

 html,
 body {
@ -44,4 +45,53 @@ body {
    position: relative;
    width: 100%;
  }
+
+  #options {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    z-index: 20;
+    height: 16px;
+    width: 16px;
+
+    a.toggler {
+      display: inline-block;
+      position: absolute;
+      right: 1em;
+      top: 0em;
+      font-size: 16px;
+      color: $lgrey;
+      z-index: 20;
+
+      :hover {
+        color: $white;
+      }
+    }
+
+    .editor {
+      background-color: rgba(0, 0, 0, 0.85);
+      padding: 0.5em;
+      border-radius: 0.3em;
+      border-color: rgba(255, 255, 255, 0.25);
+      display: none;
+      position: relative;
+      height: 100%;
+      width: 100%;
+      top: 1em;
+      right: 2em;
+      color: #eee;
+      font-size: 24px;
+    }
+    .editor.error {
+      color: red;
+    }
+  }
+
+  #options.opened {
+    height: 50%;
+    width: 50%;
+    .editor {
+      display: flex;
+    }
+  }
 }
--- a/src/server/server.ts
+++ b/src/server/server.ts
@ -38,6 +38,7 @@ export default function createServer(
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>${title}</title>
    <link rel="stylesheet" href="${basePath}/public/index.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <div id="overlay">
@ -46,6 +47,12 @@ export default function createServer(
        <input type="button" onclick="location.reload();" value="reconnect" />
      </div>
    </div>
+    <div id="options">
+      <a class="toggler"
+         href="#" 
+         alt="Toggle options"><i class="fas fa-cogs"></i></a>
+      <textarea class="editor"></textarea>
+    </div>
    <div id="terminal"></div>
    <script src="${basePath}/public/index.js"></script>
  </body>