wip filters selection works upside down
+ css for checkbox disable
This commit is contained in:
@@ -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) {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user