Gallery.app: Add touch handlers for the zoom/scroll feature.

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 73 matching lines @@
  * @return {string} Mode name.
  */
 SlideMode.prototype.getName = function() { return 'slide'; };
 
 /**
  * @return {string} Mode title.
  */
 SlideMode.prototype.getTitle = function() { return 'GALLERY_SLIDE'; };
 
 /**
+ * @return {Viewport} Viewport.
+ */
+SlideMode.prototype.getViewport = function() { return this.viewport_; };
+
+/**
  * Initialize the listeners.
  * @private
  */
 SlideMode.prototype.initListeners_ = function() {
   window.addEventListener('resize', this.onResize_.bind(this));
 };
 
 /**
  * Initialize the UI.
  * @private
@@ skipping 121 matching lines @@
       {
         root: this.container_,
         image: this.imageContainer_,
         toolbar: this.editBarMain_,
         mode: this.editBarModeWrapper_
       },
       SlideMode.EDITOR_MODES,
       this.displayStringFunction_,
       this.onToolsVisibilityChanged_.bind(this));
 
-  this.editor_.getBuffer().addOverlay(
-      new SwipeOverlay(this.advanceManually.bind(this)));
+  this.touchHandlers_ = new TouchHandlers(this.imageContainer_, this);
 };
 
 /**
  * Load items, display the selected item.
  * @param {Rect} zoomFromRect Rectangle for zoom effect.
  * @param {function} displayCallback Called when the image is displayed.
  * @param {function} loadCallback Called when the image is displayed.
  */
 SlideMode.prototype.enter = function(
     zoomFromRect, displayCallback, loadCallback) {
@@ skipping 57 matching lines @@
   }.bind(this)).then(function(delay) {
     // Turn the mode active.
     this.active_ = true;
     ImageUtil.setAttribute(this.arrowBox_, 'active', this.getItemCount_() > 1);
     this.ribbon_.enable();
 
     // Register handlers.
     this.selectionModel_.addEventListener('change', this.onSelectionBound_);
     this.dataModel_.addEventListener('splice', this.onSpliceBound_);
     this.dataModel_.addEventListener('content', this.onContentBound_);
+    this.touchHandlers_.enable = true;
 
     // Wait 1000ms after the animation is done, then prefetch the next image.
     this.requestPrefetch(1, delay + 1000);
 
     // Call load callback.
     if (loadCallback)
       loadCallback();
   }.bind(this)).catch(function(error) {
     console.error(error.stack, error);
   });
@@ skipping 26 matching lines @@
   if (this.getItemCount_() === 0) {
     this.showErrorBanner_(false);
     commitDone();
   } else {
     this.commitItem_(commitDone);
   }
 
   // Disable the slide-mode only buttons when leaving.
   this.editButton_.setAttribute('disabled', '');
   this.printButton_.setAttribute('disabled', '');
+
+  // Disable touch operation.
+  this.touchHandlers_.enable = false;
 };
 
 
 /**
  * Execute an action when the editor is not busy.
  *
  * @param {function} action Function to execute.
  */
 SlideMode.prototype.executeWhenReady = function(action) {
   this.editor_.executeWhenReady(action);
@@ skipping 483 matching lines @@
       break;
 
     case 'U+0045':  // 'e' toggles the editor.
       if (!this.editButton_.hasAttribute('disabled'))
         this.toggleEditor(event);
       break;
 
     case 'U+001B':  // Escape
       if (this.isEditing()) {
         this.toggleEditor(event);
-      } else if (this.viewport_.getZoomIndex() !== 0) {
+      } else if (this.viewport_.isZooming()) {
         this.viewport_.resetView();
+        this.touchHandlers_.stopOperation();
         this.imageView_.applyViewportChange();
       } else {
         return false;  // Not handled.
       }
       break;
 
     case 'Home':
       this.selectFirst();
       break;
     case 'End':
       this.selectLast();
       break;
     case 'Up':
     case 'Down':
     case 'Left':
     case 'Right':
-      if (!this.isEditing() && this.viewport_.getZoomIndex() !== 0) {
+      if (!this.isEditing() && this.viewport_.isZooming()) {
         var delta = SlideMode.KEY_OFFSET_MAP[keyID];
         this.viewport_.setOffset(
             ~~(this.viewport_.getOffsetX() +
                delta[0] * this.viewport_.getZoom()),
             ~~(this.viewport_.getOffsetY() +
-               delta[1] * this.viewport_.getZoom()),
-            true);
+               delta[1] * this.viewport_.getZoom()));
+        this.touchHandlers_.stopOperation();
         this.imageView_.applyViewportChange();
       } else {
         this.advanceWithKeyboard(keyID);
       }
       break;
     case 'MediaNextTrack':
     case 'MediaPreviousTrack':
       this.advanceWithKeyboard(keyID);
       break;
 
     case 'Ctrl-U+00BB':  // Ctrl+'=' zoom in.
       if (!this.isEditing()) {
-        this.viewport_.setZoomIndex(this.viewport_.getZoomIndex() + 1);
+        this.viewport_.zoomIn();
+        this.touchHandlers_.stopOperation();
         this.imageView_.applyViewportChange();
       }
       break;
 
     case 'Ctrl-U+00BD':  // Ctrl+'-' zoom out.
       if (!this.isEditing()) {
-        this.viewport_.setZoomIndex(this.viewport_.getZoomIndex() - 1);
+        this.viewport_.zoomOut();
+        this.touchHandlers_.stopOperation();
         this.imageView_.applyViewportChange();
       }
       break;
 
     case 'Ctrl-U+0030': // Ctrl+'0' zoom reset.
       if (!this.isEditing()) {
-        this.viewport_.resetView();
+        this.viewport_.setZoom(1.0);
+        this.touchHandlers_.stopOperation();
         this.imageView_.applyViewportChange();
       }
       break;
   }
 
   return true;
 };
 
 /**
  * Resize handler.
  * @private
  */
 SlideMode.prototype.onResize_ = function() {
   this.viewport_.setScreenSize(
       this.container_.clientWidth, this.container_.clientHeight);
+  this.touchHandlers_.stopOperation();
   this.editor_.getBuffer().draw();
 };
 
 /**
  * Update thumbnails.
  */
 SlideMode.prototype.updateThumbnails = function() {
   this.ribbon_.reset();
   if (this.active_)
     this.ribbon_.redraw();
@@ skipping 129 matching lines @@
 
 /**
  * @return {boolean} True if the slideshow is on.
  * @private
  */
 SlideMode.prototype.isSlideshowOn_ = function() {
   return this.container_.hasAttribute('slideshow');
 };
 
 /**
- * Start the slideshow.
+ * Starts the slideshow.
  * @param {number=} opt_interval First interval in ms.
  * @param {Event=} opt_event Event.
  */
 SlideMode.prototype.startSlideshow = function(opt_interval, opt_event) {
   // Reset zoom.
   this.viewport_.resetView();
   this.imageView_.applyViewportChange();
 
+  // Disable touch operation.
+  this.touchHandlers_.enable = false;
+
   // Set the attribute early to prevent the toolbar from flashing when
   // the slideshow is being started from the mosaic view.
   this.container_.setAttribute('slideshow', 'playing');
 
   if (this.active_) {
     this.stopEditing_();
   } else {
     // We are in the Mosaic mode. Toggle the mode but remember to return.
     this.leaveAfterSlideshow_ = true;
     this.toggleMode_(this.startSlideshow.bind(
@@ skipping 10 matching lines @@
     setTimeout(this.toggleFullScreen_.bind(this),
                ImageView.ZOOM_ANIMATION_DURATION);
     opt_interval = (opt_interval || SlideMode.SLIDESHOW_INTERVAL) +
         SlideMode.FULLSCREEN_TOGGLE_DELAY;
   }
 
   this.resumeSlideshow_(opt_interval);
 };
 
 /**
- * Stop the slideshow.
+ * Stops the slideshow.
  * @param {Event=} opt_event Event.
  * @private
  */
 SlideMode.prototype.stopSlideshow_ = function(opt_event) {
   if (!this.isSlideshowOn_())
     return;
 
   if (opt_event)  // Caused by user action, notify the Gallery.
     cr.dispatchSimpleEvent(this, 'useraction');
 
   this.pauseSlideshow_();
   this.container_.removeAttribute('slideshow');
 
   // Do not restore fullscreen if we exited fullscreen while in slideshow.
   var fullscreen = util.isFullScreen(this.context_.appWindow);
   var toggleModeDelay = 0;
   if (!this.fullscreenBeforeSlideshow_ && fullscreen) {
     this.toggleFullScreen_();
     toggleModeDelay = SlideMode.FULLSCREEN_TOGGLE_DELAY;
   }
   if (this.leaveAfterSlideshow_) {
     this.leaveAfterSlideshow_ = false;
     setTimeout(this.toggleMode_.bind(this), toggleModeDelay);
   }
+
+  // Re-enable touch operation.
+  this.touchHandlers_.enable = true;
 };
 
 /**
  * @return {boolean} True if the slideshow is playing (not paused).
  * @private
  */
 SlideMode.prototype.isSlideshowPlaying_ = function() {
   return this.container_.getAttribute('slideshow') === 'playing';
 };
 
 /**
- * Pause/resume the slideshow.
+ * Pauses/resumes the slideshow.
  * @private
  */
 SlideMode.prototype.toggleSlideshowPause_ = function() {
   cr.dispatchSimpleEvent(this, 'useraction');  // Show the tools.
   if (this.isSlideshowPlaying_()) {
     this.pauseSlideshow_();
   } else {
     this.resumeSlideshow_(SlideMode.SLIDESHOW_INTERVAL_FIRST);
   }
 };
 
 /**
  * @param {number=} opt_interval Slideshow interval in ms.
  * @private
  */
 SlideMode.prototype.scheduleNextSlide_ = function(opt_interval) {
   console.assert(this.isSlideshowPlaying_(), 'Inconsistent slideshow state');
 
   if (this.slideShowTimeout_)
     clearTimeout(this.slideShowTimeout_);
 
   this.slideShowTimeout_ = setTimeout(function() {
         this.slideShowTimeout_ = null;
         this.selectNext(1);
       }.bind(this),
       opt_interval || SlideMode.SLIDESHOW_INTERVAL);
 };
 
 /**
- * Resume the slideshow.
+ * Resumes the slideshow.
  * @param {number=} opt_interval Slideshow interval in ms.
  * @private
  */
 SlideMode.prototype.resumeSlideshow_ = function(opt_interval) {
   this.container_.setAttribute('slideshow', 'playing');
   this.scheduleNextSlide_(opt_interval);
 };
 
 /**
- * Pause the slideshow.
+ * Pauses the slideshow.
  * @private
  */
 SlideMode.prototype.pauseSlideshow_ = function() {
   this.container_.setAttribute('slideshow', 'paused');
   if (this.slideShowTimeout_) {
     clearTimeout(this.slideShowTimeout_);
     this.slideShowTimeout_ = null;
   }
 };
 
 /**
  * @return {boolean} True if the editor is active.
  */
 SlideMode.prototype.isEditing = function() {
   return this.container_.hasAttribute('editing');
 };
 
 /**
- * Stop editing.
+ * Stops editing.
  * @private
  */
 SlideMode.prototype.stopEditing_ = function() {
   if (this.isEditing())
     this.toggleEditor();
 };
 
 /**
  * Activate/deactivate editor.
  * @param {Event=} opt_event Event.
@@ skipping 12 matching lines @@
   ImageUtil.setAttribute(this.container_, 'editing', !this.isEditing());
 
   if (this.isEditing()) { // isEditing has just been flipped to a new value.
     // Reset zoom.
     this.viewport_.resetView();
     this.imageView_.applyViewportChange();
     if (this.context_.readonlyDirName) {
       this.editor_.getPrompt().showAt(
           'top', 'GALLERY_READONLY_WARNING', 0, this.context_.readonlyDirName);
     }
+    this.touchHandlers_.enable = false;
   } else {
     this.editor_.getPrompt().hide();
     this.editor_.leaveModeGently();
+    this.touchHandlers_.enable = true;
   }
 };
 
 /**
  * Prints the current item.
  * @private
  */
 SlideMode.prototype.print_ = function() {
   cr.dispatchSimpleEvent(this, 'useraction');
   window.print();
 };
 
 /**
- * Display the error banner.
+ * Displays the error banner.
  * @param {string} message Message.
  * @private
  */
 SlideMode.prototype.showErrorBanner_ = function(message) {
   if (message) {
     this.errorBanner_.textContent = this.displayStringFunction_(message);
   }
   ImageUtil.setAttribute(this.container_, 'error', !!message);
 };
 
 /**
- * Show/hide the busy spinner.
+ * Shows/hides the busy spinner.
  *
  * @param {boolean} on True if show, false if hide.
  * @private
  */
 SlideMode.prototype.showSpinner_ = function(on) {
   if (this.spinnerTimer_) {
     clearTimeout(this.spinnerTimer_);
     this.spinnerTimer_ = null;
   }
 
   if (on) {
     this.spinnerTimer_ = setTimeout(function() {
       this.spinnerTimer_ = null;
       ImageUtil.setAttribute(this.container_, 'spinner', true);
     }.bind(this), 1000);
   } else {
     ImageUtil.setAttribute(this.container_, 'spinner', false);
   }
 };
 
 /**
- * Overlay that handles swipe gestures. Changes to the next or previous file.
- * @param {function(number)} callback A callback accepting the swipe direction
- *    (1 means left, -1 right).
- * @constructor
- * @implements {ImageBuffer.Overlay}
- */
-function SwipeOverlay(callback) {
-  this.callback_ = callback;
+ * Apply the change of viewport.
+ */
+SlideMode.prototype.applyViewportChange = function() {
+  this.imageView_.applyViewportChange();
+};
+
+/**

[mtomasz, 2014/07/23 08:15:08]

@param, @constructor missing

[hirono, 2014/07/23 09:27:23]

Done.

+ * Touch handlers of the slide mode.
+ */
+function TouchHandlers(targetElement, slideMode) {

[mtomasz, 2014/07/23 08:15:08]

I'm wondering if the plural naming is fine. How about just TouchHandler? It is
one big handler for all touch events. WDYT?

[hirono, 2014/07/23 09:27:23]

Done.

+  /**
+   * Event source.
+   * @type {DOMElement}
+   */
+  this.targetElement_ = targetElement;
+
+  /**
+   * Target of touch operations.
+   * @type {SlideMode}
+   * @private
+   */
+  this.slideMode_ = slideMode;
+
+  /**
+   * Flag to enable/disable touch operation.
+   */
+  this.enable_ = true;

[mtomasz, 2014/07/23 08:15:08]

nit: enabled?

[hirono, 2014/07/23 09:27:23]

Done.

+
+  /**
+   * Whether it is in a touch operation that is started from targetElement or
+   * not.
+   * @type {boolean}
+   * @private
+   */
+  this.inTouch_ = false;

[mtomasz, 2014/07/23 08:15:08]

nit: How about simply touchStarted?

[hirono, 2014/07/23 09:27:23]

Done.

+
+  /**
+   * The swipe action that should happen only once in an operation is already
+   * done or not.
+   * @type {boolean}
+   * @private
+   */
+  this.done_ = false;
+
+  /**
+   * Event on beginning of the current gesture.
+   * The variable is updated when the number of touch finger changed.
+   * @type {TouchEvent}
+   * @private
+   */
+  this.gestureStartEvent_ = null;
+
+  /**
+   * Last touch event.
+   * @type {TouchEvent}
+   * @private
+   */
+  this.lastEvent_ = null;
+
+  /**
+   * Zoom value just after last touch event.
+   * @type {number}
+   * @private
+   */
+  this.lastZoom_ = 1.0;
+
+  var onTouchEventBound = this.onTouchEvent_.bind(this);
+  targetElement.addEventListener('touchstart', onTouchEventBound);
+  targetElement.ownerDocument.addEventListener('touchmove', onTouchEventBound);
+  targetElement.ownerDocument.addEventListener('touchend', onTouchEventBound);
 }
 
 /**
- * Inherit ImageBuffer.Overlay.
- */
-SwipeOverlay.prototype.__proto__ = ImageBuffer.Overlay.prototype;
-
-/**
- * @param {number} x X pointer position.
- * @param {number} y Y pointer position.
- * @param {boolean} touch True if dragging caused by touch.
- * @return {function} The closure to call on drag.
- */
-SwipeOverlay.prototype.getDragHandler = function(x, y, touch) {
-  if (!touch)
-    return null;
-  var origin = x;
-  var done = false;
-  return function(x, y) {
-    if (!done && origin - x > SwipeOverlay.SWIPE_THRESHOLD) {
-      this.callback_(1);
-      done = true;
-    } else if (!done && x - origin > SwipeOverlay.SWIPE_THRESHOLD) {
-      this.callback_(-1);
-      done = true;
-    }
-  }.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).
- */
-SwipeOverlay.SWIPE_THRESHOLD = 100;
+ * @type {number}
+ * @const
+ */
+TouchHandlers.SWIPE_THRESHOLD = 100;
+
+/**
+ * Obtains distance between fingers.
+ * @param {TouchEvent} event Touch event. It should include more than two
+ *     touches.
+ * @return {boolean} Distance between touch[0] and touch[1].
+ */
+TouchHandlers.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);
+};
+
+TouchHandlers.prototype = {
+  /**
+   * @param {boolean} flag New value.
+   */
+  set enable(flag) {
+    this.enable_ = flag;
+    if (!this.enable_)
+      this.stopOperation();
+  }
+};
+
+/**
+ * Stops the current touch operation.
+ */
+TouchHandlers.prototype.stopOperation = function() {
+  this.inTouch_ = false;
+  this.done_ = false;
+  this.gestureStartEvent_ = null;
+  this.lastEvent_ = null;
+  this.lastZoom_ = 1.0;
+};
+
+/**
+ * @param {event} event Touch event.
+ */
+TouchHandlers.prototype.onTouchEvent_ = function(event) {
+  // Check if the current touch operation started from the target element or
+  // not.
+  if (!this.inTouch_) {
+    // Check if a touch operation starts with the event.
+    if (this.enable_ &&
+        event.type === 'touchstart' &&

[mtomasz, 2014/07/23 08:15:08]

nit: Why not splitting this to a separate method? like onTouchStartEvent? This
code is never executed for other events.

[hirono, 2014/07/23 09:27:23]

Done.

+        event.touches.length === 1) {
+      this.inTouch_ = true;
+    } else {
+      return;
+    }
+  } else {
+    // Check if the current touch operaiton ends with the event.

[mtomasz, 2014/07/23 08:15:08]

typo: operation

[hirono, 2014/07/23 09:27:23]

Done.

+    if (event.touches.length === 0) {
+      this.stopOperation();
+      return;
+    }
+  }
+
+  // Check if a new gesture started or not.
+  if (!this.lastEvent_ ||
+      this.lastEvent_.touches.length !== event.touches.length) {
+    if (event.touches.length === 2 ||
+        event.touches.length === 1) {
+      this.gestureStartEvent_ = event;
+      this.lastEvent_ = event;
+      this.lastZoom_ = this.slideMode_.getViewport().getZoom();
+    } else {
+      this.gestureStartEvent_ = null;
+      this.lastEvent_ = null;
+      this.lastZoom_ = 1.0;
+    }
+    return;
+  }
+
+  // Handle the gesture movement.
+  var viewport = this.slideMode_.getViewport();
+  switch (event.touches.length) {
+    case 1:
+      if (viewport.isZooming()) {
+        // Scrolling an image by swipe.
+        var dx = event.touches[0].screenX - this.lastEvent_.touches[0].screenX;
+        var dy = event.touches[0].screenY - this.lastEvent_.touches[0].screenY;
+        viewport.setOffset(
+            viewport.getOffsetX() + dx, viewport.getOffsetY() + dy);
+        this.slideMode_.applyViewportChange();
+      } else {
+        // Traversing images by swipe.
+        if (this.done_)
+          break;
+        var dx =
+            event.touches[0].clientX -
+            this.gestureStartEvent_.touches[0].clientX;
+        if (dx > TouchHandlers.SWIPE_THRESHOLD) {
+          this.slideMode_.advanceManually(-1);
+          this.done_ = true;
+        } else if (dx < -TouchHandlers.SWIPE_THRESHOLD) {
+          this.slideMode_.advanceManually(1);
+          this.done_ = true;
+        }
+      }
+      break;
+
+    case 2:
+      // Pinch zoom.
+      var distance1 = TouchHandlers.getDistance(this.lastEvent_);
+      var distance2 = TouchHandlers.getDistance(event);
+      if (distance1 == 0.0)

[mtomasz, 2014/07/23 08:15:08]

nit: Simply === 0?

[hirono, 2014/07/23 09:27:23]

Done.

+        break;
+      var zoom = distance2 / distance1 * this.lastZoom_;
+      viewport.setZoom(zoom);
+      this.slideMode_.applyViewportChange();
+      break;
+  }
+
+  // Update the last event.
+  this.lastEvent_ = event;
+  this.lastZoom_ = viewport.getZoom();
+};