diff --git a/front/core/components/index.js b/front/core/components/index.js index b42ebb6ae..86ab89212 100644 --- a/front/core/components/index.js +++ b/front/core/components/index.js @@ -53,4 +53,3 @@ import './datalist'; import './contextmenu'; import './rating'; import './smart-table'; -import './input-account'; diff --git a/front/core/components/input-account/index.js b/front/core/components/input-account/index.js deleted file mode 100644 index 58d0447c4..000000000 --- a/front/core/components/input-account/index.js +++ /dev/null @@ -1,96 +0,0 @@ -import ngModule from '../../module'; -import Field from '../field'; - -export default class inputAccount extends Field { - constructor($element, $scope, $compile) { - super($element, $scope, $compile); - this.buildInput('text'); - - this.element.addEventListener('click', e => { - let targetElement = e.target; - targetElement.addEventListener('keydown', e => { - let maxLength = this.maxLength; - - // In case the string is too long when the key is pressed, cut the string to the max length allowed - if (e.target.value.length > maxLength) - e.target.value.substring(0, maxLength); - }); - targetElement.addEventListener('keypress', async 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; - - // IE Support - if (document.selection) { - // Set focus on the element - targetElement.focus(); - - // To get cursor position, get empty selection range - let selectionOrCaretPos = document.selection.createRange(); - - // Move selection start to 0 position - selectionOrCaretPos.moveStart('character', -targetElement.value.length); - - // The caret position is selection length - caretPosition = selectionOrCaretPos.text.length; - } else if (targetElement.selectionStart || targetElement.selectionStart == 0) // Firefox Support - caretPosition = targetElement.selectionStart; - - // Return results - return (caretPosition); -} - -ngModule.vnComponent('vnInputAccount', { - controller: inputAccount, - bindings: { - maxLength: '<' - } -}); diff --git a/front/core/components/textfield/textfield.js b/front/core/components/textfield/textfield.js index ef5c6c788..14567d255 100644 --- a/front/core/components/textfield/textfield.js +++ b/front/core/components/textfield/textfield.js @@ -5,90 +5,92 @@ export default class Textfield extends Field { constructor($element, $scope, $compile) { super($element, $scope, $compile); this.buildInput('text'); + } - if (this.element.getAttribute('insertable')) { - this.element.addEventListener('click', e => { - let targetElement = e.target; - targetElement.addEventListener('keydown', e => { - let maxLength = this.maxLength; + set maxLength(value) { + this.input.maxLength = value; + } - // In case the string is too long when the key is pressed, cut the string to the max length allowed - if (e.target.value.length > maxLength) - e.target.value.substring(0, maxLength); - }); - targetElement.addEventListener('keypress', async e => { - if (e.key == 'Enter') - return; // If the enter key is pressed dismiss it + get maxLength() { + return this.input.maxLength; + } - let maxLength = this.maxLength; + set insertable(value) { + if (this._insertable === value) + return; - // Call the function that obtains the current cursor position - let pointerPosition = getCaretPosition(e.target); + if (this._insertable) + this.input.removeEventListener('keypress', this.keyPressListener); - // 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; - }); - }); + 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; - // IE Support - if (document.selection) { - // Set focus on the element - targetElement.focus(); - - // To get cursor position, get empty selection range - let selectionOrCaretPos = document.selection.createRange(); - - // Move selection start to 0 position - selectionOrCaretPos.moveStart('character', -targetElement.value.length); - - // The caret position is selection length - caretPosition = selectionOrCaretPos.text.length; - } else if (targetElement.selectionStart || targetElement.selectionStart == 0) // Firefox Support + if (targetElement.selectionStart || targetElement.selectionStart == 0) // Firefox Support caretPosition = targetElement.selectionStart; - // Return results - return (caretPosition); + return caretPosition; } ngModule.vnComponent('vnTextfield', { @@ -98,3 +100,4 @@ ngModule.vnComponent('vnTextfield', { insertable: '