cleaner filter events
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
// ';
|
||||
|
||||
?>
|
||||
|
||||
Reference in New Issue
Block a user