temp version of filters drop down with toogle

README.md

@@ -1,6 +1,10 @@
 
 # MAP
 
+- zoom : toujours zoomer, pour un seul marqueur pas trop, et enlever les villes
+- resoudre probleme mauvais markers de pays
+- faire un bouton select (afficher la seletion plutot que le nom du menu)
+
 #### improvement suggestions:
 - add a field "more infos" to address
 - localise on map when form is filled

srcs/plugins/map_prof/mp_create_div.php

@@ -7,8 +7,13 @@ function mp_create_div(&$filters) {
 	';
 
 	foreach ($filters as $key => $filter) {
+
+	//	// version div stick
+	//	// version div switch
+	//	// version div visibility
+	//	
 		$mp_map_div .= '
-			<div class="filter_menu" style="display:none;">
+			<div class="filter_menu" style="display:none;" tabindex=0>
 				<div class="filter_menu_title" tabindex=0>
 					<p>'.$key.'</p>
 				</div>
@@ -17,13 +22,32 @@ function mp_create_div(&$filters) {
 		';
 		foreach ($filter as $value) {
 			$mp_map_div .= '
-					<p onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
+					<p onclick="filter_show_only_selection('.json_encode($value->indexes).', true)">'.$value->_name.'</p>
 			';
 		}
 		$mp_map_div .= '
 				</div>
 			</div>
 		';
+
+	//	// version div title
+	//	
+	//	$mp_map_div .= '
+	//		<div class="filter_menu" style="display:none;">
+	//			<div class="filter_menu_drop">
+	//				<p class="filter_menu_drop_title" tabindex=0>'.$key.'</p>
+	//				<p onclick="filter_show_all()">TOUT DESELECTIONNER</p>
+	//	';
+	//	foreach ($filter as $value) {
+	//		$mp_map_div .= '
+	//				<p onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
+	//		';
+	//	}
+	//	$mp_map_div .= '
+	//			</div>
+	//		</div>
+	//	';
+
 	};
 
 	$mp_map_div .= '
@@ -35,4 +59,40 @@ function mp_create_div(&$filters) {
 	return $mp_map_div;
 }
 
+	//	// version input checkbox
+	//	
+	//	content += `
+	//		<div class="filter_menu">
+	//			<input  id="filter_menu_title_${key}" class="filter_menu_title" type="checkbox" />
+	//			<label for="filter_menu_title_${key}" class="filter_menu_title">
+	//				<p>${key}</p>
+	//			</label>
+	//			<div class="filter_menu_drop">
+	//	`;
+	//	for (value of filters[key]) {
+	//		content += `
+	//				<p>${value._name}</p>
+	//		`;
+	//	}
+	//	content += `
+	//			</div>
+	//		</div>
+	//	`;
+
+	//	// version select
+	//	
+	//	content += `
+	//		<div class="filter_menu">
+	//			<select id="filter_menu_drop_${key}" class="filter_menu_drop" name="${key}">
+	//	`;
+	//	for (value of filters[key]) {
+	//		content += `
+	//				<option value="${value._name}"><p>${value._name}</p></option>
+	//		`;
+	//	}
+	//	content += `
+	//			</select>
+	//		</div>
+	//	`;
+
 ?>

srcs/plugins/map_prof/styles/mp_filters.css

@@ -26,6 +26,9 @@
 	display: flex !important;
 	flex-direction: column;
 	width: 100%;
+	overflow: visible;
+	cursor: pointer;
+
 	border: 1px solid #ba197a;
 }
 
@@ -148,7 +151,6 @@
 */
 
 /*
-*/
 #ljdp_map_filters .filter_menu .filter_menu_title {
 	width: 100%;
 	cursor: pointer;
@@ -188,65 +190,102 @@
 #ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
 	background-color: #dddddd;
 }
+*/
 
 
 
 
 
 /* **************************************
-	VERSION DIV SWITCH AND CLOSE
+	WIP VERSION DIV TITLE
 */
 
 /*
-#ljdp_map_filters .filter_menu .filter_menu_title {
+#ljdp_map_filters .filter_menu_drop {
-	width: 100%;
-	cursor: pointer;
-}
-
-#ljdp_map_filters .filter_menu .filter_menu_drop {
 	flex-direction: column;
-	position: absolute;
-	top: 100%;
-	left: 0px;
-	margin: 0px;
 	width: 100%;
-	height: auto;
 	max-height: 400px;
 	cursor: pointer;
-	background-color: transparent;
-	overflow: scroll;
-
-	border: 1px solid red;
-}
-
-#ljdp_map_filters .filter_menu .filter_menu_title:focus {
 	background-color: #ffffff;
-	height: auto;
-	top: 100%;
 	overflow: scroll;
-	padding: 10px;
+
-	border: 1px solid #ba197a;
+	border: 1px solid blue;
 }
 
-#ljdp_map_filters .filter_menu .filter_menu_title:focus
+#ljdp_map_filters .filter_menu_drop p {
-+ .filter_menu_drop {
+	display: none;
-}
+	cursor: pointer;
-
-#ljdp_map_filters .filter_menu .filter_menu_drop p:first-child {
-	margin-top: 100px;
-}
-
-#ljdp_map_filters .filter_menu .filter_menu_drop:focus p:first-child {
-	margin-top: auto;
-}
-
-#ljdp_map_filters .filter_menu .filter_menu_drop p {
 	padding: 0px 10px;
 	width: 100%;
 }
 
-#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
+#ljdp_map_filters .filter_menu_drop p:hover {
 	background-color: #dddddd;
 }
+
+#ljdp_map_filters p.filter_menu_drop_title {
+	display: flex;
+	text-align: center;
+}
+
+#ljdp_map_filters .filter_menu_drop_title:focus ~ p {
+	display: flex;
+}
 */
 
+
+
+
+
+/* **************************************
+	VERSION DIV VISIBILITY
+*/
+
+/*
+*/
+#ljdp_map_filters .filter_menu_title {
+	width: 100%;
+	cursor: pointer;
+	pointer-events: none;
+}
+
+#ljdp_map_filters .filter_menu_drop {
+	flex-direction: column;
+	position: absolute;
+	top: 100%;
+	left: 0px;
+	max-height: 400px;
+	width: 100%;
+	cursor: pointer;
+	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 */
+	opacity: 0;
+	visibility: hidden;
+	transition: visibility 0.5s;
+
+	border: 1px solid #ba197a;
+}
+
+#ljdp_map_filters .filter_menu:focus .filter_menu_title {
+	pointer-events: auto;
+}
+
+#ljdp_map_filters .filter_menu:focus .filter_menu_drop {
+	opacity: 1;
+	visibility: visible;
+}
+
+#ljdp_map_filters .filter_menu_drop p {
+	padding: 0px 10px;
+	margin: 0px;
+	width: 100%;
+}
+
+#ljdp_map_filters .filter_menu_drop p:hover {
+	background-color: #dddddd;
+}
+
+