Merge pull request #21177 from frsela/STK/Bug1028789

Bug 1028789 - [Sora]There is no character counter inside STK submenus (r = vingtetun)
mozilla-b2g · Jul 5, 2014 · f00fdf0 · f00fdf0
2 parents 1d1d9a6 + e411b15
commit f00fdf0
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 8 deletions.
diff --git a/apps/system/js/icc.js b/apps/system/js/icc.js
@@ -247,13 +247,16 @@ var icc = {
     viewId.style.marginTop = StatusBar.height + 'px';
     this.keyboardChangedEvent(viewId);
     window.addEventListener('keyboardchange',
-      this.keyboardChangedEvent.bind(undefined, viewId));
+      this.keyboardChangedEvent.bind(undefined, viewId, false));
     window.addEventListener('keyboardhide',
-      this.keyboardChangedEvent.bind(undefined, viewId));
+      this.keyboardChangedEvent.bind(undefined, viewId, true));
   },
 
-  keyboardChangedEvent: function(viewId) {
-    var keyboardHeight = KeyboardManager.getHeight();
+  keyboardChangedEvent: function(viewId, hidden) {
+    var keyboardHeight = 0;
+    if (!hidden) {
+      keyboardHeight = KeyboardManager.getHeight() || 0;
+    }
     var form = viewId.getElementsByTagName('form');
     viewId.style.height =
       (window.innerHeight - keyboardHeight - StatusBar.height) + 'px';
@@ -445,6 +448,17 @@ var icc = {
      * @param {Integer} maxLen      Maximum length required of the input.
      */
     function checkInputLengthValid(inputLen, minLen, maxLen) {
+      // Update input counter
+      var charactersLeft = maxLen - inputLen;
+      self.icc_input_btn.textContent = _('ok') + ' (' + charactersLeft + ')';
+      // Input box full feedback
+      if (charactersLeft === 0) {
+        self.icc_input_box.classList.add('full');
+        navigator.vibrate([500]);
+      } else {
+        self.icc_input_box.classList.remove('full');
+      }
+
       return (inputLen >= minLen) && (inputLen <= maxLen);
     }
     function clearInputTimeout() {
@@ -524,9 +538,6 @@ var icc = {
         self.icc_input_btn.disabled = !checkInputLengthValid(
           self.icc_input_box.value.length, options.minLength,
           options.maxLength);
-        if (self.icc_input_box.value.length == options.maxLength) {
-          self.icc_input_btn.focus();
-        }
       };
       this.icc_input_btn.onclick = function() {
         clearInputTimeout();

diff --git a/apps/system/style/icc.css b/apps/system/style/icc.css
@@ -83,3 +83,16 @@
   border-color: rgb(77, 77, 77);
   pointer-events: none;
 }
+
+#icc-input-box.full {
+  animation: full-dance .5s;
+  animation-iteration-count: 2;
+}
+
+@keyframes full-dance {
+  0% { transform: translateX(0); }
+  25% { transform: translateX(10px); }
+  50% { transform: translateX(-10px); }
+  75% { transform: translateX(10px); }
+  100% { transform: translateX(0); }
+}
diff --git a/apps/system/test/unit/icc_test.js b/apps/system/test/unit/icc_test.js
@@ -246,7 +246,9 @@ suite('STK (icc) >', function() {
 
     assert.equal(document.getElementById('icc-input-msg').textContent,
       testCmd.command.options.text);
-    assert.equal(document.getElementById('icc-input-btn').textContent, 'OK');
+    assert.equal(document.getElementById('icc-input-btn').textContent, 'ok (' +
+      (testCmd.command.options.maxLength -
+      testCmd.command.options.defaultText.length) + ')');
     assert.equal(document.getElementById('icc-input-btn').disabled, false);
     assert.equal(document.getElementById('icc-input-btn_back').textContent,
       'back');
@@ -277,26 +279,38 @@ suite('STK (icc) >', function() {
     inputbox.value = '';
     inputbox.dispatchEvent(event);
     assert.equal(button.disabled, true);
+    assert.equal(document.getElementById('icc-input-btn').textContent, 'ok (' +
+      (testCmd.command.options.maxLength - inputbox.value.length) + ')');
 
     inputbox.value = '1';
     inputbox.dispatchEvent(event);
     assert.equal(button.disabled, true);
+    assert.equal(document.getElementById('icc-input-btn').textContent, 'ok (' +
+      (testCmd.command.options.maxLength - inputbox.value.length) + ')');
 
     inputbox.value = '12';
     inputbox.dispatchEvent(event);
     assert.equal(button.disabled, false);
+    assert.equal(document.getElementById('icc-input-btn').textContent, 'ok (' +
+      (testCmd.command.options.maxLength - inputbox.value.length) + ')');
 
     inputbox.value = '123';
     inputbox.dispatchEvent(event);
     assert.equal(button.disabled, false);
+    assert.equal(document.getElementById('icc-input-btn').textContent, 'ok (' +
+      (testCmd.command.options.maxLength - inputbox.value.length) + ')');
 
     inputbox.value = '1234567890';
     inputbox.dispatchEvent(event);
     assert.equal(button.disabled, false);
+    assert.equal(document.getElementById('icc-input-btn').textContent, 'ok (' +
+      (testCmd.command.options.maxLength - inputbox.value.length) + ')');
 
     inputbox.value = '12345678901';
     inputbox.dispatchEvent(event);
     assert.equal(button.disabled, true);
+    assert.equal(document.getElementById('icc-input-btn').textContent, 'ok (' +
+      (testCmd.command.options.maxLength - inputbox.value.length) + ')');
   });
 
   test('launchStkCommand: STK_CMD_GET_INPUT', function(done) {