From d34d18e88d04185d941f556dac16d6140568f44c Mon Sep 17 00:00:00 2001
From: lenovo <lenovo@lenovo.com>
Date: Sun, 13 Nov 2022 11:01:18 +0100
Subject: [PATCH] filters multiple selection intersect well

---
 srcs/plugins/map_prof/mp_create_div.php       | 26 ++++++++-----
 .../map_prof/scripts/mp_filter_events.js      | 37 ++++++++++++++-----
 srcs/plugins/map_prof/scripts/mp_init_map.js  |  1 +
 srcs/plugins/map_prof/styles/mp_filters.css   | 34 +++++++++++------
 4 files changed, 68 insertions(+), 30 deletions(-)

diff --git a/srcs/plugins/map_prof/mp_create_div.php b/srcs/plugins/map_prof/mp_create_div.php
index dfc9b1d..8871cef 100644
--- a/srcs/plugins/map_prof/mp_create_div.php
+++ b/srcs/plugins/map_prof/mp_create_div.php
@@ -6,24 +6,23 @@ function mp_filter_drop_down($key, &$filter) {
 	//	// version div switch
 	//	// version div visibility
 	//
-	//	<p onclick="filter_show_all()">TOUT DESELECTIONNER</p>
 
 	$content = '
 		<div class="filter_menu filter_menu_drop" style="display:none;" tabindex=0>
-			<div class="filter_menu_drop_title" tabindex=0>
+			<div class="filter_menu_title filter_menu_drop_title" tabindex=0>
 				<p>'.$key.'</p>
 			</div>
 			<div class="filter_menu_drop_items" tabindex=0>
 	';
 	foreach ($filter as $value) {
 				/*
-				<p id="'.$value->_name.'" onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
-				<p id="'.$value->_name.'" onblur="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
-				<p id="'.$value->_name.'" onfocus="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
-				<p id="'.$value->_name.'" onfocusin="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
+				<p id="'.$value->_name.    '" onblur="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
+				<p id="'.$value->_name.   '" onfocus="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
+				<p id="'.$value->_name. '" onfocusin="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
+				<p id="'.$value->_name.'" onfocusout="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
 				*/
 		$content .= '
-				<p id="'.$value->_name.'" onfocusout="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
+				<p id="'.$value->_name.   '" onclick="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
 		';
 	}
 	$content .= '
@@ -43,8 +42,8 @@ function mp_filter_buttons($key, &$filter) {
 	';
 	foreach ($filter as $value) {
 		$content .= '
-			<div class="filter_menu_buttons_click" tabindex=0>
-				<p id="'.$value->_name.'" onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
+			<div class="filter_menu_title filter_menu_buttons_title" tabindex=0>
+				<p id="'.$value->_name.'" onclick="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
 			</div>
 		';
 	}
@@ -67,9 +66,16 @@ function mp_create_div(&$filters) {
 			$mp_map_div .= mp_filter_buttons($key, $filter);
 		else
 			$mp_map_div .= mp_filter_drop_down($key, $filter);
-
 	};
 
+	$mp_map_div .= '
+				<div class="filter_menu filter_menu_reset">
+					<div class="filter_menu_title filter_menu_reset_title">
+						<p onclick="filter_show_all()">sans filtre</p>
+					</div>
+				</div>
+	';
+
 	$mp_map_div .= '
 			</div>
 			<div id="ljdp_map"></div>
diff --git a/srcs/plugins/map_prof/scripts/mp_filter_events.js b/srcs/plugins/map_prof/scripts/mp_filter_events.js
index d7237f2..ce5016a 100644
--- a/srcs/plugins/map_prof/scripts/mp_filter_events.js
+++ b/srcs/plugins/map_prof/scripts/mp_filter_events.js
@@ -4,6 +4,30 @@
 // bounds : https://stackoverflow.com/questions/19304574/center-set-zoom-of-map-to-cover-all-visible-markers/19304625#19304625
 
 
+/**
+ * return intersection of both arrays : indexes and g_indexes
+ */
+
+function filter_selection_indexes(indexes) {
+	// if g_indexes empty, just fill it with indexes
+	// because it's like intersection of indexes and g_indexes if g_indexes was the list of all markers
+	if (g_indexes.length == 0) {
+		// deep copy of indexes
+		g_indexes = [].concat(indexes);
+	}
+	else {
+		let intersection = [];
+		for (let index of indexes) {
+			if (g_indexes.indexOf(index) != -1)
+				intersection.push(index);
+		}
+		// if no intersection found, the filter shouldn't be selectable, so this shouldn't happen
+		if (intersection.length)
+			g_indexes = intersection;
+	}
+}
+
+
 /**
  * if zoom_in is true:
  *   zoom to new selection,
@@ -12,11 +36,9 @@
 
 function filter_show_only_selection(indexes, zoom_in = false) {
 
-console.log(" ");
-console.log("indexes:");
-console.log(indexes);
+	filter_selection_indexes(indexes);
 
-	let indexes_count = indexes.length;
+	let indexes_count = g_indexes.length;
 	if (indexes_count === 0)
 		return;
 
@@ -25,14 +47,10 @@ console.log(indexes);
 	let marker = g_markers[0];
 	let position = marker.getPosition();
 	let current_bounds = g_map.getBounds();
-console.log("current_bounds:");
-console.log(current_bounds);
 	let bounds = new google.maps.LatLngBounds(position);
-console.log("bounds:");
-console.log(bounds);
 
 	let outside_bounds = false;
-	for (let index of indexes) {
+	for (let index of g_indexes) {
 		marker = g_markers[index];
 		position = marker.getPosition();
 		if (! current_bounds.contains(position))
@@ -54,6 +72,7 @@ console.log(bounds);
 }
 
 function filter_show_all() {
+	g_indexes = [];
 	g_marker_cluster.addMarkers(g_markers);
 	//g_map.fitBounds(g_init_bounds);
 	g_map.setCenter(coordinates_default);
diff --git a/srcs/plugins/map_prof/scripts/mp_init_map.js b/srcs/plugins/map_prof/scripts/mp_init_map.js
index 9ff4ba4..5e0d84c 100644
--- a/srcs/plugins/map_prof/scripts/mp_init_map.js
+++ b/srcs/plugins/map_prof/scripts/mp_init_map.js
@@ -8,6 +8,7 @@ const g_init_bounds = {
 	west: -180,
 	east: 180,
 };
+let g_indexes = [];
 
 function mp_init_map() {
 
diff --git a/srcs/plugins/map_prof/styles/mp_filters.css b/srcs/plugins/map_prof/styles/mp_filters.css
index 578e100..c7fa868 100644
--- a/srcs/plugins/map_prof/styles/mp_filters.css
+++ b/srcs/plugins/map_prof/styles/mp_filters.css
@@ -28,10 +28,16 @@
 	width: 100%;
 	overflow: visible;
 	cursor: pointer;
+}
 
+#ljdp_map_filters .filter_menu_title {
 	border: 1px solid #ba197a;
 }
 
+#ljdp_map_filters .filter_menu_title p {
+	padding: 5px;
+}
+
 
 /* **************************************
 	DROP DOWN MENU
@@ -41,7 +47,6 @@
 */
 #ljdp_map_filters .filter_menu_drop_title {
 	width: 100%;
-	cursor: pointer;
 	pointer-events: none;
 }
 
@@ -59,11 +64,11 @@
 	/* 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;
-	*/
-	display: none;
 
 	border: 1px solid #ba197a;
 }
@@ -73,11 +78,11 @@
 }
 
 #ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_items {
-	display: flex;
 	/*
+	display: flex;
+	*/
 	opacity: 1;
 	visibility: visible;
-	*/
 }
 
 #ljdp_map_filters .filter_menu_drop_items p {
@@ -94,7 +99,7 @@
 
 
 /* **************************************
-	DROP DOWN MENU
+	MENU BUTTONS
 */
 
 /*
@@ -102,11 +107,18 @@
 
 #ljdp_map_filters .filter_menu_buttons {
 	flex-direction: row;
-	border: 1px solid blue;
-}
-
-#ljdp_map_filters .filter_menu_buttons_click {
-	border: 1px solid green;
 }
 
 
+
+
+/* **************************************
+	MENU RESET
+*/
+
+/*
+*/
+
+
+
+