2018-05-28 16:46:24 +02:00
|
|
|
import { calcWidthOfInput, stripHTML } from '../lib/utils';
|
2017-08-21 17:59:56 +02:00
|
|
|
|
2017-08-17 14:50:14 +02:00
|
|
|
export default class Input {
|
2018-05-21 18:01:03 +02:00
|
|
|
constructor({ element, type, classNames, placeholderValue }) {
|
|
|
|
Object.assign(this, { element, type, classNames, placeholderValue });
|
|
|
|
|
2017-08-17 14:50:14 +02:00
|
|
|
this.element = element;
|
2017-10-10 13:56:36 +02:00
|
|
|
this.classNames = classNames;
|
2017-08-27 14:49:35 +02:00
|
|
|
this.isFocussed = this.element === document.activeElement;
|
2017-08-29 13:56:54 +02:00
|
|
|
this.isDisabled = false;
|
2017-08-23 14:23:37 +02:00
|
|
|
|
|
|
|
// Bind event listeners
|
2018-05-25 10:22:14 +02:00
|
|
|
this._onPaste = this._onPaste.bind(this);
|
|
|
|
this._onInput = this._onInput.bind(this);
|
|
|
|
this._onFocus = this._onFocus.bind(this);
|
|
|
|
this._onBlur = this._onBlur.bind(this);
|
2017-08-23 14:23:37 +02:00
|
|
|
}
|
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
set placeholder(placeholder) {
|
|
|
|
this.element.placeholder = placeholder;
|
|
|
|
}
|
|
|
|
|
|
|
|
set value(value) {
|
2018-05-28 16:39:12 +02:00
|
|
|
this.element.value = `${value}`;
|
2018-04-24 13:54:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
get value() {
|
2018-05-28 16:46:24 +02:00
|
|
|
return stripHTML(this.element.value);
|
2017-10-18 14:05:07 +02:00
|
|
|
}
|
|
|
|
|
2017-08-23 14:23:37 +02:00
|
|
|
addEventListeners() {
|
2018-05-25 10:22:14 +02:00
|
|
|
this.element.addEventListener('input', this._onInput);
|
|
|
|
this.element.addEventListener('paste', this._onPaste);
|
|
|
|
this.element.addEventListener('focus', this._onFocus);
|
|
|
|
this.element.addEventListener('blur', this._onBlur);
|
2017-08-23 14:23:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
removeEventListeners() {
|
2018-05-25 10:22:14 +02:00
|
|
|
this.element.removeEventListener('input', this._onInput);
|
|
|
|
this.element.removeEventListener('paste', this._onPaste);
|
|
|
|
this.element.removeEventListener('focus', this._onFocus);
|
|
|
|
this.element.removeEventListener('blur', this._onBlur);
|
2017-08-27 14:49:35 +02:00
|
|
|
}
|
|
|
|
|
2017-08-23 14:32:07 +02:00
|
|
|
enable() {
|
|
|
|
this.element.removeAttribute('disabled');
|
2017-08-29 13:56:54 +02:00
|
|
|
this.isDisabled = false;
|
2017-08-23 14:32:07 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
disable() {
|
|
|
|
this.element.setAttribute('disabled', '');
|
2017-08-29 13:56:54 +02:00
|
|
|
this.isDisabled = true;
|
2017-08-23 14:32:07 +02:00
|
|
|
}
|
|
|
|
|
2017-08-27 14:49:35 +02:00
|
|
|
focus() {
|
|
|
|
if (!this.isFocussed) {
|
|
|
|
this.element.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-10 17:41:39 +01:00
|
|
|
blur() {
|
|
|
|
if (this.isFocussed) {
|
|
|
|
this.element.blur();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-21 09:53:19 +02:00
|
|
|
/**
|
|
|
|
* Set value of input to blank
|
|
|
|
* @return {Object} Class instance
|
|
|
|
* @public
|
|
|
|
*/
|
|
|
|
clear(setWidth = true) {
|
|
|
|
if (this.element.value) {
|
|
|
|
this.element.value = '';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (setWidth) {
|
2017-08-21 17:59:56 +02:00
|
|
|
this.setWidth();
|
2017-08-21 09:53:19 +02:00
|
|
|
}
|
|
|
|
|
2018-05-21 18:01:03 +02:00
|
|
|
return this;
|
2017-08-21 09:53:19 +02:00
|
|
|
}
|
2017-08-21 17:59:56 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Set the correct input width based on placeholder
|
|
|
|
* value or input value
|
|
|
|
* @return
|
|
|
|
*/
|
2017-08-27 14:49:35 +02:00
|
|
|
setWidth(enforceWidth) {
|
2018-05-24 10:22:07 +02:00
|
|
|
if (this._placeholderValue) {
|
2017-08-21 17:59:56 +02:00
|
|
|
// If there is a placeholder, we only want to set the width of the input when it is a greater
|
|
|
|
// length than 75% of the placeholder. This stops the input jumping around.
|
|
|
|
if (
|
2017-08-27 14:49:35 +02:00
|
|
|
(this.element.value &&
|
2018-05-28 14:55:44 +02:00
|
|
|
this.element.value.length >= this._placeholderValue.length / 1.25) ||
|
2017-08-27 14:49:35 +02:00
|
|
|
enforceWidth
|
2017-08-21 17:59:56 +02:00
|
|
|
) {
|
2018-05-28 16:17:43 +02:00
|
|
|
this.calcWidth(width => {
|
2018-05-22 14:14:02 +02:00
|
|
|
this.element.style.width = width;
|
|
|
|
});
|
2017-08-21 17:59:56 +02:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// If there is no placeholder, resize input to contents
|
2018-05-28 16:17:43 +02:00
|
|
|
this.calcWidth(width => {
|
2018-05-22 14:14:02 +02:00
|
|
|
this.element.style.width = width;
|
|
|
|
});
|
2017-08-21 17:59:56 +02:00
|
|
|
}
|
|
|
|
}
|
2017-08-23 14:32:07 +02:00
|
|
|
|
2018-05-22 14:14:02 +02:00
|
|
|
calcWidth(callback) {
|
|
|
|
return calcWidthOfInput(this.element, callback);
|
2017-08-27 14:49:35 +02:00
|
|
|
}
|
|
|
|
|
2017-10-12 10:35:58 +02:00
|
|
|
setActiveDescendant(activeDescendantID) {
|
|
|
|
this.element.setAttribute('aria-activedescendant', activeDescendantID);
|
2017-08-27 14:49:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
removeActiveDescendant() {
|
|
|
|
this.element.removeAttribute('aria-activedescendant');
|
|
|
|
}
|
2018-05-25 10:22:14 +02:00
|
|
|
|
|
|
|
_onInput() {
|
|
|
|
if (this.type !== 'select-one') {
|
|
|
|
this.setWidth();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
_onPaste(e) {
|
|
|
|
// Disable pasting into the input if option has been set
|
|
|
|
if (e.target === this.element && this.preventPaste) {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_onFocus() {
|
|
|
|
this.isFocussed = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
_onBlur() {
|
|
|
|
this.isFocussed = false;
|
|
|
|
}
|
2017-08-17 14:50:14 +02:00
|
|
|
}
|