js_tree_element_improvement
#161
Merged
mpeltriaux
merged 4 commits from js_tree_element_improvement
into master
2 years ago
@ -0,0 +1,25 @@
|
||||
{% load l10n fontawesome_5 %}
|
||||
{% for code in codes %}
|
||||
<div class="ml-4 tree-element">
|
||||
<label class="tree-label collapsed" 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="radio" value="{{code.pk|unlocalize}}" {% if code.pk|unlocalize in widget.value %}checked{% endif %}/>
|
||||
{% else %}
|
||||
<span class="collapse-icn">
|
||||
{% fa5_icon 'angle-down' %}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if code.short_name %}
|
||||
({{code.short_name}})
|
||||
{% 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/tree/radio/radio-tree-select-content.html' %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
@ -0,0 +1,62 @@
|
||||
{% load i18n %}
|
||||
|
||||
<div class="ml-4 mb-4">
|
||||
<input id="tree-search-input" class="form-control" type="text" placeholder="{% trans 'Search' %}"/>
|
||||
</div>
|
||||
<div id="tree-root">
|
||||
{% include 'konova/widgets/tree/radio/radio-tree-select-content.html' %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSelectedCssClass(element){
|
||||
element = $(element);
|
||||
var cssClass = "badge rlp-r"
|
||||
|
||||
// Find all already tagged input elements and reset them to be untagged
|
||||
var allTaggedInputs = $("#tree-root").find(".badge.rlp-r")
|
||||
allTaggedInputs.removeClass(cssClass)
|
||||
|
||||
// Find all parents of selected element
|
||||
var parentElements = element.parents(".tree-element-children")
|
||||
|
||||
// Tag parents of element
|
||||
var parentLabels = parentElements.siblings(".tree-label");
|
||||
parentLabels.addClass(cssClass);
|
||||
}
|
||||
|
||||
function changeHandler(event){
|
||||
toggleSelectedCssClass(this);
|
||||
}
|
||||
|
||||
function searchInputHandler(event){
|
||||
var elem = $(this);
|
||||
var val = elem.val()
|
||||
var allTreeElements = $(".tree-element")
|
||||
var allTreeElementsContain = $(".tree-element").filter(function(){
|
||||
var reg = new RegExp(val, "i");
|
||||
return reg.test($(this).text());
|
||||
}
|
||||
);
|
||||
if(val.length > 0){
|
||||
// Hide everything
|
||||
allTreeElements.hide()
|
||||
// Now show again everything matching the query
|
||||
allTreeElementsContain.show()
|
||||
}else{
|
||||
// Show everything if no query exists
|
||||
allTreeElements.show()
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener on search input
|
||||
$("#tree-search-input").keyup(searchInputHandler)
|
||||
|
||||
// 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>
|
Loading…
Reference in New Issue