pgs-cli/tags/terminal.tag

/**
 * # Terminal Riot Tag
 *
 * A pretend commandline interface capable of displaying output from a "shell"
 * Javascript class. Multiple tags can be used on a page, each will work
 * completely independently.
 *
 * ## Dependencies
 *
 * - riot.js (http://riotjs.com/)
 *
 * ## Usage
 *
 *     <terminal shell='myshellclass' welcome='text' prompt='text'></terminal>
 *
 *     <script src='riot+compiler.min.js'></script>
 *     <script src='myshell.js'></script>
 *     <script src='terminal.tag' type='riot/tag'></script>
 *     <script>riot.mount('terminal')</script>
 *
 * ## Configuring
 *
 * The terminal tag accepts 3 optional parameters:
 *
 * - `shell` - Text specifying the shell class to interact with.
 * - `welcome` - Text/HTML displayed when a terminal is first mounted.
 * - `prompt` - Text/HTML before the commandline input. Defaults to `'$ '`.
 *
 * With no shell logic, the terminal tag will simply print commands entered.
 *
 * Note: `welcome` and `prompt` can also be specified in the shell. Shell values
 * take priority over parameter values.
 *
 * ## Making A Shell Class
 *
 * A shell class should be defined before the tag is mounted by riot. It should
 * expect a single parameter (the terminal tag itself) which will be an
 * observable object.
 *
 * This observable will emit `'cmd_entered'` events containing input for
 * processing. Here is a minimal shell:
 *
 *     // Contents of myshell.js
 *     function myshellclass(events) {
 *        this.prompt = ''
 *        this.welcome = ''
 *        events.on('cmd_entered', function(input) {
 *          // Do processing
 *        })
 *     }
 *
 * The observable also provides events to make things happen:
 *
 *     events.trigger('disp_add', text)   // Append `text` to the display
 *     events.trigger('disp_set', text)   // Display only `text`
 *     events.trigger('disp_clear')       // Clear the display
 *     events.trigger('disp_hide')        // Save the display, then clear it
 *     events.trigger('disp_restore')     // Restore the saved display
 *     events.trigger('prompt_set', text) // Change the command prompt to `text`
 *     events.trigger('prompt_hide')      // Hide the command prompt
 *     events.trigger('prompt_show')      // Show the command prompt
 */
<terminal>
  <display welcome={ welcome } events={ this } />
  <commandline prompt={ prompt } events={ this } />

  <style>
    terminal * { padding: 0; margin: 0; line-height: normal; font-size: 100%; }
  </style>

  /**
   * Create a new shell with the class name given to the terminal tag.
   * The terminal tag object passes events between the shell and the other tags.
   */
  var shell = window[opts.shell] ? new window[opts.shell](this) : {}
  this.welcome = shell.welcome || opts.welcome
  this.prompt = shell.prompt || opts.prompt
</terminal>

<display>
  <div each={ output }>
    <raw content={ content } />
  </div>

  var ev = opts.events
  var self = this
  this.output = []

  this.on('mount', function() {
    this.add(opts.welcome)
  })

  ev.on('disp_add', function(text) {
    self.add(text)
  })

  ev.on('disp_set', function(text) {
    if (text) {
      self.clear()
      self.add(text)
    }
  })

  ev.on('disp_clear', function() {
    self.clear()
  })

  ev.on('disp_hide', function() {
    self.saved = self.output.splice(0, self.output.length)
    self.clear()
  })

  ev.on('disp_restore', function() {
    if (self.saved.length > 0) {
      self.clear()
      self.output = self.saved.splice(0, self.saved.length)
      self.update()
    }
  })

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

  clear() {
    this.output.length = 0
    this.update()
  }
</display>

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

  <style>
    commandline input[name='command'],
    commandline input[name='command']:hover,
    commandline input[name='command']:focus {
      padding: 0; margin: 0; line-height: normal; font-size: 100%;
      background: transparent;
      border: none; outline: none;
      height: auto; width: 70%;
      display: inline;
    }
  </style>

  var ev = opts.events
  var self = this
  this.prompt = opts.prompt || '$ '
  this.visible = true

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

  ev.on('prompt_set', function(value) {
    self.prompt = value
    self.tags.lhs.write(value)
  })

  ev.on('prompt_hide', function() {
    self.update({ visible: false })
  })

  ev.on('prompt_show', function() {
    self.update({ visible: true })
  })

  process() {
    var prompt = this.visible ? this.prompt : ''
    var command = this.encode(this.command.value)
    this.command.value = ''
    ev.trigger('disp_add', prompt + command + '\n')
    ev.trigger('cmd_entered', command)
    // Refocus on the command input to scroll the display and keep it in view.
    this.command.blur()
    this.command.focus()
  }

  encode(text) {
    return text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
  }
</commandline>

<raw>
  <span></span>

  <style>
    raw { white-space: pre-wrap }
  </style>

  // Set the initial html using the `content` option.
  this.on('mount', function() {
    this.write(opts.content)
  })

  // Call `write()` manually to update the html.
  write(text) {
    this.root.innerHTML = text
  }
</raw>