File : controls/textInputControl/TextInputControl.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
28
/* ------------------------------------------------------------------------------------------------------------------------- */
29
/**
30
This class is a generic control with a input element for text
31
*/
32
/* ------------------------------------------------------------------------------------------------------------------------- */
33
34
class TextInputControl extends BaseControl {
35
36
    /**
37
    The input HTMLElement
38
    @type {HTMLElement}
39
    */
40
41
    #valueInput;
42
43
    /**
44
    The constructor
45
    @param {Object} options An object with the  options ( datasetName, headerText )
46
    @param {Object} eventListeners A reference to the eventListeners object of the dialog
47
    */
48
49
    constructor ( options, eventListeners ) {
50
        super ( );
51
        theHTMLElementsFactory.create (
52
            'div',
53
            {
54
                className : 'TravelNotes-BaseDialog-FlexRow',
55
                textContent : options?.headerText || ''
56
            },
57
            this.controlHTMLElement
58
        );
59
        this.#valueInput = theHTMLElementsFactory.create (
60
            'input',
61
            {
62
                className : 'TravelNotes-TextInputControl-TextInput',
63
                type : 'text',
64
                dataset : { Name : options?.datasetName || 'TextInputControl' },
65
                value : options?.value || ''
66
            },
67
            theHTMLElementsFactory.create (
68
                'div',
69
                {
70
                    className : 'TravelNotes-BaseDialog-FlexRow'
71
                },
72
                this.controlHTMLElement
73
            )
74
        );
75
        if ( eventListeners?.controlFocus ) {
76
            this.#valueInput.addEventListener ( 'focus', eventListeners.controlFocus );
77
        }
78
        if ( eventListeners?.controlInput ) {
79
            this.#valueInput.addEventListener ( 'input', eventListeners.controlInput );
80
        }
81
        if ( eventListeners?.controlChange ) {
82
            this.#valueInput.addEventListener ( 'change', eventListeners.controlChange );
83
        }
84
    }
85
86
    /**
87
    Remove event listeners
88
    @param {NoteDialogEventListeners} eventListeners A reference to the eventListeners object of the dialog
89
    */
90
91
    destructor ( eventListeners ) {
92
        if ( eventListeners?.controlFocus ) {
93
            this.#valueInput.removeEventListener ( 'focus', eventListeners.controlFocus );
94
        }
95
        if ( eventListeners?.controlInput ) {
96
            this.#valueInput.removeEventListener ( 'input', eventListeners.controlInput );
97
        }
98
    }
99
100
    /**
101
    The value in the control
102
    @type {String}
103
    */
104
105
    get value ( ) { return this.#valueInput.value; }
106
107
    set value ( value ) { this.#valueInput.value = value; }
108
109
}
110
111
export default TextInputControl;
112
113
/* --- End of file --------------------------------------------------------------------------------------------------------- */
114