client/browser/components/bundle/render.js

// Copyright 2015 The Vanadium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

var debug = require('debug')('components:bundle:render');
var h = require('mercury').h;
var hg = require('mercury');
var results = require('../results').render;
var toArray = require('../../util').toArray;
var click = require('../../event-handlers/click');
var path = require('path');
var aceWidget = require('../../widgets/ace-widget');
var aceChange = require('../../event-handlers/ace-change');

module.exports = render;

function render(state) {
  debug('update %o', state);

  // NOTE: It is possible to try and render a bundle without it being
  // populated from the API yet. In that case show a loader.
  if (! state) {
    return h('.bundle', 'Loading...');
  }

  return h('.bundle', [
    hg.partial(code, state, state.channels),
    hg.partial(results, state.results, state.results.channels),
  ]);
}

function code(state, channels) {
  return h('.code', [
    hg.partial(tabs, state, channels),
    hg.partial(editors, state, channels)
  ]);
}

function tabs(state, channels) {
  var files = toArray(state.files);

  return h('.tabs', files.map(tab, state));
}

function tab(file, index, array) {
  var state = this;
  var channels = state.channels;
  var name = path.basename(file.name);

  return h('a.tab', {
    className: state.tab === file.name ? 'active' : '',
    href: '#',
    'ev-click': click(channels.tab, { tab: file.name })
  }, name);
}



function editors(state, channels) {
  var files = toArray(state.files);

  return h('.editors', files.map(editor, state));
}

function editor(file, index, files) {
  var state = this;
  var channels = state.channels;
  var isActive = state.tab === file.name;

  return h('.editor', {
    className: (isActive ? 'active' : ''),
    'ev-ace-change': aceChange(channels.fileChange),
  }, [
    aceWidget(file)
  ]);
}