pro/2023_WEBSITE_jipf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

filters multiple selection intersect well

Browse Source
This commit is contained in:
lenovo
2022-11-13 11:01:18 +01:00
parent 36a55260fe
commit d34d18e88d
4 changed files with 68 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
srcs/plugins/map_prof/mp_create_div.php
View File

@@ -6,24 +6,23 @@ function mp_filter_drop_down($key, &$filter) {
// // version div switch // // version div switch
// // version div visibility // // version div visibility
// //
// <p onclick="filter_show_all()">TOUT DESELECTIONNER</p>
$content = ' $content = '
<div class="filter_menu filter_menu_drop" style="display:none;" tabindex=0> <div class="filter_menu filter_menu_drop" style="display:none;" tabindex=0>
<div class="filter_menu_drop_title" tabindex=0> <div class="filter_menu_title filter_menu_drop_title" tabindex=0>
<p>'.$key.'</p> <p>'.$key.'</p>
</div> </div>
<div class="filter_menu_drop_items" tabindex=0> <div class="filter_menu_drop_items" tabindex=0>
'; ';
foreach ($filter as $value) { foreach ($filter as $value) {
/* /*
<p id="'.$value->_name.'" onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p> <p id="'.$value->_name. '" onblur="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
<p id="'.$value->_name.'" onblur="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p> <p id="'.$value->_name. '" onfocus="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
<p id="'.$value->_name.'" onfocus="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p> <p id="'.$value->_name. '" onfocusin="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
<p id="'.$value->_name.'" onfocusin="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p> <p id="'.$value->_name.'" onfocusout="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
*/ */
$content .= ' $content .= '
<p id="'.$value->_name.'" onfocusout="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p> <p id="'.$value->_name. '" onclick="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
'; ';
} }
$content .= ' $content .= '
@@ -43,8 +42,8 @@ function mp_filter_buttons($key, &$filter) {
'; ';
foreach ($filter as $value) { foreach ($filter as $value) {
$content .= ' $content .= '
<div class="filter_menu_buttons_click" tabindex=0> <div class="filter_menu_title filter_menu_buttons_title" tabindex=0>
<p id="'.$value->_name.'" onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p> <p id="'.$value->_name.'" onclick="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
</div> </div>
'; ';
} }
@@ -67,9 +66,16 @@ function mp_create_div(&$filters) {
$mp_map_div .= mp_filter_buttons($key, $filter); $mp_map_div .= mp_filter_buttons($key, $filter);
else else
$mp_map_div .= mp_filter_drop_down($key, $filter); $mp_map_div .= mp_filter_drop_down($key, $filter);
}; };
$mp_map_div .= '
<div class="filter_menu filter_menu_reset">
<div class="filter_menu_title filter_menu_reset_title">
<p onclick="filter_show_all()">sans filtre</p>
</div>
</div>
';
$mp_map_div .= ' $mp_map_div .= '
</div> </div>
<div id="ljdp_map"></div> <div id="ljdp_map"></div>

37
srcs/plugins/map_prof/scripts/mp_filter_events.js
View File

@@ -4,6 +4,30 @@
// bounds : https://stackoverflow.com/questions/19304574/center-set-zoom-of-map-to-cover-all-visible-markers/19304625#19304625 // bounds : https://stackoverflow.com/questions/19304574/center-set-zoom-of-map-to-cover-all-visible-markers/19304625#19304625
/**
* return intersection of both arrays : indexes and g_indexes
*/
function filter_selection_indexes(indexes) {
// if g_indexes empty, just fill it with indexes
// because it's like intersection of indexes and g_indexes if g_indexes was the list of all markers
if (g_indexes.length == 0) {
// deep copy of indexes
g_indexes = [].concat(indexes);
}
else {
let intersection = [];
for (let index of indexes) {
if (g_indexes.indexOf(index) != -1)
intersection.push(index);
}
// if no intersection found, the filter shouldn't be selectable, so this shouldn't happen
if (intersection.length)
g_indexes = intersection;
}
}
/** /**
* if zoom_in is true: * if zoom_in is true:
* zoom to new selection, * zoom to new selection,
@@ -12,11 +36,9 @@
function filter_show_only_selection(indexes, zoom_in = false) { function filter_show_only_selection(indexes, zoom_in = false) {
console.log(" "); filter_selection_indexes(indexes);
console.log("indexes:");
console.log(indexes);
let indexes_count = indexes.length; let indexes_count = g_indexes.length;
if (indexes_count === 0) if (indexes_count === 0)
return; return;
@@ -25,14 +47,10 @@ console.log(indexes);
let marker = g_markers[0]; let marker = g_markers[0];
let position = marker.getPosition(); let position = marker.getPosition();
let current_bounds = g_map.getBounds(); let current_bounds = g_map.getBounds();
console.log("current_bounds:");
console.log(current_bounds);
let bounds = new google.maps.LatLngBounds(position); let bounds = new google.maps.LatLngBounds(position);
console.log("bounds:");
console.log(bounds);
let outside_bounds = false; let outside_bounds = false;
for (let index of indexes) { for (let index of g_indexes) {
marker = g_markers[index]; marker = g_markers[index];
position = marker.getPosition(); position = marker.getPosition();
if (! current_bounds.contains(position)) if (! current_bounds.contains(position))
@@ -54,6 +72,7 @@ console.log(bounds);
} }
function filter_show_all() { function filter_show_all() {
g_indexes = [];
g_marker_cluster.addMarkers(g_markers); g_marker_cluster.addMarkers(g_markers);
//g_map.fitBounds(g_init_bounds); //g_map.fitBounds(g_init_bounds);
g_map.setCenter(coordinates_default); g_map.setCenter(coordinates_default);

1
srcs/plugins/map_prof/scripts/mp_init_map.js
View File

@@ -8,6 +8,7 @@ const g_init_bounds = {
west: -180, west: -180,
east: 180, east: 180,
}; };
let g_indexes = [];
function mp_init_map() { function mp_init_map() {

34
srcs/plugins/map_prof/styles/mp_filters.css
View File

@@ -28,10 +28,16 @@
width: 100%; width: 100%;
overflow: visible; overflow: visible;
cursor: pointer; cursor: pointer;
}
#ljdp_map_filters .filter_menu_title {
border: 1px solid #ba197a; border: 1px solid #ba197a;
} }
#ljdp_map_filters .filter_menu_title p {
padding: 5px;
}
/* ************************************** /* **************************************
DROP DOWN MENU DROP DOWN MENU
@@ -41,7 +47,6 @@
*/ */
#ljdp_map_filters .filter_menu_drop_title { #ljdp_map_filters .filter_menu_drop_title {
width: 100%; width: 100%;
cursor: pointer;
pointer-events: none; pointer-events: none;
} }
@@ -59,11 +64,11 @@
/* opacity is toogled instantanously, for visual confort, but element is still present and clickable */ /* 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 */ /* then, visibility is toogle, after x seconds, letting plainty of times for the browser to catch the 'onclick' event */
/* /*
display: none;
*/
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: visibility 0.5s; transition: visibility 0.5s;
*/
display: none;
border: 1px solid #ba197a; border: 1px solid #ba197a;
} }
@@ -73,11 +78,11 @@
} }
#ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_items { #ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_items {
display: flex;
/* /*
display: flex;
*/
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
*/
} }
#ljdp_map_filters .filter_menu_drop_items p { #ljdp_map_filters .filter_menu_drop_items p {
@@ -94,7 +99,7 @@
/* ************************************** /* **************************************
DROP DOWN MENU MENU BUTTONS
*/ */
/* /*
@@ -102,11 +107,18 @@
#ljdp_map_filters .filter_menu_buttons { #ljdp_map_filters .filter_menu_buttons {
flex-direction: row; flex-direction: row;
border: 1px solid blue;
}
#ljdp_map_filters .filter_menu_buttons_click {
border: 1px solid green;
} }
/* **************************************
MENU RESET
*/
/*
*/