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

mv map_prof plugin inside plugins container

Browse Source
This commit is contained in:
asus
2024-02-06 15:47:28 +01:00
parent d8c03f1c59
commit 1b837f8f92
35 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
plugins/map_prof/scripts/mp_create_filters.js Normal file
View File

@@ -0,0 +1,103 @@
function fill_filters(filters_div) {
/*
* following variable are created by mp_add_to_script.php
*
* { }
* { [ ] }
* - filters: { - pays : [ { - _name : "" } ] }
* { [ { - villes : [] } ] }
* { [ { - categories: [] } ] }
* { [ { - mode : [] }, ...] }
* { [ ] }
* { }
* { [ ] }
* { - villes : [ { - _name : "" } ] }
* { [ { - pays : [] } ] }
* { [ { - categories: [] } ] }
* { [ { - mode : [] }, ...] }
* { [ ] }
* { }
* { [ ] }
* { - categories: [ { - _name : "" } ] }
* { [ { - pays : [] } ] }
* { [ { - villes : [] } ] }
* { [ { - mode : [] }, ...] }
* { [ ] }
* { }
* { }
* { [ ] }
* { - mode : [ { - _name : "" } ] }
* { [ { - pays : [] } ] }
* { [ { - villes : [] } ] }
* { [ { - categories: [] }, ...] }
* { [ ] }
* { }
*
*/
let content = "";
// use Object.keys to obtain an array of object keys
let keys = Object.keys(filters);
keys.forEach((key) => {
// // 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">
// `;
// for (value of filters[key]) {
// 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}">
// `;
// for (value of filters[key]) {
// content += `
// <option value="${value._name}"><p>${value._name}</p></option>
// `;
// }
// content += `
// </select>
// </div>
// `;
// // version div
//
content += `
<div class="filter_menu">
<div class="filter_menu_title" tabindex=0>
<p>${key}</p>
</div>
<div class="filter_menu_drop" tabindex=0>
<p>PAS DE FILTRE</p>
`;
for (value of filters[key]) {
content += `
<p>${value._name}</p>
`;
}
content += `
</div>
</div>
`;
});
filters_div.innerHTML = content;
}

41
plugins/map_prof/scripts/mp_create_map.js Normal file
View File

@@ -0,0 +1,41 @@
function restrict_map(restrict) {
let map_restriction = {
latLngBounds: g_world_bound,
strictBounds: true,
};
if (restrict)
g_map.setOptions({restriction: map_restriction,});
else
g_map.setOptions({restriction: null,});
};
function create_map(map_div) {
// default map center to france
let map_center = coordinates_default;
// map_center = {lat:-2.515748362923059, lng:32.93366215464864};
let map_restriction = {
latLngBounds: g_world_bound,
strictBounds: true,
};
let map_options = {
/* map options : https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions */
disableDefaultUI: true,
zoomControl: true,
scaleControl: true,
zoom: map_zoom,
//gestureHandling: "cooperative",
gestureHandling: "greedy",
//gestureHandling: "none",
//gestureHandling: "auto",
//disableDoubleClickZoom: "false", // deprecated
//draggable: "true", // deprecated
center: map_center,
restriction: map_restriction,
}
return new google.maps.Map(map_div, map_options);
}

57
plugins/map_prof/scripts/mp_create_markers.js Normal file
View File

@@ -0,0 +1,57 @@
function create_markers(map, locations, infowindow) {
/*
* following variable are created by mp_add_to_script.php
* - let icon_color = ""
* - let icon_color_back = ""
* - let icon_size = [x, y]
* - let cluster_size_factor = Number
* - let icon_stroke_width = Number
*/
let icon_circle_radius = 40 - icon_stroke_width / 2;
let markers = [];
for (loc of locations) {
if (loc.coordinates == null)
continue;
let count = loc.events.length;
let marker_icon_size = [
icon_size[0] + ( icon_size_factor * (count - 2) ),
icon_size[1] + ( icon_size_factor * (count - 2) )
];
let svg_icon = window.btoa(`
<svg xmlns="http://www.w3.org/2000/svg" width="${marker_icon_size[0]}" height="${marker_icon_size[1]}">
<circle cx="50%" cy="50%" r="${icon_circle_radius}%" stroke="${icon_color}" stroke-width="${icon_stroke_width}" fill="${icon_color_back}" />
</svg>
`);
let icon_options = {
url: `data:image/svg+xml;base64,${svg_icon}`,
scaledSize: new google.maps.Size(marker_icon_size[0], marker_icon_size[1]),
};
let marker_label = {
text: String(count),
color: icon_color,
fontSize: "12px",
fontWeight: "bold",
};
let marker_title = `address of ${count} events`;
let marker = new google.maps.Marker({
position: loc.coordinates,
map: map,
icon: icon_options,
title: marker_title,
label: marker_label,
});
attach_info_window(map, marker, loc.events, infowindow);
markers.push(marker);
};
return markers;
}

58
plugins/map_prof/scripts/mp_draw_clusters.js Normal file
View File

@@ -0,0 +1,58 @@
function draw_clusters(map, markers) {
/*
* following variable are created by mp_add_to_script.php
* - let icon_color = ""
* - let icon_color_back = ""
* - let icon_size = [x, y]
* - let icon_size_factor = Number
* - let icon_stroke_width = Number
*/
let icon_circle_radius = 40 - icon_stroke_width / 2;
let renderer = {
render({ count, position }, stats) {
/* CLUSTERS SETTINGS */
let marker_icon_size = [
icon_size[0] + ( icon_size_factor * (count - 2) ),
icon_size[1] + ( icon_size_factor * (count - 2) )
];
let cluster_svg = window.btoa(`
<svg xmlns="http://www.w3.org/2000/svg" width="${marker_icon_size[0]}" height="${marker_icon_size[1]}">
<circle cx="50%" cy="50%" r="${icon_circle_radius}%" stroke="${icon_color}" stroke-width="${icon_stroke_width}" fill="${icon_color_back}" />
</svg>
`);
let cluster_icon = {
url: `data:image/svg+xml;base64,${cluster_svg}`,
scaledSize: new google.maps.Size(marker_icon_size[0], marker_icon_size[1]),
};
let cluster_label = {
text: String(count),
color: icon_color,
fontSize: "12px",
fontWeight: "bold",
};
let cluster_title = `Cluster of ${count} markers`;
let cluster_zIndex = Number(google.maps.Marker.MAX_ZINDEX) + count;
return new google.maps.Marker({
position,
icon: cluster_icon,
label: cluster_label,
title: cluster_title,
zIndex: cluster_zIndex,
});
}
}
let onClusterClick = (_, cluster, map) => {
restrict_map(false);
map.fitBounds(cluster.bounds);
restrict_map(true);
};
return new markerClusterer.MarkerClusterer({ map, markers, renderer, onClusterClick });
}

7
plugins/map_prof/scripts/mp_errors_map.js Normal file
View File

@@ -0,0 +1,7 @@
function print_error(error) {
let div_map = document.getElementById("ljdp_map");
let p_err = document.createElement('p');
p_err.textContent = error;
div_map.after(p_err);
}

278
plugins/map_prof/scripts/mp_filter_events.js Normal file
View File

@@ -0,0 +1,278 @@
// https://googlemaps.github.io/js-markerclusterer/classes/MarkerClusterer.html
// add true for noDraw
// bounds : https://stackoverflow.com/questions/19304574/center-set-zoom-of-map-to-cover-all-visible-markers/19304625#19304625
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);
}
}
return temp_array;
}
function filter_selection_indexes(menu, indexes, reverse, add) {
if (indexes.length === 0) {
// if array of index is empty, delete menu
delete g_indexes[menu];
}
else if (reverse) {
// if reverse is true, delete all indexes in g_indexes.menu
// 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 redraw_clusters(indexes) {
let indexes_count = indexes.length;
if (indexes_count !== 0) {
// if index array, hide all other markers, and if zoomin, zoom to new markers
g_marker_cluster.clearMarkers(true);
let marker = g_markers[0];
let current_bounds = g_map.getBounds();
let bounds = new google.maps.LatLngBounds();
let outside_bounds = false;
for (let index of indexes) {
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 (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 ( Object.keys(g_indexes).length === 0 ) {
// object is empty, there are no filters
g_map.setCenter(coordinates_default);
g_map.setZoom(2);
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 html_item(menu_name, menu_item) {
let item = menu_item.replace(/ /g, "_");
let html_id = `filter_${menu_name}_${item}`;
return document.getElementById(html_id);
}
function toggle_menu_items(menu_name, x_abled) {
let name = menu_name.replace(/ /g, "_");
let class_name = `filter_menu_${name}`;
let items = document.getElementsByClassName(class_name);
if (x_abled === "disable") {
for (let item of items) {
// if item is a menu title (like 'categorie' or 'pays')
// don't remove 'enable', instead add it, because it's not in the list of 'to_enable'
if (item.selected) {
item.classList.add('enable');
}
else {
item.classList.remove('enable');
}
if (item.classList.contains('to_enable')) {
item.classList.replace('to_enable', 'enable');
item.removeAttribute('disabled');
}
else if (! item.selected)
item.setAttribute('disabled', '');
}
}
else {
for (let item of items) {
item.classList.remove('enable');
item.removeAttribute('disabled');
}
}
}
function disable_menus(menu_name_ori, menu_item_ori, reverse, menu_index) {
let menu_item_name = "";
if (menu_item_ori == null) // it's a menu name
menu_item_name = menu_name_ori;
else
menu_item_name = menu_item_ori._name;
let item_ori_html = html_item(menu_name_ori, menu_item_name);
let is_enabled = item_ori_html.classList.contains('enable');
// in case it's a menu title, like "Pays" or "Categories",
// and it does'nt contains 'enable'
// just act like Reset button
// it's too bad it will also go through this menu items even though it's unnecessary
if (menu_index == 'menu_name') { // it's a menu name
if (! is_enabled) {
// "item" as a menu name will select all items in all menus
toggle_menu_items("item", "enable");
}
return;
}
// if it's Mode menu,
// and it was the first selection, meaning it does'nt contains 'enable'
// and both (irl and online) are abled or disabled,
// just act like Reset button
// it's too bas it will also go through this menu items even though it's unnecessary
if (menu_name_ori === "mode") {
let mode_menus = document.getElementsByClassName("filter_menu_mode");
let state = 0;
for (let mode_menu of mode_menus) {
if (mode_menu.checked)
state++;
else
state--;
}
if (state != 0) { // state equal 0 if both have a different state, because (0 + 1 - 1 = 0) and (0 - 1 + 1 = 0)
if (! is_enabled) {
// "item" as a menu name will select all items in all menus
toggle_menu_items("item", "enable");
return;
}
}
else if (reverse) { // menu is "mode" and only one item is selected and the action was to deselect one, so the action has trigered one item but really we want to see the options of the other item, so let's switch them
if (menu_index == 0)
menu_index++;
else
menu_index--;
menu_item_ori = filters[menu_name_ori][menu_index];
}
}
let keys = Object.keys(menu_item_ori);
// loop through list of other menu_items available for this menu_item
// loop though menu names (pays, categories, mode)
for (let menu_name of keys) {
if (menu_name === "_name")
continue;
if (menu_name === "indexes")
continue;
else if (! is_enabled) {
// // it's too bad it will disable all and then enable certains, it would be better to check each time
// toggle_menu_items(menu_name, "disable");
// // loop through items in menu names (ex. for "pays" : france, chili, cuba)
// for (let item of menu_item_ori[menu_name]) {
// let item_html = html_item(menu_name, item);
// item_html.classList.add('enable');
// item_html.removeAttribute('disabled');
// }
for (let item of menu_item_ori[menu_name]) {
let item_html = html_item(menu_name, item);
item_html.classList.add('to_enable');
}
toggle_menu_items(menu_name, "disable");
}
}
}
function filter_show_only(element, menu_name) {
g_infowindow.close();
let menu_index = element.getAttribute("data-menu_index");
let menu_item = null;
let indexes = [];
if (menu_index != "menu_name") {
menu_item = filters[menu_name][menu_index];
indexes = menu_item.indexes;
}
add = false;
reverse = false;
if (element.type === "checkbox") {
reverse = ! element.checked;
add = true;
}
disable_menus(menu_name, menu_item, reverse, menu_index);
let index_array = filter_selection_indexes(menu_name, indexes, reverse, add);
redraw_clusters(index_array);
}
function filter_show_all() {
g_infowindow.close();
// "item" as a menu name will select all items in all menus
toggle_menu_items("item", "enable");
g_indexes = {};
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);
}

82
plugins/map_prof/scripts/mp_info_window.js Normal file
View File

@@ -0,0 +1,82 @@
function attach_info_window(map, marker, events, infowindow) {
/*
* https://developers.google.com/maps/documentation/javascript/infowindows
* https://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows
*/
let window_content = `
<div id="infowindow_limits">
<div class="infowindow">
<div class="infowindow_head">
<p>${events[0].location.address}</p>
<div id="infowindow_close" onclick="g_infowindow.close()"></div>
</div>
`;
for (key in events) {
window_content += `
<a class="infowindow_body" href="${events[key].url}">
<p>${events[key].title}</p>
</a>
`;
};
window_content += `
</div>
</div>
`;
marker.addListener('click', () => {
let view_center = map.getCenter();
// height must be half css value (mp_info_windows.css -> '--size: XXXpx;')
let window_offset = { width: 0, height: 275 };
infowindow.setOptions({
//disableAutoPan: true,
disableAutoPan: false,
content: window_content,
/* dimensions */
//maxWidth: 400,
//minWidth: 400,
/* center window */
position: view_center,
pixelOffset: window_offset,
//shouldFocus: false,
});
infowindow.open(map);
});
}
/*
event : {}
- heure_de_debut : "";
- heure_de_fin : "";
- categorie : "";
- date : "";
- pays : "";
- ville : "";
- adresse : "";
- prenom : "";
- nom : "";
- irl : bool;
- id : x;
- index : x (default null);
- title : "";
- url : "";
- location : {}
- street : "";
- city : "";
- country : "";
- address : "";
- approximate : bool;
- coordinates : {}
- lat : x;
- lng : x;
*/

72
plugins/map_prof/scripts/mp_init_map.js Normal file
View File

@@ -0,0 +1,72 @@
let g_map = {};
let g_markers = [];
let g_marker_cluster = {};
let g_indexes = {};
let g_infowindow = {};
const g_world_bound = {
north: 80,
south: -80,
west: -180,
east: 180,
};
/*
* following variable are created by mp_add_to_script.php
* - let events
* - let locations = [
* {
* coordinates: {}
* events : [{}, ...]
* },
* ...
* ]
*
* { }
* { [ ] }
* - let filters: { - pays : [ { - _name : "" } ] }
* { [ { - villes : [] } ] }
* { [ { - categories: [] } ] }
* { [ { - indexes : [] } ] }
* { [ { - mode : [] }, ...] }
* { [ ] }
* { }
* { - villes : ... }
* { - categories: ... }
* { - mode : ... }
* { }
*
* - let coordinates_default = {lat: ,lng: }
* - let icon_color = ""
* - let icon_color_back = ""
* - let icon_size = [x, y]
* - let cluster_size_factor = Number
* - let map_zoom = x
* - let max_zoom = x
*/
function mp_init_map() {
let map_div = document.getElementById("ljdp_map");
//let filters_div = document.getElementById("ljdp_map_filters");
g_infowindow = new google.maps.InfoWindow();
g_map = create_map(map_div);
g_markers = create_markers(g_map, locations, g_infowindow);
g_marker_cluster = draw_clusters(g_map, g_markers);
// add listener to close infowindow
// https://developers.google.com/maps/documentation/javascript/events
g_map.addListener('click', function() {
g_infowindow.close();
});
g_map.addListener('drag', function() {
g_infowindow.close();
});
g_map.addListener('zoom_changed', function() {
g_infowindow.close();
});
//g_map.addListener('clusteringbegin', restrict_map(false));
}

21
plugins/map_prof/scripts/mp_publish_error.js Normal file
View File

@@ -0,0 +1,21 @@
console.log("publish error");
wp.data.dispatch( 'core/notices' ).createNotice(
'error', // Can be one of: success, info, warning, error.
'impossible de publier : le pays est invalide', // Text string to display.
{
isDismissible: true, // Whether the user can dismiss the notice.
}
);
//( function ( wp ) {
// console.log("publish error");
// wp.data.dispatch( 'core/notices' ).createNotice(
// 'error', // Can be one of: success, info, warning, error.
// 'impossible de publie : le pays est invalide', // Text string to display.
// {
// isDismissible: true, // Whether the user can dismiss the notice.
// }
// );
//} )( window.wp );