cleaner filter events

This commit is contained in:
lenovo
2022-11-15 19:18:13 +01:00
parent 059d56d26f
commit e60e2358b1
2 changed files with 50 additions and 108 deletions

View File

@@ -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) {
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;
let indexes_count = indexes.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);

View File

@@ -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>
// ';
?>