pgs-cli/tags/terminal.tag

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

  this.on('mount', function() {
    this.setshell()
    this.tags.commandline.setprompt(this.shell.prompt)
  })

  setshell() {
    var shell = { 'process': function() { return ''; } }
    if (opts.shell !== undefined && window[opts.shell] !== undefined) {
      shell = window[opts.shell]
    }
    this.shell = shell
  }

  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 }>
    { prompt } <input type='text' id='command' />
  </form>

  <style>
    #command {
      background: transparent;
      border: none; outline: none;
      padding: 0; margin: 0;
      width: 90%;
    }
  </style>

  this.on('mount', function() {
    document.getElementById('command').focus()
  })

  setprompt(value) {
    if (value) {
      this.prompt = value
      this.update()
    }
  }

  this.prompt = '$'
  this.setprompt(opts.prompt)

  process(e) {
    this.parent.process(this.prompt, this.command.value)
  }
</commandline>

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

  this.hist = []

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

  if ( opts.welcome !== undefined) {
    this.add(opts.welcome)
  }
</history>

<raw>
  <span></span>

  this.root.innerHTML = opts.content
</raw>