fix in filters if send empty index array it reset this menu

+ fix in filters if click reset it really reset to init
+ made buttons be inputs

README.md

@@ -4,20 +4,22 @@
 - [/] copy recent site version
 - [/] create links
 - [/] make links having map
-- [ ] transform filter list in select
+- [ ] transform filter list in select, and button in reset
 - [ ] make two infowindow size
-- ne pas ouvrir sur un nouvel onglet
+- [/] ne pas ouvrir sur un nouvel onglet
-- responsive
+- [/] "effacer" au lieu de "sans filtre"
+- [/] accents et majuscules : "Effacer", "Pays" et "Categories"
+- [ ] responsive
 	- pays
 	- categories
 	- irl / online
-	- effacer -> bouton carre, fond violet, ecriture blanche, en capitale, arrondis de 3px sur les coins
+	- effacer
-- sur ordi carte hauteur 600px, sur telephone 500px
+- [ ] effacer -> bouton carre, fond violet, ecriture blanche, en capitale, arrondis de 3px sur les coins
-- "reinitialiser" avec accents, ou "effacer", "Pays" et "Categories" avec les accents
+- [ ] sur ordi carte hauteur 600px, sur telephone 500px
-- enlever le bandeau de scroll des menus
+- [ ] enlever le bandeau de scroll des menus
-if time:
 - [ ] deal with error double event irl and online
-- [ ] deal with multiplication of filters
+- [/] deal with multiplication of filters
+- [ ] change appearance of filter according to other filters
 - [ ] deal with window size
 
 #### verifications:

srcs/plugins/map_prof/mp_create_div.php

@@ -5,23 +5,31 @@ function mp_filter_drop_down($key, &$filter) {
 	//	// version div stick
 	//	// version div switch
 	//	// version div visibility
-	//
+	// form="ljdp_form"
 
 	$content = '
-		<div class="filter_menu filter_menu_drop" style="display:none;" tabindex=0>
+		<select
-			<div class="filter_menu_title filter_menu_drop_title" tabindex=0>
+			form="ljdp_form"
+			class="filter_menu filter_menu_drop"
+		>
+			<option
+				selected
+				onclick="filter_show_only_selection(this, '.json_encode(array()).', '."'".$key."'".')"
+			>
 				<p>'.$key.'</p>
-			</div>
+			</option>
-			<div class="filter_menu_drop_items" tabindex=0>
 	';
 	foreach ($filter as $value) {
 		$content .= '
-				<p onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".')">'.$value->_name.'</p>
+			<option
+				onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".')"
+			>
+				<p>'.$value->_name.'</p>
+			</option>
 		';
 	}
 	$content .= '
-			</div>
+		</select>
-		</div>
 	';
 
 	return $content;
@@ -34,8 +42,17 @@ function mp_filter_buttons($key, &$filter) {
 	$content = '';
 	foreach ($filter as $value) {
 		$content .= '
-			<input  id="checkbox_'.$value->_name.'" class="filter_menu_checkbox" type="checkbox" style="display:none;" onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".', true)">
+			<input
-			<label for="checkbox_'.$value->_name.'" class="filter_menu_checkbox filter_menu">
+				type="checkbox"
+				form="ljdp_form"
+				id="checkbox_'.$value->_name.'"
+				class="filter_menu_checkbox"
+				onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".', true)"
+			>
+			<label
+				for="checkbox_'.$value->_name.'"
+				class="filter_menu_checkbox filter_menu"
+			>
 				<div class="filter_menu_title filter_menu_checkbox_title" tabindex=0>
 					<p>'.$value->_name.'</p>
 				</div>
@@ -49,6 +66,7 @@ function mp_filter_buttons($key, &$filter) {
 function mp_create_div(&$filters) {
 	$mp_map_div  = '
 		<div id="ljdp_map_wrapper">
+			<form id="ljdp_form" style="display:none;"></form>
 			<div id="ljdp_map_filters">
 	';
 
@@ -61,11 +79,22 @@ function mp_create_div(&$filters) {
 	};
 
 	$mp_map_div .= '
-				<div class="filter_menu filter_menu_button">
+				<input
+					type="reset"
+					form="ljdp_form"
+					id="filter_menu_reset"
+					class="filter_menu_button"
+					onclick="filter_show_all()"
+					style="display:none;"
+				>
+				<label
+					for="filter_menu_reset"
+					class="filter_menu_button filter_menu"
+				>
 					<div class="filter_menu_title filter_menu_button_title">
-						<p onclick="filter_show_all()">sans filtre</p>
+						<p>Éffacer</p>
 					</div>
-				</div>
+				</label>
 	';
 
 	$mp_map_div .= '

srcs/plugins/map_prof/mp_get_filters.php

@@ -79,8 +79,8 @@ function mp_get_filters(&$events) {
 
 		// create array of menus
 		$fields = array(
-			"pays"			=> $event->location->country,
+			"Pays"			=> $event->location->country,
-			"categories"	=> $event->categorie,
+			"Catégories"	=> $event->categorie,
 			"mode"			=> ($event->irl)? "En présentiel" : "En ligne",
 		);
 

srcs/plugins/map_prof/scripts/mp_filter_events.js

@@ -21,8 +21,12 @@ function array_first_not_in_second(first, second) {
 
 function filter_selection_indexes(menu, indexes, reverse, add) {
 
+	if (indexes.length === 0) {
+	// if array of index is empty, delete menu
+		delete g_indexes[menu];
+	}
+	else if (reverse) {
 	// if reverse is true, delete all indexes in g_indexes.menu
-	if (reverse) {
 		// https://stackoverflow.com/questions/5113374/javascript-check-if-variable-exists-is-defined-initialized
 		if ( typeof(g_indexes[menu]) !== "undefined" && g_indexes[menu] !== null ) {
 			// creates an array with all values of g_indexes[menu] minus indexes
@@ -141,6 +145,7 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in
 
 function filter_show_all() {
 	g_indexes = {};
+	g_marker_cluster.clearMarkers(true);
 	g_marker_cluster.addMarkers(g_markers);
 	//g_map.fitBounds(g_init_bounds);
 	g_map.setCenter(coordinates_default);

srcs/plugins/map_prof/scripts/mp_info_window.js

@@ -14,7 +14,7 @@ function attach_info_window(map, marker, events, infowindow) {
 			presence = "en presentiel";
 			
 		window_content += `
-			<a href="${events[key].url}" target="_blank" rel="noopener noreferrer">
+			<a href="${events[key].url}">
 				<p>${events[key].title}</p>
 			</a>
 		`;

srcs/plugins/map_prof/styles/mp_filters.css

@@ -4,6 +4,7 @@
  */
 
 
+/*
 #ljdp_map_filters,
 #ljdp_map_filters * {
 	display: flex;
@@ -19,11 +20,13 @@
 	gap: 10px;
 	margin-bottom: 10px;
 }
+*/
 
 /*
 	overwrite display:none to avoid html flash at begining
 	<div class="filter_menu" style="display:none;">
 */
+/*
 #ljdp_map_filters .filter_menu {
 	display: flex !important;
 	flex-direction: column;
@@ -43,12 +46,15 @@
 	padding: 5px;
 }
 
+*/
+/* display inline-block for text-align to work */
+/*
 #ljdp_map_filters .filter_menu_title p {
-	/* display inline-block for text-align to work */
 	display: inline-block;
 	width: 100%;
 	text-align: center;
 }
+*/
 
 
 
@@ -57,7 +63,6 @@
 */
 
 /*
-*/
 #ljdp_map_filters .filter_menu_drop_title {
 	width: 100%;
 	pointer-events: none;
@@ -73,11 +78,13 @@
 	overflow: scroll;
 	background-color: #ffffff;
 
+*/
 	/* opacity is toogled instantanously, for visual confort, but element is still present and clickable */
 	/* then, visibility is toogle, after x seconds, letting plainty of times for the browser to catch the 'onclick' event */
 	/*
 	display: none;
 	*/
+/*
 	opacity: 0;
 	visibility: hidden;
 	transition: visibility 0.5s;
@@ -90,9 +97,11 @@
 }
 
 #ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_items {
+*/
 	/*
 	display: flex;
 	*/
+/*
 	opacity: 1;
 	visibility: visible;
 }
@@ -106,6 +115,7 @@
 #ljdp_map_filters .filter_menu_drop_items p:hover {
 	background-color: #dddddd;
 }
+*/
 
 
 
@@ -115,7 +125,6 @@
 */
 
 /*
-*/
 #ljdp_map_filters label.filter_menu_checkbox {
 	border-radius: 20px;
 }
@@ -124,6 +133,7 @@
 	color: #ffffff;
 	background-color: #ba197a;
 }
+*/
 
 
 
@@ -133,11 +143,11 @@
 */
 
 /*
-*/
 #ljdp_map_filters .filter_menu_button {
 	flex-shrink: 2;
 	white-space: nowrap;
 }
+*/