IT-Naturschutz/konova
7
0
Fork 0
Code Issues 6 Pull Requests 1 Actions Projects Releases 37 Wiki Activity

#112 TreeWidget JS

Browse Source 
* adds visual support on (de-)selecting checkboxes
* adds same support on initialization of checked checkboxes e.g. on edit forms
This commit is contained in:
mpeltriaux 2022-02-15 13:23:15 +01:00
parent b34aa44d44
commit 30d1e4033d
2 changed files with 62 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
konova/templates/konova/widgets/checkbox-tree-select-content.html Normal file
View File

@ -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 %}

63
konova/templates/konova/widgets/checkbox-tree-select.html
View File

@ -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>
<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>