1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import settings from '../../globals/js/settings';
|
9 | import mixin from '../../globals/js/misc/mixin';
|
10 | import createComponent from '../../globals/js/mixins/create-component';
|
11 | import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
|
12 | import handles from '../../globals/js/mixins/handles';
|
13 | import eventMatches from '../../globals/js/misc/event-matches';
|
14 | import on from '../../globals/js/misc/on';
|
15 |
|
16 | export default class TextInput extends mixin(createComponent, initComponentBySearch, handles) {
|
17 | |
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 | constructor(element, options) {
|
25 | super(element, options);
|
26 | this.manage(
|
27 | on(this.element, 'click', event => {
|
28 | const toggleVisibilityButton = eventMatches(event, this.options.selectorPasswordVisibilityButton);
|
29 | if (toggleVisibilityButton) {
|
30 | this._toggle({ element, button: toggleVisibilityButton });
|
31 | }
|
32 | })
|
33 | );
|
34 | }
|
35 |
|
36 | |
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 | _setIconVisibility = ({ iconVisibilityOn, iconVisibilityOff, passwordIsVisible, selectorPasswordVisibilityButton }) => {
|
47 | if (passwordIsVisible) {
|
48 | iconVisibilityOn.setAttribute('hidden', true);
|
49 | iconVisibilityOff.removeAttribute('hidden');
|
50 | selectorPasswordVisibilityButton.setAttribute('aria-label', 'Hide password');
|
51 | return;
|
52 | }
|
53 | iconVisibilityOn.removeAttribute('hidden');
|
54 | iconVisibilityOff.setAttribute('hidden', true);
|
55 | selectorPasswordVisibilityButton.setAttribute('aria-label', 'Show password');
|
56 | };
|
57 |
|
58 | |
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 | _toggle = ({ element, button }) => {
|
66 |
|
67 | element.classList.toggle(this.options.passwordIsVisible);
|
68 | const passwordIsVisible = element.classList.contains(this.options.passwordIsVisible);
|
69 | const iconVisibilityOn = button.querySelector(this.options.svgIconVisibilityOn);
|
70 | const iconVisibilityOff = button.querySelector(this.options.svgIconVisibilityOff);
|
71 | const input = element.querySelector(this.options.selectorPasswordField);
|
72 | const selectorPasswordVisibilityButton = element.querySelector(this.options.selectorPasswordVisibilityButton);
|
73 | this._setIconVisibility({
|
74 | iconVisibilityOn,
|
75 | iconVisibilityOff,
|
76 | passwordIsVisible,
|
77 | selectorPasswordVisibilityButton,
|
78 | });
|
79 | input.type = passwordIsVisible ? 'text' : 'password';
|
80 | };
|
81 |
|
82 | |
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 | static get options() {
|
93 | const { prefix } = settings;
|
94 | return {
|
95 | selectorInit: '[data-text-input]',
|
96 | selectorPasswordField: `.${prefix}--text-input[data-toggle-password-visibility]`,
|
97 | selectorPasswordVisibilityButton: `.${prefix}--text-input--password__visibility`,
|
98 | passwordIsVisible: `${prefix}--text-input--password-visible`,
|
99 | svgIconVisibilityOn: `svg.${prefix}--icon--visibility-on`,
|
100 | svgIconVisibilityOff: `svg.${prefix}--icon--visibility-off`,
|
101 | };
|
102 | }
|
103 |
|
104 | |
105 |
|
106 |
|
107 |
|
108 | static components = new WeakMap();
|
109 | }
|