Bug 1216432 - Fix emoji swipe panel layout in landscape mode, r=timdream

apps/keyboard/js/views/swipeable_page_view.js

@@ -31,6 +31,8 @@ SwipeablePageView.prototype.render = function() {
       this.viewManager);
   swipeablePanel.render();
 
+  this.swipeablePanel = swipeablePanel;
+
   container.appendChild(swipeablePanel.element);
 
   // Render the bottom row for switching different type of emojis
@@ -73,6 +75,11 @@ SwipeablePageView.prototype.render = function() {
   this.element = container;
 };
 
+SwipeablePageView.prototype.resize = function resize(totalWidth) {
+  this.options.totalWidth = totalWidth;
+  this.swipeablePanel.resize(totalWidth);
+};
+
 SwipeablePageView.prototype.getHeight = function() {
   return this.element.clientHeight;
 };

apps/keyboard/js/views/swipeable_panel_view.js

@@ -105,6 +105,27 @@ SwipeablePanelView.prototype.gotoSection = function(index) {
   this._updateIndicator();
 };
 
+SwipeablePanelView.prototype.resize = function resize(totalWidth) {
+  this.options.totalWidth = totalWidth;
+  this.swipeDetectingPaused = true;
+
+  // Reposition sections when resize;
+  this.sections.forEach(function(section, index) {
+    var translateX;
+
+    if (index === this.currentSectionIndex) {
+      translateX = 0; 
+    } else if (this.currentSectionIndex > index) {
+      translateX = -totalWidth;
+    } else {
+      translateX = totalWidth; 
+    }
+
+    section.style.transform = 'translateX(' + translateX + 'px)';
+  }, this);
+
+};
+
 SwipeablePanelView.prototype._moveSection = function(index, distance) {
   var style = this.sections[index].style;
   style.transform = 'translateX(' + distance + 'px)';
@@ -122,9 +143,14 @@ SwipeablePanelView.prototype._updateIndicator = function() {
 SwipeablePanelView.prototype._handleTouchStart = function(evt) {
   this.startX = evt.position.clientX;
   this.deltaX = 0;
+  this.swipeDetectingPaused = false;
 };
 
 SwipeablePanelView.prototype._handlePan = function(evt) {
+  if (this.swipeDetectingPaused) {
+    return;
+  }
+
   var totalWidth = this.options.totalWidth;
 
   // Clear all transition styles
@@ -184,8 +210,11 @@ SwipeablePanelView.prototype._handlePan = function(evt) {
 };
 
 SwipeablePanelView.prototype._handleSwipe = function(evt) {
-  var totalWidth = this.options.totalWidth;
+  if (this.swipeDetectingPaused) {
+    return;
+  }
 
+  var totalWidth = this.options.totalWidth;
   var targetIndex = this.currentSectionIndex;
   var forward = evt.direction === 'left';
 

apps/keyboard/style/keyboard.css

@@ -833,7 +833,7 @@ bubble above the key when you tap and hold. */
   background: none;
   font-size: 3rem;
   min-height: 5rem;
-  min-width: 5rem;
+  min-width: 16.66vw;
   padding: 0;
   flex: 1;
 }

apps/keyboard/test/unit/views/swipeable_panel_view_test.js

@@ -346,4 +346,50 @@ suite('Views > SwipeablePanelView', function() {
       assert.equal(panelView.sections[1].style.transform, 'translateX(320px)');
     });
   });
+
+  suite('rotate',  function() {
+    var rootElement = document.createElement('div');
+
+    setup(function() {
+      document.body.appendChild(rootElement);
+      var options = { totalWidth: 320 };
+
+      panelView = new SwipeablePanelView(layout, options,
+        viewManager);
+
+      panelView.render();
+    });
+
+    teardown(function() {
+      rootElement.innerHTML = '';
+    });
+
+    test('> rotate to landscape - at first section', function() {
+      panelView.resize(590);
+
+      assert.equal(panelView.sections[0].style.transform, 'translateX(0px)');
+      assert.equal(panelView.sections[1].style.transform, 'translateX(590px)');
+    });
+
+    test('> rotate to landscape - at second section', function() {
+      panelView.gotoSection(1);
+      panelView.resize(590);
+
+      assert.equal(panelView.sections[0].style.transform, 'translateX(-590px)');
+      assert.equal(panelView.sections[1].style.transform, 'translateX(0px)');
+      assert.equal(panelView.sections[2].style.transform, 'translateX(590px)');
+    });
+
+    test('> rotate to landscape - at last section', function() {
+      panelView.gotoSection(sectionCount - 1);
+      panelView.resize(590);
+
+      assert.equal(
+        panelView.sections[sectionCount - 1].style.transform,
+        'translateX(0px)');
+      assert.equal(
+        panelView.sections[sectionCount - 2].style.transform,
+        'translateX(-590px)');
+    });
+  });
 });