panzoom.js

define(function(require, exports, module) {
'use strict';

/**
 * Dependencies
 */

var GestureDetector = require('GestureDetector');

/**
 * Exports
 */

module.exports = addPanAndZoomHandlers;

/*
 * This module adds pan-and-zoom capability to images displayed by
 * shared/js/media/media_frame.js.
 * It is used by preview-gallery.js and confirm.js
 */
function addPanAndZoomHandlers(frame, swipeCallback) {
  // frame is the MediaFrame object. container is its DOM element.
  var container = frame.container;

  // Generate gesture events for the container
  var gestureDetector = new GestureDetector(container);
  gestureDetector.startDetecting();

  // When the user touches the screen and moves their finger left or
  // right, they might want to pan within a zoomed-in image, or they
  // might want to swipe between multiple items in the camera preview
  // gallery. We pass the amount of motion to the MediaFrame pan() method,
  // and it returns the amount that cannot be used to pan the displayed
  // item. We track this returned amount as how far left or right the
  // image has been swiped, and pass the number to the swipeCallback.
  var swipeAmount = 0;

  // And handle them with these listeners
  container.addEventListener('dbltap', handleDoubleTap);
  container.addEventListener('transform', handleTransform);
  container.addEventListener('pan', handlePan);
  if (swipeCallback) {
    container.addEventListener('swipe', handleSwipe);
  }

  function handleDoubleTap(e) {
    var scale;
    if (frame.fit.scale > frame.fit.baseScale) {
      scale = frame.fit.baseScale / frame.fit.scale;
    }
    else {
      scale = 2;
    }

    frame.zoom(scale, e.detail.clientX, e.detail.clientY, 200);
  }

  function handleTransform(e) {
    frame.zoom(e.detail.relative.scale,
               e.detail.midpoint.clientX, e.detail.midpoint.clientY);
  }

  function handlePan(e) {
    var dx = e.detail.relative.dx;
    var dy = e.detail.relative.dy;

    if (swipeCallback) {
      dx += swipeAmount;
      swipeAmount = frame.pan(dx, dy);
      swipeCallback(swipeAmount);
    } else {
      frame.pan(dx, dy);
    }
  }

  function handleSwipe(e) {
    if (swipeAmount !== 0) {
      swipeCallback(swipeAmount, e.detail.vx);
      swipeAmount = 0;
    }
  }
}

});