| OLD | NEW |
| (Empty) |
| 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 }); | |
| OLD | NEW |