pgs-cli/tags/terminal.tag

<terminal>
  <history welcome={ welcome } />
  <commandline prompt={ prompt } />

  var shell = { 'process': function() { return ''; } }
  this.shell = window[opts.shell] ? window[opts.shell] : shell
  this.welcome = this.shell.welcome ? this.shell.welcome : opts.welcome
  this.prompt = this.shell.prompt ? this.shell.prompt : opts.prompt

  process(prompt, input) {
    var input = he.encode(input)
    var output = prompt + ' ' + input + '\n'
    output += this.shell.process(input)
    this.tags.history.add(output)
    this.tags.commandline.setprompt(this.shell.prompt)
    this.tags.commandline.command.value = ''
  }
</terminal>

<commandline>
  <form autocomplete='off' onsubmit={ process }>
    <raw name='lhs' content={ prompt } /><input type='text' name='command' />
  </form>

  <style>
    input[name='command'] {
      background: transparent;
      border: none; outline: none;
      padding: 0; margin: 0;
      width: 90%;
    }
  </style>

  this.on('mount', function() {
    document.getElementsByName('command')[0].focus()
  })

  setprompt(value) {
    if (value) {
      if (typeof this.tags.lhs.write != 'undefined') {
        this.tags.lhs.write(value)
      }
      this.update({ 'prompt': value })
    }
  }

  process(e) {
    this.parent.process(this.prompt, this.command.value)
  }

  this.prompt = '$ '
  this.setprompt(opts.prompt)
</commandline>

<history>
  <div each={ hist }>
    <raw content={ content } />
  </div>

  add(output) {
    if (output) {
      output = output.replace(/(?:\r\n|\r|\n)/g, '<br />');
      this.hist.push({ 'content': output })
      this.update()
    }
  }

  this.hist = []
  this.add(opts.welcome)
</history>

<raw>
  <span></span>

  write(value) {
    this.root.innerHTML = value
  }
  this.write(opts.content)
</raw>