Merge pull request #25324 from wilsonpage/1082625

Bug 1082625 - [Flame][Video] When camera is started by the video app, the mode

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

@@ -1,7 +1,7 @@
 {
   "name": "drag",
   "main": "index.js",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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.2",
+  "_release": "0.1.4",
   "_resolution": {
     "type": "version",
-    "tag": "v0.1.2",
-    "commit": "44a5e502e6b416c4f46ee5cf9b6a4602df72feb3"
+    "tag": "v0.1.4",
+    "commit": "c56942e7e15abd42f38d3634e540739f96d545d3"
   },
   "_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.2",
+  "version": "0.1.4",
   "homepage": "https://github.com/gaia-components/drag",
   "authors": [
     "Wilson Page <wilsonpage@me.com>"

apps/camera/bower_components/drag/index.js

@@ -19,6 +19,17 @@ module.exports = Drag;
 
 events(Drag.prototype);
 
+/**
+ * Pointer event abstraction to make
+ * it work for touch and mouse.
+ *
+ * @type {Object}
+ */
+var pointer = [
+  { down: 'touchstart', up: 'touchend', move: 'touchmove' },
+  { down: 'mousedown', up: 'mouseup', move: 'mousemove' }
+]['ontouchstart' in window ? 0 : 1];
+
 /**
  * Drag creates a draggable 'handle' element,
  * constrained within a 'container' element.
@@ -60,8 +71,7 @@ function Drag(options) {
 }
 
 Drag.prototype.bindEvents = function() {
-  this.container.el.addEventListener('touchstart', this.onTouchStart);
-  this.container.el.addEventListener('mousedown', this.onTouchStart);
+  this.container.el.addEventListener(pointer.down, this.onTouchStart);
 };
 
 Drag.prototype.onTouchStart = function(e) {
@@ -70,13 +80,12 @@ Drag.prototype.onTouchStart = function(e) {
   this.firstTouch = this.touch;
   this.startTime = e.timeStamp;
 
-  addEventListener('touchmove', this.onTouchMove);
-  addEventListener('mousemove', this.onTouchMove);
-  addEventListener('touchend', this.onTouchEnd);
-  addEventListener('mouseup', this.onTouchEnd);
+  addEventListener(pointer.move, this.onTouchMove);
+  addEventListener(pointer.up, this.onTouchEnd);
 };
 
 Drag.prototype.onTouchMove = function(e) {
+  e.preventDefault();
   e = ~e.type.indexOf('mouse') ? e : e.touches[0];
 
   var delta = {
@@ -91,13 +100,10 @@ Drag.prototype.onTouchMove = function(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);
+  removeEventListener(pointer.move, this.onTouchMove);
+  removeEventListener(pointer.up, this.onTouchEnd);
 
   if (tapped) { this.emit('tapped', e); }
   else { this.emit('ended', e); }
@@ -111,7 +117,7 @@ Drag.prototype.move = function(delta) {
 };
 
 Drag.prototype.set = function(pos) {
-  if (!this.edges) { return; }
+  if (!this.edges) { this.pendingSet = pos; return; }
   var x = typeof pos.x === 'string' ? this.edges[pos.x] : (pos.x || 0);
   var y = typeof pos.y === 'string' ? this.edges[pos.y] : (pos.y || 0);
   this.translate({ x: x, y: y });
@@ -207,6 +213,14 @@ Drag.prototype.updateDimensions = function() {
     x: handle.left - container.left,
     y: handle.top - container.top
   };
+
+  this.clearPendingSet();
+};
+
+Drag.prototype.clearPendingSet = function() {
+  if (!this.pendingSet) { return; }
+  this.set(this.pendingSet);
+  delete this.pendingSet;
 };
 
 });})((function(n,w){'use strict';return typeof define=='function'&&define.amd?

apps/camera/js/views/controls.js

@@ -21,6 +21,7 @@ module.exports = View.extend({
 
   initialize: function(options) {
     this.drag = options && options.drag; // test hook
+    this.once('inserted', this.setupSwitch);
     this.render();
   },
 
@@ -45,8 +46,6 @@ module.exports = View.extend({
       video: this.find('.js-icon-video')
     };
 
-    this.setupSwitch();
-
     // Clean up
     delete this.template;
 
@@ -84,18 +83,30 @@ module.exports = View.extend({
   setupSwitch: function() {
     debug('setup dragger');
 
+    // Wait until the document is complete
+    // to avoid any forced sync reflows.
+    if (document.readyState !== 'complete') {
+      window.addEventListener('load', this.setupSwitch);
+      debug('deferred switch setup till after load');
+      return;
+    }
+
     // Prefer existing drag (test hook)
     this.drag = this.drag || new Drag({
       handle: this.els.switchHandle,
-      container: this.els.switch,
+      container: this.els.switch
     });
 
     this.drag.on('tapped', debounce(this.onSwitchTapped, 300, true));
     this.drag.on('ended', this.drag.snapToClosestEdge);
     this.drag.on('translate', this.onSwitchTranslate);
     this.drag.on('snapped', this.onSwitchSnapped);
 
+    this.drag.updateDimensions();
     this.updateSwitchPosition();
+
+    // Tidy up
+    window.removeEventListener('load', this.setupSwitch);
   },
 
   onSwitchSnapped: function(edges) {
@@ -126,7 +137,7 @@ module.exports = View.extend({
     var video = Math.max(0, -1 + ratioSkewed);
     this.els.icons.camera.style.opacity = camera;
     this.els.icons.video.style.opacity = video;
-    debug('opacity camera: %s, video: %s', camera, video);
+    debug('set switch icon camera: %s, video: %s', camera, video);
   },
 
   onButtonClick: function(e) {
@@ -137,16 +148,20 @@ module.exports = View.extend({
   },
 
   setMode: function(mode) {
+    debug('set mode: %s', mode);
     this.set('mode', mode);
     this.switchPosition = this.switchPositions[mode];
+    var ratio = { left: 0, right: 1 }[this.switchPosition];
     this.updateSwitchPosition();
-    this.setSwitchIcon({ left: 0, right: 1 }[this.switchPosition]);
-    debug('setMode mode: %s, pos: %s', mode);
+    this.setSwitchIcon(ratio);
+    debug('mode set pos: %s', this.switchPosition);
   },
 
   updateSwitchPosition: function() {
+    debug('updateSwitchPosition');
     if (!this.drag) { return; }
     this.drag.set({ x: this.switchPosition });
+    debug('updated switch position: %s', this.switchPosition);
   },
 
   setThumbnail: function(blob) {

apps/camera/test/unit/views/controls_test.js

@@ -10,10 +10,24 @@ suite('views/controls', function() {
     ], function(ControlsView, Drag) {
       self.ControlsView = ControlsView;
       self.Drag = Drag;
-      done();
+      self.style = loadCss('/style/controls.css', function() { done(); });
     });
   });
 
+  suiteTeardown(function() {
+    this.style.remove();
+  });
+
+  function loadCss(url, done) {
+    var link = document.createElement('link');
+    link.type = 'text/css';
+    link.rel = 'stylesheet';
+    link.href = url;
+    link.onload = done;
+    document.head.appendChild(link);
+    return link;
+  }
+
   setup(function() {
     var self = this;
 
@@ -210,4 +224,11 @@ suite('views/controls', function() {
       assert.isTrue(this.view.emit.calledWith('modechanged'));
     });
   });
+
+  test('The switch should appear in the video position when set before the view is in the DOM', function() {
+    var view = new this.ControlsView();
+    view.setMode('video');
+    view.appendTo(document.body);
+    assert.equal(view.drag.handle.el.style.transform, 'translate(64px, 0px)');
+  });
 });