104 lines
3.1 KiB
JavaScript
104 lines
3.1 KiB
JavaScript
import ngModule from '../../module';
|
|
import Field from '../field';
|
|
|
|
export default class Textfield extends Field {
|
|
constructor($element, $scope, $compile) {
|
|
super($element, $scope, $compile);
|
|
this.buildInput('text');
|
|
}
|
|
|
|
set maxLength(value) {
|
|
this.input.maxLength = value;
|
|
}
|
|
|
|
get maxLength() {
|
|
return this.input.maxLength;
|
|
}
|
|
|
|
set insertable(value) {
|
|
if (this._insertable === value)
|
|
return;
|
|
|
|
if (this._insertable)
|
|
this.input.removeEventListener('keypress', this.keyPressListener);
|
|
|
|
if (value) {
|
|
this.keyPressListener = async e => await this.onKeyPress(e);
|
|
this.input.addEventListener('keypress', this.keyPressListener);
|
|
}
|
|
|
|
this._insertable = value;
|
|
}
|
|
|
|
get insertable() {
|
|
return this._insertable;
|
|
}
|
|
|
|
async onKeyPress(e) {
|
|
if (e.key == 'Enter')
|
|
return; // If the enter key is pressed dismiss it
|
|
|
|
let maxLength = this.maxLength;
|
|
|
|
// Call the function that obtains the current cursor position
|
|
let pointerPosition = getCaretPosition(e.target);
|
|
|
|
// If the cursor position is on the last allowed character,
|
|
// prevent any keystroke from doing anything
|
|
if (pointerPosition >= maxLength) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return;
|
|
}
|
|
|
|
// In case by any ways the input is longer than the max especified size, cut it to it.
|
|
let currentArrValue = e.target.value.slice(0, maxLength);
|
|
|
|
// Transform said input to a array with each character on one position
|
|
currentArrValue = currentArrValue.split('');
|
|
|
|
// Cut the array in 2 parts, one with everything right of the caret,
|
|
// and one with everything left to it
|
|
let rightToTheCaret = currentArrValue.slice(pointerPosition);
|
|
|
|
let leftToTheCaret = currentArrValue.slice(0, pointerPosition);
|
|
|
|
// Remove the first number on the array that was right of the caret
|
|
rightToTheCaret.shift();
|
|
|
|
// The part that was left to the caret is not modified in any way and is put back into the textField
|
|
e.target.value = leftToTheCaret.join('');
|
|
|
|
// Add one millisecond of delay to give the UI time to update,
|
|
// so that it detects the changes on the textField
|
|
await new Promise(r => setTimeout(r, 1));
|
|
|
|
// Add the values that should be right to the Caret back in the textField
|
|
e.target.value = e.target.value + rightToTheCaret.join('');
|
|
|
|
// Update the current pointer position so that it moves 1 position to the right
|
|
pointerPosition++;
|
|
e.target.setSelectionRange(pointerPosition, pointerPosition);
|
|
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function getCaretPosition(targetElement) {
|
|
let caretPosition = 0;
|
|
|
|
if (targetElement.selectionStart || targetElement.selectionStart == 0) // Firefox Support
|
|
caretPosition = targetElement.selectionStart;
|
|
|
|
return caretPosition;
|
|
}
|
|
|
|
ngModule.vnComponent('vnTextfield', {
|
|
controller: Textfield,
|
|
bindings: {
|
|
maxLength: '<?',
|
|
insertable: '<?'
|
|
}
|
|
});
|
|
|