wip filters selection works upside down

+ css for checkbox disable
This commit is contained in:
lenovo
2022-11-16 14:11:07 +01:00
parent 1da7d39d66
commit cd22796539
3 changed files with 64 additions and 22 deletions

View File

@@ -129,27 +129,40 @@ function redraw_clusters(indexes) {
- it will remove class "disabled_by_country" - it will remove class "disabled_by_country"
- if it's the last class containing "disabled_by_" it will be re-enabled - if it's the last class containing "disabled_by_" it will be re-enabled
see css attribute selectors : https://www.w3schools.com/css/css_attribute_selectors.asp see css attribute selectors : https://www.w3schools.com/css/css_attribute_selectors.asp
exemple:
let items = document.getElementsByClassName("menu_item");
for (let item of items) {
let item_classes = item.classList;
item_classes.toggle("disabled_by_city");
if (item_classes[0] === "") {
}
}
*/ */
function toggle_classes(menu_from, menu_name, menu_item ) {
function toggle_one_class(menu_from, menu_name, menu_item) {
/*
*/
console.log("\n" + menu_name + " from " + menu_from + ":"); console.log("\n" + menu_name + " from " + menu_from + ":");
console.log("- " + menu_item); console.log("- " + menu_item);
let html_id = `filter_${menu_name}_${menu_item}`;
let html_class = `disabled_by_${menu_from}`;
let item = document.getElementById(html_id);
let item_classes = item.classList;
item_classes.toggle(html_class);
}
function toggle_all_classes() {
/*
*/
// loop through all items elements of menu in html, and toggle "disabled" if there is or not a class "disabled_by_*"
// get all elements in all menus
let items = document.getElementsByClassName("filter_menu_item");
for (let item of items) {
let item_classes = item.classList;
let item_classes_value = item_classes.value;
if ( item_classes_value.includes("disabled_by_") )
item.setAttribute('disabled', '');
else
item.removeAttribute('disabled');
}
} }
function disable_menus(menu_name_ori, menu_item_ori) { function disable_menus(menu_name_ori, menu_item_ori) {
console.log("menu_name_ori:");
console.log(menu_name_ori);
console.log("menu_item_ori:");
console.log(menu_item_ori);
let keys = Object.keys(menu_item_ori); let keys = Object.keys(menu_item_ori);
// loop through list of other menu_items available for this menu_item // loop through list of other menu_items available for this menu_item
// loop though menu names (pays, categories, mode) // loop though menu names (pays, categories, mode)
@@ -160,10 +173,13 @@ function disable_menus(menu_name_ori, menu_item_ori) {
continue; continue;
// loop through items in menu names (ex. for "pays" : france, chili, cuba) // loop through items in menu names (ex. for "pays" : france, chili, cuba)
for (let item of menu_item_ori[menu_name]) { for (let item of menu_item_ori[menu_name]) {
toggle_classes( menu_name_ori, menu_name, item.replace(/ /g, "_") ); toggle_one_class( menu_name_ori, menu_name, item.replace(/ /g, "_") );
} }
} }
toggle_all_classes();
/*
*/
} }
function filter_show_only(element, menu_name) { function filter_show_only(element, menu_name) {

View File

@@ -19,15 +19,22 @@ function mp_filter_drop_down($key, &$filter) {
> >
<option <option
selected selected
class="filter_menu_item"
data-menu_index="menu_name" data-menu_index="menu_name"
> >
'.$key.' '.$key.'
</option> </option>
'; ';
foreach ($filter as $key_filter => $value) { foreach ($filter as $key_filter => $value) {
$id = "filter_"
. $key
. "_"
. str_replace( " ", "_", $value->_name)
;
$content .= ' $content .= '
<option <option
id="filter_'.str_replace( " ", "_", $value->_name).'" id="'.$id.'"
class="filter_menu_item"
data-menu_index="'.$key_filter.'" data-menu_index="'.$key_filter.'"
> >
'.$value->_name.' '.$value->_name.'
@@ -48,18 +55,23 @@ function mp_filter_buttons($key, &$filter) {
*/ */
$content = ''; $content = '';
foreach ($filter as $key_filter => $value) { foreach ($filter as $key_filter => $value) {
$id = "filter_"
. $key
. "_"
. str_replace( " ", "_", $value->_name)
;
$content .= ' $content .= '
<input <input
type="checkbox" type="checkbox"
form="ljdp_form" form="ljdp_form"
id="filter_'.str_replace( " ", "_", $value->_name).'" id="'.$id.'"
class="filter_menu_checkbox" class="filter_menu_checkbox filter_menu_item"
onclick="filter_show_only(this, \''.$key.'\')" onclick="filter_show_only(this, \''.$key.'\')"
style="display:none;" style="display:none;"
data-menu_index="'.$key_filter.'", data-menu_index="'.$key_filter.'",
> >
<label <label
for="filter_'.str_replace( " ", "_", $value->_name).'" for="'.$id.'"
class="filter_menu filter_menu_checkbox" class="filter_menu filter_menu_checkbox"
> >
<p>'.$value->_name.'</p> <p>'.$value->_name.'</p>

View File

@@ -88,7 +88,8 @@
height: var(--size); height: var(--size);
} }
#ljdp_map_filters input.filter_menu_checkbox:checked + label.filter_menu_checkbox p::before { #ljdp_map_filters input.filter_menu_checkbox:checked
+ label.filter_menu_checkbox p::before {
/* /*
background-color: #ba197a; background-color: #ba197a;
background-color: #ca1c84; background-color: #ca1c84;
@@ -108,6 +109,19 @@
background-color: #ccc; background-color: #ccc;
} }
#ljdp_map_filters input.filter_menu_checkbox:disabled
+ label.filter_menu_checkbox {
cursor: default;
}
#ljdp_map_filters input.filter_menu_checkbox:disabled
+ label.filter_menu_checkbox p::before {
border-color: #ccc;
background-color: #ccc;
}
#ljdp_map_filters input.filter_menu_checkbox:disabled
+ label.filter_menu_checkbox p {
color: #ccc;
}