perkeep/server/camlistored/ui/toolbar.js

/**
 * @fileoverview Toolbar for manipulating the display of the blob index page.
 *
 */
goog.provide('camlistore.Toolbar');
goog.provide('camlistore.Toolbar.EventType');

goog.require('goog.dom');
goog.require('goog.dom.classes');
goog.require('goog.events.EventHandler');
goog.require('goog.events.EventType');
goog.require('goog.ui.MenuItem');
goog.require('goog.ui.PopupMenu');
goog.require('goog.ui.Toolbar');
goog.require('goog.ui.ToolbarButton');
goog.require('goog.ui.ToolbarMenuButton');


/**
 * @param {goog.dom.DomHelper=} opt_domHelper DOM helper to use.
 *
 * @extends {goog.ui.Toolbar}
 * @constructor
 */
camlistore.Toolbar = function(opt_domHelper) {
  goog.base(this, opt_domHelper);

  /**
   * @type {HTMLFormElement}
   * @private
   */
  this.searchform_ = this.dom_.createDom('form', 'cam-searchform');

  /**
   * @type {goog.ui.Button}
   * @private
   */
  this.biggerButton_ = new goog.ui.Button('+');
  this.biggerButton_.addClassName('cam-bigger');

  /**
   * @type {goog.ui.Button}
   * @private
   */
  this.smallerButton_ = new goog.ui.Button('\u2212');
  this.smallerButton_.addClassName('cam-smaller');

  /**
   * @type {goog.ui.Button}
   * @private
   */
  this.checkedItemsCreateSetButton_ = new goog.ui.Button('');
  this.checkedItemsCreateSetButton_.addClassName('cam-checked-items');
  this.checkedItemsCreateSetButton_.setVisible(false);

  /**
   * @type {goog.ui.Button}
   * @private
   */
  this.createPermanodeButton_ = new goog.ui.Button('New Permanode');
  this.createPermanodeButton_.addClassName('cam-toolbar-createpermanode');

  /**
   * @type {goog.ui.Button}
   * @private
   */
  this.checkedItemsAddToSetButton_ = new goog.ui.Button('Add to Set');
  this.checkedItemsAddToSetButton_.addClassName('cam-checked-items');
  this.checkedItemsAddToSetButton_.setEnabled(false);

  /**
   * @type {goog.ui.Button}
   * @private
   */
  this.setAsCollecButton_ = new goog.ui.Button('Select as current Set');
  this.setAsCollecButton_.addClassName('cam-checked-items');
  this.setAsCollecButton_.setEnabled(false);


  /**
   * Used only on the search page
   * @type {goog.ui.Button}
   * @private
   */
  this.rootsButton_ = new goog.ui.Button('Search Roots');
  this.rootsButton_.addClassName('cam-checked-items');

  /**
   * Used to display random statusy stuff.
   */
  this.status_ = null;

  /**
   * @type {goog.events.EventHandler}
   * @private
   */
  this.eh_ = new goog.events.EventHandler(this);
};
goog.inherits(camlistore.Toolbar, goog.ui.Toolbar);


/**
 * @enum {string}
 */
camlistore.Toolbar.EventType = {
  SEARCH: 'Camlistore_Toolbar_Search',
  BIGGER: 'Camlistore_Toolbar_Bigger',
  SMALLER: 'Camlistore_Toolbar_Smaller',
  ROOTS: 'Camlistore_Toolbar_SearchRoots',
  CHECKED_ITEMS_ADDTO_SET: 'Camlistore_Toolbar_Checked_Items_Addto_set',
  SELECT_COLLEC: 'Camlistore_Toolbar_Select_collec',
  CHECKED_ITEMS_CREATE_SET: 'Camlistore_Toolbar_Checked_Items_Create_set',
  CREATE_PERMANODE: 'Camlistore_Toolbar_Create_Permanode',
};


/**
 * @return {goog.ui.Control}
 */
camlistore.Toolbar.prototype.setStatus = function(text) {
  goog.dom.setTextContent(this.status_, text);
};


camlistore.Toolbar.prototype.getSearchText = function() {
  return this.searchbox_.value;
};


/**
 * Creates an initial DOM representation for the component.
 */
camlistore.Toolbar.prototype.createDom = function() {
  this.decorateInternal(this.dom_.createElement('div'));
};


/**
 * Decorates an existing HTML DIV element.
 * @param {Element} el The DIV element to decorate.
 */
camlistore.Toolbar.prototype.decorateInternal = function(el) {
  camlistore.Toolbar.superClass_.decorateInternal.call(this, el);
  this.getElement().className = 'cam-toolbar';

  this.searchbox_ = this.dom_.createDom('input', 'cam-searchbox');
  this.searchbox_.setAttribute('placeholder', 'Search...');
  this.searchbox_.title = '"title:monkey", "tag:cheese", etc...';
  this.searchform_.appendChild(this.searchbox_);
  this.getElement().appendChild(this.searchform_);

  this.addChild(this.smallerButton_, true);
  this.addChild(this.biggerButton_, true);
  this.addChild(this.checkedItemsCreateSetButton_, true);
  this.addChild(this.createPermanodeButton_, true);
  this.addChild(this.setAsCollecButton_, true);
  this.addChild(this.checkedItemsAddToSetButton_, true);
  this.addChild(this.rootsButton_, true);

  this.status_ = this.dom_.createDom('div', 'cam-toolbar-status');
  this.getElement().appendChild(this.status_);
};


/** @override */
camlistore.Toolbar.prototype.disposeInternal = function() {
  camlistore.Toolbar.superClass_.disposeInternal.call(this);
  this.eh_.dispose();
};


/**
 * Called when component's element is known to be in the document.
 */
camlistore.Toolbar.prototype.enterDocument = function() {
  camlistore.Toolbar.superClass_.enterDocument.call(this);
  goog.style.setUnselectable(this.searchbox_, false);

  this.eh_.listen(
      this.searchform_,
      goog.events.EventType.SUBMIT,
      function(e) {
        e.stopPropagation();
        e.preventDefault();
        this.dispatch_(camlistore.Toolbar.EventType.SEARCH);
      }.bind(this));

  this.eh_.listen(
      this.biggerButton_.getElement(),
      goog.events.EventType.CLICK,
      goog.bind(this.dispatch_, this, camlistore.Toolbar.EventType.BIGGER));

  this.eh_.listen(
      this.smallerButton_.getElement(),
      goog.events.EventType.CLICK,
      goog.bind(this.dispatch_, this, camlistore.Toolbar.EventType.SMALLER));

  this.eh_.listen(
      this.rootsButton_.getElement(),
      goog.events.EventType.CLICK,
      goog.bind(this.dispatch_, this, camlistore.Toolbar.EventType.ROOTS));

  this.eh_.listen(
      this.checkedItemsCreateSetButton_.getElement(),
      goog.events.EventType.CLICK,
      goog.bind(this.dispatch_, this,
                camlistore.Toolbar.EventType.CHECKED_ITEMS_CREATE_SET));

  this.eh_.listen(
      this.createPermanodeButton_.getElement(),
      goog.events.EventType.CLICK,
      goog.bind(this.dispatch_, this,
                camlistore.Toolbar.EventType.CREATE_PERMANODE));

  this.eh_.listen(
      this.setAsCollecButton_.getElement(),
      goog.events.EventType.CLICK,
      goog.bind(this.dispatch_, this,
                camlistore.Toolbar.EventType.SELECT_COLLEC));

  this.eh_.listen(
      this.checkedItemsAddToSetButton_.getElement(),
      goog.events.EventType.CLICK,
      goog.bind(this.dispatch_, this,
                camlistore.Toolbar.EventType.CHECKED_ITEMS_ADDTO_SET));

};


/**
 * @param {camlistore.Toolbar.EventType} eventType Type of event to dispatch.
 */
camlistore.Toolbar.prototype.dispatch_ = function(eventType) {
  this.dispatchEvent(eventType);
};


/**
 * Called when component's element is known to have been removed from the
 * document.
 */
camlistore.Toolbar.prototype.exitDocument = function() {
  camlistore.Toolbar.superClass_.exitDocument.call(this);
  // Clear event handlers here
};


/**
 * TODO: i18n.
 * @param {number} count Number of items.
 */
camlistore.Toolbar.prototype.setCheckedBlobItemCount = function(count) {
  if (count) {
    var txt = 'Create set w/ ' + count + ' item' + (count > 1 ? 's' : '');
    this.checkedItemsCreateSetButton_.setContent(txt);
    this.checkedItemsCreateSetButton_.setVisible(true);
  } else {
    this.checkedItemsCreateSetButton_.setContent('');
    this.checkedItemsCreateSetButton_.setVisible(false);
  }
};

/**
 * TODO: i18n.
 * @param {boolean} enable
 */
camlistore.Toolbar.prototype.toggleCollecButton = function(enable) {
  if (enable) {
    this.setAsCollecButton_.setEnabled(true);
  } else {
    this.setAsCollecButton_.setEnabled(false);
  }
};

/**
 * TODO: i18n.
 * @param {boolean} enable
 */
camlistore.Toolbar.prototype.toggleAddToSetButton = function(enable) {
  if (enable) {
    this.checkedItemsAddToSetButton_.setEnabled(true);
  } else {
    this.checkedItemsAddToSetButton_.setEnabled(false);
  }
};