File : toolbars/providersToolbar/ProviderButton.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 theRouter from '../../core/lib/Router.js';
27
28
/* ------------------------------------------------------------------------------------------------------------------------- */
29
/**
30
Provider buttons on the ProvidersToolbar
31
*/
32
/* ------------------------------------------------------------------------------------------------------------------------- */
33
34
class ProviderButton {
35
36
    /**
37
    A reference to the toolbar
38
    @type {HTMLElement}
39
    */
40
41
    #providersToolbar;
42
43
    /**
44
    The provider
45
    @type {BaseRouteProvider}
46
    */
47
48
    #provider;
49
50
    /**
51
    the button HTMLElement
52
    @type {HTMLElement}
53
    */
54
55
    #buttonHTMLElement;
56
57
    /**
58
    The constructor
59
    @param {ProvidersToolbar} providersToolbar The providersToolbar on witch the button will be added
60
    @param {BaseRouteProvider} provider The provider object linked to the button
61
    */
62
63
    constructor ( providersToolbar, provider ) {
64
65
        Object.freeze ( this );
66
67
        this.#providersToolbar = providersToolbar;
68
        this.#provider = provider;
69
70
        // HTML creation
71
        this.#buttonHTMLElement = theHTMLElementsFactory.create (
72
            'img',
73
            {
74
                src : provider.icon,
75
                id : 'TravelNotes-ProvidersToolbar-' + provider.name + 'ImgButton',
76
                className : 'TravelNotes-ProvidersToolbar-ImgButton',
77
                title : provider.title || provider.name
78
            }
79
        );
80
        this.#buttonHTMLElement.addEventListener ( 'click', this );
81
    }
82
83
    /**
84
    click event listener. The button is also it's own event listener.
85
    @param {Event} clickEvent The event to handle
86
    */
87
88
    handleEvent ( clickEvent ) {
89
        clickEvent.stopPropagation ( );
90
        this.#providersToolbar.provider = this.#provider.name;
91
        theRouter.startRouting ( );
92
    }
93
94
    /**
95
    the button HTMLElements
96
    @type {HTMLElement}
97
    */
98
99
    get buttonHTMLElement ( ) { return this.#buttonHTMLElement; }
100
101
    /**
102
    The provider
103
    @type {BaseRouteProvider}
104
    */
105
106
    get provider ( ) { return this.#provider; }
107
108
    /**
109
    draw or remove a frame around the button
110
    */
111
112
    set active ( active ) {
113
        if ( active ) {
114
            this.#buttonHTMLElement.classList.add ( 'TravelNotes-ProvidersToolbar-ActiveProviderImgButton' );
115
        }
116
        else {
117
            this.#buttonHTMLElement.classList.remove ( 'TravelNotes-ProvidersToolbar-ActiveProviderImgButton' );
118
        }
119
    }
120
}
121
122
export default ProviderButton;
123
124
/* --- End of file --------------------------------------------------------------------------------------------------------- */
125