From 30d1e4033dc7e66490161b7f159811b284a947ac Mon Sep 17 00:00:00 2001 From: mpeltriaux <michel.peltriaux@sgdnord.rlp.de> Date: Tue, 15 Feb 2022 13:23:15 +0100 Subject: [PATCH] #112 TreeWidget JS * adds visual support on (de-)selecting checkboxes * adds same support on initialization of checked checkboxes e.g. on edit forms --- .../widgets/checkbox-tree-select-content.html | 21 +++++++ .../konova/widgets/checkbox-tree-select.html | 63 ++++++++++++------- 2 files changed, 62 insertions(+), 22 deletions(-) create mode 100644 konova/templates/konova/widgets/checkbox-tree-select-content.html diff --git a/konova/templates/konova/widgets/checkbox-tree-select-content.html b/konova/templates/konova/widgets/checkbox-tree-select-content.html new file mode 100644 index 00000000..9bf57253 --- /dev/null +++ b/konova/templates/konova/widgets/checkbox-tree-select-content.html @@ -0,0 +1,21 @@ +{% load l10n fontawesome_5 %} + +{% for code in codes %} +<div class="ml-4 tree-element"> + <label class="tree-label" role="{% if not code.is_leaf%}button{% endif %}" for="input_{{code.pk|unlocalize}}" id="{{code.pk|unlocalize}}" data-toggle="collapse" data-target="#children_{{code.pk|unlocalize}}" aria-expanded="true" aria-controls="children_{{code.pk|unlocalize}}"> + {% if code.is_leaf%} + <input class="tree-input" id="input_{{code.pk|unlocalize}}" name="{{ widget.name }}" type="checkbox" value="{{code.pk|unlocalize}}" {% if code.pk|unlocalize in widget.value %}checked{% endif %}/> + {% else %} + {% fa5_icon 'angle-right' %} + {% endif %} + {{code.long_name}} + </label> + {% if not code.is_leaf %} + <div id="children_{{code.pk|unlocalize}}" data-toggle="collapse" class="collapse tree-element-children"> + {% with code.children as codes %} + {% include 'konova/widgets/checkbox-tree-select-content.html' %} + {% endwith %} + </div> + {% endif %} +</div> +{% endfor %} \ No newline at end of file diff --git a/konova/templates/konova/widgets/checkbox-tree-select.html b/konova/templates/konova/widgets/checkbox-tree-select.html index 5b40d3f1..ddcc60c0 100644 --- a/konova/templates/konova/widgets/checkbox-tree-select.html +++ b/konova/templates/konova/widgets/checkbox-tree-select.html @@ -1,23 +1,42 @@ -{% load l10n fontawesome_5 %} +<div id="tree-root"> + {% include 'konova/widgets/checkbox-tree-select-content.html' %} +</div> -<div> - {% for code in codes %} - <div class="ml-4"> - <label role="{% if not code.is_leaf%}button{% endif %}" for="input_{{code.pk|unlocalize}}" id="{{code.pk|unlocalize}}" data-toggle="collapse" data-target="#children_{{code.pk|unlocalize}}" aria-expanded="true" aria-controls="children_{{code.pk|unlocalize}}"> - {% if code.is_leaf%} - <input id="input_{{code.pk|unlocalize}}" name="{{ widget.name }}" type="checkbox" value="{{code.pk|unlocalize}}" {% if code.pk|unlocalize in widget.value %}checked{% endif %}/> - {% else %} - {% fa5_icon 'angle-right' %} - {% endif %} - {{code.long_name}} - </label> - {% if not code.is_leaf %} - <div id="children_{{code.pk|unlocalize}}" data-toggle="collapse" class="collapse"> - {% with code.children as codes %} - {% include 'konova/widgets/checkbox-tree-select.html' %} - {% endwith %} - </div> - {% endif %} - </div> - {% endfor %} -</div> \ No newline at end of file +<script> + function toggleSelectedCssClass(element){ + element = $(element); + var cssClass = "badge rlp-r" + + var directParent = element.closest(".tree-element-children") + var root = element.parents(".tree-element-children") + + var otherCheckedInputsOfParent = directParent.find('.tree-input:checked'); + var otherCheckedInputsOfRoot = root.find('.tree-input:checked'); + + if(otherCheckedInputsOfParent.length == 0){ + var parentLabel = directParent.siblings(".tree-label"); + parentLabel.removeClass(cssClass) + if(otherCheckedInputsOfRoot.length == 0){ + var rootLabel = root.siblings(".tree-label") + rootLabel.removeClass(cssClass) + } + }else{ + var rootAndParentLabel = root.siblings(".tree-label"); + rootAndParentLabel.addClass(cssClass); + } + + } + + function changeHandler(event){ + toggleSelectedCssClass(this); + } + + // Add event listener on changed checkboxes + $(".tree-input").change(changeHandler); + + // initialize all pre-checked checkboxes (e.g. on an edit form) + var preCheckedElements = $(".tree-input:checked"); + preCheckedElements.each(function (index, element){ + toggleSelectedCssClass(element); + }) +</script> \ No newline at end of file