File : controls/passwordControl/PasswordControl.js

1
/*
2
Copyright - 2017 2023 - wwwouaiebe - Contact: https://www.ouaie.be/
3
4
This  program is free software;
5
you can redistribute it and/or modify it under the terms of the
6
GNU General Public License as published by the Free Software Foundation;
7
either version 3 of the License, or any later version.
8
9
This program is distributed in the hope that it will be useful,
10
but WITHOUT ANY WARRANTY; without even the implied warranty of
11
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12
GNU General Public License for more details.
13
14
You should have received a copy of the GNU General Public License
15
along with this program; if not, write to the Free Software
16
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
17
*/
18
/*
19
Changes:
20
    - v4.0.0:
21
        - created from v3.6.0
22
Doc reviewed 202208
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
This class is a generic control with a input element for password
33
*/
34
/* ------------------------------------------------------------------------------------------------------------------------- */
35
36
class PasswordControl extends BaseControl {
37
38
    /**
39
    the password html input
40
    @type {HTMLElement}
41
    */
42
43
    #passwordInput;
44
45
    /** the eye html span
46
    @type {HTMLElement}
47
    */
48
49
    #eyeSpan;
50
51
    /**
52
    mouseDown event listener
53
    @type {EyeMouseDownEL}
54
    */
55
56
    #eyeMouseDownEL;
57
58
    /**
59
    mouseup event listener
60
    @type {EyeMouseUpEL}
61
    */
62
63
    #eyeMouseUpEL;
64
65
    /**
66
    The constructor
67
    @param {Object} options An object with the  options ( datasetName )
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
        // Event listeners
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
    Remove event listeners
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
    The value in the control
116
    @type {String}
117
    */
118
119
    get value ( ) { return this.#passwordInput.value; }
120
121
    /**
122
    set the focus on the password input
123
    */
124
125
    focus ( ) {
126
        this.#passwordInput.focus ( );
127
    }
128
}
129
130
export default PasswordControl;
131
132
/* --- End of file --------------------------------------------------------------------------------------------------------- */
133