Smooth scrolling effect to mosaic view.

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.
@@ skipping 71 matching lines @@
  * Inherit from HTMLDivElement.
  */
 Mosaic.prototype.__proto__ = HTMLDivElement.prototype;
 
 /**
  * Default layout delay in ms.
  */
 Mosaic.LAYOUT_DELAY = 200;
 
 /**
+ * Smooth scroll animation duration when scrolling using keyboard or
+ * clicking on a partly visible tile. In ms.
+ */
+Mosaic.ANIMATED_SCROLL_DURATION = 500;
+
+/**
  * Decorate a Mosaic instance.
  *
  * @param {Mosaic} self Self pointer.
  * @param {cr.ui.ArrayDataModel} dataModel Data model.
  * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {MetadataCache} metadataCache Metadata cache.
  * @param {function(string)} onThumbnailError Thumbnail load error handler.
  */
 Mosaic.decorate = function(self, dataModel, selectionModel, metadataCache,
                            onThumbnailError) {
@@ skipping 61 matching lines @@
 
   this.selectionModel_.addEventListener('change', this.onSelection_.bind(this));
   this.selectionModel_.addEventListener('leadIndexChange',
       this.onLeadChange_.bind(this));
 
   this.dataModel_.addEventListener('splice', this.onSplice_.bind(this));
   this.dataModel_.addEventListener('content', this.onContentChange_.bind(this));
 };
 
 /**
+ * Smoothly scrolls the container to the specified position using
+ * f(x) = sqrt(x) speed function normalized to animation duration.
+ * @param {number} targetPosition Horizontal scroll position in pixels.
+ */
+Mosaic.prototype.animatedScrollTo = function(targetPosition) {
+  if (this.scrollTimer_)
+    clearInterval(this.scrollTimer_);

[yoshiki, 2013/02/12 01:30:52]

Assign null or undefined after clearing the interval.

[mtomasz, 2013/02/12 04:19:21]

Done.

+
+  // Mouse move events are fired without touching the mouse because of scrolling
+  // the container. Therefore, these events have to be suppressed.
+  this.suppressHovering_ = true;
+
+  // Calculates integral area from t1 to t2 of f(x) = sqrt(x) dx.
+  var integral = function(t1, t2) {
+    return 2.0 / 3.0 * Math.pow(t2, 3.0 / 2.0) -
+           2.0 / 3.0 * Math.pow(t1, 3.0 / 2.0);
+  };
+
+  var delta = targetPosition - this.scrollLeft;
+  var factor = delta / integral(0, Mosaic.ANIMATED_SCROLL_DURATION);
+  var startTime = Date.now();
+  var lastPosition = 0;
+
+  this.scrollTimer_ = setInterval(function() {

[yoshiki, 2013/02/12 01:30:52]

It is better to use "requestAnimationFrame" on animation purpose.

[mtomasz, 2013/02/12 04:19:21]

This is great, I didn't know about it! Done.

+    var position = Date.now() - startTime;
+    var step = factor *
+        integral(Math.max(0, Mosaic.ANIMATED_SCROLL_DURATION - position),
+                 Math.max(0, Mosaic.ANIMATED_SCROLL_DURATION - lastPosition));
+
+    var lastScrollLeft = this.scrollLeft;
+    console.log(step);

[yoshiki, 2013/02/12 01:30:52]

Remove?

[mtomasz, 2013/02/12 04:19:21]

Done.

+    this.scrollLeft += step;
+
+    if (lastScrollLeft == this.scrollLeft) {

[yoshiki, 2013/02/12 01:30:52]

We can replace this condition with just "step == 0", right?

[mtomasz, 2013/02/12 04:19:21]

Nope, this didn't work when reaching edges, eg. when scrollLeft is less than
step. I believe this if is easier than checking if step == 0 and >= than
scrollLeft and <= scrollLeft + width.

+      clearInterval(this.scrollTimer_);
+      this.scrollTimer_ = null;
+
+      // Release the hovering lock after a safe delay to avoid hovering
+      // a tile because of altering |this.scrollLeft|.
+      setTimeout(function() {
+        if (!this.scrollTimer_)
+          this.suppressHovering_ = false;
+      }.bind(this), 100);
+    }
+
+    lastPosition = position;
+  }.bind(this), 10);
+};
+
+/**
  * @return {Mosaic.Tile} Selected tile or undefined if no selection.
  */
 Mosaic.prototype.getSelectedTile = function() {
   return this.tiles_ && this.tiles_[this.selectionModel_.selectedIndex];
 };
 
 /**
  * @param {number} index Tile index.
  * @return {Rect} Tile's image rectangle.
  */
 Mosaic.prototype.getTileRect = function(index) {
   var tile = this.tiles_[index];
   return tile && tile.getImageRect();
 };
 
 /**
  * @param {number} index Tile index.
  * Scroll the given tile into the viewport.
  */
 Mosaic.prototype.scrollIntoView = function(index) {
   var tile = this.tiles_[index];
   if (tile) tile.scrollIntoView();

[yoshiki, 2013/02/12 01:30:52]

Add the boolean argument |opt_animated|.

[mtomasz, 2013/02/12 04:19:21]

Can you clarify? This argument is optional.

[yoshiki, 2013/02/12 04:49:10]

Sorry, it was my mistake. It's optional.

On 2013/02/12 04:19:21, mtomasz wrote:

 };
 
 /**
  * Load multiple tiles.
  *
  * @param {Array.<Mosaic.Tile>} tiles Array of tiles.
  * @param {function} opt_callback Completion callback.
  * @private
  */
 Mosaic.prototype.loadTiles_ = function(tiles, opt_callback) {
@@ skipping 100 matching lines @@
 };
 
 /**
  * Mouse event handler.
  *
  * @param {Event} event Event.
  * @private
  */
 Mosaic.prototype.onMouseEvent_ = function(event) {
   // Navigating with mouse, enable hover state.
-  this.classList.add('hover-visible');
+  if (!this.suppressHovering_)
+    this.classList.add('hover-visible');
 
   if (event.type == 'mousemove')
     return;
 
   var index = -1;
   for (var target = event.target;
        target && (target != this);
        target = target.parentNode) {
     if (target.classList.contains('mosaic-tile')) {
       index = this.dataModel_.indexOf(target.getItem());
@@ skipping 20 matching lines @@
 /**
  * Lead item change handler.
  *
  * @param {Event} event Event.
  * @private
  */
 Mosaic.prototype.onLeadChange_ = function(event) {
   var index = event.newValue;
   if (index >= 0) {
     var tile = this.tiles_[index];
     if (tile) tile.scrollIntoView();

[yoshiki, 2013/02/12 01:30:52]

Add the boolean argument |opt_animated|.

[mtomasz, 2013/02/12 04:19:21]

As above, please clarify.

   }
 };
 
 /**
  * Splice event handler.
  *
  * @param {Event} event Event.
  * @private
  */
 Mosaic.prototype.onSplice_ = function(event) {
@@ skipping 196 matching lines @@
  */
 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;
 
 /**
+ * Margin for scrolling using keyboard. Distance between a selected tile
+ * and window border.
+ */
+Mosaic.Layout.SCROLL_MARGIN = 30;
+
+/**
  * Layout mode: commit to DOM immediately.
  */
 Mosaic.Layout.MODE_FINAL = 'final';
 
 /**
  * Layout mode: do not commit layout to DOM until it is complete or the viewport
  * overflows.
  */
 Mosaic.Layout.MODE_TENTATIVE = 'tentative';
 
@@ skipping 1013 matching lines @@
   this.style.top = top + 'px';
   this.style.width = width + 'px';
   this.style.height = height + 'px';
 
   if (!this.wrapper_) {  // First time, create DOM.
     this.container_.appendChild(this);
     var border = util.createChild(this, 'img-border');
     this.wrapper_ = util.createChild(border, 'img-wrapper');
   }
   if (this.hasAttribute('selected'))
-    this.scrollIntoView();
+    this.scrollIntoView(false);
 
   this.thumbnailLoader_.attachImage(this.wrapper_,
                                     ThumbnailLoader.FillMode.FILL);
 };
 
 /**
  * If the tile is not fully visible scroll the parent to make it fully visible.
+ * @param {boolean} opt_animated True, if scroll should be animated,
+ *     default: true.
  */
-Mosaic.Tile.prototype.scrollIntoView = function() {
+Mosaic.Tile.prototype.scrollIntoView = function(opt_animated) {
   if (this.left_ == null)  // Not laid out.
     return;
 
-  if (this.left_ < this.container_.scrollLeft) {
-    this.container_.scrollLeft = this.left_;
+  var targetPosition;
+  var tileLeft = this.left_ - Mosaic.Layout.SCROLL_MARGIN;
+  if (tileLeft < this.container_.scrollLeft) {
+    targetPosition = tileLeft;
   } else {
-    var tileRight = this.left_ + this.width_;
+    var tileRight = this.left_ + this.width_ + Mosaic.Layout.SCROLL_MARGIN;
     var scrollRight = this.container_.scrollLeft + this.container_.clientWidth;
     if (tileRight > scrollRight)
-      this.container_.scrollLeft = tileRight - this.container_.clientWidth;
+      targetPosition = tileRight - this.container_.clientWidth;
+  }
+
+  if (targetPosition) {
+    if (opt_animated === false)
+      this.container_.scrollLeft = targetPosition;
+    else
+      this.container_.animatedScrollTo(targetPosition);
   }
 };
 
 /**
  * @return {Rect} Rectangle occupied by the tile's image,
  *   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);
 };
 
 /**
  * @return {number} X coordinate of the tile center.
  */
 Mosaic.Tile.prototype.getCenterX = function() {
   return this.left_ + Math.round(this.width_ / 2);
 };