Merge pull request #24010 from wilsonpage/1066660

Bug 1066660 - [camera] Update drag for improved transitions

apps/camera/bower_components/drag/.bower.json

@@ -1,7 +1,7 @@
 {
   "name": "drag",
   "main": "index.js",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "homepage": "https://github.com/gaia-components/drag",
   "authors": [
     "Wilson Page <wilsonpage@me.com>"
@@ -17,11 +17,11 @@
   "dependencies": {
     "evt": "gaia-components/evt#~0.4.0"
   },
-  "_release": "0.1.1",
+  "_release": "0.1.2",
   "_resolution": {
     "type": "version",
-    "tag": "v0.1.1",
-    "commit": "4cda7ffb9ab2cbfef1e9f8c2187823e0dab7c358"
+    "tag": "v0.1.2",
+    "commit": "44a5e502e6b416c4f46ee5cf9b6a4602df72feb3"
   },
   "_source": "git://github.com/gaia-components/drag.git",
   "_target": "*",

apps/camera/bower_components/drag/bower.json

@@ -1,7 +1,7 @@
 {
   "name": "drag",
   "main": "index.js",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "homepage": "https://github.com/gaia-components/drag",
   "authors": [
     "Wilson Page <wilsonpage@me.com>"

apps/camera/bower_components/drag/index.js

@@ -56,39 +56,49 @@ function Drag(options) {
   this.onTouchEnd = this.onTouchEnd.bind(this);
   this.slideDuration = options.slideDuration || 140;
   this.tapTime = options.tapTime || 180;
-  this.configureTransition();
   this.bindEvents();
 }
 
 Drag.prototype.bindEvents = function() {
   this.container.el.addEventListener('touchstart', this.onTouchStart);
-  this.container.el.addEventListener('touchend', this.onTouchEnd);
-  this.handle.el.addEventListener('touchmove', this.onTouchMove);
-};
-
-Drag.prototype.configureTransition = function() {
-  this.handle.el.style.transitionTimingFunction = 'linear';
-  this.handle.el.style.transitionProperty = 'transform';
-  this.handle.el.style.willChange = 'transform';
+  this.container.el.addEventListener('mousedown', this.onTouchStart);
 };
 
 Drag.prototype.onTouchStart = function(e) {
-  this.touch = e.touches[0];
+  this.updateDimensions();
+  this.touch = ~e.type.indexOf('mouse') ? e : e.touches[0];
   this.firstTouch = this.touch;
   this.startTime = e.timeStamp;
+
+  addEventListener('touchmove', this.onTouchMove);
+  addEventListener('mousemove', this.onTouchMove);
+  addEventListener('touchend', this.onTouchEnd);
+  addEventListener('mouseup', this.onTouchEnd);
 };
 
 Drag.prototype.onTouchMove = function(e) {
+  e = ~e.type.indexOf('mouse') ? e : e.touches[0];
+
   var delta = {
-    x: e.touches[0].clientX - this.touch.clientX,
-    y: e.touches[0].clientY - this.touch.clientY
+    x: e.clientX - this.touch.clientX,
+    y: e.clientY - this.touch.clientY
   };
+
+  this.dragging = true;
   this.move(delta);
-  this.touch = e.touches[0];
+  this.touch = e;
 };
 
 Drag.prototype.onTouchEnd = function(e) {
   var tapped = (e.timeStamp - this.startTime) < this.tapTime;
+
+  this.dragging = false;
+
+  removeEventListener('touchmove', this.onTouchMove);
+  removeEventListener('mousemove', this.onTouchMove);
+  removeEventListener('touchend', this.onTouchEnd);
+  removeEventListener('mouseup', this.onTouchEnd);
+
   if (tapped) { this.emit('tapped', e); }
   else { this.emit('ended', e); }
 };
@@ -118,18 +128,15 @@ Drag.prototype.snapToClosestEdge = function() {
   this.emit('snapped', edges);
 };
 
-Drag.prototype.translate = function(position) {
-  position = this.clamp(position);
-
+Drag.prototype.translate = function(options) {
+  var position = this.clamp(options);
   var translate = 'translate(' + position.x + 'px,' + position.y + 'px)';
-  var duration = this.transitionDuration(position);
   var ratio = {
     x: (position.x / this.max.x) || 0,
     y: (position.y / this.max.y) || 0
   };
 
-  // If there is a duration, set it
-  this.handle.el.style.transitionDuration = duration ? duration + 'ms' : '';
+  this.setTransition(position);
 
   // Set the transform to move the handle
   this.handle.el.style.transform = translate;
@@ -139,7 +146,6 @@ Drag.prototype.translate = function(position) {
 
   // Emit event with useful data
   this.emit('translate', {
-    duration: duration,
     position: {
       px: position,
       ratio: ratio
@@ -154,6 +160,15 @@ Drag.prototype.clamp = function(position) {
   };
 };
 
+/**
+ * [setTransition description]
+ * @param {[type]} position [description]
+ */
+Drag.prototype.setTransition = function(position) {
+  var duration = !this.dragging ? this.transitionDuration(position) : 0;
+  this.handle.el.style.transitionDuration = duration + 'ms';
+};
+
 Drag.prototype.transitionDuration = function(position) {
   var current = this.handle.position;
   var distanceX = Math.abs(current.x - position.x);

apps/camera/js/controllers/controls.js

@@ -111,17 +111,10 @@ ControlsController.prototype.configureMode = function() {
  * the camera becomes 'ready' from
  * hereon after.
  *
- * `.setupSwitch()` adds the dragging interactions
- * to the mode-switch. We do this after the app
- * has loaded and in a `setTimeout` to avoid
- * causing a forced-sync-layout which is
- * bad for performance.
- *
  * @private
  */
 ControlsController.prototype.onceAppLoaded = function() {
   this.app.on('ready', this.restore);
-  setTimeout(this.view.setupSwitch, 50);
   this.view.enable();
 };
 
@@ -252,6 +245,7 @@ ControlsController.prototype.captureHighlightOff = function() {
  */
 ControlsController.prototype.onViewModeChanged = function() {
   debug('view mode changed');
+  this.view.disable();
   this.app.settings.mode.next();
 };
 

apps/camera/js/views/controls.js

@@ -45,6 +45,8 @@ module.exports = View.extend({
       video: this.find('.js-icon-video')
     };
 
+    this.setupSwitch();
+
     // Clean up
     delete this.template;
 
@@ -93,7 +95,6 @@ module.exports = View.extend({
     this.drag.on('translate', this.onSwitchTranslate);
     this.drag.on('snapped', this.onSwitchSnapped);
 
-    this.drag.updateDimensions();
     this.updateSwitchPosition();
   },