[Back] /*
* Copyright (c) 2023 LatePoint LLC. All rights reserved.
*/
(function($) {
jQuery.fn.lateCheckbox = function() {
function applyChanges(id){
let $wrapper = jQuery('.latecheckbox-w[data-latecheckbox-id="' + id + '"]');
$wrapper.find('.latecheckbox-options-w').html(jQuery('.latecheckbox-options-w[data-latecheckbox-id="' + id + '"]').html());
let $options = $wrapper.find('.latecheckbox-options');
let total_checked = $options.find('.latecheckbox-option input[type="checkbox"]:checked').length;
let total_available = $options.find('.latecheckbox-option input[type="checkbox"]').length;
if(total_checked < total_available){
$wrapper.find('.latecheckbox .filter-value').text(total_checked);
}else{
$wrapper.find('.latecheckbox .filter-value').text('All');
}
// set indeterminate, since it can only be set via JS
$wrapper.find('input[type="checkbox"][indeterminate="indeterminate"]').prop('indeterminate', true).removeAttr('indeterminate');
$wrapper.find('.latecheckbox').trigger('change');
}
this.each( function() {
var $latecheckbox_wrapper = jQuery(this).closest('.latecheckbox-w');
$latecheckbox_wrapper.attr('data-latecheckbox-id', 'latecheckbox-' + latepoint_random_generator());
$latecheckbox_wrapper.on('click', '.latecheckbox', function(){
let $latecheckbox = jQuery(this);
jQuery('body > .latecheckbox-options-w').remove();
if(jQuery(this).hasClass('is-active')){
jQuery(this).removeClass('is-active');
}else{
jQuery('.latecheckbox.is-active').removeClass('is-active');
jQuery(this).addClass('is-active');
let position = jQuery(this).position();
let left = position.left;
let $options_wrapper = $latecheckbox_wrapper.find('.latecheckbox-options-w');
let $options_wrapper_clone = $options_wrapper.clone();
$options_wrapper_clone.attr('data-latecheckbox-id', jQuery(this).closest('.latecheckbox-w').attr('data-latecheckbox-id')).appendTo('body');
if(true){
// todo add ability to change position
left = left + jQuery(this).outerWidth() - $options_wrapper_clone.outerWidth();
}
$options_wrapper_clone.css({"top": position.top + jQuery(this).outerHeight() +5 , "left": left});
if($options_wrapper_clone.find('.latecheckbox-filter-input').length) $options_wrapper_clone.find('.latecheckbox-filter-input').trigger('focus');
$options_wrapper_clone.on('change', '.latecheckbox-all-check', function(){
if(jQuery(this).is(':checked')){
jQuery(this).attr('checked', 'checked').removeAttr('indeterminate');
jQuery(this).closest('.latecheckbox-options-w').find('.latecheckbox-options input[type="checkbox"]').prop('checked', true).prop('indeterminate', false).attr('checked', 'checked');
}else{
jQuery(this).removeAttr('checked').removeAttr('indeterminate');
jQuery(this).closest('.latecheckbox-options-w').find('.latecheckbox-options input[type="checkbox"]').prop('checked', false).prop('indeterminate', false).removeAttr('checked');
}
applyChanges(jQuery(this).closest('.latecheckbox-options-w').attr('data-latecheckbox-id'));
});
$options_wrapper_clone.on('change', '.latecheckbox-group-check', function(){
if(jQuery(this).is(':checked')){
jQuery(this).attr('checked', 'checked').removeAttr('indeterminate');
jQuery(this).closest('.latecheckbox-group').find('.latecheckbox-group-options input[type="checkbox"]').prop('checked', true).attr('checked', 'checked');
}else{
jQuery(this).removeAttr('checked').removeAttr('indeterminate');
jQuery(this).closest('.latecheckbox-group').find('.latecheckbox-group-options input[type="checkbox"]').prop('checked', false).removeAttr('checked');
}
applyChanges(jQuery(this).closest('.latecheckbox-options-w').attr('data-latecheckbox-id'));
});
$options_wrapper_clone.on('keyup', '.latecheckbox-filter-input', function(){
let q = jQuery(this).val().toLowerCase();
if(q == ''){
jQuery(this).closest('.latecheckbox-options-w').find('.latecheckbox-option.hidden').removeClass('hidden');
}else{
jQuery(this).closest('.latecheckbox-options-w').find('.latecheckbox-option').each(function(){
let text = jQuery(this).text().toLowerCase();
(text.indexOf(q) >= 0) ? jQuery(this).removeClass('hidden') : jQuery(this).addClass('hidden');
});
}
});
$options_wrapper_clone.on('change', '.latecheckbox-option input[type="checkbox"]', function(){
if(jQuery(this).is(':checked')){
jQuery(this).attr('checked', 'checked');
}else{
jQuery(this).removeAttr('checked');
}
// group checkbox
if(jQuery(this).closest('.latecheckbox-group-options').length){
let $group = jQuery(this).closest('.latecheckbox-group');
let checked_count = $group.find('.latecheckbox-option input:checked').length;
let unchecked_count = $group.find('.latecheckbox-option input:not(:checked)').length;
if(checked_count && unchecked_count){
$group.find('.latecheckbox-group-check').prop('indeterminate', true).attr('indeterminate', 'indeterminate');
$group.find('.latecheckbox-group-check').prop('checked', false).removeAttr('checked');
}else{
$group.find('.latecheckbox-group-check').prop('indeterminate', false).removeAttr('indeterminate');
if(!checked_count){
$group.find('.latecheckbox-group-check').prop('checked', false).removeAttr('checked');
}
if(!unchecked_count){
$group.find('.latecheckbox-group-check').prop('checked', true).attr('checked', 'checked');
}
}
}
let checked_count = $options_wrapper_clone.find('.latecheckbox-option input:checked').length;
let unchecked_count = $options_wrapper_clone.find('.latecheckbox-option input:not(:checked)').length;
if(checked_count && unchecked_count){
$options_wrapper_clone.find('.latecheckbox-all-check').prop('indeterminate', true).attr('indeterminate', 'indeterminate');
$options_wrapper_clone.find('.latecheckbox-all-check').prop('checked', false).removeAttr('checked');
}else{
$options_wrapper_clone.find('.latecheckbox-all-check').prop('indeterminate', false).removeAttr('indeterminate');
if(!checked_count){
$options_wrapper_clone.find('.latecheckbox-all-check').prop('checked', false).removeAttr('checked');
}
if(!unchecked_count){
$options_wrapper_clone.find('.latecheckbox-all-check').prop('checked', true).attr('checked', 'checked');
}
}
applyChanges(jQuery(this).closest('.latecheckbox-options-w').attr('data-latecheckbox-id'));
});
}
return false;
});
});
}
}(jQuery));