8355975340

Committed 20 Mar 2024 08:38AM UTC coverage: 92.188% (-0.2%) from 92.411%

Build # 8355975340

Build Type

push

github

Committed by

uNmAnNeR

Commit Message

fix #989

Run Details

975 of 1093 branches covered (89.2%)

Branch coverage included in aggregate %.

1 of 3 new or added lines in 1 file covered. (33.33%)

23 existing lines in 1 file now uncovered.

4465 of 4808 relevant lines covered (92.87%)

207.14 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

78.71

/packages/imask/src/controls/input.ts

import { DIRECTION, type Selection } from '../core/utils';
import ActionDetails from '../core/action-details';
import createMask, { type UpdateOpts, maskedClass, type FactoryArg, type FactoryReturnMasked } from '../masked/factory';
import Masked from '../masked/base';
import MaskElement from './mask-element';
import HTMLInputMaskElement, { type InputElement } from './html-input-mask-element';
import HTMLContenteditableMaskElement from './html-contenteditable-mask-element';
import IMask from '../core/holder';
import InputHistory, { type InputHistoryState } from './input-history';


export
type InputMaskElement = MaskElement | InputElement | HTMLElement;

export
type InputMaskEventListener = (e?: InputEvent) => void;

/** Listens to element events and controls changes between element and {@link Masked} */
export default
class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
  /**
    View element
  */
  declare el: MaskElement;

  /** Internal {@link Masked} model */
  declare masked: FactoryReturnMasked<Opts>;

  declare _listeners: Record<string, Array<InputMaskEventListener>>;
  declare _value: string;
  declare _changingCursorPos: number;
  declare _unmaskedValue: string;
  declare _rawInputValue: string;
  declare _selection: Selection;
  declare _cursorChanging?: ReturnType<typeof setTimeout>;
  declare _historyChanging?: boolean;
  declare _inputEvent?: InputEvent;
  declare history: InputHistory;

  constructor (el: InputMaskElement, opts: Opts) {
    this.el =
      (el instanceof MaskElement) ? el :
      (el.isContentEditable && el.tagName !== 'INPUT' && el.tagName !== 'TEXTAREA') ? new HTMLContenteditableMaskElement(el) :
      new HTMLInputMaskElement(el as InputElement);

    this.masked = createMask(opts);

    this._listeners = {};
    this._value = '';
    this._unmaskedValue = '';
    this._rawInputValue = '';
    this.history = new InputHistory();

    this._saveSelection = this._saveSelection.bind(this);
    this._onInput = this._onInput.bind(this);
    this._onChange = this._onChange.bind(this);
    this._onDrop = this._onDrop.bind(this);
    this._onFocus = this._onFocus.bind(this);
    this._onClick = this._onClick.bind(this);
    this._onUndo = this._onUndo.bind(this);
    this._onRedo = this._onRedo.bind(this);
    this.alignCursor = this.alignCursor.bind(this);
    this.alignCursorFriendly = this.alignCursorFriendly.bind(this);

    this._bindEvents();

    // refresh
    this._onChange();
  }

  maskEquals (mask: any): boolean {
    return mask == null || this.masked?.maskEquals(mask);
  }

  /** Masked */
  get mask (): FactoryReturnMasked<Opts>['mask'] {
    return this.masked.mask;
  }
  set mask (mask: any) {
    if (this.maskEquals(mask)) return;

    if (!((mask as Masked) instanceof IMask.Masked) && this.masked.constructor === maskedClass(mask as Masked)) {
      // TODO "any" no idea
      this.masked.updateOptions({ mask } as any);
      return;
    }

    const masked = (mask instanceof IMask.Masked ? mask : createMask({ mask } as Opts)) as FactoryReturnMasked<Opts>;
    masked.unmaskedValue = this.masked.unmaskedValue;
    this.masked = masked;
  }

  /** Raw value */
  get value (): string {
    return this._value;
  }

  set value (str: string) {
    if (this.value === str) return;

    this.masked.value = str;
    this.updateControl('auto');
  }

  /** Unmasked value */
  get unmaskedValue (): string {
    return this._unmaskedValue;
  }

  set unmaskedValue (str: string) {
    if (this.unmaskedValue === str) return;

    this.masked.unmaskedValue = str;
    this.updateControl('auto');
  }

    /** Raw input value */
  get rawInputValue (): string {
    return this._rawInputValue;
  }

  set rawInputValue (str: string) {
    if (this.rawInputValue === str) return;

    this.masked.rawInputValue = str;
    this.updateControl();
    this.alignCursor();
  }

  /** Typed unmasked value */
  get typedValue (): FactoryReturnMasked<Opts>['typedValue'] {
    return this.masked.typedValue;
  }

  set typedValue (val: FactoryReturnMasked<Opts>['typedValue']) {
    if (this.masked.typedValueEquals(val)) return;

    this.masked.typedValue = val;
    this.updateControl('auto');
  }

  /** Display value */
  get displayValue (): string {
    return this.masked.displayValue;
  }

  /** Starts listening to element events */
  _bindEvents () {
    this.el.bindEvents({
      selectionChange: this._saveSelection,
      input: this._onInput,
      drop: this._onDrop,
      click: this._onClick,
      focus: this._onFocus,
      commit: this._onChange,
      undo: this._onUndo,
      redo: this._onRedo,
    });
  }

  /** Stops listening to element events */
  _unbindEvents () {
    if (this.el) this.el.unbindEvents();
  }

  /** Fires custom event */
  _fireEvent (ev: string, e?: InputEvent) {
    const listeners = this._listeners[ev];
    if (!listeners) return;

    listeners.forEach(l => l(e));
  }

  /** Current selection start */
  get selectionStart (): number {
    return this._cursorChanging ?
      this._changingCursorPos :

      this.el.selectionStart;
  }

  /** Current cursor position */
  get cursorPos (): number {
    return this._cursorChanging ?
      this._changingCursorPos :

      this.el.selectionEnd;
  }
  set cursorPos (pos: number) {
    if (!this.el || !this.el.isActive) return;

    this.el.select(pos, pos);
    this._saveSelection();
  }

  /** Stores current selection */
  _saveSelection (/* ev */) {
    if (this.displayValue !== this.el.value) {
      console.warn('Element value was changed outside of mask. Syncronize mask using `mask.updateValue()` to work properly.'); // eslint-disable-line no-console
    }
    this._selection = {
      start: this.selectionStart,
      end: this.cursorPos,
    };
  }

  /** Syncronizes model value from view */
  updateValue () {
    this.masked.value = this.el.value;
    this._value = this.masked.value;
    this._unmaskedValue = this.masked.unmaskedValue;
    this._rawInputValue = this.masked.rawInputValue;
  }

  /** Syncronizes view from model value, fires change events */
  updateControl (cursorPos?: number | 'auto') {
    const newUnmaskedValue = this.masked.unmaskedValue;
    const newValue = this.masked.value;
    const newRawInputValue = this.masked.rawInputValue;
    const newDisplayValue = this.displayValue;

    const isChanged =
      this.unmaskedValue !== newUnmaskedValue ||
      this.value !== newValue ||
      this._rawInputValue !== newRawInputValue
    ;

    this._unmaskedValue = newUnmaskedValue;
    this._value = newValue;
    this._rawInputValue = newRawInputValue;

    if (this.el.value !== newDisplayValue) this.el.value = newDisplayValue;

    if (cursorPos === 'auto') this.alignCursor();
    else if (cursorPos != null) this.cursorPos = cursorPos;

    if (isChanged) this._fireChangeEvents();
    if (!this._historyChanging && (isChanged || this.history.isEmpty)) this.history.push({
      unmaskedValue: newUnmaskedValue,
      selection: { start: this.selectionStart, end: this.cursorPos },
    });
  }

  /** Updates options with deep equal check, recreates {@link Masked} model if mask type changes */
  updateOptions(opts: UpdateOpts<Opts>) {
    const { mask, ...restOpts } = opts as any; // TODO types, yes, mask is optional

    const updateMask = !this.maskEquals(mask);
    const updateOpts = this.masked.optionsIsChanged(restOpts);

    if (updateMask) this.mask = mask;
    if (updateOpts) this.masked.updateOptions(restOpts);  // TODO

    if (updateMask || updateOpts) this.updateControl();
  }

  /** Updates cursor */
  updateCursor (cursorPos: number) {
    if (cursorPos == null) return;
    this.cursorPos = cursorPos;

    // also queue change cursor for mobile browsers
    this._delayUpdateCursor(cursorPos);
  }

  /** Delays cursor update to support mobile browsers */
  _delayUpdateCursor (cursorPos: number) {
    this._abortUpdateCursor();
    this._changingCursorPos = cursorPos;
    this._cursorChanging = setTimeout(() => {
      if (!this.el) return; // if was destroyed
      this.cursorPos = this._changingCursorPos;
      this._abortUpdateCursor();
    }, 10);
  }

  /** Fires custom events */
  _fireChangeEvents () {
    this._fireEvent('accept', this._inputEvent);
    if (this.masked.isComplete) this._fireEvent('complete', this._inputEvent);
  }

  /** Aborts delayed cursor update */
  _abortUpdateCursor () {
    if (this._cursorChanging) {
      clearTimeout(this._cursorChanging);
      delete this._cursorChanging;
    }
  }

  /** Aligns cursor to nearest available position */
  alignCursor () {
    this.cursorPos = this.masked.nearestInputPos(this.masked.nearestInputPos(this.cursorPos, DIRECTION.LEFT));
  }

  /** Aligns cursor only if selection is empty */
  alignCursorFriendly () {
    if (this.selectionStart !== this.cursorPos) return;  // skip if range is selected
    this.alignCursor();
  }

  /** Adds listener on custom event */
  on (ev: string, handler: InputMaskEventListener): this {
    if (!this._listeners[ev]) this._listeners[ev] = [];
    this._listeners[ev].push(handler);
    return this;
  }

  /** Removes custom event listener */
  off (ev: string, handler: InputMaskEventListener): this {
    if (!this._listeners[ev]) return this;
    if (!handler) {
      delete this._listeners[ev];
      return this;
    }
    const hIndex = this._listeners[ev].indexOf(handler);
    if (hIndex >= 0) this._listeners[ev].splice(hIndex, 1);
    return this;
  }

  /** Handles view input event */
  _onInput (e: InputEvent): void {
    this._inputEvent = e;
    this._abortUpdateCursor();

    const details = new ActionDetails({
      // new state
      value: this.el.value,
      cursorPos: this.cursorPos,

      // old state
      oldValue: this.displayValue,
      oldSelection: this._selection,
    });

    const oldRawValue = this.masked.rawInputValue;

    const offset = this.masked.splice(
      details.startChangePos,
      details.removed.length,
      details.inserted,
      details.removeDirection,
      { input: true, raw: true },
    ).offset;

    // force align in remove direction only if no input chars were removed
    // otherwise we still need to align with NONE (to get out from fixed symbols for instance)
    const removeDirection = oldRawValue === this.masked.rawInputValue ?
      details.removeDirection :
      DIRECTION.NONE;

    let cursorPos = this.masked.nearestInputPos(
      details.startChangePos + offset,
      removeDirection,
    );
    if (removeDirection !== DIRECTION.NONE) cursorPos = this.masked.nearestInputPos(cursorPos, DIRECTION.NONE);

    this.updateControl(cursorPos);
    delete this._inputEvent;
  }

  /** Handles view change event and commits model value */
  _onChange () {
    if (this.displayValue !== this.el.value) this.updateValue();
    this.masked.doCommit();
    this.updateControl();
    this._saveSelection();
  }

  /** Handles view drop event, prevents by default */
  _onDrop (ev: Event) {
    ev.preventDefault();
    ev.stopPropagation();
  }

  /** Restore last selection on focus */
  _onFocus (ev: Event) {
    this.alignCursorFriendly();
  }

  /** Restore last selection on focus */
  _onClick (ev: Event) {
    this.alignCursorFriendly();
  }

  _onUndo () {
    this._applyHistoryState(this.history.undo());
  }

  _onRedo () {
    this._applyHistoryState(this.history.redo());
  }

  _applyHistoryState (state: InputHistoryState | undefined) {
    if (!state) return;

    this._historyChanging = true;
    this.unmaskedValue = state.unmaskedValue;
    this.el.select(state.selection.start, state.selection.end);
    this._saveSelection();
    this._historyChanging = false;
  }

  /** Unbind view events and removes element reference */
  destroy () {
    this._unbindEvents();
    (this._listeners as any).length = 0;
    delete (this as any).el;
  }
}


IMask.InputMask = InputMask;

1	import { DIRECTION, type Selection } from '../core/utils';	4✔
2	import ActionDetails from '../core/action-details';	4✔
3	import createMask, { type UpdateOpts, maskedClass, type FactoryArg, type FactoryReturnMasked } from '../masked/factory';	4✔
4	import Masked from '../masked/base';	4✔
5	import MaskElement from './mask-element';	4✔
6	import HTMLInputMaskElement, { type InputElement } from './html-input-mask-element';	4✔
7	import HTMLContenteditableMaskElement from './html-contenteditable-mask-element';	4✔
8	import IMask from '../core/holder';	4✔
9	import InputHistory, { type InputHistoryState } from './input-history';	4✔
10		1✔
11		1✔
12	export	1✔
13	type InputMaskElement = MaskElement \| InputElement \| HTMLElement;	1!
14		×
15	export	×
16	type InputMaskEventListener = (e?: InputEvent) => void;	×
17		×
18	/** Listens to element events and controls changes between element and {@link Masked} */	1✔
19	export default	1✔
20	class InputMask<Opts extends FactoryArg=Record<string, unknown>> {	1✔
21	/**	1✔
22	View element	1✔
23	*/	1✔
24	declare el: MaskElement;	1✔
25		1✔
26	/** Internal {@link Masked} model */	1✔
27	declare masked: FactoryReturnMasked<Opts>;	1✔
28		1✔
29	declare _listeners: Record<string, Array<InputMaskEventListener>>;	1✔
30	declare _value: string;	1✔
31	declare _changingCursorPos: number;	1✔
32	declare _unmaskedValue: string;	1✔
33	declare _rawInputValue: string;	1✔
34	declare _selection: Selection;	1✔
35	declare _cursorChanging?: ReturnType<typeof setTimeout>;	1✔
36	declare _historyChanging?: boolean;	4✔
37	declare _inputEvent?: InputEvent;	29✔
38	declare history: InputHistory;	4✔
39		30✔
40	constructor (el: InputMaskElement, opts: Opts) {	4✔
41	this.el =	26✔
42	(el instanceof MaskElement) ? el :	26✔
43	(el.isContentEditable && el.tagName !== 'INPUT' && el.tagName !== 'TEXTAREA') ? new HTMLContenteditableMaskElement(el) :	26!
44	new HTMLInputMaskElement(el as InputElement);	26✔
45		26✔
46	this.masked = createMask(opts);	4✔
47		6✔
48	this._listeners = {};	6✔
49	this._value = '';	1✔
50	this._unmaskedValue = '';	1!
51	this._rawInputValue = '';	1✔
52	this.history = new InputHistory();	4✔
53		17✔
54	this._saveSelection = this._saveSelection.bind(this);	4✔
55	this._onInput = this._onInput.bind(this);	7✔
56	this._onChange = this._onChange.bind(this);	4✔
57	this._onDrop = this._onDrop.bind(this);	4✔
UNCOV 58	this._onFocus = this._onFocus.bind(this);	×
59	this._onClick = this._onClick.bind(this);	×
60	this._onUndo = this._onUndo.bind(this);	4✔
61	this._onRedo = this._onRedo.bind(this);	4✔
62	this.alignCursor = this.alignCursor.bind(this);	1!
63	this.alignCursorFriendly = this.alignCursorFriendly.bind(this);	4✔
64		14✔
65	this._bindEvents();	14✔
66		14✔
67	// refresh	1✔
68	this._onChange();	1✔
69	}	1✔
70		1✔
71	maskEquals (mask: any): boolean {	1✔
72	return mask == null \|\| this.masked?.maskEquals(mask);	1✔
73	}	1✔
74		1✔
75	/** Masked */	1✔
76	get mask (): FactoryReturnMasked<Opts>['mask'] {	1✔
77	return this.masked.mask;	×
78	}	×
79	set mask (mask: any) {	4✔
80	if (this.maskEquals(mask)) return;	8✔
81		8✔
82	if (!((mask as Masked) instanceof IMask.Masked) && this.masked.constructor === maskedClass(mask as Masked)) {	4!
83	// TODO "any" no idea	10✔
84	this.masked.updateOptions({ mask } as any);	4✔
85	return;	×
86	}	×
UNCOV 87		×
88	const masked = (mask instanceof IMask.Masked ? mask : createMask({ mask } as Opts)) as FactoryReturnMasked<Opts>;	4!
89	masked.unmaskedValue = this.masked.unmaskedValue;	4✔
90	this.masked = masked;	5!
91	}	×
92		×
93	/** Raw value */	×
94	get value (): string {	×
95	return this._value;	×
96	}	×
97		×
UNCOV 98	set value (str: string) {	×
99	if (this.value === str) return;	5✔
100		5✔
101	this.masked.value = str;	4✔
UNCOV 102	this.updateControl('auto');	×
UNCOV 103	}	×
UNCOV 104		×
UNCOV 105	/** Unmasked value */	×
UNCOV 106	get unmaskedValue (): string {	×
UNCOV 107	return this._unmaskedValue;	×
UNCOV 108	}	×
UNCOV 109		×
110	set unmaskedValue (str: string) {	4✔
111	if (this.unmaskedValue === str) return;	8✔
112		8✔
113	this.masked.unmaskedValue = str;	8✔
114	this.updateControl('auto');	8✔
115	}	8✔
116		8✔
117	/** Raw input value */	8✔
118	get rawInputValue (): string {	8✔
119	return this._rawInputValue;	8✔
120	}	8✔
121		8✔
122	set rawInputValue (str: string) {	8✔
123	if (this.rawInputValue === str) return;	4✔
124		4✔
125	this.masked.rawInputValue = str;	8✔
126	this.updateControl();	8✔
127	this.alignCursor();	8✔
128	}	8✔
129		8✔
130	/** Typed unmasked value */	8✔
131	get typedValue (): FactoryReturnMasked<Opts>['typedValue'] {	8✔
132	return this.masked.typedValue;	8✔
133	}	4✔
134		4✔
135	set typedValue (val: FactoryReturnMasked<Opts>['typedValue']) {	8!
136	if (this.masked.typedValueEquals(val)) return;	8✔
137		4✔
138	this.masked.typedValue = val;	8✔
139	this.updateControl('auto');	5✔
140	}	5✔
141		5✔
142	/** Display value */	5✔
143	get displayValue (): string {	5✔
144	return this.masked.displayValue;	4✔
145	}	3✔
146		3✔
147	/** Starts listening to element events */	3✔
148	_bindEvents () {	3✔
149	this.el.bindEvents({	3✔
150	selectionChange: this._saveSelection,	3✔
151	input: this._onInput,	3✔
152	drop: this._onDrop,	3✔
153	click: this._onClick,	3!
154	focus: this._onFocus,	4✔
UNCOV 155	commit: this._onChange,	×
156	undo: this._onUndo,	×
157	redo: this._onRedo,	×
158	});	×
159	}	×
160		×
161	/** Stops listening to element events */	4✔
162	_unbindEvents () {	×
163	if (this.el) this.el.unbindEvents();	×
164	}	×
165		×
UNCOV 166	/** Fires custom event */	×
UNCOV 167	_fireEvent (ev: string, e?: InputEvent) {	×
168	const listeners = this._listeners[ev];	4✔
169	if (!listeners) return;	4✔
170		4✔
171	listeners.forEach(l => l(e));	4✔
172	}	4✔
173		4✔
174	/** Current selection start */	4✔
175	get selectionStart (): number {	4✔
UNCOV 176	return this._cursorChanging ?	×
UNCOV 177	this._changingCursorPos :	×
UNCOV 178		×
UNCOV 179	this.el.selectionStart;	×
UNCOV 180	}	×
UNCOV 181		×
182	/** Current cursor position */	4✔
183	get cursorPos (): number {	4✔
184	return this._cursorChanging ?	4✔
185	this._changingCursorPos :	4✔
186		×
187	this.el.selectionEnd;	×
188	}	×
189	set cursorPos (pos: number) {	×
190	if (!this.el \|\| !this.el.isActive) return;	4✔
191		×
192	this.el.select(pos, pos);	×
193	this._saveSelection();	×
194	}	×
195		×
196	/** Stores current selection */	4✔
197	_saveSelection (/* ev */) {	×
198	if (this.displayValue !== this.el.value) {	×
199	console.warn('Element value was changed outside of mask. Syncronize mask using `mask.updateValue()` to work properly.'); // eslint-disable-line no-console	4✔
200	}	×
201	this._selection = {	×
202	start: this.selectionStart,	×
203	end: this.cursorPos,	×
204	};	×
205	}	×
206		×
207	/** Syncronizes model value from view */	×
208	updateValue () {	×
209	this.masked.value = this.el.value;	×
210	this._value = this.masked.value;	×
NEW 211	this._unmaskedValue = this.masked.unmaskedValue;	×
NEW 212	this._rawInputValue = this.masked.rawInputValue;	×
213	}	×
214		×
215	/** Syncronizes view from model value, fires change events */	×
216	updateControl (cursorPos?: number \| 'auto') {	×
217	const newUnmaskedValue = this.masked.unmaskedValue;	×
218	const newValue = this.masked.value;	×
219	const newRawInputValue = this.masked.rawInputValue;	×
220	const newDisplayValue = this.displayValue;	×
221		×
222	const isChanged =	×
223	this.unmaskedValue !== newUnmaskedValue \|\|	1✔
224	this.value !== newValue \|\|	1!
225	this._rawInputValue !== newRawInputValue	1✔
226	;	1✔
UNCOV 227		×
UNCOV 228	this._unmaskedValue = newUnmaskedValue;	×
229	this._value = newValue;	4✔
230	this._rawInputValue = newRawInputValue;	4✔
231		×
232	if (this.el.value !== newDisplayValue) this.el.value = newDisplayValue;	4✔
233		×
234	if (cursorPos === 'auto') this.alignCursor();	4✔
UNCOV 235	else if (cursorPos != null) this.cursorPos = cursorPos;	×
236		×
237	if (isChanged) this._fireChangeEvents();	×
238	if (!this._historyChanging && (isChanged \|\| this.history.isEmpty)) this.history.push({	×
239	unmaskedValue: newUnmaskedValue,	4✔
240	selection: { start: this.selectionStart, end: this.cursorPos },	4✔
241	});	4✔
242	}	4✔
243		4✔
244	/** Updates options with deep equal check, recreates {@link Masked} model if mask type changes */	1✔
245	updateOptions(opts: UpdateOpts<Opts>) {	1✔
246	const { mask, ...restOpts } = opts as any; // TODO types, yes, mask is optional	1✔
247		1✔
248	const updateMask = !this.maskEquals(mask);	1✔
249	const updateOpts = this.masked.optionsIsChanged(restOpts);	1✔
250		1✔
251	if (updateMask) this.mask = mask;	1✔
252	if (updateOpts) this.masked.updateOptions(restOpts); // TODO	1✔
253		1✔
254	if (updateMask \|\| updateOpts) this.updateControl();	1✔
255	}	1✔
256		1✔
257	/** Updates cursor */	1✔
258	updateCursor (cursorPos: number) {	1✔
259	if (cursorPos == null) return;	1✔
260	this.cursorPos = cursorPos;	1✔
261		1✔
262	// also queue change cursor for mobile browsers	1✔
263	this._delayUpdateCursor(cursorPos);	1✔
264	}	1✔
265		1✔
266	/** Delays cursor update to support mobile browsers */	1✔
267	_delayUpdateCursor (cursorPos: number) {	1✔
268	this._abortUpdateCursor();	1✔
269	this._changingCursorPos = cursorPos;	1✔
270	this._cursorChanging = setTimeout(() => {	1✔
271	if (!this.el) return; // if was destroyed	1✔
272	this.cursorPos = this._changingCursorPos;	1✔
273	this._abortUpdateCursor();	1✔
274	}, 10);	1✔
275	}	1✔
276		1✔
277	/** Fires custom events */	1✔
278	_fireChangeEvents () {	1✔
279	this._fireEvent('accept', this._inputEvent);	1✔
280	if (this.masked.isComplete) this._fireEvent('complete', this._inputEvent);	1✔
281	}	1✔
282		1✔
283	/** Aborts delayed cursor update */	1✔
284	_abortUpdateCursor () {	1✔
285	if (this._cursorChanging) {	1✔
286	clearTimeout(this._cursorChanging);	1✔
287	delete this._cursorChanging;	1✔
288	}	1✔
289	}	1✔
290		1✔
291	/** Aligns cursor to nearest available position */	1✔
292	alignCursor () {	1✔
293	this.cursorPos = this.masked.nearestInputPos(this.masked.nearestInputPos(this.cursorPos, DIRECTION.LEFT));	1✔
294	}	1✔
295		1✔
296	/** Aligns cursor only if selection is empty */	1✔
297	alignCursorFriendly () {	1✔
298	if (this.selectionStart !== this.cursorPos) return; // skip if range is selected	1✔
299	this.alignCursor();	1✔
300	}	1✔
301		1✔
302	/** Adds listener on custom event */	1✔
303	on (ev: string, handler: InputMaskEventListener): this {	1✔
304	if (!this._listeners[ev]) this._listeners[ev] = [];	1✔
305	this._listeners[ev].push(handler);	1✔
306	return this;	1✔
307	}	1✔
308		1✔
309	/** Removes custom event listener */	1✔
310	off (ev: string, handler: InputMaskEventListener): this {	1✔
311	if (!this._listeners[ev]) return this;	1✔
312	if (!handler) {	1✔
313	delete this._listeners[ev];	1✔
314	return this;	1✔
315	}	1✔
316	const hIndex = this._listeners[ev].indexOf(handler);	1✔
317	if (hIndex >= 0) this._listeners[ev].splice(hIndex, 1);	1✔
318	return this;	1✔
319	}	1✔
320		1✔
321	/** Handles view input event */	1✔
322	_onInput (e: InputEvent): void {	1✔
323	this._inputEvent = e;	1✔
324	this._abortUpdateCursor();	1✔
325		1✔
326	const details = new ActionDetails({	1✔
327	// new state	1✔
328	value: this.el.value,	1✔
329	cursorPos: this.cursorPos,	1✔
330		1✔
331	// old state	1✔
332	oldValue: this.displayValue,	1✔
333	oldSelection: this._selection,	1✔
334	});	1✔
335		1✔
336	const oldRawValue = this.masked.rawInputValue;	1✔
337		1✔
338	const offset = this.masked.splice(	1✔
339	details.startChangePos,	1✔
340	details.removed.length,	1✔
341	details.inserted,	1✔
342	details.removeDirection,	1✔
343	{ input: true, raw: true },	1✔
344	).offset;	1✔
345		1✔
346	// force align in remove direction only if no input chars were removed	1✔
347	// otherwise we still need to align with NONE (to get out from fixed symbols for instance)	1✔
348	const removeDirection = oldRawValue === this.masked.rawInputValue ?	1✔
349	details.removeDirection :	1✔
350	DIRECTION.NONE;	1✔
351		1✔
352	let cursorPos = this.masked.nearestInputPos(	1✔
353	details.startChangePos + offset,	1✔
354	removeDirection,	1✔
355	);	1✔
356	if (removeDirection !== DIRECTION.NONE) cursorPos = this.masked.nearestInputPos(cursorPos, DIRECTION.NONE);	1✔
357		1✔
358	this.updateControl(cursorPos);	1✔
359	delete this._inputEvent;	1✔
360	}	1✔
361		1✔
362	/** Handles view change event and commits model value */	1✔
363	_onChange () {	1✔
364	if (this.displayValue !== this.el.value) this.updateValue();	1✔
365	this.masked.doCommit();	1✔
366	this.updateControl();	1✔
367	this._saveSelection();	1✔
368	}	1✔
369		1✔
370	/** Handles view drop event, prevents by default */	1✔
371	_onDrop (ev: Event) {	1✔
372	ev.preventDefault();	1✔
373	ev.stopPropagation();	1✔
374	}	1✔
375		1✔
376	/** Restore last selection on focus */	1✔
377	_onFocus (ev: Event) {	1✔
378	this.alignCursorFriendly();	1✔
379	}	1✔
380		1✔
381	/** Restore last selection on focus */	1✔
382	_onClick (ev: Event) {	1✔
383	this.alignCursorFriendly();	1✔
384	}	1✔
385		1✔
386	_onUndo () {	1✔
387	this._applyHistoryState(this.history.undo());	1✔
388	}	1✔
389		1✔
390	_onRedo () {	1✔
391	this._applyHistoryState(this.history.redo());	1✔
392	}	1✔
393		1✔
394	_applyHistoryState (state: InputHistoryState \| undefined) {	1✔
395	if (!state) return;	1✔
396		1✔
397	this._historyChanging = true;	1✔
398	this.unmaskedValue = state.unmaskedValue;	1✔
399	this.el.select(state.selection.start, state.selection.end);	1✔
400	this._saveSelection();	1✔
401	this._historyChanging = false;	1✔
402	}	1✔
403		1✔
404	/** Unbind view events and removes element reference */	1✔
405	destroy () {	1✔
406	this._unbindEvents();	1✔
407	(this._listeners as any).length = 0;	1✔
408	delete (this as any).el;	1✔
409	}	1✔
410	}	1✔
411		1✔
412		1✔
413	IMask.InputMask = InputMask;	1✔

uNmAnNeR / imaskjs / 8355975340

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous