b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
84 lines
2.2 KiB
JavaScript
Executable file
84 lines
2.2 KiB
JavaScript
Executable file
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|