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

wip new desing filter

Browse Source
This commit is contained in:
lenovo
2022-11-12 23:06:41 +01:00
parent c140187aa9
commit 36a55260fe
3 changed files with 138 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -1,15 +1,19 @@
# MAP
- zoom : toujours zoomer, pour un seul marqueur pas trop, et enlever les villes
- resoudre probleme mauvais markers de pays
- faire un bouton select (afficher la seletion plutot que le nom du menu)
### verifications:
- api only for this site on fabien's google account
- erased tmp css on site headers
#### improvement suggestions:
- add a field "more infos" to address
- localise on map when form is filled
#### questions traitees:
- zoom : toujours zoomer, pour un seul marqueur pas trop, et enlever les villes
- resoudre probleme mauvais markers de pays
- faire un bouton select (afficher la seletion plutot que le nom du menu)
- bound la carte limite pour ne pas voir la zone grise
- quelles infos on mets dans les infowindow
- adresse en haut (surtout pour les markers avec plusieurs evenements)

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

@@ -1,5 +1,60 @@
<?php
function mp_filter_drop_down($key, &$filter) {
// // version div stick
// // version div switch
// // version div visibility
//
// <p onclick="filter_show_all()">TOUT DESELECTIONNER</p>
$content = '
<div class="filter_menu filter_menu_drop" style="display:none;" tabindex=0>
<div class="filter_menu_drop_title" tabindex=0>
<p>'.$key.'</p>
</div>
<div class="filter_menu_drop_items" tabindex=0>
';
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).', false)">'.$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).', false)">'.$value->_name.'</p>
*/
$content .= '
<p id="'.$value->_name.'" onfocusout="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
';
}
$content .= '
</div>
</div>
';
return $content;
};
function mp_filter_buttons($key, &$filter) {
// <p onclick="filter_show_all()">TOUT DESELECTIONNER</p>
$content = '
<div class="filter_menu filter_menu_buttons" style="display:none;">
';
foreach ($filter as $value) {
$content .= '
<div class="filter_menu_buttons_click" tabindex=0>
<p id="'.$value->_name.'" onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
</div>
';
}
$content .= '
</div>
';
return $content;
};
function mp_create_div(&$filters) {
$mp_map_div = '
<div id="ljdp_map_wrapper">
@@ -8,45 +63,10 @@ function mp_create_div(&$filters) {
foreach ($filters as $key => $filter) {
// // version div stick
// // version div switch
// // version div visibility
//
$mp_map_div .= '
<div class="filter_menu" style="display:none;" tabindex=0>
<div class="filter_menu_title" tabindex=0>
<p>'.$key.'</p>
</div>
<div class="filter_menu_drop" tabindex=0>
<p onclick="filter_show_all()">TOUT DESELECTIONNER</p>
';
foreach ($filter as $value) {
$mp_map_div .= '
<p onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
';
}
$mp_map_div .= '
</div>
</div>
';
// // version div title
//
// $mp_map_div .= '
// <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) {
// $mp_map_div .= '
// <p onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
// ';
// }
// $mp_map_div .= '
// </div>
// </div>
// ';
if ($key == "mode")
$mp_map_div .= mp_filter_buttons($key, $filter);
else
$mp_map_div .= mp_filter_drop_down($key, $filter);
};
@@ -57,42 +77,63 @@ function mp_create_div(&$filters) {
';
return $mp_map_div;
}
};
// // 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 += `
// $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>
// <p>'.$key.'</p>
// </label>
// <div class="filter_menu_drop">
// `;
// for (value of filters[key]) {
// content += `
// <p>${value._name}</p>
// `;
// ';
// foreach ($filter as $value) {
// $content .= '
// <p>'.$value._name.'</p>
// ';
// }
// content += `
// $content .= '
// </div>
// </div>
// `;
// ';
// // version select
//
// content += `
// $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>
// `;
// <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 += `
// $content .= '
// </select>
// </div>
// `;
// ';
?>

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

@@ -33,223 +33,19 @@
}
/* **************************************
WIP VERSION SELECT
*/
/*
#ljdp_map_filters .filter_menu select.filter_menu_drop {
appearance: none;
text-align: center;
background-color: transparent;
border: none;
}
#ljdp_map_filters .filter_menu .filter_menu_drop option {
appearance: none;
text-align: center;
background-color: transparent;
border: none;
}
*/
/* **************************************
VERSION INPUT CHECKBOX
*/
/*
#ljdp_map_filters .filter_menu input.filter_menu_title {
display: none;
}
#ljdp_map_filters .filter_menu label.filter_menu_title {
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
margin: 0px;
padding: 10px 0px;
width: 100%;
max-height: 400px;
background-color: #ffffff;
overflow-y: scroll;
cursor: pointer;
}
#ljdp_map_filters .filter_menu input.filter_menu_title:checked
~ .filter_menu_drop {
display: flex;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p {
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
background-color: #dddddd;
}
*/
/* **************************************
VERSION DIV STICK
*/
/*
#ljdp_map_filters .filter_menu .filter_menu_title {
width: 100%;
cursor: pointer;
}
#ljdp_map_filters .filter_menu .filter_menu_drop {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
margin: 0px;
padding: 10px 0px;
width: 100%;
max-height: 400px;
background-color: #ffffff;
overflow-y: scroll;
cursor: pointer;
}
#ljdp_map_filters .filter_menu:focus-within .filter_menu_drop {
display: flex;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p {
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
background-color: #dddddd;
}
*/
/* **************************************
VERSION DIV SWITCH
*/
/*
#ljdp_map_filters .filter_menu .filter_menu_title {
width: 100%;
cursor: pointer;
}
#ljdp_map_filters .filter_menu .filter_menu_drop {
flex-direction: column;
position: absolute;
left: 0px;
margin: 0px;
width: 100%;
max-height: 400px;
cursor: pointer;
background-color: transparent;
height: 100%;
padding-left: 100%;
top: 0%;
overflow: hidden;
}
#ljdp_map_filters .filter_menu .filter_menu_drop:focus {
background-color: #ffffff;
height: auto;
top: 100%;
overflow: scroll;
padding: 10px;
border: 1px solid #ba197a;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p {
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
background-color: #dddddd;
}
*/
/* **************************************
WIP VERSION DIV TITLE
*/
/*
#ljdp_map_filters .filter_menu_drop {
flex-direction: column;
width: 100%;
max-height: 400px;
cursor: pointer;
background-color: #ffffff;
overflow: scroll;
border: 1px solid blue;
}
#ljdp_map_filters .filter_menu_drop p {
display: none;
cursor: pointer;
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu_drop p:hover {
background-color: #dddddd;
}
#ljdp_map_filters p.filter_menu_drop_title {
display: flex;
text-align: center;
}
#ljdp_map_filters .filter_menu_drop_title:focus ~ p {
display: flex;
}
*/
/* **************************************
VERSION DIV VISIBILITY
DROP DOWN MENU
*/
/*
*/
#ljdp_map_filters .filter_menu_title {
#ljdp_map_filters .filter_menu_drop_title {
width: 100%;
cursor: pointer;
pointer-events: none;
}
#ljdp_map_filters .filter_menu_drop {
#ljdp_map_filters .filter_menu_drop_items {
flex-direction: column;
position: absolute;
top: 100%;
@@ -262,30 +58,55 @@
/* 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 */
/*
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
*/
display: none;
border: 1px solid #ba197a;
}
#ljdp_map_filters .filter_menu:focus .filter_menu_title {
#ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_title {
pointer-events: auto;
}
#ljdp_map_filters .filter_menu:focus .filter_menu_drop {
#ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_items {
display: flex;
/*
opacity: 1;
visibility: visible;
*/
}
#ljdp_map_filters .filter_menu_drop p {
#ljdp_map_filters .filter_menu_drop_items p {
padding: 0px 10px;
margin: 0px;
width: 100%;
}
#ljdp_map_filters .filter_menu_drop p:hover {
#ljdp_map_filters .filter_menu_drop_items p:hover {
background-color: #dddddd;
}
/* **************************************
DROP DOWN MENU
*/
/*
*/
#ljdp_map_filters .filter_menu_buttons {
flex-direction: row;
border: 1px solid blue;
}
#ljdp_map_filters .filter_menu_buttons_click {
border: 1px solid green;
}