cleaner filter events

srcs/plugins/map_prof/scripts/mp_filter_events.js

@@ -15,10 +15,6 @@ function array_first_not_in_second(first, second) {
 	return temp_array;
 }
 
-/**
- * 
- */
-
 function filter_selection_indexes(menu, indexes, reverse, add) {
 
 	if (indexes.length === 0) {
@@ -72,45 +68,9 @@ function filter_selection_indexes(menu, indexes, reverse, add) {
 	return intersection;
 }
 
+function redraw_clusters(indexes) {
 
-
+	let indexes_count = indexes.length;
-function is_element_unchecked(element) {
-	if (typeof(element) === "undefined")
-		return false;
-	if (typeof(element.type) === "undefined")
-		return false;
-	if (element.type === "checkbox") {
-		return ! element.checked;
-	}
-	return false;
-}
-
-/**
- * if zoom_in is true:
- *   zoom to new selection,
- *   even if already visible in current view
- */
-
-function filter_show_only_selection(element, indexes, menu, add = false, zoom_in = true) {
-
-	g_infowindow.close();
-
-	// BAD WORKAROUND solution because we can't actually put onclick event inside select options
-	// on chrome, so I have to recover the indexes another way
-	if (element.type == "select-one") {
-		if (element.value == menu)
-			indexes = [];
-		else {
-			indexes = element.children[element.selectedIndex].title;
-			indexes = JSON.parse(indexes);
-		}
-	}
-
-	let reverse = is_element_unchecked(element);
-
-	let index_array = filter_selection_indexes(menu, indexes, reverse, add);
-
-	let indexes_count = index_array.length;
 
 	if (indexes_count !== 0) {
 	// if index array, hide all other markers, and if zoomin, zoom to new markers
@@ -121,7 +81,7 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in
 		let bounds = new google.maps.LatLngBounds();
 
 		let outside_bounds = false;
-		for (let index of index_array) {
+		for (let index of indexes) {
 			marker = g_markers[index];
 			position = marker.getPosition();
 			if (! current_bounds.contains(position))
@@ -130,13 +90,12 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in
 
 			g_marker_cluster.addMarker(marker, true);
 		}
-		if (zoom_in || outside_bounds) {
+		if (outside_bounds) {
 			if (indexes_count === 1) {
 				g_map.setCenter(position);
 				g_map.setZoom(max_zoom);
 			}
 			else if (indexes_count > 1) {
-				console.log("index_bound");
 				g_map.fitBounds(bounds);
 			}
 		}
@@ -156,6 +115,29 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in
 	g_marker_cluster.render();
 }
 
+function filter_show_only(element, menu) {
+
+	g_infowindow.close();
+
+	let menu_index = element.getAttribute("data-menu_index");
+	let indexes = [];
+	if (menu_index != "menu_name")
+		indexes = filters[menu][menu_index].indexes;
+
+	add = false;
+	reverse = false;
+	if (element.type === "checkbox") {
+		reverse = ! element.checked;
+		add = true;
+	}
+
+	let index_array = filter_selection_indexes(menu, indexes, reverse, add);
+
+	redraw_clusters(index_array);
+}
+
+
+
 function filter_show_all() {
 	g_infowindow.close();
 
@@ -163,6 +145,7 @@ function filter_show_all() {
 	g_marker_cluster.clearMarkers(true);
 	g_marker_cluster.addMarkers(g_markers);
 	/* dont use fitBounds because it's not well centered */
+	/* instead use setCenter and setZoom */
 	//g_map.fitBounds(g__init_bounds);
 	g_map.setCenter(coordinates_default);
 	g_map.setZoom(2);

srcs/plugins/map_prof/srcs/map/mp_create_div.php

@@ -1,25 +1,36 @@
 <?php
 
 function mp_filter_drop_down($key, &$filter) {
-
 	/*
 			onfocusin="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".')"
 			onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".')"
 			onfocus="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".')"
 				onclick="filter_show_only_selection(this, '.json_encode(array()).', '."'".$key."'".')"
 			onchange="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".')"
+
+			onchange="filter_show_only_selection(this, '.json_encode(array()).', '."'".$key."'".')"
+			onchange="filter_event(this, this.options[this.selectedIndex], \''.$key.'\')"
 	*/
 	$content = '
 		<select
 			form="ljdp_form"
 			class="filter_menu filter_menu_drop"
-			onchange="filter_show_only_selection(this, '.json_encode(array()).', '."'".$key."'".')"
+			onchange="filter_show_only(this.options[this.selectedIndex], \''.$key.'\')"
 		>
-			<option selected>'.$key.'</option>
+			<option
+				selected
+				data-menu_index="menu_name"
+			>
+				'.$key.'
+			</option>
 	';
-	foreach ($filter as $value) {
+	foreach ($filter as $key_filter => $value) {
 		$content .= '
-			<option title="'.json_encode($value->indexes).'">'.$value->_name.'</option>
+			<option
+				data-menu_index="'.$key_filter.'"
+			>
+				'.$value->_name.'
+			</option>
 		';
 	}
 	$content .= '
@@ -31,16 +42,20 @@ function mp_filter_drop_down($key, &$filter) {
 
 function mp_filter_buttons($key, &$filter) {
 
+/*
+				onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".', true)"
+*/
 	$content = '';
-	foreach ($filter as $value) {
+	foreach ($filter as $key_filter => $value) {
 		$content .= '
 			<input
 				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)"
+				onclick="filter_show_only(this, \''.$key.'\')"
 				style="display:none;"
+				data-menu_index="'.$key_filter.'",
 			>
 			<label
 				for="checkbox_'.$value->_name.'"
@@ -96,60 +111,4 @@ function mp_create_div(&$filters) {
 };
 
 
-	//	// version div title
-	//	
-	//	$content .= '
-	//		<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) {
-	//		$content .= '
-	//				<p onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
-	//		';
-	//	}
-	//	$content .= '
-	//			</div>
-	//		</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">
-	//	';
-	//	foreach ($filter as $value) {
-	//		$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.'">
-	//	';
-	//	foreach ($filter as $value) {
-	//		$content .= '
-	//				<option value="'.$value._name.'"><p>'.$value._name.'</p></option>
-	//		';
-	//	}
-	//	$content .= '
-	//			</select>
-	//		</div>
-	//	';
-
 ?>