File : controls/colorControl/ColorControl.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 theHTMLElementsFactory from '../../core/uiLib/HTMLElementsFactory.js';
26
import ColorButtonsControlElement from './ColorButtonsControlElement.js';
27
import RedSliderControlElement from './RedSliderControlElement.js';
28
import RgbInputsControlElement from './RgbInputsControlElement.js';
29
import SampleControlElement from './SampleControlElement.js';
30
import { ZERO } from '../../main/Constants.js';
31
import Color from './Color.js';
32
import BaseControl from '../baseControl/BaseControl.js';
33
34
/* ------------------------------------------------------------------------------------------------------------------------- */
35
/**
36
html control for color selection
37
*/
38
/* ------------------------------------------------------------------------------------------------------------------------- */
39
40
class ColorControl extends BaseControl {
41
42
    /**
43
    The element with the color buttons
44
    @type {HTMLElement}
45
    */
46
47
    #colorButtonsControlElement;
48
49
    /**
50
    The element with the red slider
51
    @type {HTMLElement}
52
    */
53
54
    #redSliderControlElement;
55
56
    /**
57
    The element with the r, g, and b inputs
58
    @type {HTMLElement}
59
    */
60
61
    #rgbInputsControlElement;
62
63
    /**
64
    The element with the sample color
65
    @type {HTMLElement}
66
    */
67
68
    #sampleControlElement;
69
70
    /**
71
    constructor
72
    @param {Object} options An object with the  options ( headerText, cssColor )
73
    */
74
75
    constructor ( options ) {
76
        super ( );
77
        if ( options?.headerText && '' !== options.headerText ) {
78
            theHTMLElementsFactory.create (
79
                'div',
80
                {
81
                    textContent : options.headerText
82
                },
83
                this.controlHTMLElement
84
            );
85
        }
86
        this.controlHTMLElement.classList.add ( 'TravelNotes-ColorControl-ColorHTMLElement' );
87
        this.#colorButtonsControlElement = new ColorButtonsControlElement ( this );
88
        this.#colorButtonsControlElement.red = ZERO;
89
        this.#redSliderControlElement = new RedSliderControlElement ( this );
90
        this.#rgbInputsControlElement = new RgbInputsControlElement ( this );
91
        this.#rgbInputsControlElement.cssColor = options?.cssColor || '#ff0000';
92
        this.#sampleControlElement = new SampleControlElement ( this );
93
        this.#sampleControlElement.cssColor = options?.cssColor || '#ff0000';
94
    }
95
96
    /**
97
    The destructor.
98
    */
99
100
    destructor ( ) {
101
        this.#colorButtonsControlElement.destructor ( );
102
        this.#redSliderControlElement.destructor ( );
103
        this.#rgbInputsControlElement.destructor ( );
104
    }
105
106
    /**
107
    The color selected in the control in the css hex format ( #rrggbb )
108
    @type {String}
109
    */
110
111
    get cssColor ( ) {
112
113
        // It's needed to convert from cssColor to Color and then to cssColor because we need a css hex format #rrggbb
114
        return Color.fromCss ( this.#sampleControlElement.cssColor ).cssColor;
115
    }
116
117
    /**
118
    Change the red component of the color buttons, according to the red slider value.
119
    Called by the RedSliderInputEL.handleEvent ( ) method
120
    @param {Number} red The value of the red component
121
    */
122
123
    onRedSliderInput ( red ) {
124
        this.#colorButtonsControlElement.red = red;
125
    }
126
127
    /**
128
    Change the value of the r, g and b inputs according to the given cssColor
129
    Change the sample color according to the given css color
130
    Called by the ColorButtonClickEL.handleEvent method
131
    @param {String} cssColor The color to use in the css format
132
    */
133
134
    onColorButtonClick ( cssColor ) {
135
        this.#rgbInputsControlElement.cssColor = cssColor;
136
        this.#sampleControlElement.cssColor = cssColor;
137
    }
138
139
    /**
140
    Change the sample color according to the given Color
141
    @param {String} cssColor The css color to use
142
    */
143
144
    onRgbInput ( cssColor ) {
145
        this.#sampleControlElement.cssColor = cssColor;
146
    }
147
}
148
149
export default ColorControl;
150
151
/* --- End of file --------------------------------------------------------------------------------------------------------- */
152