mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-01-01 05:02:50 +08:00
Made checkbox logic sitewide available and applied it to other content adding modals in report aswell. [fixes SCI-487]
This commit is contained in:
parent
ba693c65a8
commit
901558c733
3 changed files with 33 additions and 29 deletions
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue