File : controls/colorControl/ColorButtonsControlElement.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 { ZERO } from '../../main/Constants.js';
27
import Color from './Color.js';
28
import ColorButtonClickEL from './ColorButtonClickEL.js';
29
30
/* ------------------------------------------------------------------------------------------------------------------------- */
31
/**
32
The element with the 36 color buttons
33
*/
34
/* ------------------------------------------------------------------------------------------------------------------------- */
35
36
class ColorButtonsControlElement {
37
38
    /**
39
    The main Element
40
    @type {HTMLElement}
41
    */
42
43
    #colorButtonsHTMLElement;
44
45
    /**
46
    An array with the buttons
47
    @type {Array.<HTMLElement>}
48
    */
49
50
    #colorButtons;
51
52
    /**
53
    The button click event listener
54
    @type {ColorButtonClickEL}
55
    */
56
57
    #colorButtonClickEL;
58
59
    /**
60
    The number of rows buttons in the control
61
    @type {Number}
62
    */
63
    // eslint-disable-next-line no-magic-numbers
64
    static get #ROW_NUMBERS ( ) { return 6; }
65
66
    /**
67
    The number of buttons in a row
68
    @type {Number}
69
    */
70
71
    // eslint-disable-next-line no-magic-numbers
72
    static get #CELL_NUMBERS ( ) { return 6; }
73
74
    /**
75
    The number to use for incrementation of the color between two buttons
76
    @type {Number}
77
    */
78
79
    // eslint-disable-next-line no-magic-numbers
80
    static get #DELTA_COLOR ( ) { return 51; }
81
82
    /**
83
    The constructor
84
    @param {ColorControl} colorControl A reference to the color control
85
    */
86
87
    constructor ( colorControl ) {
88
        Object.freeze ( this );
89
        this.#colorButtons = [];
90
        this.#colorButtonClickEL = new ColorButtonClickEL ( colorControl );
91
        this.#colorButtonsHTMLElement = theHTMLElementsFactory.create ( 'div', null, colorControl.controlHTMLElement );
92
        for ( let rowCounter = ZERO; rowCounter < ColorButtonsControlElement.#ROW_NUMBERS; ++ rowCounter ) {
93
            const colorButtonsRowHTMLElement = theHTMLElementsFactory.create ( 'div', null, this.#colorButtonsHTMLElement );
94
            for ( let cellCounter = ZERO; cellCounter < ColorButtonsControlElement.#CELL_NUMBERS; ++ cellCounter ) {
95
                let colorButton = theHTMLElementsFactory.create (
96
                    'div',
97
                    {
98
                        className : 'TravelNotes-ColorControl-CellColorHTMLElement'
99
                    },
100
                    colorButtonsRowHTMLElement
101
                );
102
                colorButton.addEventListener ( 'click', this.#colorButtonClickEL, false );
103
                this.#colorButtons.push ( colorButton );
104
            }
105
        }
106
    }
107
108
    /**
109
    Destructor
110
    */
111
112
    destructor ( ) {
113
        this.#colorButtons.forEach (
114
            colorButton => { colorButton.removeEventListener ( 'click', this.#colorButtonClickEL, false ); }
115
        );
116
        this.#colorButtonClickEL = null;
117
    }
118
119
    /**
120
    Set the red component of the color buttons
121
    */
122
123
    set red ( red ) {
124
        let backgroundColor = new Color ( red, Color.MIN_COLOR, Color.MIN_COLOR );
125
        this.#colorButtons.forEach (
126
            colorButton => {
127
                colorButton.style [ 'background-color' ] = backgroundColor.cssColor;
128
                if ( Color.MAX_COLOR <= backgroundColor.green ) {
129
                    backgroundColor.green = Color.MIN_COLOR;
130
                    backgroundColor.blue += ColorButtonsControlElement.#DELTA_COLOR;
131
                }
132
                else {
133
                    backgroundColor.green += ColorButtonsControlElement.#DELTA_COLOR;
134
                }
135
            }
136
        );
137
    }
138
}
139
140
export default ColorButtonsControlElement;
141
142
/* --- End of file --------------------------------------------------------------------------------------------------------- */
143