web/browser/components/device-set/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 click = require('../../events/click');
var css = require('./pdf-viewer.css');
var debug = require('debug')('reader:device-set');
var drag = require('../../events/drag');
var dragover = require('../../events/dragover');
var drop = require('../../events/drop');
var format = require('format');
var h = require('mercury').h;
var hg = require('mercury');
var insert = require('insert-css');
var managerCSS = require('./manager.css');
var modal = require('../modal');
var PDFWidget = require('./pdf-widget');

module.exports = render;

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

  insert(css);

  var node = manager(state, channels);

  return h('.pdf-viewer', [
    hg.partial(progress, state.progress),
    hg.partial(controls, state, channels),
    h('.pdf-widget', new PDFWidget(state)),
    hg.partial(modal.render, state.modal, node)
  ]);
}

function progress(state) {
  if (state >= 100) {
    return h('.progress.hidden');
  }

  return h('.progress', [
    h('.progress-bar', {
      style: { width: state + '%' }
    })
  ]);
}

function controls(state, channels) {
  if (state.progress < 100) {
    return h('.pdf-controls.hidden');
  }

  return h('.pdf-controls', [
    h('a.back', {
      href: '/#!/'
    }, [
      h('i.material-icons', 'arrow_back')
    ]),
    h('.title', state.file.title),
    h('.pager', [
      h('.meta', format('Page: %s of %s',
        state.pages.current,
        state.pages.total)),
      h('a.previous', {
        href: '#',
        'ev-click': click(channels.previous)
      }, [
        h('i.material-icons', 'chevron_left'),
      ]),
      h('a.next', {
        href: '#',
        'ev-click': click(channels.next)
      }, [
        h('i.material-icons', 'chevron_right'),
      ])
    ]),
    h('a.menu', {
      href: '#',
      'ev-click': click(channels.manage)
    },
    [
      h('i.material-icons', 'more_vert'),
    ])
  ]);
}

function manager(state, channels) {
  // If the initiator is the current device show the device list manager UI.
  // Else show the remote control manager.
  insert(managerCSS);

  // TODO(jasoncampbell): Refactor so that re-indexing is not required.
  // Use a single loop to create each linked, and unlinked vnode children arrays
  // which are sorted in the correct order.
  var linked = [];
  var unlinked = [];
  var keys = Object.keys(state.devices);
  var length = keys.length;
  for (var i = 0; i < length; i++) {
    var id = keys[i];
    var device = state.devices[id];
    if (device.linked) {
      // Add the node to the linked array at the correct index to preserve the
      // order.
      linked.push(device);
    } else {
      unlinked.push(device);
    }
  }

  linked = linked.sort(function sort(a, b){
    var value = 0;

    if (a.index > b.index) {
      value = 1;
    }

    if (a.index < b.index) {
      value = -1;
    }

    return value;
  });

  return h('.manager', [
    h('.devices-linked', {
      'ev-event': [
        dragover(channels.link, {
          id: state.manager.dragID
        }),
        drop(channels.reset)
      ]
    }, [
      h('.title', 'Linked devices (drag to reorder)'),
      h('.list', linked.map(function (device) {
        return hg.partial(item, device, state, channels);
      }))
    ]),
    h('.devices-unlinked', {
      'ev-event': drop(channels.unlink, {
        id: state.manager.dragID
      })
    }, [
      h('.title', 'Unlinked devices (drag here to unlink)'),
      h('.list', unlinked.map(function (device) {
        return hg.partial(item, device, state, channels);
      }))
    ])
  ]);
}

function item(device, state, channels) {
  if (state.manager.dragID === device.id) {
    return h('.item.placeholder', {
      'ev-event': drop(channels.reset)
    }, format('PLACEHOLDER: %s - index: %s', device.id, device.index));
  }

  var current = device.current ? 'CURRENT' : '';

  var classNames = [];
  if (state.manager.overID) {
    classNames.push('over');
  }

  if (device.current) {
    classNames.push('current');
  }

  var events = [
    drag(channels.drag, { id: device.id }),
  ];

  if (device.linked) {
    // Only reorder linked devices.
    events.push(dragover(channels.reorder, {
      droptarget: device.id,
      dragtarget: state.manager.dragID
    }));
  }

  return h('.item', {
    className: classNames.join(' '),
    draggable: true,
    'ev-event': events,
  }, format('%s - index: %s %s', device.id, device.index, current));
}