diff --git a/apps/system/js/icc.js b/apps/system/js/icc.js index 765c056df2f0..dd3cb5b7a619 100644 --- 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 index 949f87d3eddf..b22ccf4720e6 100644 --- 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); } +} \ No newline at end of file diff --git a/apps/system/test/unit/icc_test.js b/apps/system/test/unit/icc_test.js index cfbd1012a0e7..79866765f4da 100644 --- 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) {