Use CSS transform for keyboard sliding effect

ptagr · Feb 14, 2012 · a27d041 · a27d041
1 parent 0210fe0
commit a27d041
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 53 deletions.
diff --git a/apps/homescreen/js/keyboard.js b/apps/homescreen/js/keyboard.js
@@ -131,6 +131,7 @@ const IMEManager = {
       this.currentKeyboardMode = '';
       this.updateLayout();
     }
+    this.updateTargetWindowHeight();
   },
 
   get isSymbolLayout() {
@@ -145,6 +146,7 @@ const IMEManager = {
       this.currentKeyboardMode = 'Alternate';
       this.updateLayout('alternateLayout');
     }
+    this.updateTargetWindowHeight();
   },
 
   // backspace repeat delay and repeat rate
@@ -677,6 +679,7 @@ const IMEManager = {
               this.currentKeyboardMode = '';
               this.isUpperCase = false;
               this.updateLayout();
+              this.updateTargetWindowHeight();
 
               break;
             }
@@ -693,6 +696,8 @@ const IMEManager = {
             this.currentKeyboardMode = '';
             this.isUpperCase = false;
             this.updateLayout();
+            this.updateTargetWindowHeight();
+
           break;
 
           case this.TOGGLE_CANDIDATE_PANEL:
@@ -962,46 +967,18 @@ const IMEManager = {
       this.showCandidates([]);
       this.currentEngine.empty();
     }
-
-    this.updateKeyboardHeight();
   },
 
   updateKeyboardHeight: function km_updateKeyboardHeight() {
-    var ime = this.ime;
-    var targetWindow = this.targetWindow;
-
-    if (ime.dataset.hidden) {
-      targetWindow.classList.add('keyboardTransition');
-      var showIMEafterTransition = function showIMEtransitionend(evt) {
-        targetWindow.classList.remove('keyboardTransition');
-        ime.removeEventListener('transitionend', showIMEafterTransition);
-      };
-      ime.addEventListener('transitionend', showIMEafterTransition);
-    }
-
-    // Need these to correctly measure scrollHeight
-    ime.style.height = null;
-    ime.style.overflowY = 'hidden';
-    var scrollHeight = ime.scrollHeight;
-    ime.style.overflowY = null;
+  },
 
-    targetWindow.style.height =
-      (targetWindow.dataset.rectHeight - scrollHeight) + 'px';
-    ime.style.height = scrollHeight + 'px';
+  updateTargetWindowHeight: function km_updateTargetWindowHeight() {
+    this.targetWindow.style.height =
+      (this.targetWindow.dataset.rectHeight - this.ime.scrollHeight) + 'px';
   },
 
   showIME: function km_showIME(targetWindow, type) {
 
-    if (targetWindow.classList.contains('keyboardTransition')) {
-      // keyboard is transitioning, run showIME after transition
-      var deferShowIMEafterTransition = (function deferShowIME(evt) {
-        targetWindow.removeEventListener('transitionend', deferShowIMEafterTransition);
-        this.showIME(targetWindow, type);
-      }).bind(this);
-      targetWindow.addEventListener('transitionend', deferShowIMEafterTransition);
-      return;
-    }
-
     switch (type) {
       // basic types
       case 'url':
@@ -1027,14 +1004,32 @@ const IMEManager = {
     if (this.ime.dataset.hidden) {
       // keyboard is in the quiet hidden state
       this.targetWindow = targetWindow;
-      var oldHeight = targetWindow.style.height;
-      targetWindow.dataset.cssHeight = oldHeight;
+      targetWindow.dataset.cssHeight =
+        targetWindow.style.height;
       targetWindow.dataset.rectHeight =
         targetWindow.getBoundingClientRect().height;
     }
 
     this.updateLayout();
-    delete this.ime.dataset.hidden;
+
+    if (!this.ime.dataset.hidden) {
+      this.updateTargetWindowHeight();
+      return;
+    }
+
+    var adjustTargetWindowHeight = (function () {
+      this.ime.removeEventListener(
+        'transitionend', adjustTargetWindowHeight);
+      this.updateTargetWindowHeight();
+    }).bind(this);
+
+    this.ime.addEventListener(
+      'transitionend', adjustTargetWindowHeight);
+
+    // Start transition after the layout HTML is parsed
+    setTimeout((function startShowIME() {
+      delete this.ime.dataset.hidden;
+    }).bind(this), 0);
 
   },
 
@@ -1045,28 +1040,24 @@ const IMEManager = {
 
     var ime = this.ime;
     var hideIMEafterTransition = (function hideIMEtransitionend(evt) {
-      targetWindow.classList.remove('keyboardTransition');
       ime.removeEventListener('transitionend', hideIMEafterTransition);
 
       // hideIME is canceled by the showIME that fires after
-      if (ime.style.height !== '0px')
-        return;
+      //if (ime.style.height !== '0px')
+      //  return;
 
       delete this.targetWindow;
 
       delete targetWindow.dataset.cssHeight;
       delete targetWindow.dataset.rectHeight;
-      ime.dataset.hidden = 'true';
-      delete ime.style.height;
 
       ime.innerHTML = '';
 
     }).bind(this);
 
     ime.addEventListener('transitionend', hideIMEafterTransition);
-    targetWindow.classList.add('keyboardTransition');
+    ime.dataset.hidden = 'true';
     targetWindow.style.height = targetWindow.dataset.cssHeight;
-    ime.style.height = '0px';
 
   },
 
@@ -1081,15 +1072,15 @@ const IMEManager = {
     if (!candidates.length) {
       toggleButton.className = '';
       candidatePanel.className = '';
-      this.updateKeyboardHeight();
+      this.updateTargetWindowHeight();
       return;
     }
 
     toggleButton.className = toggleButton.className || 'show';
     candidatePanel.className = candidatePanel.className || 'show';
 
     if (toggleButton.className == 'show')
-      this.updateKeyboardHeight();
+      this.updateTargetWindowHeight();
 
     candidates.forEach(function buildCandidateEntry(candidate) {
       var span = document.createElement('span');

diff --git a/apps/homescreen/style/homescreen.css b/apps/homescreen/style/homescreen.css
@@ -226,10 +226,6 @@ iframe.appWindow {
   display: none;
 }
 
-iframe.appWindow.keyboardTransition {
-  -moz-transition: height 0.2s ease;
-}
-
 iframe.appWindow.active {
   display: block;
 }
@@ -398,18 +394,17 @@ div.windowSprite.active {
   font-weight: 600;
   z-index: 9997;
   bottom: 0;
-  height: auto;
   overflow: visible;
   background-color: #f0f1f2;
   width: -moz-calc(100%);
-  -moz-transition: height 0.2s ease;
+  -moz-transition: -moz-transform 0.3s ease;
   border-top: 2px solid #a3a3a3;
   -moz-box-shadow: inset 0 0 0 1px #fff;
 }
 
 #keyboard[data-hidden] {
-  height: 0;
   bottom: -2px;
+  -moz-transform: translateY(100%);
 }
 
 #keyboard-candidate-panel {
@@ -429,10 +424,12 @@ div.windowSprite.active {
   display: block;
   position: absolute;
   white-space: normal;
+  top: -68px;
   bottom: 0;
-  height: -moz-calc(100%);
+  height: -moz-calc(100% + 68px);
   width: 100%;
   border: none;
+  border-top: 2px solid #a3a3a3;
 }
 #keyboard-candidate-panel.full span {
   border-top: 1px solid #e8e8ff;
@@ -473,7 +470,7 @@ div.windowSprite.active {
   display: block;
   border-top: 1px solid #e8e8ff;
   border-bottom: 1px solid #808098;
-  top: 0;
+  top: -66px;
 }
 
 #keyboard-candidate-panel-toggle-button.show {