File : controls/colorControl/RgbInputsControlElement.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 theTranslator from '../../core/uiLib/Translator.js';
26
import theHTMLElementsFactory from '../../core/uiLib/HTMLElementsFactory.js';
27
import Color from './Color.js';
28
import RgbInputEL from './RgbInputEL.js';
29
30
/* ------------------------------------------------------------------------------------------------------------------------- */
31
/**
32
The element with the 3 color inputs HTMLElements
33
*/
34
/* ------------------------------------------------------------------------------------------------------------------------- */
35
36
class RgbInputsControlElement {
37
38
    /**
39
    The main HTMLElement
40
    @type {HTMLElement}
41
    */
42
43
    #rgbHTMLElement;
44
45
    /**
46
    The red input HTMLElement
47
    @type {HTMLElement}
48
    */
49
50
    #redInput;
51
52
    /**
53
    The green input HTMLElement
54
    @type {HTMLElement}
55
    */
56
57
    #greenInput;
58
59
    /**
60
    The blue input HTMLElement
61
    @type {HTMLElement}
62
    */
63
64
    #blueInput;
65
66
    /**
67
    The input event listener
68
    @type {RgbInputEL}
69
    */
70
71
    #rgbInputEL;
72
73
    /**
74
    Create an input HTMLElement
75
    @param {String} inputText The text to use for header of the input
76
    @return {HTMLElement} The crated input HTMLElement
77
    */
78
79
    #createColorInput ( inputText ) {
80
        theHTMLElementsFactory.create ( 'text', { value : inputText }, this.#rgbHTMLElement    );
81
        const inputHtmlElement = theHTMLElementsFactory.create ( 'input',
82
            {
83
                type : 'number',
84
                className : 'TravelNotes-ColorControl-NumberInput',
85
                min : Color.MIN_COLOR,
86
                max : Color.MAX_COLOR
87
            },
88
            this.#rgbHTMLElement
89
        );
90
        inputHtmlElement.addEventListener ( 'input', this.#rgbInputEL, false );
91
92
        return inputHtmlElement;
93
    }
94
95
    /**
96
    The constructor
97
    @param {ColorControl} colorControl A reference to the color control
98
    */
99
100
    constructor ( colorControl ) {
101
        Object.freeze ( this );
102
        this.#rgbInputEL = new RgbInputEL ( colorControl, this );
103
        this.#rgbHTMLElement = theHTMLElementsFactory.create ( 'div', null, colorControl.controlHTMLElement );
104
        this.#redInput = this.#createColorInput ( theTranslator.getText ( 'ColorControl - Red' ) );
105
        this.#greenInput = this.#createColorInput ( theTranslator.getText ( 'ColorControl - Green' ) );
106
        this.#blueInput = this.#createColorInput ( theTranslator.getText ( 'ColorControl - Blue' ) );
107
    }
108
109
    /**
110
    The destructor
111
    */
112
113
    destructor ( ) {
114
        this.#redInput.removeEventListener ( 'input', this.#rgbInputEL, false );
115
        this.#greenInput.removeEventListener ( 'input', this.#rgbInputEL, false );
116
        this.#blueInput.removeEventListener ( 'input', this.#rgbInputEL, false );
117
        this.#rgbInputEL = null;
118
    }
119
120
    /**
121
    The css color value used for the inputs
122
    @type {String}
123
    */
124
125
    get cssColor ( ) {
126
        return new Color (
127
            Number.parseInt ( this.#redInput.value ),
128
            Number.parseInt ( this.#greenInput.value ),
129
            Number.parseInt ( this.#blueInput.value )
130
        ).cssColor;
131
    }
132
133
    set cssColor ( cssColor ) {
134
        let color = Color.fromCss ( cssColor );
135
        this.#redInput.value = color.red;
136
        this.#greenInput.value = color.green;
137
        this.#blueInput.value = color.blue;
138
    }
139
140
}
141
142
export default RgbInputsControlElement;
143
144
/* --- End of file --------------------------------------------------------------------------------------------------------- */
145