Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Bug 1126538 - [Dialer][Text Selection] Pressing a key in the dialer a…
Browse files Browse the repository at this point in the history
…lways adds the digit at the end of the current number instead of inserting it at the caret position.

Conflicts:
	shared/js/dialer/keypad.js
  • Loading branch information
delapuente authored and rvandermeulen committed Feb 17, 2015
1 parent 5ad0699 commit fb750e2
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 43 deletions.
113 changes: 113 additions & 0 deletions apps/communications/dialer/test/marionette/keypad_test.js
Expand Up @@ -103,6 +103,119 @@ marionette('Dialer > Keypad', function() {
reflowHelper.stopTracking();
});

test('Entering a digit in the middle of the number', function() {
typeNumber();

var number = subject.client.findElement(selectors.phoneNumber);
number.scriptWith(function (numberElement) {
numberElement.selectionStart = numberElement.selectionEnd = 1;
numberElement.click();
});

var zero = subject.client.findElement(selectors.zero);
keypadTap(zero);
assert.equal(number.getAttribute('value'), '1023');
});

test('Replace a selection in the middle of the number', function() {
typeNumber();

var number = subject.client.findElement(selectors.phoneNumber);
number.scriptWith(function (numberElement) {
numberElement.selectionStart = 1;
numberElement.selectionEnd = 2;
numberElement.click();
});

var zero = subject.client.findElement(selectors.zero);
keypadTap(zero);
assert.equal(number.getAttribute('value'), '103');
});

test('Replace a selection in the middle of the number with a long press',
function() {
typeNumber();

var number = subject.client.findElement(selectors.phoneNumber);
number.scriptWith(function (numberElement) {
numberElement.selectionStart = 1;
numberElement.selectionEnd = 2;
numberElement.click();
});

var zero = subject.client.findElement(selectors.zero);
keypadTap(zero, true);
assert.equal(number.getAttribute('value'), '1+3');
});

test('Entering a long press in the middle of the number', function() {
typeNumber();

var number = subject.client.findElement(selectors.phoneNumber);
number.scriptWith(function (numberElement) {
numberElement.selectionStart = numberElement.selectionEnd = 1;
numberElement.click();
});

var zero = subject.client.findElement(selectors.zero);
keypadTap(zero, true);
assert.equal(number.getAttribute('value'), '1+23');
});

test('Entering a digit in the middle of a long number', function() {
var insPosition = 3; // index where the cursor would be placed by the user
var realInsPosition = insPosition + 2; // index inside the complete number
// +2 for the space of the ellipsis

var typedNumber = typeLongNumber();
var numberAfterInsertion =
typedNumber.substr(0, realInsPosition) + '0' +
typedNumber.substr(realInsPosition);
var expectedValueAfterInsertion =
'\u2026' + numberAfterInsertion.substr(4); // 1 for the overflowing char,
// 2 for the ellipsis itself,
// 1 more for the new char.


var number = subject.client.findElement(selectors.phoneNumber);
var args = [number, insPosition];
client.executeScript(function (numberElement, insPosition) {
numberElement.selectionStart = numberElement.selectionEnd = insPosition;
numberElement.click();
}, args);

var zero = subject.client.findElement(selectors.zero);
keypadTap(zero);
assert.equal(number.getAttribute('value'), expectedValueAfterInsertion);
});

test('Entering a long press in the middle of a long number', function() {
var insPosition = 3; // index where the cursor would be placed by the user
var realInsPosition = insPosition + 2; // index inside the complete number
// +2 for the space of the ellipsis

var typedNumber = typeLongNumber();
var numberAfterInsertion =
typedNumber.substr(0, realInsPosition) + '+' +
typedNumber.substr(realInsPosition);
var expectedValueAfterInsertion =
'\u2026' + numberAfterInsertion.substr(4); // 1 for the overflowing char,
// 2 for the ellipsis itself,
// 1 more for the new char.


var number = subject.client.findElement(selectors.phoneNumber);
var args = [number, insPosition];
client.executeScript(function (numberElement, insPosition) {
numberElement.selectionStart = numberElement.selectionEnd = insPosition;
numberElement.click();
}, args);

var zero = subject.client.findElement(selectors.zero);
keypadTap(zero, true);
assert.equal(number.getAttribute('value'), expectedValueAfterInsertion);
});

test('Using the special extention key', function() {
var zero = subject.client.findElement(selectors.zero);
var number = subject.client.findElement(selectors.phoneNumber);
Expand Down
7 changes: 7 additions & 0 deletions apps/communications/dialer/test/unit/keypad_test.js
Expand Up @@ -154,11 +154,13 @@ suite('dialer/keypad', function() {
node = document.createElement('div');
fakeEventStart = {
target: node,
preventDefault: function() {},
stopPropagation: function() {},
type: 'touchstart'
};
fakeEventEnd = {
target: node,
preventDefault: function() {},
stopPropagation: function() {},
type: 'touchend'
};
Expand Down Expand Up @@ -236,6 +238,7 @@ suite('dialer/keypad', function() {
remove: function() {}
}
},
preventDefault: function() {},
stopPropagation: function() {},
type: null
};
Expand All @@ -254,6 +257,7 @@ suite('dialer/keypad', function() {
test('Adds active class to keys when pressed', function() {
var fakeEvent = {
target: document.createElement('div'),
preventDefault: function() {},
stopPropagation: function() {},
type: null
};
Expand Down Expand Up @@ -471,6 +475,7 @@ suite('dialer/keypad', function() {
remove: function() {}
}
},
preventDefault: function() {},
stopPropagation: function() {},
type: null
};
Expand Down Expand Up @@ -709,11 +714,13 @@ suite('dialer/keypad', function() {
node = document.createElement('div');
fakeEventStart = {
target: node,
preventDefault: function() {},
stopPropagation: function() {},
type: 'touchstart'
};
fakeEventEnd = {
target: node,
preventDefault: function() {},
stopPropagation: function() {},
type: 'touchend'
};
Expand Down
81 changes: 38 additions & 43 deletions shared/js/dialer/keypad.js
Expand Up @@ -210,18 +210,6 @@ var KeypadManager = {
this._observePreferences();
},

moveCaretToEnd: function hk_util_moveCaretToEnd(el) {
if (typeof el.selectionStart == 'number') {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != 'undefined') {
el.focus();
var range = el.createTextRange();
range.collapse(false);
range.select();
}
this._insertPosition = null;
},

render: function hk_render(layoutType) {
if (layoutType == 'oncall') {
if (CallsHandler.activeCall) {
Expand Down Expand Up @@ -336,6 +324,7 @@ var KeypadManager = {
* @param {String} key The key that was hit by this touchstart event.
*/
_touchStart: function kh_touchStart(key) {

this._longPress = false;
this._lastPressedKey = key;

Expand All @@ -360,22 +349,17 @@ var KeypadManager = {

if (key == 'delete') {
self._clearPhoneNumber();
} else {
var index = self._phoneNumber.length - 1;

// Remove last key, this is a long press and we want to add the
// long pressed symbol
if (index >= 0 && self._phoneNumber[index] === key) {
self._phoneNumber = self._phoneNumber.substr(0, index);
}

if (key === '0') {
self._phoneNumber += '+';
} else if (key === '*') {
// ',' DTMF separator can't be the first
if (self._phoneNumber.length > 0) {
self._phoneNumber += ',';
}
} else if (key === '0') {
self._replaceLastKey('+');
} else if (key === '*') {
var isAtTheEnd = self._insertPosition === null;
var isFirst = self._insertPosition === 1 ||
(isAtTheEnd && self._phoneNumber.length === 1);
// ',' DTMF separator can't be the first
if (!isFirst) {
self._replaceLastKey(',');
} else {
self._deleteAtInsertPosition();
}
}

Expand Down Expand Up @@ -405,10 +389,10 @@ var KeypadManager = {
this._phoneNumber = key;
this.replaceAdditionalContactInfo('');
} else {
this._phoneNumber += key;
this._insertAtCaret(key);
}
} else {
this._phoneNumber += key;
this._insertAtCaret(key);
}

setTimeout(function(self) {
Expand Down Expand Up @@ -460,42 +444,33 @@ var KeypadManager = {
});
}

this.restoreCaretPosition();

// If it was a long press our work is already done
if (this._longPress) {
this._longPress = false;
this._holdTimer = null;
this.restoreCaretPosition();
return;
}

if (this._holdTimer) {
clearTimeout(this._holdTimer);
}

if (key === 'delete') {
this.restoreCaretPosition();
} else {
this.moveCaretToEnd(this.phoneNumberView);
}
},

keyHandler: function kh_keyHandler(event) {
// Avoid the keys to get focus.
event.preventDefault();

// When long pressing on the voicemail button, if a menu pops up on top of
// the 1 button, a click will go through and target that button unless we
// preventDefault the contextmenu event.
if (event.type == 'contextmenu') {
event.preventDefault();
return;
}

var key = event.target.dataset.value;

// Prevent the delete keys to get the focus.
if (key === 'delete') {
event.preventDefault();
}

// We could receive this event from an element that
// doesn't have the dataset value. Got the last key
// pressed and assing this value to continue with the
Expand Down Expand Up @@ -866,6 +841,24 @@ var KeypadManager = {
this._insertPosition = this._realStartPosition();
},

_replaceLastKey: function kh_replaceLastKey(newKey) {
this._deleteAtInsertPosition();
this.restoreCaretPosition();
this._insertAtCaret(newKey);
},

_insertAtCaret: function kh_insertAtCaret(key) {
if (this._insertPosition === null) {
this._phoneNumber += key;
} else {
var start = this._realStartPosition();
var end = this._realEndPosition();
this._phoneNumber = this._phoneNumber.substring(0, start) + key +
this._phoneNumber.substring(end);
this._insertPosition = start + 1;
}
},

_deleteAtInsertPosition: function kh_deleteAtInsertPosition() {
if (this._insertPosition === null) {
this._phoneNumber = this._phoneNumber.slice(0, -1);
Expand Down Expand Up @@ -903,6 +896,8 @@ var KeypadManager = {
this.phoneNumberView.selectionStart = caretPosition;
this.phoneNumberView.selectionEnd = caretPosition;
this.phoneNumberView.focus();
} else {
this.phoneNumberView.blur();
}
},

Expand Down

0 comments on commit fb750e2

Please sign in to comment.