chrome/browser/resources/file_manager/js/default_action_dialog.js

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

'use strict';


/**
 * DefaultActionDialog contains a message, a list box, an ok button, and a
 * cancel button.
 * This dialog should be used as action picker for file operations.
 */
cr.define('cr.filebrowser', function() {

  /**
   * Creates dialog in DOM tree.
   *
   * @param {HTMLElement} parentNode Node to be parent for this dialog.
   * @constructor
   * @extends {FileManagerDialogBase}
   */
  function DefaultActionDialog(parentNode) {
    FileManagerDialogBase.call(this, parentNode);

    this.frame_.id = 'default-action-dialog';

    this.list_ = new cr.ui.List();
    this.list_.id = 'default-actions-list';
    this.frame_.insertBefore(this.list_, this.text_.nextSibling);

    this.selectionModel_ = this.list_.selectionModel =
        new cr.ui.ListSingleSelectionModel();
    this.dataModel_ = this.list_.dataModel = new cr.ui.ArrayDataModel([]);

    // List has max-height defined at css, so that list grows automatically,
    // but doesn't exceed predefined size.
    this.list_.autoExpands = true;
    this.list_.activateItemAtIndex = this.activateItemAtIndex_.bind(this);

    this.initialFocusElement_ = this.list_;

    var self = this;

    // Binding stuff doesn't work with constructors, so we have to create
    // closure here.
    this.list_.itemConstructor = function(item) {
      return self.renderItem(item);
    };
  }

  DefaultActionDialog.prototype = {
    __proto__: FileManagerDialogBase.prototype
  };

  /**
   * @override
   */
  DefaultActionDialog.prototype.onInputFocus = function() {
    this.list_.select();
  };

  /**
   * Renders item for list.
   * @param {Object} item Item to render.
   */
  DefaultActionDialog.prototype.renderItem = function(item) {
    var result = this.document_.createElement('li');

    var div = this.document_.createElement('div');
    div.textContent = item.label;

    if (item.iconType) {
      div.setAttribute('file-type-icon', item.iconType);
    } else if (item.iconUrl) {
      div.style.backgroundImage = 'url(' + item.iconUrl + ')';
    }

    if (item.class)
      div.classList.add(item.class);

    result.appendChild(div);

    cr.defineProperty(result, 'lead', cr.PropertyKind.BOOL_ATTR);
    cr.defineProperty(result, 'selected', cr.PropertyKind.BOOL_ATTR);

    return result;
  };

  /**
   * Shows dialog.
   *
   * @param {string} title Title in dialog caption.
   * @param {string} message Message in dialog caption.
   * @param {Array.<Object>} items Items to render in the list.
   * @param {number} defaultIndex Item to select by default.
   * @param {function(Object=)} opt_onOk OK callback with the selected item.
   * @param {function()=} opt_onCancel Cancel callback.
   */
  DefaultActionDialog.prototype.show = function(title, message, items,
      defaultIndex, opt_onOk, opt_onCancel) {

    var show = FileManagerDialogBase.prototype.showOkCancelDialog.call(
        this, title, message, opt_onOk, opt_onCancel);

    if (!show) {
      console.error('DefaultActionDialog can\'t be shown.');
      return;
    }

    if (!message) {
      this.text_.setAttribute('hidden', 'hidden');
    } else {
      this.text_.removeAttribute('hidden');
    }

    this.list_.startBatchUpdates();
    this.dataModel_.splice(0, this.dataModel_.length);
    for (var i = 0; i < items.length; i++) {
      this.dataModel_.push(items[i]);
    }
    this.selectionModel_.selectedIndex = defaultIndex;
    this.list_.endBatchUpdates();
  };

  /**
   * List activation handler. Closes dialog and calls 'ok' callback.
   * @param {number} index Activated index.
   */
  DefaultActionDialog.prototype.activateItemAtIndex_ = function(index) {
    this.hide();
    this.onOk_(this.dataModel_.item(index));
  };

  /**
   * Closes dialog and invokes callback with currently-selected item.
   * @override
   */
  DefaultActionDialog.prototype.onOkClick_ = function() {
    this.activateItemAtIndex_(this.selectionModel_.selectedIndex);
  };

  /**
   * @override
   */
  DefaultActionDialog.prototype.onContainerKeyDown_ = function(event) {
    // Handle Escape.
    if (event.keyCode == 27) {
      this.onCancelClick_(event);
      event.preventDefault();
    } else if (event.keyCode == 32 || event.keyCode == 13) {
      this.onOkClick_();
      event.preventDefault();
    }
  };

  return {DefaultActionDialog: DefaultActionDialog};
});