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

filters intersection works well

Browse Source
This commit is contained in:
lenovo
2022-11-14 01:26:21 +01:00
parent 5596c5e954
commit 38beda1e80
7 changed files with 137 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@@ -2,10 +2,19 @@
#### todo
- [/] copy recent site version
- [ ] create links
- [ ] make links having map
- [/] create links
- [/] make links having map
- [ ] transform filter list in select
- [ ] make two infowindow size
- ne pas ouvrir sur un nouvel onglet
- responsive
- pays
- categories
- irl / online
- effacer -> bouton carre, fond violet, ecriture blanche, en capitale, arrondis de 3px sur les coins
- sur ordi carte hauteur 600px, sur telephone 500px
- "reinitialiser" avec accents, ou "effacer", "Pays" et "Categories" avec les accents
- enlever le bandeau de scroll des menus
if time:
- [ ] deal with error double event irl and online
- [ ] deal with multiplication of filters

2
srcs/plugins/map_prof/map_prof_hooks.php
View File

@@ -124,7 +124,7 @@ function mp_ljdp_map() {
if (is_event_post()) {
$mp_zoom = $mp_zoom_set[1];
$location = get_field(location);
$location = get_field("location");
$coordinates = $location->coordinates;
$mp_coordinates_default = $coordinates;

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

@@ -15,14 +15,8 @@ function mp_filter_drop_down($key, &$filter) {
<div class="filter_menu_drop_items" tabindex=0>
';
foreach ($filter as $value) {
/*
<p id="'.$value->_name. '" onblur="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
<p id="'.$value->_name. '" onfocus="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
<p id="'.$value->_name. '" onfocusin="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
<p id="'.$value->_name.'" onfocusout="filter_show_only_selection('.json_encode($value->indexes).')">'.$value->_name.'</p>
*/
$content .= '
<p id="'.$value->_name. '" onclick="filter_show_only_selection(this, '.json_encode($value->indexes).')">'.$value->_name.'</p>
<p onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".')">'.$value->_name.'</p>
';
}
$content .= '
@@ -40,7 +34,7 @@ function mp_filter_buttons($key, &$filter) {
$content = '';
foreach ($filter as $value) {
$content .= '
<input id="checkbox_'.$value->_name.'" class="filter_menu_checkbox" type="checkbox" style="display:none;" onclick="filter_show_only_selection(this, '.json_encode($value->indexes).')">
<input id="checkbox_'.$value->_name.'" class="filter_menu_checkbox" type="checkbox" style="display:none;" onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".', true)">
<label for="checkbox_'.$value->_name.'" class="filter_menu_checkbox filter_menu">
<div class="filter_menu_title filter_menu_checkbox_title" tabindex=0>
<p>'.$value->_name.'</p>

2
srcs/plugins/map_prof/mp_url_api.php
View File

@@ -11,7 +11,7 @@ function mp_url_api() {
foreach ($mp_url as $url_key => $url_value) {
if ($url_key === 'src') {
$mp_src .= $url_value;
if (count($mp_url > 1))
if (count($mp_url) > 1)
$mp_src .= "?";
}
else

11
srcs/plugins/map_prof/scripts/mp_create_map.js
View File

@@ -9,12 +9,15 @@ function create_map(map_div) {
zoomControl: true,
scaleControl: true,
zoom: map_zoom,
gestureHandling: "cooperative",
//gestureHandling: "greedy",
//gestureHandling: "cooperative",
gestureHandling: "greedy",
//gestureHandling: "none",
//gestureHandling: "auto",
//disableDoubleClickZoom: "false", //deprecated
//draggable: "true", //deprecated
//disableDoubleClickZoom: "false", // deprecated
//draggable: "true", // deprecated
center: map_center,
restriction: {
latLngBounds: world_bound,

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

@@ -4,29 +4,85 @@
// 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, invert) {
// 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);
function array_first_not_in_second(first, second) {
let temp_array = [];
for (let index of first) {
if (second.indexOf(index) == -1) {
temp_array.push(index);
}
// if no intersection found, the filter shouldn't be selectable, so this shouldn't happen
if (intersection.length)
g_indexes = intersection;
}
return temp_array;
}
/**
*
*/
function filter_selection_indexes(menu, indexes, reverse, add) {
// if reverse is true, delete all indexes in g_indexes.menu
if (reverse) {
// https://stackoverflow.com/questions/5113374/javascript-check-if-variable-exists-is-defined-initialized
if ( typeof(g_indexes[menu]) !== "undefined" && g_indexes[menu] !== null ) {
// creates an array with all values of g_indexes[menu] minus indexes
let temp_array = array_first_not_in_second(g_indexes[menu], indexes);
if (temp_array.length === 0)
delete g_indexes[menu];
else
g_indexes[menu] = [].concat(temp_array);
}
}
else {
if (add && typeof(g_indexes[menu]) !== "undefined") {
// add array of menus to g_indexes{}
// creates an array with all values of indexes that are not in g_indexes[menu] already
let temp_array = array_first_not_in_second(indexes, g_indexes[menu]);
g_indexes[menu] = g_indexes[menu].concat(temp_array);
}
else {
// replace or create array of menu in g_indexes{}
g_indexes[menu] = [].concat(indexes);
}
}
// loop through all arrays of g_indexes to find intersection
// take first one as comparison
let keys = Object.keys(g_indexes);
let intersection = [];
let compare = [];
keys.forEach((key, i) => {
if (i == 0) {
intersection = g_indexes[key];
}
else {
let temp = [];
compare = g_indexes[key];
for (let index of intersection) {
if (compare.indexOf(index) != -1)
temp.push(index);
}
intersection = [].concat(temp);
}
});
return intersection;
}
function is_element_unchecked(element) {
if (typeof(element) === "undefined")
return false;
if (typeof(element.attributes) === "undefined")
return false;
if (typeof(element.attributes.type) === "undefined")
return false;
value = element.attributes.type.value;
if (value === "checkbox") {
return ! element.checked;
}
return false;
}
/**
* if zoom_in is true:
@@ -34,60 +90,57 @@ function filter_selection_indexes(indexes, invert) {
* even if already visible in current view
*/
function filter_show_only_selection(element, indexes, zoom_in = false) {
//console.log("element:");
//console.log(element);
//console.log("element.checked:");
//console.log(element.checked);
//console.log("element.attributes.type:");
//console.log(element.attributes.type);
//console.log("element.attributes.type.value:");
//console.log(element.attributes.type.value);
function filter_show_only_selection(element, indexes, menu, add = false, zoom_in = false) {
let type = element.attributes.type;
let invert = false;
if (type != null)
type = type.value;
if (type === "checkbox")
invert = true;
// if checkbox is unchecked, re-add filters
filter_selection_indexes(indexes, invert);
let reverse = is_element_unchecked(element);
let indexes_count = g_indexes.length;
if (indexes_count === 0)
return;
let index_array = filter_selection_indexes(menu, indexes, reverse, add);
g_marker_cluster.clearMarkers(true);
let indexes_count = index_array.length;
let marker = g_markers[0];
let position = marker.getPosition();
let current_bounds = g_map.getBounds();
let bounds = new google.maps.LatLngBounds(position);
// if there is no indexes,
// if object is not empty, just render zero markers
// if object is empty, shall all markers
if (indexes_count !== 0) {
g_marker_cluster.clearMarkers(true);
let outside_bounds = false;
for (let index of g_indexes) {
marker = g_markers[index];
position = marker.getPosition();
if (! current_bounds.contains(position))
outside_bounds = true;
bounds.extend(position);
let marker = g_markers[0];
let position = marker.getPosition();
let current_bounds = g_map.getBounds();
let bounds = new google.maps.LatLngBounds(position);
g_marker_cluster.addMarker(marker, true);
}
if (zoom_in || outside_bounds) {
if (indexes_count === 1) {
g_map.setCenter(position);
g_map.setZoom(max_zoom);
let outside_bounds = false;
for (let index of index_array) {
marker = g_markers[index];
position = marker.getPosition();
if (! current_bounds.contains(position))
outside_bounds = true;
bounds.extend(position);
g_marker_cluster.addMarker(marker, true);
}
if (zoom_in || outside_bounds) {
if (indexes_count === 1) {
g_map.setCenter(position);
g_map.setZoom(max_zoom);
}
else if (indexes_count > 1)
g_map.fitBounds(bounds);
}
else if (indexes_count > 1)
g_map.fitBounds(bounds);
}
g_marker_cluster.render();
}
else if ( Object.keys(g_indexes).length === 0 ) { // object is empty, there are no filters
g_marker_cluster.addMarkers(g_markers, true);
}
else { // filters intersection lets no markers on the map
g_marker_cluster.clearMarkers(true);
}
g_marker_cluster.render();
}
function filter_show_all() {
g_indexes = [];
g_indexes = {};
g_marker_cluster.addMarkers(g_markers);
//g_map.fitBounds(g_init_bounds);
g_map.setCenter(coordinates_default);

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

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