src/ui/file_manager/file_manager/foreground/js/default_action_dialog.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7
   8 /**
   9  * DefaultActionDialog contains a message, a list box, an ok button, and a
  10  * cancel button.
  11  * This dialog should be used as action picker for file operations.
  12  */
  13 cr.define('cr.filebrowser', function() {
  14
  15   /**
  16    * Creates dialog in DOM tree.
  17    *
  18    * @param {HTMLElement} parentNode Node to be parent for this dialog.
  19    * @constructor
  20    * @extends {FileManagerDialogBase}
  21    */
  22   function DefaultActionDialog(parentNode) {
  23     FileManagerDialogBase.call(this, parentNode);
  24
  25     this.frame_.id = 'default-action-dialog';
  26
  27     this.list_ = new cr.ui.List();
  28     this.list_.id = 'default-actions-list';
  29     this.frame_.insertBefore(this.list_, this.text_.nextSibling);
  30
  31     this.selectionModel_ = this.list_.selectionModel =
  32         new cr.ui.ListSingleSelectionModel();
  33     this.dataModel_ = this.list_.dataModel = new cr.ui.ArrayDataModel([]);
  34
  35     // List has max-height defined at css, so that list grows automatically,
  36     // but doesn't exceed predefined size.
  37     this.list_.autoExpands = true;
  38     this.list_.activateItemAtIndex = this.activateItemAtIndex_.bind(this);
  39     // Use 'click' instead of 'change' for keyboard users.
  40     this.list_.addEventListener('click', this.onSelected_.bind(this));
  41
  42     this.initialFocusElement_ = this.list_;
  43
  44     var self = this;
  45
  46     // Binding stuff doesn't work with constructors, so we have to create
  47     // closure here.
  48     this.list_.itemConstructor = function(item) {
  49       return self.renderItem(item);
  50     };
  51   }
  52
  53   DefaultActionDialog.prototype = {
  54     __proto__: FileManagerDialogBase.prototype
  55   };
  56
  57   /**
  58    * @override
  59    */
  60   DefaultActionDialog.prototype.onInputFocus = function() {
  61     this.list_.select();
  62   };
  63
  64   /**
  65    * Renders item for list.
  66    * @param {Object} item Item to render.
  67    */
  68   DefaultActionDialog.prototype.renderItem = function(item) {
  69     var result = this.document_.createElement('li');
  70
  71     var div = this.document_.createElement('div');
  72     div.textContent = item.label;
  73
  74     if (item.iconType) {
  75       div.setAttribute('file-type-icon', item.iconType);
  76     } else if (item.iconUrl) {
  77       div.style.backgroundImage = 'url(' + item.iconUrl + ')';
  78     }
  79
  80     if (item.class)
  81       div.classList.add(item.class);
  82
  83     result.appendChild(div);
  84
  85     cr.defineProperty(result, 'lead', cr.PropertyKind.BOOL_ATTR);
  86     cr.defineProperty(result, 'selected', cr.PropertyKind.BOOL_ATTR);
  87
  88     return result;
  89   };
  90
  91   /**
  92    * Shows dialog.
  93    *
  94    * @param {string} title Title in dialog caption.
  95    * @param {string} message Message in dialog caption.
  96    * @param {Array.<Object>} items Items to render in the list.
  97    * @param {number} defaultIndex Item to select by default.
  98    * @param {function(Object)} onSelectedItem Callback which is called when an
  99    *     item is selected.
 100    */
 101   DefaultActionDialog.prototype.show = function(title, message, items,
 102       defaultIndex, onSelectedItem) {
 103
 104     this.onSelectedItemCallback_ = onSelectedItem;
 105
 106     var show = FileManagerDialogBase.prototype.showTitleAndTextDialog.call(
 107         this, title, message);
 108
 109     if (!show) {
 110       console.error('DefaultActionDialog can\'t be shown.');
 111       return;
 112     }
 113
 114     if (!message) {
 115       this.text_.setAttribute('hidden', 'hidden');
 116     } else {
 117       this.text_.removeAttribute('hidden');
 118     }
 119
 120     this.list_.startBatchUpdates();
 121     this.dataModel_.splice(0, this.dataModel_.length);
 122     for (var i = 0; i < items.length; i++) {
 123       this.dataModel_.push(items[i]);
 124     }
 125     this.selectionModel_.selectedIndex = defaultIndex;
 126     this.list_.endBatchUpdates();
 127   };
 128
 129   /**
 130    * List activation handler. Closes dialog and calls 'ok' callback.
 131    * @param {number} index Activated index.
 132    */
 133   DefaultActionDialog.prototype.activateItemAtIndex_ = function(index) {
 134     this.hide();
 135     this.onSelectedItemCallback_(this.dataModel_.item(index));
 136   };
 137
 138   /**
 139    * Closes dialog and invokes callback with currently-selected item.
 140    */
 141   DefaultActionDialog.prototype.onSelected_ = function() {
 142     if (this.selectionModel_.selectedIndex !== -1)
 143       this.activateItemAtIndex_(this.selectionModel_.selectedIndex);
 144   };
 145
 146   /**
 147    * @override
 148    */
 149   DefaultActionDialog.prototype.onContainerKeyDown_ = function(event) {
 150     // Handle Escape.
 151     if (event.keyCode == 27) {
 152       this.hide();
 153       event.preventDefault();
 154     } else if (event.keyCode == 32 || event.keyCode == 13) {
 155       this.onSelected_();
 156       event.preventDefault();
 157     }
 158   };
 159
 160   return {DefaultActionDialog: DefaultActionDialog};
 161 });