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

drop down menu works

Browse Source
This commit is contained in:
lenovo
2022-11-11 09:09:27 +01:00
parent cb0dcdddad
commit 55120b7504
2 changed files with 184 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
srcs/plugins/map_prof/scripts/mp_create_filters.js
View File

@@ -39,28 +39,62 @@ function fill_filters(filters_div) {
let content = ""; let content = "";
let keys = Object.keys(filters); let keys = Object.keys(filters);
keys.forEach((key) => { keys.forEach((key) => {
//content += `
// <div class="filter_menu"> // // version input checkbox
// <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> // content += `
// <div class="filter_menu_drop"> // <div class="filter_menu">
//`; // <input id="filter_menu_title_${key}" class="filter_menu_title" type="checkbox" />
content += ` // <label for="filter_menu_title_${key}" class="filter_menu_title">
<div class="filter_menu"> // <p>${key}</p>
<div class="filter_menu_title" tabindex=0> // </label>
<p>${key}</p> // <div class="filter_menu_drop">
</div> // `;
<div class="filter_menu_drop" tabindex=0> // for (value of filters[key]) {
`; // content += `
for (value of filters[key]) { // <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 += ` content += `
<p>${value._name}</p> <div class="filter_menu">
<div class="filter_menu_title" tabindex=0>
<p>${key}</p>
</div>
<div class="filter_menu_drop" tabindex=0>
`; `;
} for (value of filters[key]) {
content += ` content += `
<p>${value._name}</p>
`;
}
content += `
</div>
</div> </div>
</div> `;
`;
}); });
filters_div.innerHTML = content; filters_div.innerHTML = content;

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

@@ -14,7 +14,6 @@
#ljdp_map_filters { #ljdp_map_filters {
position: relative; position: relative;
border: 1px solid red;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
@@ -22,9 +21,37 @@
#ljdp_map_filters .filter_menu { #ljdp_map_filters .filter_menu {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
border: 1px solid blue; border: 1px solid #ba197a;
} }
/* **************************************
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 { #ljdp_map_filters .filter_menu input.filter_menu_title {
display: none; display: none;
@@ -32,57 +59,128 @@
#ljdp_map_filters .filter_menu label.filter_menu_title { #ljdp_map_filters .filter_menu label.filter_menu_title {
width: 100%; width: 100%;
border: 1px solid green;
}
*/
#ljdp_map_filters .filter_menu .filter_menu_title {
width: 100%;
cursor: pointer;
border: 1px solid green;
} }
#ljdp_map_filters .filter_menu .filter_menu_drop { #ljdp_map_filters .filter_menu .filter_menu_drop {
/*
display: none; display: none;
*/
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
top: 0%; 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; left: 0px;
margin: 0px; margin: 0px;
width: 100%; width: 100%;
max-height: 400px; max-height: 400px;
cursor: pointer; cursor: pointer;
border: 1px solid pink;
/* padding-top must be sufficient to hide the menu */
padding: 100px 0px 0px 0px;
height: 0px;
background-color: transparent;
overflow: hidden;
border: none;
/*
overflow: visible;
*/
}
/* background-color: transparent;
#ljdp_map_filters .filter_menu input.filter_menu_title:checked height: 100%;
~ .filter_menu_drop { top: 0%;
display: flex; overflow: hidden;
} }
*/
#ljdp_map_filters .filter_menu .filter_menu_drop:focus { #ljdp_map_filters .filter_menu .filter_menu_drop:focus {
top: 100%;
background-color: #ffffff; background-color: #ffffff;
overflow: scroll;
height: auto; height: auto;
padding: 10px 0px; top: 100%;
overflow: scroll;
border: 1px solid #ba197a;
}
#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 .filter_menu_drop p {
margin: 0px auto 0px 0px;
padding: 0px 10px; padding: 0px 10px;
width: 100%; width: 100%;
} }