From cd22796539bb9ff69a44c3ea8d105e145f51e6f4 Mon Sep 17 00:00:00 2001
From: lenovo <lenovo@lenovo.com>
Date: Wed, 16 Nov 2022 14:11:07 +0100
Subject: [PATCH]   wip filters selection works upside down + css for checkbox
 disable

---
 .../map_prof/scripts/mp_filter_events.js      | 50 ++++++++++++-------
 .../map_prof/srcs/map/mp_create_div.php       | 20 ++++++--
 srcs/plugins/map_prof/styles/mp_filters.css   | 16 +++++-
 3 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/srcs/plugins/map_prof/scripts/mp_filter_events.js b/srcs/plugins/map_prof/scripts/mp_filter_events.js
index b545d08..d4c9c0a 100644
--- a/srcs/plugins/map_prof/scripts/mp_filter_events.js
+++ b/srcs/plugins/map_prof/scripts/mp_filter_events.js
@@ -129,27 +129,40 @@ function redraw_clusters(indexes) {
 		- it will remove class "disabled_by_country"
 		- if it's the last class containing "disabled_by_" it will be re-enabled
 	see css attribute selectors : https://www.w3schools.com/css/css_attribute_selectors.asp
-	exemple:
-		let items = document.getElementsByClassName("menu_item");
-		for (let item of items) {
-			let item_classes = item.classList;
-			item_classes.toggle("disabled_by_city");
-			if (item_classes[0] === "") {
-				
-			}
-		}
 */
-function toggle_classes(menu_from, menu_name, menu_item ) {
+
+function toggle_one_class(menu_from, menu_name, menu_item) {
+/*
+*/
 	console.log("\n" + menu_name + " from " + menu_from + ":");
 	console.log("- " + menu_item);
+
+	let html_id = `filter_${menu_name}_${menu_item}`;
+	let html_class = `disabled_by_${menu_from}`;
+
+	let item = document.getElementById(html_id);
+	let item_classes = item.classList;
+	item_classes.toggle(html_class);
+}
+
+function toggle_all_classes() {
+/*
+*/
+	// loop through all items elements of menu in html, and toggle "disabled" if there is or not a class "disabled_by_*"
+	// get all elements in all menus
+	let items = document.getElementsByClassName("filter_menu_item");
+
+	for (let item of items) {
+		let item_classes = item.classList;
+		let item_classes_value = item_classes.value;
+		if ( item_classes_value.includes("disabled_by_") )
+			item.setAttribute('disabled', '');
+		else
+			item.removeAttribute('disabled');
+	}
 }
 
 function disable_menus(menu_name_ori, menu_item_ori) {
-	console.log("menu_name_ori:");
-	console.log(menu_name_ori);
-	console.log("menu_item_ori:");
-	console.log(menu_item_ori);
-
 	let keys = Object.keys(menu_item_ori);
 	// loop through list of other menu_items available for this menu_item
 	// loop though menu names (pays, categories, mode)
@@ -160,10 +173,13 @@ function disable_menus(menu_name_ori, menu_item_ori) {
 			continue;
 		// loop through items in menu names (ex. for "pays" : france, chili, cuba)
 		for (let item of menu_item_ori[menu_name]) {
-			toggle_classes( menu_name_ori, menu_name, item.replace(/ /g, "_") );
+			toggle_one_class( menu_name_ori, menu_name, item.replace(/ /g, "_") );
 		}
-
 	}
+	toggle_all_classes();
+
+/*
+*/
 }
 
 function filter_show_only(element, menu_name) {
diff --git a/srcs/plugins/map_prof/srcs/map/mp_create_div.php b/srcs/plugins/map_prof/srcs/map/mp_create_div.php
index 2a4142b..6bdbbce 100644
--- a/srcs/plugins/map_prof/srcs/map/mp_create_div.php
+++ b/srcs/plugins/map_prof/srcs/map/mp_create_div.php
@@ -19,15 +19,22 @@ function mp_filter_drop_down($key, &$filter) {
 		>
 			<option
 				selected
+				class="filter_menu_item"
 				data-menu_index="menu_name"
 			>
 				'.$key.'
 			</option>
 	';
 	foreach ($filter as $key_filter => $value) {
+		$id = "filter_"
+			. $key
+			. "_"
+			. str_replace( " ", "_", $value->_name)
+		;
 		$content .= '
 			<option
-				id="filter_'.str_replace( " ", "_", $value->_name).'"
+				id="'.$id.'"
+				class="filter_menu_item"
 				data-menu_index="'.$key_filter.'"
 			>
 				'.$value->_name.'
@@ -48,18 +55,23 @@ function mp_filter_buttons($key, &$filter) {
 */
 	$content = '';
 	foreach ($filter as $key_filter => $value) {
+		$id = "filter_"
+			. $key
+			. "_"
+			. str_replace( " ", "_", $value->_name)
+		;
 		$content .= '
 			<input
 				type="checkbox"
 				form="ljdp_form"
-				id="filter_'.str_replace( " ", "_", $value->_name).'"
-				class="filter_menu_checkbox"
+				id="'.$id.'"
+				class="filter_menu_checkbox filter_menu_item"
 				onclick="filter_show_only(this, \''.$key.'\')"
 				style="display:none;"
 				data-menu_index="'.$key_filter.'",
 			>
 			<label
-				for="filter_'.str_replace( " ", "_", $value->_name).'"
+				for="'.$id.'"
 				class="filter_menu filter_menu_checkbox"
 			>
 				<p>'.$value->_name.'</p>
diff --git a/srcs/plugins/map_prof/styles/mp_filters.css b/srcs/plugins/map_prof/styles/mp_filters.css
index cf0d53c..a2dfcf9 100644
--- a/srcs/plugins/map_prof/styles/mp_filters.css
+++ b/srcs/plugins/map_prof/styles/mp_filters.css
@@ -88,7 +88,8 @@
 	height: var(--size);
 }
 
-#ljdp_map_filters input.filter_menu_checkbox:checked + label.filter_menu_checkbox p::before {
+#ljdp_map_filters input.filter_menu_checkbox:checked
++ label.filter_menu_checkbox p::before {
 	/*
 	background-color: #ba197a;
 	background-color: #ca1c84;
@@ -108,6 +109,19 @@
 	background-color: #ccc;
 }
 
+#ljdp_map_filters input.filter_menu_checkbox:disabled
++ label.filter_menu_checkbox {
+	cursor: default;
+}
+#ljdp_map_filters input.filter_menu_checkbox:disabled
++ label.filter_menu_checkbox p::before {
+	border-color: #ccc;
+	background-color: #ccc;
+}
+#ljdp_map_filters input.filter_menu_checkbox:disabled
++ label.filter_menu_checkbox p {
+	color: #ccc;
+}