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 RedSliderInputEL from './RedSliderInputEL.js'; |
27 | import Color from './Color.js'; |
28 | import { ZERO } from '../../main/Constants.js'; |
29 | |
30 | /* ------------------------------------------------------------------------------------------------------------------------- */ |
31 | /** |
32 | The element with the 36 color buttons |
33 | */ |
34 | /* ------------------------------------------------------------------------------------------------------------------------- */ |
35 | |
36 | class RedSliderControlElement { |
37 | |
38 | /** |
39 | The red slider |
40 | @type {HTMLElement} |
41 | */ |
42 | |
43 | #redSliderInput; |
44 | |
45 | /** |
46 | The input red slider event listener |
47 | @type {RedSliderInputEL} |
48 | */ |
49 | |
50 | #redSliderInputEL; |
51 | |
52 | /** |
53 | The max value of the slider |
54 | @type {Number} |
55 | */ |
56 | |
57 | // eslint-disable-next-line no-magic-numbers |
58 | static get #SLIDER_MAX_VALUE ( ) { return 100; } |
59 | |
60 | /** |
61 | The step value of the slider |
62 | @type {Number} |
63 | */ |
64 | |
65 | // eslint-disable-next-line no-magic-numbers |
66 | static get #SLIDER_STEP ( ) { return 20; } |
67 | |
68 | /** |
69 | The constructor |
70 | @param {ColorControl} colorControl A reference to the color control |
71 | */ |
72 | |
73 | constructor ( colorControl ) { |
74 | this.#redSliderInputEL = new RedSliderInputEL ( |
75 | colorControl, |
76 | Color.MAX_COLOR / RedSliderControlElement.#SLIDER_MAX_VALUE |
77 | ); |
78 | this.#redSliderInput = theHTMLElementsFactory.create ( 'input', |
79 | { |
80 | type : 'range', |
81 | value : ZERO, |
82 | min : ZERO, |
83 | max : RedSliderControlElement.#SLIDER_MAX_VALUE, |
84 | step : RedSliderControlElement.#SLIDER_STEP |
85 | |
86 | }, |
87 | theHTMLElementsFactory.create ( 'div', null, colorControl.controlHTMLElement ) |
88 | ); |
89 | this.#redSliderInput.addEventListener ( 'input', this.#redSliderInputEL, false ); |
90 | this.#redSliderInput.focus ( ); |
91 | } |
92 | |
93 | /** |
94 | The destructor |
95 | */ |
96 | |
97 | destructor ( ) { |
98 | this.#redSliderInput.removeEventListener ( 'input', this.#redSliderInputEL, false ); |
99 | this.#redSliderInputEL = null; |
100 | } |
101 | } |
102 | |
103 | export default RedSliderControlElement; |
104 | |
105 | /* --- End of file --------------------------------------------------------------------------------------------------------- */ |
106 |