File : toolbars/providersToolbar/TransitModeButton.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 theRouter from '../../core/lib/Router.js';
28
29
/* ------------------------------------------------------------------------------------------------------------------------- */
30
/**
31
Transit buttons on the ProvidersToolbar
32
*/
33
/* ------------------------------------------------------------------------------------------------------------------------- */
34
35
class TransitModeButton {
36
37
    /**
38
    A reference to the toolbar
39
    @type {HTMLElement}
40
    */
41
42
    #providersToolbar;
43
44
    /**
45
    The transit mode
46
    @type {String}
47
    */
48
49
    #transitMode;
50
51
    /**
52
    the button HTMLElement
53
    @type {HTMLElement}
54
    */
55
56
    #buttonHTMLElement;
57
58
    /**
59
    Get the transit mode images
60
    @type {Object}
61
    */
62
63
    static get #TRANSIT_MODE_IMG ( ) {
64
        return Object.freeze (
65
            {
66
                bike :
67
                    'data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <path fill="r' +
68
                    'gb(0,0,191)" d="m 11.25,3.125 v 1.09375 l 1.5625,0.9765625 V 6.5625 H 7.4999999 V 5.625 h 0.625 c 1' +
69
                    '.25,0 1.25,-1.25 0,-1.25 h -2.5 c -1.25,0 -1.25,1.25 0,1.25 h 0.625 V 6.5625 L 5.0781249,8.75 c -0.' +
70
                    '026125,-5.821e-4 -0.0519,0 -0.078125,0 -2.0153538,0 -3.75,1.734646 -3.75,3.75 0,2.015354 1.7346462,' +
71
                    '3.75 3.75,3.75 2.0153537,0 3.75,-1.734646 3.75,-3.75 0,-0.432461 -0.089462,-0.858226 -0.234375,-1.2' +
72
                    '5 h 0.546875 c 0.9375,0 1.1534331,-0.567495 1.4843751,-0.898437 L 12.773438,7.8125 13.4375,9.101562' +
73
                    '5 C 12.159328,9.7073948 11.25,11.031094 11.25,12.5 c 0,2.015354 1.734646,3.75 3.75,3.75 2.015354,0 ' +
74
                    '3.75,-1.734646 3.75,-3.75 0,-2.015354 -1.734646,-3.75 -3.75,-3.75 -0.03934,0 -0.07808,-0.00131 -0.1' +
75
                    '17187,0 L 13.75,6.5625 V 4.5703125 Z M 7.2265624,7.8125 H 11.132813 L 9.1796874,10 h -1.40625 c -0.' +
76
                    '0231,0 -0.054487,0.0026 -0.078125,0 C 7.3660586,9.6463159 6.9994024,9.3504739 6.5624999,9.140625 6.' +
77
                    '5471874,9.1173375 6.5373874,9.0856825 6.5234374,9.0625 Z M 4.9999999,10 c 1.2571387,0 2.5,1.242862 ' +
78
                    '2.5,2.5 0,1.257139 -1.2428613,2.5 -2.5,2.5 -1.2571388,0 -2.5,-1.242861 -2.5,-2.5 0,-1.257138 1.2428' +
79
                    '612,-2.5 2.5,-2.5 z M 15,10 c 1.257137,0 2.5,1.242862 2.5,2.5 0,1.257139 -1.242863,2.5 -2.5,2.5 -1.' +
80
                    '257139,0 -2.5,-1.242861 -2.5,-2.5 0,-1.257138 1.242861,-2.5 2.5,-2.5 z" /> </svg>',
81
                pedestrian :
82
                    'data:image/svg+xml;utf8,<svg viewBox="0 0 20 20"  xmlns="http://www.w3.org/2000/svg"> <g fill="rgb(' +
83
                    '0,0,191)" transform="matrix(0.15866777,0,0,0.12627988,148.47251,-116.69398)"> <path d="m -875.5,962' +
84
                    '.4 c 2,-1.5 4.6,-2.3 7.4,-2.2 3.6,0.3 6.7,2.5 8.4,5.2 l 10.7,21.2 14.5,10.1 c 1.2,1 2,2.5 1.9,4.2 -' +
85
                    '0.1,2.6 -2.5,4.6 -5.2,4.3 -0.7,0 -1.5,-0.3 -2.2,-0.7 l -15.6,-10.7 c -0.4,-0.4 -0.9,-0.9 -1.2,-1.5 ' +
86
                    'l -4.1,-7.9 -4.8,21.1 18.9,22.3 c 0.4,0.7 0.7,1.5 0.9,2.2 l 5.1,26.9 c 0,0.6 0,1 0,1.5 -0.3,4.1 -3.' +
87
                    '8,6.8 -7.7,6.7 -3.2,-0.3 -5.7,-2.6 -6.5,-5.7 l -4.8,-25.1 -15.3,-17 -3.6,16.3 c -0.1,0.7 -1.2,2.3 -' +
88
                    '1.5,2.9 l -14.6,24.9 c -1.5,2.2 -3.9,3.8 -6.7,3.4 -4.1,-0.3 -7,-3.8 -6.7,-7.7 0.1,-1.2 0.6,-2.2 1,-' +
89
                    '3.1 l 13.7,-22.8 11.4,-50.4 -7.4,6 -4.1,18 c -0.4,2.2 -2.6,4.2 -5.1,4.1 -2.6,-0.1 -4.6,-2.5 -4.5,-5' +
90
                    '.2 0,-0.1 0,-0.4 0.1,-0.6 l 4.6,-20.9 c 0.3,-0.9 0.7,-1.6 1.5,-2.2 z" /> <path d="m -884.5,943.5 c ' +
91
                    '1.3,8.6 8.7,15.3 17.8,15.3 5.7,0 10.2,-4.6 10.2,-10.2 0,-5.6 -4.6,-10.2 -10.2,-10.2 -3.9,0 -7.2,2 -' +
92
                    '8.9,5.2 -0.2,0.4 -0.5,0.7 -0.8,1 -2,2 -5.3,2 -7.3,0 -0.4,-0.4 -0.6,-0.7 -0.8,-1.1 z" /> </g> </svg>',
93
                car :
94
                    'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" > <g fill="rgb(' +
95
                    '0,0,191)"> <path d="m 2,13 a 1.7142857,1.7142857 0 0 0 1.7142857,1.714286 H 16.285714 A 1.7142857,1' +
96
                    '.7142857 0 0 0 18,13 V 9.5714286 A 1.7142857,1.7142857 0 0 0 16.285714,7.8571429 H 3.7142857 A 1.71' +
97
                    '42857,1.7142857 0 0 0 2,9.5714286 Z m 1.8285714,-2.285714 a 1.0285714,1.0285714 0 1 1 0,0.01143 z m' +
98
                    ' 10.2857146,0 a 1.0285714,1.0285714 0 1 1 0,0.01143 z" /> <path d="M 4.2857143,7.8571429 V 5 A 1.71' +
99
                    '42857,1.7142857 0 0 1 6,3.2857143 h 8 A 1.7142857,1.7142857 0 0 1 15.714286,5 V 7.8571429 H 14 V 6.' +
100
                    '1428571 A 1.1428571,1.1428571 0 0 0 12.857143,5 H 7.1428571 A 1.1428571,1.1428571 0 0 0 6,6.1428571' +
101
                    ' v 1.7142858 z" /> <g transform="matrix(1.1428571,0,0,1.1428571,2,2.1428571)"> <rect x="1" y="10" w' +
102
                    'idth="2" height="3" /> <rect x="11" y="10" width="2" height="3" /> </g> </g> </svg>',
103
                train :
104
                    'data:image/svg+xml;utf8,<svg viewBox="-3 -3 20 20" xmlns="http://www.w3.org/2000/svg"> <g fill="rgb' +
105
                    '(0,0,191)"> <path d="M 5,0 C 3.025911,-0.0084 1,3 1,7 l 0,2 c 0,1 1,2 2,2 l 8,0 c 1,0 2,-1 2,-2 L 1' +
106
                    '3,7 C 13,3 11,0 9,0 z m -1,3 6,0 c 0,0 1,1 1,3 L 3.03125,6 C 2.994661,3.9916 4,3 4,3 z M 3,8 6,8 6,' +
107
                    '9 3,9 z m 5,0 3,0 0,1 -3,0 z m -6,4 -1,2 3,0 1,-2 z m 7,0 1,2 3,0 -1,-2 z"/></g></svg>',
108
                line :
109
                    'data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <line x1="5" ' +
110
                    'y1="17" x2= "11" y2="2" stroke="rgb(0,0,0)" /> <line x1="3" y1="6" x2="17" y2="9" stroke="rgb(191,0' +
111
                    ',0)" /> <line x1="3" y1= "16" x2="17" y2="5" stroke="rgb(255,204,0)" /> </svg>',
112
                circle :
113
                    'data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <g fill="tran' +
114
                    'sparent"> <circle cx="8" cy="6" r="5" stroke="rgb(0,0,0)" /> <circle cx="12" cy="12" r="4" stroke="' +
115
                    'rgb(255,204,0)" /> <circle cx="14" cy="8" r="3" stroke="rgb(191,0,0)" /> </g> </svg>'
116
            }
117
        );
118
    }
119
120
    /**
121
    The constructor
122
    @param {ProvidersToolbar} providersToolbar The providersToolbar on witch the button will be added
123
    @param {String} transitMode The transit mode linked to the button
124
    */
125
126
    constructor ( providersToolbar, transitMode ) {
127
128
        Object.freeze ( this );
129
130
        this.#providersToolbar = providersToolbar;
131
        this.#transitMode = transitMode;
132
133
        // HTML creation
134
        this.#buttonHTMLElement = theHTMLElementsFactory.create (
135
            'img',
136
            {
137
                src : TransitModeButton.#TRANSIT_MODE_IMG [ transitMode ],
138
                id : 'TravelNotes-ProvidersToolbar-' + transitMode + 'ImgButton',
139
                className : 'TravelNotes-ProvidersToolbar-ImgButton',
140
                title : theTranslator.getText ( 'ProvidersToolbar - TransitMode ' + transitMode )
141
            }
142
        );
143
        this.#buttonHTMLElement.addEventListener ( 'click', this );
144
        this.visible = false;
145
    }
146
147
    /**
148
    click event listener. The button is also it's own event listener.
149
    @param {Event} clickEvent The event to handle
150
    */
151
152
    handleEvent ( clickEvent ) {
153
        clickEvent.stopPropagation ( );
154
        this.#providersToolbar.transitMode = this.#transitMode;
155
        this.#providersToolbar.hide ( );
156
        theRouter.startRouting ( );
157
    }
158
159
    /**
160
    the button HTMLElement
161
    @type {HTMLElement}
162
    */
163
164
    get buttonHTMLElement ( ) { return this.#buttonHTMLElement; }
165
166
    /**
167
    The transit mode
168
    @type {String}
169
    */
170
171
    get transitMode ( ) { return this.#transitMode; }
172
173
    /**
174
    draw or remove a frame around the button
175
    */
176
177
    set active ( active ) {
178
        if ( active ) {
179
            this.#buttonHTMLElement.classList.add ( 'TravelNotes-ProvidersToolbar-ActiveTransitModeImgButton' );
180
        }
181
        else {
182
            this.#buttonHTMLElement.classList.remove ( 'TravelNotes-ProvidersToolbar-ActiveTransitModeImgButton' );
183
        }
184
    }
185
186
    /**
187
    Show or hide the button
188
    */
189
190
    set visible ( visible ) {
191
        if ( visible ) {
192
            this.#buttonHTMLElement.classList.remove ( 'TravelNotes-Hidden' );
193
        }
194
        else {
195
            this.#buttonHTMLElement.classList.add ( 'TravelNotes-Hidden' );
196
        }
197
    }
198
}
199
200
export default TransitModeButton;
201
202
/* --- End of file --------------------------------------------------------------------------------------------------------- */
203