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>