1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
20 | |
21 | |
22 | |
23 | |
24 | |
25 | import BaseControl from '../baseControl/BaseControl.js'; |
26 | import theHTMLElementsFactory from '../../core/uiLib/HTMLElementsFactory.js'; |
27 | import EyeMouseDownEL from './EyeMouseDownEL.js'; |
28 | import EyeMouseUpEL from './EyeMouseUpEL.js'; |
29 | |
30 | |
31 | |
32 | |
33 | |
34 | |
35 | |
36 | class PasswordControl extends BaseControl { |
37 | |
38 | |
39 | |
40 | |
41 | |
42 | |
43 | #passwordInput; |
44 | |
45 | |
46 | |
47 | |
48 | |
49 | #eyeSpan; |
50 | |
51 | |
52 | |
53 | |
54 | |
55 | |
56 | #eyeMouseDownEL; |
57 | |
58 | |
59 | |
60 | |
61 | |
62 | |
63 | #eyeMouseUpEL; |
64 | |
65 | |
66 | |
67 | |
68 | |
69 | |
70 | constructor ( options ) { |
71 | super ( ); |
72 | this.#passwordInput = theHTMLElementsFactory.create ( |
73 | 'input', |
74 | { |
75 | type : 'password', |
76 | dataset : { Name : options?.datasetName || 'PasswordControl' } |
77 | }, |
78 | this.controlHTMLElement |
79 | ); |
80 | this.#eyeSpan = theHTMLElementsFactory.create ( |
81 | 'span', |
82 | { |
83 | id : 'TravelNotes-PasswordControl-EyeSpan', |
84 | textContent : '👁️' |
85 | }, |
86 | this.controlHTMLElement |
87 | ); |
88 | |
89 | |
90 | this.#eyeMouseDownEL = new EyeMouseDownEL ( this.#passwordInput ); |
91 | this.#eyeMouseUpEL = new EyeMouseUpEL ( this.#passwordInput ); |
92 | this.#eyeSpan.addEventListener ( 'mousedown', this.#eyeMouseDownEL, false ); |
93 | this.#eyeSpan.addEventListener ( 'touchstart', this.#eyeMouseDownEL, false ); |
94 | this.#eyeSpan.addEventListener ( 'mouseup', this.#eyeMouseUpEL, false ); |
95 | this.#eyeSpan.addEventListener ( 'mouseleave', this.#eyeMouseUpEL, false ); |
96 | this.#eyeSpan.addEventListener ( 'touchend', this.#eyeMouseUpEL, false ); |
97 | this.#passwordInput.focus ( ); |
98 | } |
99 | |
100 | |
101 | |
102 | |
103 | |
104 | destructor ( ) { |
105 | this.#eyeSpan.removeEventListener ( 'mousedown', this.#eyeMouseDownEL, false ); |
106 | this.#eyeSpan.removeEventListener ( 'touchstart', this.#eyeMouseDownEL, false ); |
107 | this.#eyeSpan.removeEventListener ( 'mouseup', this.#eyeMouseUpEL, false ); |
108 | this.#eyeSpan.removeEventListener ( 'mouseleave', this.#eyeMouseUpEL, false ); |
109 | this.#eyeSpan.removeEventListener ( 'touchend', this.#eyeMouseUpEL, false ); |
110 | this.#eyeMouseDownEL = null; |
111 | this.#eyeMouseUpEL = null; |
112 | } |
113 | |
114 | |
115 | |
116 | |
117 | |
118 | |
119 | get value ( ) { return this.#passwordInput.value; } |
120 | |
121 | |
122 | |
123 | |
124 | |
125 | focus ( ) { |
126 | this.#passwordInput.focus ( ); |
127 | } |
128 | } |
129 | |
130 | export default PasswordControl; |
131 | |
132 | |
133 | |