File : roadbook/RoadbookUpdater.js

/*
Copyright - 2017 2023 - wwwouaiebe - Contact: https://www.ouaie.be/

This  program is free software;
you can redistribute it and/or modify it under the terms of the
GNU General Public License as published by the Free Software Foundation;
either version 3 of the License, or any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/
/*
Changes:
    - v4.0.0:
        - created from v3.6.0
Doc reviewed 202208
 */

/* ------------------------------------------------------------------------------------------------------------------------- */
/**
This class performs the updates of the roadbook after changes in the Travel
*/
/* ------------------------------------------------------------------------------------------------------------------------- */

class RoadbookUpdater {

    /**
    The HTMLElement in witch the roadbook content is placed
    @type {HTMLElement}
    */

    #travelNotesHtmlElement;

    /**
    The visibility status of the travel notes
    @type {Boolean}
    */

    #showTravelNotes;

    /**
    The visibility status of the route notes
    @type {Boolean}
    */

    #showRouteNotes;

    /**
    The visibility status of the maneuver notes
    @type {Boolean}
    */

    #showManeuversNotes;

    /**
    The visibility status of the small notes
    @type {Boolean}
    */

    #showSmallNotes;

    /**
    The visibility status of the profiles
    @type {Boolean}
    */

    #showProfiles;

    /**
    Show or hide the notes
    @param {String} selector The css selector for the notes to show/hide
    @param {Boolean} show A flag indicating when the note have to be showed
    */

    #toggleNotes ( selector, show ) {
        document.querySelectorAll ( selector ).forEach (
            note => {
                if ( show ) {
                    note.classList.remove ( 'TravelNotes-Hidden' );
                }
                else {
                    note.classList.add ( 'TravelNotes-Hidden' );
                }
            }
        );
    }

    /**
    Show or hide the profiles
    @param {Boolean} show A flag indicating when the profiles have to be showed
    */

    #toggleProfiles ( show ) {
        document.querySelectorAll ( '.TravelNotes-Roadbook-RouteProfile' ).forEach (
            profile => {
                if ( show ) {
                    profile.classList.remove ( 'TravelNotes-Hidden' );
                }
                else {
                    profile.classList.add ( 'TravelNotes-Hidden' );
                }
            }
        );
    }

    /**
    Show or hide the small notes
    @param {Boolean} small A flag indicating when the note have to be small
    */

    #toggleSmallNotes ( small ) {
        if ( small ) {
            this.#travelNotesHtmlElement.classList.add ( 'TravelNotes-SmallNotes' );
            this.#travelNotesHtmlElement.classList.remove ( 'TravelNotes-BigNotes' );
        }
        else {
            this.#travelNotesHtmlElement.classList.add ( 'TravelNotes-BigNotes' );
            this.#travelNotesHtmlElement.classList.remove ( 'TravelNotes-SmallNotes' );
        }
        document.querySelectorAll (
            '.TravelNotes-Roadbook-Travel-Notes-IconCell, .TravelNotes-Roadbook-Route-ManeuversAndNotes-IconCell'
        ).forEach (
            icon => {
                icon.style.width = small ? '6cm' : icon.dataset.tanWidth;
                icon.style.height = small ? '6cm' : icon.dataset.tanHeight;
            }
        );
    }

    /**
    The constructor
    */

    constructor ( ) {
        Object.freeze ( this );
        this.#travelNotesHtmlElement = document.getElementById ( 'TravelNotes' );
        this.#showTravelNotes = true;
        this.#showRouteNotes = true;
        this.#showManeuversNotes = false;
        this.#showSmallNotes = false;
        this.#showProfiles = true;
    }

    /**
    The visibility status of the travel notes
    @type {Boolean}
    */

    get showTravelNotes ( ) { return this.#showTravelNotes; }
    set showTravelNotes ( show ) {
        this.#showTravelNotes = show;
        this.#toggleNotes ( '.TravelNotes-Roadbook-Travel-Notes-Row', show );
    }

    /**
    The visibility status of the route notes
    @type {Boolean}
    */

    get showRouteNotes ( ) { return this.#showRouteNotes; }
    set showRouteNotes ( show ) {
        this.#showRouteNotes = show;
        this.#toggleNotes ( '.TravelNotes-Roadbook-Route-Notes-Row', show );
    }

    /**
    The visibility status of the maneuver notes
    @type {Boolean}
    */

    get showManeuversNotes ( ) { return this.#showManeuversNotes; }
    set showManeuversNotes ( show ) {
        this.#showManeuversNotes = show;
        this.#toggleNotes ( '.TravelNotes-Roadbook-Route-Maneuvers-Row', show );
    }

    /**
    The visibility status of the small notes
    @type {Boolean}
    */

    get showSmallNotes ( ) { return this.#showSmallNotes; }
    set showSmallNotes ( small ) {
        this.#showSmallNotes = small;
        this.#toggleSmallNotes ( small );
    }

    /**
    The visibility status of the profiles
    @type {Boolean}
    */

    get showProfiles ( ) { return this.#showProfiles; }
    set showProfiles ( show ) {
        this.#showProfiles = show;
        this.#toggleProfiles ( show );
    }

    /**
    Update the notes visibility
    */

    updateNotesAndProfiles ( ) {
        this.showTravelNotes = this.#showTravelNotes;
        this.showRouteNotes = this.#showRouteNotes;
        this.showManeuversNotes = this.#showManeuversNotes;
        this.showSmallNotes = this.#showSmallNotes;

        this.showProfiles = this.#showProfiles;
    }

    /**
    Updating roadbook
    @param {String} pageContent An html string with the travel, routes and notes
    */

    updateRoadbook ( pageContent ) {
        this.#travelNotesHtmlElement.innerHTML = pageContent;
        const headerName = document.querySelector ( '.TravelNotes-Roadbook-Travel-Header-Name' );
        if ( headerName ) {
            document.title =
                '' === headerName.textContent ? 'roadbook' : headerName.textContent + ' - roadbook';
        }

        // when CSP is enabled, it's needed to set width and height with JS to avoid to add an 'unsafe-inline' for style in CSP
        document.querySelectorAll (
            '.TravelNotes-Roadbook-Travel-Notes-IconCell, .TravelNotes-Roadbook-Route-ManeuversAndNotes-IconCell'
        ).forEach (
            icon => {
                icon.style.width = icon.dataset.tanWidth;
                icon.style.height = icon.dataset.tanHeight;
            }
        );

        this.updateNotesAndProfiles ( );
    }

}

/* ------------------------------------------------------------------------------------------------------------------------- */
/**
The one and only one instance of RoadbookUpdater class
@type {RoadbookUpdater}
*/
/* ------------------------------------------------------------------------------------------------------------------------- */

const theRoadbookUpdater = new RoadbookUpdater ( );

export default theRoadbookUpdater;

/* --- End of file --------------------------------------------------------------------------------------------------------- */


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	/* ------------------------------------------------------------------------------------------------------------------------- */
26	/**
27	This class performs the updates of the roadbook after changes in the Travel
28	*/
29	/* ------------------------------------------------------------------------------------------------------------------------- */
30
31	class RoadbookUpdater {
32
33	/**
34	The HTMLElement in witch the roadbook content is placed
35	@type {HTMLElement}
36	*/
37
38	#travelNotesHtmlElement;
39
40	/**
41	The visibility status of the travel notes
42	@type {Boolean}
43	*/
44
45	#showTravelNotes;
46
47	/**
48	The visibility status of the route notes
49	@type {Boolean}
50	*/
51
52	#showRouteNotes;
53
54	/**
55	The visibility status of the maneuver notes
56	@type {Boolean}
57	*/
58
59	#showManeuversNotes;
60
61	/**
62	The visibility status of the small notes
63	@type {Boolean}
64	*/
65
66	#showSmallNotes;
67
68	/**
69	The visibility status of the profiles
70	@type {Boolean}
71	*/
72
73	#showProfiles;
74
75	/**
76	Show or hide the notes
77	@param {String} selector The css selector for the notes to show/hide
78	@param {Boolean} show A flag indicating when the note have to be showed
79	*/
80
81	#toggleNotes ( selector, show ) {
82	document.querySelectorAll ( selector ).forEach (
83	note => {
84	if ( show ) {
85	note.classList.remove ( 'TravelNotes-Hidden' );
86	}
87	else {
88	note.classList.add ( 'TravelNotes-Hidden' );
89	}
90	}
91	);
92	}
93
94	/**
95	Show or hide the profiles
96	@param {Boolean} show A flag indicating when the profiles have to be showed
97	*/
98
99	#toggleProfiles ( show ) {
100	document.querySelectorAll ( '.TravelNotes-Roadbook-RouteProfile' ).forEach (
101	profile => {
102	if ( show ) {
103	profile.classList.remove ( 'TravelNotes-Hidden' );
104	}
105	else {
106	profile.classList.add ( 'TravelNotes-Hidden' );
107	}
108	}
109	);
110	}
111
112	/**
113	Show or hide the small notes
114	@param {Boolean} small A flag indicating when the note have to be small
115	*/
116
117	#toggleSmallNotes ( small ) {
118	if ( small ) {
119	this.#travelNotesHtmlElement.classList.add ( 'TravelNotes-SmallNotes' );
120	this.#travelNotesHtmlElement.classList.remove ( 'TravelNotes-BigNotes' );
121	}
122	else {
123	this.#travelNotesHtmlElement.classList.add ( 'TravelNotes-BigNotes' );
124	this.#travelNotesHtmlElement.classList.remove ( 'TravelNotes-SmallNotes' );
125	}
126	document.querySelectorAll (
127	'.TravelNotes-Roadbook-Travel-Notes-IconCell, .TravelNotes-Roadbook-Route-ManeuversAndNotes-IconCell'
128	).forEach (
129	icon => {
130	icon.style.width = small ? '6cm' : icon.dataset.tanWidth;
131	icon.style.height = small ? '6cm' : icon.dataset.tanHeight;
132	}
133	);
134	}
135
136	/**
137	The constructor
138	*/
139
140	constructor ( ) {
141	Object.freeze ( this );
142	this.#travelNotesHtmlElement = document.getElementById ( 'TravelNotes' );
143	this.#showTravelNotes = true;
144	this.#showRouteNotes = true;
145	this.#showManeuversNotes = false;
146	this.#showSmallNotes = false;
147	this.#showProfiles = true;
148	}
149
150	/**
151	The visibility status of the travel notes
152	@type {Boolean}
153	*/
154
155	get showTravelNotes ( ) { return this.#showTravelNotes; }
156	set showTravelNotes ( show ) {
157	this.#showTravelNotes = show;
158	this.#toggleNotes ( '.TravelNotes-Roadbook-Travel-Notes-Row', show );
159	}
160
161	/**
162	The visibility status of the route notes
163	@type {Boolean}
164	*/
165
166	get showRouteNotes ( ) { return this.#showRouteNotes; }
167	set showRouteNotes ( show ) {
168	this.#showRouteNotes = show;
169	this.#toggleNotes ( '.TravelNotes-Roadbook-Route-Notes-Row', show );
170	}
171
172	/**
173	The visibility status of the maneuver notes
174	@type {Boolean}
175	*/
176
177	get showManeuversNotes ( ) { return this.#showManeuversNotes; }
178	set showManeuversNotes ( show ) {
179	this.#showManeuversNotes = show;
180	this.#toggleNotes ( '.TravelNotes-Roadbook-Route-Maneuvers-Row', show );
181	}
182
183	/**
184	The visibility status of the small notes
185	@type {Boolean}
186	*/
187
188	get showSmallNotes ( ) { return this.#showSmallNotes; }
189	set showSmallNotes ( small ) {
190	this.#showSmallNotes = small;
191	this.#toggleSmallNotes ( small );
192	}
193
194	/**
195	The visibility status of the profiles
196	@type {Boolean}
197	*/
198
199	get showProfiles ( ) { return this.#showProfiles; }
200	set showProfiles ( show ) {
201	this.#showProfiles = show;
202	this.#toggleProfiles ( show );
203	}
204
205	/**
206	Update the notes visibility
207	*/
208
209	updateNotesAndProfiles ( ) {
210	this.showTravelNotes = this.#showTravelNotes;
211	this.showRouteNotes = this.#showRouteNotes;
212	this.showManeuversNotes = this.#showManeuversNotes;
213	this.showSmallNotes = this.#showSmallNotes;
214
215	this.showProfiles = this.#showProfiles;
216	}
217
218	/**
219	Updating roadbook
220	@param {String} pageContent An html string with the travel, routes and notes
221	*/
222
223	updateRoadbook ( pageContent ) {
224	this.#travelNotesHtmlElement.innerHTML = pageContent;
225	const headerName = document.querySelector ( '.TravelNotes-Roadbook-Travel-Header-Name' );
226	if ( headerName ) {
227	document.title =
228	'' === headerName.textContent ? 'roadbook' : headerName.textContent + ' - roadbook';
229	}
230
231	// when CSP is enabled, it's needed to set width and height with JS to avoid to add an 'unsafe-inline' for style in CSP
232	document.querySelectorAll (
233	'.TravelNotes-Roadbook-Travel-Notes-IconCell, .TravelNotes-Roadbook-Route-ManeuversAndNotes-IconCell'
234	).forEach (
235	icon => {
236	icon.style.width = icon.dataset.tanWidth;
237	icon.style.height = icon.dataset.tanHeight;
238	}
239	);
240
241	this.updateNotesAndProfiles ( );
242	}
243
244	}
245
246	/* ------------------------------------------------------------------------------------------------------------------------- */
247	/**
248	The one and only one instance of RoadbookUpdater class
249	@type {RoadbookUpdater}
250	*/
251	/* ------------------------------------------------------------------------------------------------------------------------- */
252
253	const theRoadbookUpdater = new RoadbookUpdater ( );
254
255	export default theRoadbookUpdater;
256
257	/* --- End of file --------------------------------------------------------------------------------------------------------- */
258