ui/file_manager/gallery/js/gallery.js

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