Made checkbox logic sitewide available and applied it to other content adding modals in report aswell. [fixes SCI-487]

This commit is contained in:
Matej Zrimšek 2017-05-11 16:54:40 +02:00
parent ba693c65a8
commit 901558c733
3 changed files with 33 additions and 29 deletions

View file

@ -218,8 +218,9 @@ function initializeNewElement(newEl) {
// Open modal, set its title
addContentsModal.find(".modal-title").text(modalTitle);
// Display module contents
// Display module contents and add checkbox logic
addContentsModalBody.html(data.html);
addContentsModalBody.checkboxTreeLogic();
// Bind to the ajax events of the modal form in its body
$(ADD_CONTENTS_FORM_ID)

View file

@ -184,3 +184,34 @@ function initPageTutorialSteps(pageFirstStepN, pageLastStepN, nextPagePath,
});
}
}
/**
* Checkbox on/off logic. Just add 'checkbox-tree' class to a 'div' surrounding
* the checkboxes, represented with 'ul'.
*/
$.fn.checkboxTreeLogic = function() {
$('.checkbox-tree input:checkbox').change(function() {
// Update descendent checkboxes
var $checkbox = $(this);
var checkboxChecked = $checkbox.prop('checked');
var $childCheckboxes = $checkbox.closest('li').find('ul input:checkbox');
$childCheckboxes.each(function() {
$(this).prop('checked', checkboxChecked);
});
// Update ancestor checkboxes
// Loop until topmost checkbox is reached or until there's no parent
// checkbox
while ($checkbox.length !== 0 && !$checkbox.hasClass('checkbox-tree')) {
var $checkboxesContainer = $checkbox.closest('ul');
var $parentCheckbox = $checkboxesContainer.siblings()
.find('input:checkbox');
var $checkboxes = $checkboxesContainer.find('input:checkbox');
var $checkedCheckboxes = $checkboxes.filter(':checked');
$parentCheckbox.prop('checked',
$checkboxes.length === $checkedCheckboxes.length);
$checkbox = $parentCheckbox;
}
});
};

View file

@ -36,31 +36,3 @@
</div>
</div>
<% end %>
<script type="javascript">
function checkboxTree() {
$(".checkbox-tree input:checkbox").change(function() {
// Update descendent checkboxes
var $checkbox = $(this);
var checkboxChecked = $checkbox.prop("checked");
var $childCheckboxes = $checkbox.closest("li").find("ul input:checkbox");
$childCheckboxes.each(function() {
$(this).prop('checked', checkboxChecked);
});
// Update ancestor checkboxes
// Loop until top checkbox is reached or until parent checkbox isn't there
while ($checkbox.length !== 0 && !$checkbox.hasClass("checkbox-tree")) {
var $checkboxesContainer = $checkbox.closest("ul");
var $parentCheckbox = $checkboxesContainer.siblings().find("input:checkbox");
var $checkboxes = $checkboxesContainer.find("input:checkbox");
var $checkedCheckboxes = $checkboxes.filter(':checked');
$parentCheckbox.prop('checked',
$checkboxes.length == $checkedCheckboxes.length);
$checkbox = $parentCheckbox;
}
});
}
checkboxTree();
</script>