Gallery: Scroll images by two finger swipe on a track pad.

ui/file_manager/gallery/js/slide_mode.js

 // Copyright 2014 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.
 
 'use strict';
 
 /**
  * Slide mode displays a single image and has a set of controls to navigate
  * between the images and to edit an image.
  *
@@ skipping 1367 matching lines @@
    * Zoom value just after last touch event.
    * @type {number}
    * @private
    */
   this.lastZoom_ = 1.0;
 
   targetElement.addEventListener('touchstart', this.onTouchStart_.bind(this));
   var onTouchEventBound = this.onTouchEvent_.bind(this);
   targetElement.ownerDocument.addEventListener('touchmove', onTouchEventBound);
   targetElement.ownerDocument.addEventListener('touchend', onTouchEventBound);
+
+  targetElement.addEventListener('mousewheel', this.onMouseWheel_.bind(this));
 }
 
 /**
  * If the user touched the image and moved the finger more than SWIPE_THRESHOLD
  * horizontally it's considered as a swipe gesture (change the current image).
  * @type {number}
  * @const
  */
 TouchHandler.SWIPE_THRESHOLD = 100;
 
@@ skipping 11 matching lines @@
  * @return {boolean} Distance between touch[0] and touch[1].
  */
 TouchHandler.getDistance = function(event) {
   var touch1 = event.touches[0];
   var touch2 = event.touches[1];
   var dx = touch1.clientX - touch2.clientX;
   var dy = touch1.clientY - touch2.clientY;
   return Math.sqrt(dx * dx + dy * dy);
 };
 
-TouchHandler.prototype = {
-  /**
-   * @param {boolean} flag New value.
-   */
-  set enabled(flag) {
-    this.enabled_ = flag;
-    if (!this.enabled_)
-      this.stopOperation();
-  }
-};
-
 /**
  * Obtains the degrees of the pinch twist angle.
  * @param {TouchEvent} event1 Start touch event. It should include more than two
  *     touches.
  * @param {TouchEvent} event2 Current touch event. It should include more than
  *     two touches.
  * @return {number} Degrees of the pinch twist angle.
  */
 TouchHandler.getTwistAngle = function(event1, event2) {
   var dx1 = event1.touches[1].clientX - event1.touches[0].clientX;
   var dy1 = event1.touches[1].clientY - event1.touches[0].clientY;
   var dx2 = event2.touches[1].clientX - event2.touches[0].clientX;
   var dy2 = event2.touches[1].clientY - event2.touches[0].clientY;
   var innerProduct = dx1 * dx2 + dy1 * dy2;  // |v1| * |v2| * cos(t) = x / r
   var outerProduct = dx1 * dy2 - dy1 * dx2;  // |v1| * |v2| * sin(t) = y / r
   return Math.atan2(outerProduct, innerProduct) * 180 / Math.PI;  // atan(y / x)
 };
 
+TouchHandler.prototype = {
+  /**
+   * @param {boolean} flag New value.
+   */
+  set enabled(flag) {
+    this.enabled_ = flag;
+    if (!this.enabled_)
+      this.stopOperation();
+  }
+};
+
 /**
  * Stops the current touch operation.
  */
 TouchHandler.prototype.stopOperation = function() {
   this.touchStarted_ = false;
   this.done_ = false;
   this.gestureStartEvent_ = null;
   this.lastEvent_ = null;
   this.lastZoom_ = 1.0;
 };
 
+/**
+ * Handles touch start events.
+ * @param {TouchEvent} event Touch event.
+ * @private
+ */
 TouchHandler.prototype.onTouchStart_ = function(event) {
   if (this.enabled_ && event.touches.length === 1)
     this.touchStarted_ = true;
 };
 
 /**
- * @param {event} event Touch event.
+ * Handles touch move and touch end events.
+ * @param {TouchEvent} event Touch event.
+ * @private
  */
 TouchHandler.prototype.onTouchEvent_ = function(event) {
   // Check if the current touch operation started from the target element or
   // not.
   if (!this.touchStarted_)
     return;
 
   // Check if the current touch operation ends with the event.
   if (event.touches.length === 0) {
     this.stopOperation();
@@ skipping 64 matching lines @@
       else
         viewport.setRotation(this.gestureStartRotation_);
       this.slideMode_.applyViewportChange();
       break;
   }
 
   // Update the last event.
   this.lastEvent_ = event;
   this.lastZoom_ = viewport.getZoom();
 };
+
+/**
+ * Handles mouse wheel events.
+ * @param {MouseEvent} event Wheel event.
+ * @private
+ */
+TouchHandler.prototype.onMouseWheel_ = function(event) {
+  var viewport = this.slideMode_.getViewport();
+  if (!this.enabled_ || !viewport.isZoomed())
+    return;
+  this.stopOperation();
+  viewport.setOffset(
+      viewport.getOffsetX() + event.wheelDeltaX,
+      viewport.getOffsetY() + event.wheelDeltaY);
+  this.slideMode_.applyViewportChange();
+};