| OLD | NEW |
|---|
| (Empty) |
| 1 // Copyright 2014 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 * Called from the main frame when unloading. | |
| 9 * @param {boolean=} opt_exiting True if the app is exiting. | |
| 10 */ | |
| 11 function unload(opt_exiting) { Gallery.instance.onUnload(opt_exiting); } | |
| 12 | |
| 13 /** | |
| 14 * Gallery for viewing and editing image files. | |
| 15 * | |
| 16 * @param {Object} context Object containing the following: | |
| 17 * {function(string)} onNameChange Called every time a selected | |
| 18 * item name changes (on rename and on selection change). | |
| 19 * {AppWindow} appWindow | |
| 20 * {function(string)} onBack | |
| 21 * {function()} onClose | |
| 22 * {function()} onMaximize | |
| 23 * {function()} onMinimize | |
| 24 * {function(boolean)} onAppRegionChanged | |
| 25 * {MetadataCache} metadataCache | |
| 26 * {Array.<Object>} shareActions | |
| 27 * {string} readonlyDirName Directory name for readonly warning or null. | |
| 28 * {DirEntry} saveDirEntry Directory to save to. | |
| 29 * {function(string)} displayStringFunction. | |
| 30 * @param {VolumeManagerWrapper} volumeManager The VolumeManager instance of | |
| 31 * the system. | |
| 32 * @class | |
| 33 * @constructor | |
| 34 */ | |
| 35 function Gallery(context, volumeManager) { | |
| 36 this.container_ = document.querySelector('.gallery'); | |
| 37 this.document_ = document; | |
| 38 this.context_ = context; | |
| 39 this.metadataCache_ = context.metadataCache; | |
| 40 this.volumeManager_ = volumeManager; | |
| 41 this.selectedEntry_ = null; | |
| 42 this.metadataCacheObserverId_ = null; | |
| 43 this.onExternallyUnmountedBound_ = this.onExternallyUnmounted_.bind(this); | |
| 44 | |
| 45 this.dataModel_ = new cr.ui.ArrayDataModel([]); | |
| 46 this.selectionModel_ = new cr.ui.ListSelectionModel(); | |
| 47 loadTimeData.data = context.loadTimeData; | |
| 48 | |
| 49 this.initDom_(); | |
| 50 this.initListeners_(); | |
| 51 } | |
| 52 | |
| 53 /** | |
| 54 * Gallery extends cr.EventTarget. | |
| 55 */ | |
| 56 Gallery.prototype.__proto__ = cr.EventTarget.prototype; | |
| 57 | |
| 58 /** | |
| 59 * Creates and initializes a Gallery object based on a context. | |
| 60 * | |
| 61 * @param {Object} context Gallery context. | |
| 62 * @param {VolumeManagerWrapper} volumeManager VolumeManager of the system. | |
| 63 * @param {Array.<Entry>} entries Array of entries. | |
| 64 * @param {Array.<Entry>} selectedEntries Array of selected entries. | |
| 65 */ | |
| 66 Gallery.open = function(context, volumeManager, entries, selectedEntries) { | |
| 67 Gallery.instance = new Gallery(context, volumeManager); | |
| 68 Gallery.instance.load(entries, selectedEntries); | |
| 69 }; | |
| 70 | |
| 71 /** | |
| 72 * Tools fade-out timeout in milliseconds. | |
| 73 * @const | |
| 74 * @type {number} | |
| 75 */ | |
| 76 Gallery.FADE_TIMEOUT = 3000; | |
| 77 | |
| 78 /** | |
| 79 * First time tools fade-out timeout in milliseconds. | |
| 80 * @const | |
| 81 * @type {number} | |
| 82 */ | |
| 83 Gallery.FIRST_FADE_TIMEOUT = 1000; | |
| 84 | |
| 85 /** | |
| 86 * Time until mosaic is initialized in the background. Used to make gallery | |
| 87 * in the slide mode load faster. In miiliseconds. | |
| 88 * @const | |
| 89 * @type {number} | |
| 90 */ | |
| 91 Gallery.MOSAIC_BACKGROUND_INIT_DELAY = 1000; | |
| 92 | |
| 93 /** | |
| 94 * Types of metadata Gallery uses (to query the metadata cache). | |
| 95 * @const | |
| 96 * @type {string} | |
| 97 */ | |
| 98 Gallery.METADATA_TYPE = 'thumbnail|filesystem|media|streaming|drive'; | |
| 99 | |
| 100 /** | |
| 101 * Initializes listeners. | |
| 102 * @private | |
| 103 */ | |
| 104 Gallery.prototype.initListeners_ = function() { | |
| 105 this.document_.oncontextmenu = function(e) { e.preventDefault(); }; | |
| 106 this.keyDownBound_ = this.onKeyDown_.bind(this); | |
| 107 this.document_.body.addEventListener('keydown', this.keyDownBound_); | |
| 108 | |
| 109 this.inactivityWatcher_ = new MouseInactivityWatcher( | |
| 110 this.container_, Gallery.FADE_TIMEOUT, this.hasActiveTool.bind(this)); | |
| 111 | |
| 112 // Search results may contain files from different subdirectories so | |
| 113 // the observer is not going to work. | |
| 114 if (!this.context_.searchResults && this.context_.curDirEntry) { | |
| 115 this.metadataCacheObserverId_ = this.metadataCache_.addObserver( | |
| 116 this.context_.curDirEntry, | |
| 117 MetadataCache.CHILDREN, | |
| 118 'thumbnail', | |
| 119 this.updateThumbnails_.bind(this)); | |
| 120 } | |
| 121 this.volumeManager_.addEventListener( | |
| 122 'externally-unmounted', this.onExternallyUnmountedBound_); | |
| 123 }; | |
| 124 | |
| 125 /** | |
| 126 * Closes gallery when a volume containing the selected item is unmounted. | |
| 127 * @param {!Event} event The unmount event. | |
| 128 * @private | |
| 129 */ | |
| 130 Gallery.prototype.onExternallyUnmounted_ = function(event) { | |
| 131 if (!this.selectedEntry_) | |
| 132 return; | |
| 133 | |
| 134 if (this.volumeManager_.getVolumeInfo(this.selectedEntry_) === | |
| 135 event.volumeInfo) { | |
| 136 this.onBack_(); | |
| 137 } | |
| 138 }; | |
| 139 | |
| 140 /** | |
| 141 * Unloads the Gallery. | |
| 142 * @param {boolean} exiting True if the app is exiting. | |
| 143 */ | |
| 144 Gallery.prototype.onUnload = function(exiting) { | |
| 145 if (this.metadataCacheObserverId_ !== null) | |
| 146 this.metadataCache_.removeObserver(this.metadataCacheObserverId_); | |
| 147 this.volumeManager_.removeEventListener( | |
| 148 'externally-unmounted', this.onExternallyUnmountedBound_); | |
| 149 this.slideMode_.onUnload(exiting); | |
| 150 }; | |
| 151 | |
| 152 /** | |
| 153 * Initializes DOM UI | |
| 154 * @private | |
| 155 */ | |
| 156 Gallery.prototype.initDom_ = function() { | |
| 157 // Initialize the dialog label. | |
| 158 cr.ui.dialogs.BaseDialog.OK_LABEL = str('GALLERY_OK_LABEL'); | |
| 159 cr.ui.dialogs.BaseDialog.CANCEL_LABEL = str('GALLERY_CANCEL_LABEL'); | |
| 160 | |
| 161 var content = util.createChild(this.container_, 'content'); | |
| 162 content.addEventListener('click', this.onContentClick_.bind(this)); | |
| 163 | |
| 164 this.header_ = util.createChild(this.container_, 'header tool dimmable'); | |
| 165 this.toolbar_ = util.createChild(this.container_, 'toolbar tool dimmable'); | |
| 166 | |
| 167 var backButton = util.createChild(this.container_, | |
| 168 'back-button tool dimmable'); | |
| 169 util.createChild(backButton); | |
| 170 backButton.addEventListener('click', this.onBack_.bind(this)); | |
| 171 | |
| 172 var preventDefault = function(event) { event.preventDefault(); }; | |
| 173 | |
| 174 var minimizeButton = util.createChild(this.header_, | |
| 175 'minimize-button tool dimmable', | |
| 176 'button'); | |
| 177 minimizeButton.tabIndex = -1; | |
| 178 minimizeButton.addEventListener('click', this.onMinimize_.bind(this)); | |
| 179 minimizeButton.addEventListener('mousedown', preventDefault); | |
| 180 | |
| 181 var maximizeButton = util.createChild(this.header_, | |
| 182 'maximize-button tool dimmable', | |
| 183 'button'); | |
| 184 maximizeButton.tabIndex = -1; | |
| 185 maximizeButton.addEventListener('click', this.onMaximize_.bind(this)); | |
| 186 maximizeButton.addEventListener('mousedown', preventDefault); | |
| 187 | |
| 188 var closeButton = util.createChild(this.header_, | |
| 189 'close-button tool dimmable', | |
| 190 'button'); | |
| 191 closeButton.tabIndex = -1; | |
| 192 closeButton.addEventListener('click', this.onClose_.bind(this)); | |
| 193 closeButton.addEventListener('mousedown', preventDefault); | |
| 194 | |
| 195 this.filenameSpacer_ = util.createChild(this.toolbar_, 'filename-spacer'); | |
| 196 this.filenameEdit_ = util.createChild(this.filenameSpacer_, | |
| 197 'namebox', 'input'); | |
| 198 | |
| 199 this.filenameEdit_.setAttribute('type', 'text'); | |
| 200 this.filenameEdit_.addEventListener('blur', | |
| 201 this.onFilenameEditBlur_.bind(this)); | |
| 202 | |
| 203 this.filenameEdit_.addEventListener('focus', | |
| 204 this.onFilenameFocus_.bind(this)); | |
| 205 | |
| 206 this.filenameEdit_.addEventListener('keydown', | |
| 207 this.onFilenameEditKeydown_.bind(this)); | |
| 208 | |
| 209 util.createChild(this.toolbar_, 'button-spacer'); | |
| 210 | |
| 211 this.prompt_ = new ImageEditor.Prompt(this.container_, str); | |
| 212 | |
| 213 this.modeButton_ = util.createChild(this.toolbar_, 'button mode', 'button'); | |
| 214 this.modeButton_.addEventListener('click', | |
| 215 this.toggleMode_.bind(this, null)); | |
| 216 | |
| 217 this.mosaicMode_ = new MosaicMode(content, | |
| 218 this.dataModel_, | |
| 219 this.selectionModel_, | |
| 220 this.metadataCache_, | |
| 221 this.volumeManager_, | |
| 222 this.toggleMode_.bind(this, null)); | |
| 223 | |
| 224 this.slideMode_ = new SlideMode(this.container_, | |
| 225 content, | |
| 226 this.toolbar_, | |
| 227 this.prompt_, | |
| 228 this.dataModel_, | |
| 229 this.selectionModel_, | |
| 230 this.context_, | |
| 231 this.toggleMode_.bind(this), | |
| 232 str); | |
| 233 | |
| 234 this.slideMode_.addEventListener('image-displayed', function() { | |
| 235 cr.dispatchSimpleEvent(this, 'image-displayed'); | |
| 236 }.bind(this)); | |
| 237 this.slideMode_.addEventListener('image-saved', function() { | |
| 238 cr.dispatchSimpleEvent(this, 'image-saved'); | |
| 239 }.bind(this)); | |
| 240 | |
| 241 var deleteButton = this.createToolbarButton_('delete', 'GALLERY_DELETE'); | |
| 242 deleteButton.addEventListener('click', this.delete_.bind(this)); | |
| 243 | |
| 244 this.shareButton_ = this.createToolbarButton_('share', 'GALLERY_SHARE'); | |
| 245 this.shareButton_.setAttribute('disabled', ''); | |
| 246 this.shareButton_.addEventListener('click', this.toggleShare_.bind(this)); | |
| 247 | |
| 248 this.shareMenu_ = util.createChild(this.container_, 'share-menu'); | |
| 249 this.shareMenu_.hidden = true; | |
| 250 util.createChild(this.shareMenu_, 'bubble-point'); | |
| 251 | |
| 252 this.dataModel_.addEventListener('splice', this.onSplice_.bind(this)); | |
| 253 this.dataModel_.addEventListener('content', this.onContentChange_.bind(this)); | |
| 254 | |
| 255 this.selectionModel_.addEventListener('change', this.onSelection_.bind(this)); | |
| 256 this.slideMode_.addEventListener('useraction', this.onUserAction_.bind(this)); | |
| 257 }; | |
| 258 | |
| 259 /** | |
| 260 * Creates toolbar button. | |
| 261 * | |
| 262 * @param {string} className Class to add. | |
| 263 * @param {string} title Button title. | |
| 264 * @return {!HTMLElement} Newly created button. | |
| 265 * @private | |
| 266 */ | |
| 267 Gallery.prototype.createToolbarButton_ = function(className, title) { | |
| 268 var button = util.createChild(this.toolbar_, className, 'button'); | |
| 269 button.title = str(title); | |
| 270 return button; | |
| 271 }; | |
| 272 | |
| 273 /** | |
| 274 * Loads the content. | |
| 275 * | |
| 276 * @param {!Array.<Entry>} entries Array of entries. | |
| 277 * @param {!Array.<Entry>} selectedEntries Array of selected entries. | |
| 278 */ | |
| 279 Gallery.prototype.load = function(entries, selectedEntries) { | |
| 280 var items = []; | |
| 281 for (var index = 0; index < entries.length; ++index) { | |
| 282 items.push(new Gallery.Item(entries[index])); | |
| 283 } | |
| 284 this.dataModel_.push.apply(this.dataModel_, items); | |
| 285 | |
| 286 this.selectionModel_.adjustLength(this.dataModel_.length); | |
| 287 | |
| 288 // Comparing Entries by reference is not safe. Therefore we have to use URLs. | |
| 289 var entryIndexesByURLs = {}; | |
| 290 for (var index = 0; index < entries.length; index++) { | |
| 291 entryIndexesByURLs[entries[index].toURL()] = index; | |
| 292 } | |
| 293 | |
| 294 for (var i = 0; i !== selectedEntries.length; i++) { | |
| 295 var selectedIndex = entryIndexesByURLs[selectedEntries[i].toURL()]; | |
| 296 if (selectedIndex !== undefined) | |
| 297 this.selectionModel_.setIndexSelected(selectedIndex, true); | |
| 298 else | |
| 299 console.error('Cannot select ' + selectedEntries[i]); | |
| 300 } | |
| 301 | |
| 302 if (this.selectionModel_.selectedIndexes.length === 0) | |
| 303 this.onSelection_(); | |
| 304 | |
| 305 var mosaic = this.mosaicMode_ && this.mosaicMode_.getMosaic(); | |
| 306 | |
| 307 // Mosaic view should show up if most of the selected files are images. | |
| 308 var imagesCount = 0; | |
| 309 for (var i = 0; i !== selectedEntries.length; i++) { | |
| 310 if (FileType.getMediaType(selectedEntries[i]) === 'image') | |
| 311 imagesCount++; | |
| 312 } | |
| 313 var mostlyImages = imagesCount > (selectedEntries.length / 2.0); | |
| 314 | |
| 315 var forcedMosaic = (this.context_.pageState && | |
| 316 this.context_.pageState.gallery === 'mosaic'); | |
| 317 | |
| 318 var showMosaic = (mostlyImages && selectedEntries.length > 1) || forcedMosaic; | |
| 319 if (mosaic && showMosaic) { | |
| 320 this.setCurrentMode_(this.mosaicMode_); | |
| 321 mosaic.init(); | |
| 322 mosaic.show(); | |
| 323 this.inactivityWatcher_.check(); // Show the toolbar. | |
| 324 cr.dispatchSimpleEvent(this, 'loaded'); | |
| 325 } else { | |
| 326 this.setCurrentMode_(this.slideMode_); | |
| 327 var maybeLoadMosaic = function() { | |
| 328 if (mosaic) | |
| 329 mosaic.init(); | |
| 330 cr.dispatchSimpleEvent(this, 'loaded'); | |
| 331 }.bind(this); | |
| 332 /* TODO: consider nice blow-up animation for the first image */ | |
| 333 this.slideMode_.enter(null, function() { | |
| 334 // Flash the toolbar briefly to show it is there. | |
| 335 this.inactivityWatcher_.kick(Gallery.FIRST_FADE_TIMEOUT); | |
| 336 }.bind(this), | |
| 337 maybeLoadMosaic); | |
| 338 } | |
| 339 }; | |
| 340 | |
| 341 /** | |
| 342 * Closes the Gallery and go to Files.app. | |
| 343 * @private | |
| 344 */ | |
| 345 Gallery.prototype.back_ = function() { | |
| 346 if (util.isFullScreen(this.context_.appWindow)) { | |
| 347 util.toggleFullScreen(this.context_.appWindow, | |
| 348 false); // Leave the full screen mode. | |
| 349 } | |
| 350 this.context_.onBack(this.getSelectedEntries()); | |
| 351 }; | |
| 352 | |
| 353 /** | |
| 354 * Handles user's 'Back' action (Escape or a click on the X icon). | |
| 355 * @private | |
| 356 */ | |
| 357 Gallery.prototype.onBack_ = function() { | |
| 358 this.executeWhenReady(this.back_.bind(this)); | |
| 359 }; | |
| 360 | |
| 361 /** | |
| 362 * Handles user's 'Close' action. | |
| 363 * @private | |
| 364 */ | |
| 365 Gallery.prototype.onClose_ = function() { | |
| 366 this.executeWhenReady(this.context_.onClose); | |
| 367 }; | |
| 368 | |
| 369 /** | |
| 370 * Handles user's 'Maximize' action (Escape or a click on the X icon). | |
| 371 * @private | |
| 372 */ | |
| 373 Gallery.prototype.onMaximize_ = function() { | |
| 374 this.executeWhenReady(this.context_.onMaximize); | |
| 375 }; | |
| 376 | |
| 377 /** | |
| 378 * Handles user's 'Maximize' action (Escape or a click on the X icon). | |
| 379 * @private | |
| 380 */ | |
| 381 Gallery.prototype.onMinimize_ = function() { | |
| 382 this.executeWhenReady(this.context_.onMinimize); | |
| 383 }; | |
| 384 | |
| 385 /** | |
| 386 * Executes a function when the editor is done with the modifications. | |
| 387 * @param {function} callback Function to execute. | |
| 388 */ | |
| 389 Gallery.prototype.executeWhenReady = function(callback) { | |
| 390 this.currentMode_.executeWhenReady(callback); | |
| 391 }; | |
| 392 | |
| 393 /** | |
| 394 * @return {Object} File browser private API. | |
| 395 */ | |
| 396 Gallery.getFileBrowserPrivate = function() { | |
| 397 return chrome.fileBrowserPrivate || window.top.chrome.fileBrowserPrivate; | |
| 398 }; | |
| 399 | |
| 400 /** | |
| 401 * @return {boolean} True if some tool is currently active. | |
| 402 */ | |
| 403 Gallery.prototype.hasActiveTool = function() { | |
| 404 return this.currentMode_.hasActiveTool() || | |
| 405 this.isSharing_() || this.isRenaming_(); | |
| 406 }; | |
| 407 | |
| 408 /** | |
| 409 * External user action event handler. | |
| 410 * @private | |
| 411 */ | |
| 412 Gallery.prototype.onUserAction_ = function() { | |
| 413 this.closeShareMenu_(); | |
| 414 // Show the toolbar and hide it after the default timeout. | |
| 415 this.inactivityWatcher_.kick(); | |
| 416 }; | |
| 417 | |
| 418 /** | |
| 419 * Sets the current mode, update the UI. | |
| 420 * @param {Object} mode Current mode. | |
| 421 * @private | |
| 422 */ | |
| 423 Gallery.prototype.setCurrentMode_ = function(mode) { | |
| 424 if (mode !== this.slideMode_ && mode !== this.mosaicMode_) | |
| 425 console.error('Invalid Gallery mode'); | |
| 426 | |
| 427 this.currentMode_ = mode; | |
| 428 this.container_.setAttribute('mode', this.currentMode_.getName()); | |
| 429 this.updateSelectionAndState_(); | |
| 430 this.updateButtons_(); | |
| 431 }; | |
| 432 | |
| 433 /** | |
| 434 * Mode toggle event handler. | |
| 435 * @param {function=} opt_callback Callback. | |
| 436 * @param {Event=} opt_event Event that caused this call. | |
| 437 * @private | |
| 438 */ | |
| 439 Gallery.prototype.toggleMode_ = function(opt_callback, opt_event) { | |
| 440 if (!this.modeButton_) | |
| 441 return; | |
| 442 | |
| 443 if (this.changingMode_) // Do not re-enter while changing the mode. | |
| 444 return; | |
| 445 | |
| 446 if (opt_event) | |
| 447 this.onUserAction_(); | |
| 448 | |
| 449 this.changingMode_ = true; | |
| 450 | |
| 451 var onModeChanged = function() { | |
| 452 this.changingMode_ = false; | |
| 453 if (opt_callback) opt_callback(); | |
| 454 }.bind(this); | |
| 455 | |
| 456 var tileIndex = Math.max(0, this.selectionModel_.selectedIndex); | |
| 457 | |
| 458 var mosaic = this.mosaicMode_.getMosaic(); | |
| 459 var tileRect = mosaic.getTileRect(tileIndex); | |
| 460 | |
| 461 if (this.currentMode_ === this.slideMode_) { | |
| 462 this.setCurrentMode_(this.mosaicMode_); | |
| 463 mosaic.transform( | |
| 464 tileRect, this.slideMode_.getSelectedImageRect(), true /* instant */); | |
| 465 this.slideMode_.leave( | |
| 466 tileRect, | |
| 467 function() { | |
| 468 // Animate back to normal position. | |
| 469 mosaic.transform(); | |
| 470 mosaic.show(); | |
| 471 onModeChanged(); | |
| 472 }.bind(this)); | |
| 473 } else { | |
| 474 this.setCurrentMode_(this.slideMode_); | |
| 475 this.slideMode_.enter( | |
| 476 tileRect, | |
| 477 function() { | |
| 478 // Animate to zoomed position. | |
| 479 mosaic.transform(tileRect, this.slideMode_.getSelectedImageRect()); | |
| 480 mosaic.hide(); | |
| 481 }.bind(this), | |
| 482 onModeChanged); | |
| 483 } | |
| 484 }; | |
| 485 | |
| 486 /** | |
| 487 * Deletes the selected items. | |
| 488 * @private | |
| 489 */ | |
| 490 Gallery.prototype.delete_ = function() { | |
| 491 this.onUserAction_(); | |
| 492 | |
| 493 // Clone the sorted selected indexes array. | |
| 494 var indexesToRemove = this.selectionModel_.selectedIndexes.slice(); | |
| 495 if (!indexesToRemove.length) | |
| 496 return; | |
| 497 | |
| 498 /* TODO(dgozman): Implement Undo delete, Remove the confirmation dialog. */ | |
| 499 | |
| 500 var itemsToRemove = this.getSelectedItems(); | |
| 501 var plural = itemsToRemove.length > 1; | |
| 502 var param = plural ? itemsToRemove.length : itemsToRemove[0].getFileName(); | |
| 503 | |
| 504 function deleteNext() { | |
| 505 if (!itemsToRemove.length) | |
| 506 return; // All deleted. | |
| 507 | |
| 508 // TODO(hirono): Use fileOperationManager. | |
| 509 var entry = itemsToRemove.pop().getEntry(); | |
| 510 entry.remove(deleteNext, function() { | |
| 511 util.flog('Error deleting: ' + entry.name, deleteNext); | |
| 512 }); | |
| 513 } | |
| 514 | |
| 515 // Prevent the Gallery from handling Esc and Enter. | |
| 516 this.document_.body.removeEventListener('keydown', this.keyDownBound_); | |
| 517 var restoreListener = function() { | |
| 518 this.document_.body.addEventListener('keydown', this.keyDownBound_); | |
| 519 }.bind(this); | |
| 520 | |
| 521 | |
| 522 var confirm = new cr.ui.dialogs.ConfirmDialog(this.container_); | |
| 523 confirm.setOkLabel(str('DELETE_BUTTON_LABEL')); | |
| 524 confirm.show(strf(plural ? | |
| 525 'GALLERY_CONFIRM_DELETE_SOME' : 'GALLERY_CONFIRM_DELETE_ONE', param), | |
| 526 function() { | |
| 527 restoreListener(); | |
| 528 this.selectionModel_.unselectAll(); | |
| 529 this.selectionModel_.leadIndex = -1; | |
| 530 // Remove items from the data model, starting from the highest index. | |
| 531 while (indexesToRemove.length) | |
| 532 this.dataModel_.splice(indexesToRemove.pop(), 1); | |
| 533 // Delete actual files. | |
| 534 deleteNext(); | |
| 535 }.bind(this), | |
| 536 function() { | |
| 537 // Restore the listener after a timeout so that ESC is processed. | |
| 538 setTimeout(restoreListener, 0); | |
| 539 }); | |
| 540 }; | |
| 541 | |
| 542 /** | |
| 543 * @return {Array.<Gallery.Item>} Current selection. | |
| 544 */ | |
| 545 Gallery.prototype.getSelectedItems = function() { | |
| 546 return this.selectionModel_.selectedIndexes.map( | |
| 547 this.dataModel_.item.bind(this.dataModel_)); | |
| 548 }; | |
| 549 | |
| 550 /** | |
| 551 * @return {Array.<Entry>} Array of currently selected entries. | |
| 552 */ | |
| 553 Gallery.prototype.getSelectedEntries = function() { | |
| 554 return this.selectionModel_.selectedIndexes.map(function(index) { | |
| 555 return this.dataModel_.item(index).getEntry(); | |
| 556 }.bind(this)); | |
| 557 }; | |
| 558 | |
| 559 /** | |
| 560 * @return {?Gallery.Item} Current single selection. | |
| 561 */ | |
| 562 Gallery.prototype.getSingleSelectedItem = function() { | |
| 563 var items = this.getSelectedItems(); | |
| 564 if (items.length > 1) { | |
| 565 console.error('Unexpected multiple selection'); | |
| 566 return null; | |
| 567 } | |
| 568 return items[0]; | |
| 569 }; | |
| 570 | |
| 571 /** | |
| 572 * Selection change event handler. | |
| 573 * @private | |
| 574 */ | |
| 575 Gallery.prototype.onSelection_ = function() { | |
| 576 this.updateSelectionAndState_(); | |
| 577 this.updateShareMenu_(); | |
| 578 }; | |
| 579 | |
| 580 /** | |
| 581 * Data model splice event handler. | |
| 582 * @private | |
| 583 */ | |
| 584 Gallery.prototype.onSplice_ = function() { | |
| 585 this.selectionModel_.adjustLength(this.dataModel_.length); | |
| 586 }; | |
| 587 | |
| 588 /** | |
| 589 * Content change event handler. | |
| 590 * @param {Event} event Event. | |
| 591 * @private | |
| 592 */ | |
| 593 Gallery.prototype.onContentChange_ = function(event) { | |
| 594 var index = this.dataModel_.indexOf(event.item); | |
| 595 if (index !== this.selectionModel_.selectedIndex) | |
| 596 console.error('Content changed for unselected item'); | |
| 597 this.updateSelectionAndState_(); | |
| 598 }; | |
| 599 | |
| 600 /** | |
| 601 * Keydown handler. | |
| 602 * | |
| 603 * @param {Event} event Event. | |
| 604 * @private | |
| 605 */ | |
| 606 Gallery.prototype.onKeyDown_ = function(event) { | |
| 607 var wasSharing = this.isSharing_(); | |
| 608 this.closeShareMenu_(); | |
| 609 | |
| 610 if (this.currentMode_.onKeyDown(event)) | |
| 611 return; | |
| 612 | |
| 613 switch (util.getKeyModifiers(event) + event.keyIdentifier) { | |
| 614 case 'U+0008': // Backspace. | |
| 615 // The default handler would call history.back and close the Gallery. | |
| 616 event.preventDefault(); | |
| 617 break; | |
| 618 | |
| 619 case 'U+001B': // Escape | |
| 620 // Swallow Esc if it closed the Share menu, otherwise close the Gallery. | |
| 621 if (!wasSharing) | |
| 622 this.onBack_(); | |
| 623 break; | |
| 624 | |
| 625 case 'U+004D': // 'm' switches between Slide and Mosaic mode. | |
| 626 this.toggleMode_(null, event); | |
| 627 break; | |
| 628 | |
| 629 case 'U+0056': // 'v' | |
| 630 this.slideMode_.startSlideshow(SlideMode.SLIDESHOW_INTERVAL_FIRST, event); | |
| 631 break; | |
| 632 | |
| 633 case 'U+007F': // Delete | |
| 634 case 'Shift-U+0033': // Shift+'3' (Delete key might be missing). | |
| 635 this.delete_(); | |
| 636 break; | |
| 637 } | |
| 638 }; | |
| 639 | |
| 640 // Name box and rename support. | |
| 641 | |
| 642 /** | |
| 643 * Updates the UI related to the selected item and the persistent state. | |
| 644 * | |
| 645 * @private | |
| 646 */ | |
| 647 Gallery.prototype.updateSelectionAndState_ = function() { | |
| 648 var numSelectedItems = this.selectionModel_.selectedIndexes.length; | |
| 649 var displayName = ''; | |
| 650 var selectedEntryURL = null; | |
| 651 | |
| 652 // If it's selecting something, update the variable values. | |
| 653 if (numSelectedItems) { | |
| 654 var selectedItem = | |
| 655 this.dataModel_.item(this.selectionModel_.selectedIndex); | |
| 656 this.selectedEntry_ = selectedItem.getEntry(); | |
| 657 selectedEntryURL = this.selectedEntry_.toURL(); | |
| 658 | |
| 659 if (numSelectedItems === 1) { | |
| 660 window.top.document.title = this.selectedEntry_.name; | |
| 661 displayName = ImageUtil.getDisplayNameFromName(this.selectedEntry_.name); | |
| 662 } else if (this.context_.curDirEntry) { | |
| 663 // If the Gallery was opened on search results the search query will not | |
| 664 // be recorded in the app state and the relaunch will just open the | |
| 665 // gallery in the curDirEntry directory. | |
| 666 window.top.document.title = this.context_.curDirEntry.name; | |
| 667 displayName = strf('GALLERY_ITEMS_SELECTED', numSelectedItems); | |
| 668 } | |
| 669 } | |
| 670 | |
| 671 window.top.util.updateAppState( | |
| 672 null, // Keep the current directory. | |
| 673 selectedEntryURL, // Update the selection. | |
| 674 {gallery: (this.currentMode_ === this.mosaicMode_ ? 'mosaic' : 'slide')}); | |
| 675 | |
| 676 // We can't rename files in readonly directory. | |
| 677 // We can only rename a single file. | |
| 678 this.filenameEdit_.disabled = numSelectedItems !== 1 || | |
| 679 this.context_.readonlyDirName; | |
| 680 this.filenameEdit_.value = displayName; | |
| 681 }; | |
| 682 | |
| 683 /** | |
| 684 * Click event handler on filename edit box | |
| 685 * @private | |
| 686 */ | |
| 687 Gallery.prototype.onFilenameFocus_ = function() { | |
| 688 ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', true); | |
| 689 this.filenameEdit_.originalValue = this.filenameEdit_.value; | |
| 690 setTimeout(this.filenameEdit_.select.bind(this.filenameEdit_), 0); | |
| 691 this.onUserAction_(); | |
| 692 }; | |
| 693 | |
| 694 /** | |
| 695 * Blur event handler on filename edit box. | |
| 696 * | |
| 697 * @param {Event} event Blur event. | |
| 698 * @return {boolean} if default action should be prevented. | |
| 699 * @private | |
| 700 */ | |
| 701 Gallery.prototype.onFilenameEditBlur_ = function(event) { | |
| 702 if (this.filenameEdit_.value && this.filenameEdit_.value[0] === '.') { | |
| 703 this.prompt_.show('GALLERY_FILE_HIDDEN_NAME', 5000); | |
| 704 this.filenameEdit_.focus(); | |
| 705 event.stopPropagation(); | |
| 706 event.preventDefault(); | |
| 707 return false; | |
| 708 } | |
| 709 | |
| 710 var item = this.getSingleSelectedItem(); | |
| 711 if (item) { | |
| 712 var oldEntry = item.getEntry(); | |
| 713 | |
| 714 var onFileExists = function() { | |
| 715 this.prompt_.show('GALLERY_FILE_EXISTS', 3000); | |
| 716 this.filenameEdit_.value = name; | |
| 717 this.filenameEdit_.focus(); | |
| 718 }.bind(this); | |
| 719 | |
| 720 var onSuccess = function() { | |
| 721 var event = new Event('content'); | |
| 722 event.item = item; | |
| 723 event.oldEntry = oldEntry; | |
| 724 event.metadata = null; // Metadata unchanged. | |
| 725 this.dataModel_.dispatchEvent(event); | |
| 726 }.bind(this); | |
| 727 | |
| 728 if (this.filenameEdit_.value) { | |
| 729 item.rename( | |
| 730 this.filenameEdit_.value, onSuccess, onFileExists); | |
| 731 } | |
| 732 } | |
| 733 | |
| 734 ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', false); | |
| 735 this.onUserAction_(); | |
| 736 }; | |
| 737 | |
| 738 /** | |
| 739 * Keydown event handler on filename edit box | |
| 740 * @private | |
| 741 */ | |
| 742 Gallery.prototype.onFilenameEditKeydown_ = function() { | |
| 743 switch (event.keyCode) { | |
| 744 case 27: // Escape | |
| 745 this.filenameEdit_.value = this.filenameEdit_.originalValue; | |
| 746 this.filenameEdit_.blur(); | |
| 747 break; | |
| 748 | |
| 749 case 13: // Enter | |
| 750 this.filenameEdit_.blur(); | |
| 751 break; | |
| 752 } | |
| 753 event.stopPropagation(); | |
| 754 }; | |
| 755 | |
| 756 /** | |
| 757 * @return {boolean} True if file renaming is currently in progress. | |
| 758 * @private | |
| 759 */ | |
| 760 Gallery.prototype.isRenaming_ = function() { | |
| 761 return this.filenameSpacer_.hasAttribute('renaming'); | |
| 762 }; | |
| 763 | |
| 764 /** | |
| 765 * Content area click handler. | |
| 766 * @private | |
| 767 */ | |
| 768 Gallery.prototype.onContentClick_ = function() { | |
| 769 this.closeShareMenu_(); | |
| 770 this.filenameEdit_.blur(); | |
| 771 }; | |
| 772 | |
| 773 // Share button support. | |
| 774 | |
| 775 /** | |
| 776 * @return {boolean} True if the Share menu is active. | |
| 777 * @private | |
| 778 */ | |
| 779 Gallery.prototype.isSharing_ = function() { | |
| 780 return !this.shareMenu_.hidden; | |
| 781 }; | |
| 782 | |
| 783 /** | |
| 784 * Close Share menu if it is open. | |
| 785 * @private | |
| 786 */ | |
| 787 Gallery.prototype.closeShareMenu_ = function() { | |
| 788 if (this.isSharing_()) | |
| 789 this.toggleShare_(); | |
| 790 }; | |
| 791 | |
| 792 /** | |
| 793 * Share button handler. | |
| 794 * @private | |
| 795 */ | |
| 796 Gallery.prototype.toggleShare_ = function() { | |
| 797 if (!this.shareButton_.hasAttribute('disabled')) | |
| 798 this.shareMenu_.hidden = !this.shareMenu_.hidden; | |
| 799 this.inactivityWatcher_.check(); | |
| 800 }; | |
| 801 | |
| 802 /** | |
| 803 * Updates available actions list based on the currently selected urls. | |
| 804 * @private. | |
| 805 */ | |
| 806 Gallery.prototype.updateShareMenu_ = function() { | |
| 807 var entries = this.getSelectedEntries(); | |
| 808 | |
| 809 function isShareAction(task) { | |
| 810 var taskParts = task.taskId.split('|'); | |
| 811 return taskParts[0] !== chrome.runtime.id; | |
| 812 } | |
| 813 | |
| 814 var api = Gallery.getFileBrowserPrivate(); | |
| 815 | |
| 816 var createShareMenu = function(tasks) { | |
| 817 var wasHidden = this.shareMenu_.hidden; | |
| 818 this.shareMenu_.hidden = true; | |
| 819 var items = this.shareMenu_.querySelectorAll('.item'); | |
| 820 for (var i = 0; i !== items.length; i++) { | |
| 821 items[i].parentNode.removeChild(items[i]); | |
| 822 } | |
| 823 | |
| 824 for (var t = 0; t !== tasks.length; t++) { | |
| 825 var task = tasks[t]; | |
| 826 if (!isShareAction(task)) continue; | |
| 827 | |
| 828 var item = util.createChild(this.shareMenu_, 'item'); | |
| 829 item.textContent = task.title; | |
| 830 item.style.backgroundImage = 'url(' + task.iconUrl + ')'; | |
| 831 item.addEventListener('click', function(taskId) { | |
| 832 this.toggleShare_(); // Hide the menu. | |
| 833 // TODO(hirono): Use entries instead of URLs. | |
| 834 this.executeWhenReady( | |
| 835 api.executeTask.bind( | |
| 836 api, | |
| 837 taskId, | |
| 838 util.entriesToURLs(entries), | |
| 839 function(result) { | |
| 840 var alertDialog = | |
| 841 new cr.ui.dialogs.AlertDialog(this.container_); | |
| 842 util.isTeleported(window).then(function(teleported) { | |
| 843 if (teleported) | |
| 844 util.showOpenInOtherDesktopAlert(alertDialog, entries); | |
| 845 }.bind(this)); | |
| 846 }.bind(this))); | |
| 847 }.bind(this, task.taskId)); | |
| 848 } | |
| 849 | |
| 850 var empty = this.shareMenu_.querySelector('.item') === null; | |
| 851 ImageUtil.setAttribute(this.shareButton_, 'disabled', empty); | |
| 852 this.shareMenu_.hidden = wasHidden || empty; | |
| 853 }.bind(this); | |
| 854 | |
| 855 // Create or update the share menu with a list of sharing tasks and show | |
| 856 // or hide the share button. | |
| 857 // TODO(mtomasz): Pass Entries directly, instead of URLs. | |
| 858 if (!entries.length) | |
| 859 createShareMenu([]); // Empty list of tasks, since there is no selection. | |
| 860 else | |
| 861 api.getFileTasks(util.entriesToURLs(entries), createShareMenu); | |
| 862 }; | |
| 863 | |
| 864 /** | |
| 865 * Updates thumbnails. | |
| 866 * @private | |
| 867 */ | |
| 868 Gallery.prototype.updateThumbnails_ = function() { | |
| 869 if (this.currentMode_ === this.slideMode_) | |
| 870 this.slideMode_.updateThumbnails(); | |
| 871 | |
| 872 if (this.mosaicMode_) { | |
| 873 var mosaic = this.mosaicMode_.getMosaic(); | |
| 874 if (mosaic.isInitialized()) | |
| 875 mosaic.reload(); | |
| 876 } | |
| 877 }; | |
| 878 | |
| 879 /** | |
| 880 * Updates buttons. | |
| 881 * @private | |
| 882 */ | |
| 883 Gallery.prototype.updateButtons_ = function() { | |
| 884 if (this.modeButton_) { | |
| 885 var oppositeMode = | |
| 886 this.currentMode_ === this.slideMode_ ? this.mosaicMode_ : | |
| 887 this.slideMode_; | |
| 888 this.modeButton_.title = str(oppositeMode.getTitle()); | |
| 889 } | |
| 890 }; | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 491223002:
Gallery.app: Remove old gallery from Files.app. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src