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

temp version of filters drop down with toogle

Browse Source
This commit is contained in:
lenovo
2022-11-12 16:11:59 +01:00
parent 52eeda4ad4
commit cda936deb7
3 changed files with 143 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -1,6 +1,10 @@
# 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)
#### improvement suggestions:
- add a field "more infos" to address
- localise on map when form is filled

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

@@ -7,8 +7,13 @@ 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;">
<div class="filter_menu" style="display:none;" tabindex=0>
<div class="filter_menu_title" tabindex=0>
<p>'.$key.'</p>
</div>
@@ -17,13 +22,32 @@ function mp_create_div(&$filters) {
';
foreach ($filter as $value) {
$mp_map_div .= '
<p onclick="filter_show_only_selection('.json_encode($value->indexes).', false)">'.$value->_name.'</p>
<p onclick="filter_show_only_selection('.json_encode($value->indexes).', true)">'.$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>
// ';
};
$mp_map_div .= '
@@ -35,4 +59,40 @@ function mp_create_div(&$filters) {
return $mp_map_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">
// `;
// 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>
// `;
?>

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

@@ -26,6 +26,9 @@
display: flex !important;
flex-direction: column;
width: 100%;
overflow: visible;
cursor: pointer;
border: 1px solid #ba197a;
}
@@ -148,7 +151,6 @@
*/
/*
*/
#ljdp_map_filters .filter_menu .filter_menu_title {
width: 100%;
cursor: pointer;
@@ -188,65 +190,102 @@
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
background-color: #dddddd;
}
*/
/* **************************************
VERSION DIV SWITCH AND CLOSE
WIP VERSION DIV TITLE
*/
/*
#ljdp_map_filters .filter_menu .filter_menu_title {
width: 100%;
cursor: pointer;
}
#ljdp_map_filters .filter_menu .filter_menu_drop {
#ljdp_map_filters .filter_menu_drop {
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
margin: 0px;
width: 100%;
height: auto;
max-height: 400px;
cursor: pointer;
background-color: transparent;
overflow: scroll;
border: 1px solid red;
}
#ljdp_map_filters .filter_menu .filter_menu_title:focus {
background-color: #ffffff;
height: auto;
top: 100%;
overflow: scroll;
padding: 10px;
border: 1px solid #ba197a;
border: 1px solid blue;
}
#ljdp_map_filters .filter_menu .filter_menu_title:focus
+ .filter_menu_drop {
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:first-child {
margin-top: 100px;
}
#ljdp_map_filters .filter_menu .filter_menu_drop:focus p:first-child {
margin-top: auto;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p {
#ljdp_map_filters .filter_menu_drop p {
display: none;
cursor: pointer;
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
#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
*/
/*
*/
#ljdp_map_filters .filter_menu_title {
width: 100%;
cursor: pointer;
pointer-events: none;
}
#ljdp_map_filters .filter_menu_drop {
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
max-height: 400px;
width: 100%;
cursor: pointer;
overflow: scroll;
background-color: #ffffff;
/* 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;
border: 1px solid #ba197a;
}
#ljdp_map_filters .filter_menu:focus .filter_menu_title {
pointer-events: auto;
}
#ljdp_map_filters .filter_menu:focus .filter_menu_drop {
opacity: 1;
visibility: visible;
}
#ljdp_map_filters .filter_menu_drop p {
padding: 0px 10px;
margin: 0px;
width: 100%;
}
#ljdp_map_filters .filter_menu_drop p:hover {
background-color: #dddddd;
}