Photo Editor: better mode transitions

chrome/browser/resources/file_manager/js/photo/mosaic_mode.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.
 
 /**
  * @param {Element} container Content container.
  * @param {cr.ui.ArrayDataModel} dataModel Data model.
  * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {MetadataCache} metadataCache Metadata cache.
  * @param {function} toggleMode Function to switch to the Slide mode.
  * @constructor
  */
 function MosaicMode(container, dataModel, selectionModel,
                     metadataCache, toggleMode) {
   this.mosaic_ = new Mosaic(container.ownerDocument,
       dataModel, selectionModel, metadataCache);
   container.appendChild(this.mosaic_);
 
   this.toggleMode_ = toggleMode;
   this.mosaic_.addEventListener('dblclick', this.toggleMode_);
 }
 
 /**
+ * @return {Mosaic} The mosaic control.
+ */
+MosaicMode.prototype.getMosaic = function() { return this.mosaic_ };
+
+/**
  * @return {string} Mode name.
  */
 MosaicMode.prototype.getName = function() { return 'mosaic' };
 
 /**
- * Initialize the mosaic.
- */
-MosaicMode.prototype.init = function() { this.mosaic_.init() };
-
-/**
- * Enter the mosaic mode.
- */
-MosaicMode.prototype.enter = function() { this.mosaic_.enter() };
-
-/**
  * Execute an action (this mode has no busy state).
  * @param {function} action Action to execute.
  */
 MosaicMode.prototype.executeWhenReady = function(action) { action() };
 
 /**
  * @return {boolean} Always true (no toolbar fading in this mode).
  */
 MosaicMode.prototype.hasActiveTool = function() { return true };
 
 /**
  * Keydown handler.
  *
  * @param {Event} event Event.
  * @return {boolean} True if processed.
  */
 MosaicMode.prototype.onKeyDown = function(event) {
   switch (util.getKeyModifiers(event) + event.keyIdentifier) {
     case 'Enter':
       this.toggleMode_();
       return true;
   }
   return this.mosaic_.onKeyDown(event);
 };
 
-/**
- * @return {Rect} Selected tile image rectangle. Used for animated transition
- *   to/from Slide mode.
- */
-MosaicMode.prototype.getSelectedTileRect = function() {
-  return this.mosaic_.getSelectedTileRect();
-};
-
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * Mosaic control.
  *
  * @param {Document} document Document.
  * @param {cr.ui.ArrayDataModel} dataModel Data model.
  * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {MetadataCache} metadataCache Metadata cache.
  * @return {Element} Mosaic element.
@@ skipping 85 matching lines @@
 };
 
 /**
  * @return {Mosaic.Tile} Selected tile or undefined if no selection.
  */
 Mosaic.prototype.getSelectedTile = function() {
   return this.tiles_ && this.tiles_[this.selectionModel_.selectedIndex];
 };
 
 /**
- * @return {Rect} Selected tile's image rectangle.
+ * @param {number} index Tile index.
+ * @return {Rect} Tile's image rectangle.
  */
-Mosaic.prototype.getSelectedTileRect = function() {
-  var tile = this.getSelectedTile();
+Mosaic.prototype.getTileRect = function(index) {
+  var tile = this.tiles_[index];
   return tile && tile.getImageRect();
 };
 
 /**
- * Called when showing the mosaic after the slide mode.
+ * @param {number} index Tile index.
+ * Scroll the given tile into the viewport.
  */
-Mosaic.prototype.enter = function() {
-  var tile = this.getSelectedTile();
+Mosaic.prototype.scrollIntoView = function(index) {
+  var tile = this.tiles_[index];
   if (tile) tile.scrollIntoView();
 };
 
 /**
  * Load multiple tiles.
  *
  * @param {Array.<Mosaic.Tile>} tiles Array of tiles.
  * @param {function} opt_callback Completion callback.
  * @private
  */
@@ skipping 195 matching lines @@
  * @param {Event} event Event.
  * @return {boolean} True if the event has been consumed.
  */
 Mosaic.prototype.onKeyDown = function(event) {
   this.selectionController_.handleKeyDown(event);
   if (event.defaultPrevented)  // Navigating with keyboard, hide hover state.
     this.classList.remove('hover-visible');
   return event.defaultPrevented;
 };
 
+/**
+ * @return {boolean} True if the mosaic zoom effect can be applied. It is
+ * too slow if there are to many images.
+ * TODO(kaznacheev): Consider unloading the images that are out of the viewport.
+ */
+Mosaic.prototype.canZoom = function() {
+  return this.layoutModel_.getTileCount() < 100;
+};
+
+/**
+ * Show the mosaic.
+ */
+Mosaic.prototype.show = function() {
+  var duration = ImageView.ZOOM_ANIMATION_DURATION;
+  if (this.canZoom()) {
+    // Fade in in parallel with the zoom effect.
+    this.setAttribute('visible', 'zooming');
+  } else {
+    // Mosaic is not animating but the large image is. Fade in the mosaic
+    // shortly before the large image animation is done.
+    duration -= 100;
+  }
+  setTimeout(function() {
+    // Make the selection visible.
+    // If the mosaic is not animated it will start fading in now.
+    this.setAttribute('visible', 'normal');
+  }.bind(this), duration);
+
+};
+
+/**
+ * Hide the mosaic.
+ */
+Mosaic.prototype.hide = function() {
+  this.removeAttribute('visible');
+};
+
+/**
+ * Apply or reset the zoom transform.
+ *
+ * @param {Rect} tileRect Tile rectangle. Reset the transform if null.
+ * @param {Rect} imageRect Large image rectangle. Reset the transform if null.
+ * @param {boolean} opt_instant True of the transition should be instant.
+ */
+Mosaic.prototype.transform = function(tileRect, imageRect, opt_instant) {
+  if (opt_instant)

[dgozman, 2012/09/14 15:17:38]

braces must be present when else clause is present

+    this.style.webkitTransitionDuration = '0';
+  else
+    this.style.webkitTransitionDuration =
+        ImageView.ZOOM_ANIMATION_DURATION + 'ms';
+
+  if (this.canZoom() && tileRect && imageRect) {
+    var scaleX = imageRect.width / tileRect.width;
+    var scaleY = imageRect.height / tileRect.height;
+    var shiftX = (imageRect.left + imageRect.width / 2) -
+        (tileRect.left + tileRect.width / 2);
+    var shiftY = (imageRect.top + imageRect.height / 2) -
+        (tileRect.top + tileRect.height / 2);
+    this.style.webkitTransform =
+        'translate(' + shiftX * scaleX + 'px, ' + shiftY * scaleY + 'px)' +
+        'scaleX(' + scaleX + ') scaleY(' + scaleY + ')';
+  } else {
+    this.style.webkitTransform = '';
+  }
+};
+
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * Creates a selection controller that is to be used with grid.
  * @param {cr.ui.ListSelectionModel} selectionModel The selection model to
  *     interact with.
  * @param {Mosaic.Layout} layoutModel The layout model to use.
  * @constructor
  * @extends {!cr.ui.ListSelectionController}
  */
@@ skipping 31 matching lines @@
  * @param {Element} container Container element.
  * @constructor
  */
 Mosaic.Layout = function(container) {
   this.container_ = container;
   this.columns_ = [];
   this.newColumn_ = null;
 };
 
 /**
- * Blank space at the top and the bottom of the mosaic element.
+ * Blank space at the top of the mosaic element. We do not do that is CSS
+ * because we want the mosaic to occupy the entire parent div which makes
+ * animated transitions easier.
  */
-Mosaic.Layout.PADDING = 50;
+Mosaic.Layout.PADDING_TOP = 50;
+
+/**
+ * Blank space at the bottom of the mosaic element.
+ */
+Mosaic.Layout.PADDING_BOTTOM = 70;
 
 /**
  * Horizontal and vertical spacing between images. Should be kept in sync
  * with the style of .mosaic-item in gallery.css (= 2 * ( 4 + 1))
  */
 Mosaic.Layout.SPACING = 10;
 
 /**
  * @return {number} Total number of tiles added to the layout.
  */
@@ skipping 13 matching lines @@
 /**
  * Add a tile to the layout.
  *
  * @param {Mosaic.Tile} tile The tile to be added.
  * @param {boolean} isLast True if this tile is the last.
  */
 Mosaic.Layout.prototype.add = function(tile, isLast) {
   var layoutQueue = [tile];
   var tilesPerRow = Mosaic.Row.TILES_PER_ROW;
 
-  var layoutHeight = this.container_.clientHeight - Mosaic.Layout.PADDING * 2;
+  var layoutHeight = this.container_.clientHeight -
+      (Mosaic.Layout.PADDING_TOP + Mosaic.Layout.PADDING_BOTTOM);
 
   while (layoutQueue.length) {
     if (!this.newColumn_) {
       this.newColumn_ = new Mosaic.Column(
           this.columns_.length, this.getTileCount(), layoutHeight, tilesPerRow);
       tilesPerRow = Mosaic.Row.TILES_PER_ROW;  // Reset the default.
     }
 
     this.newColumn_.add(layoutQueue.shift());
 
     if (this.newColumn_.prepareLayout(isLast && !layoutQueue.length)) {
       if (this.newColumn_.isSuboptimal()) {
         // Forget the new column, put its tiles back into the layout queue.
         layoutQueue = this.newColumn_.getTiles().concat(layoutQueue);
         tilesPerRow = 1;  // Force 1 tile per row for the next column.
       } else {
         var lastColumn = this.columns_[this.columns_.length - 1];
         this.newColumn_.layout(lastColumn ? lastColumn.getRightEdge() : 0,
-            Mosaic.Layout.PADDING);
+            Mosaic.Layout.PADDING_TOP);
         this.columns_.push(this.newColumn_);
       }
       this.newColumn_ = null;
     }
   }
 };
 
 /**
  * Backtrack the layout to the beginning of the column containing a tile with
  * a given index.
@@ skipping 609 matching lines @@
  *   relative to the viewport.
  */
 Mosaic.Tile.prototype.getImageRect = function() {
   if (this.left_ == null)  // Not laid out.
     return null;
 
   var margin = Mosaic.Layout.SPACING / 2;
   return new Rect(this.left_ - this.container_.scrollLeft, this.top_,
       this.width_, this.height_).inflate(-margin, -margin);
 };