admin
1 week ago
front
1 day ago
actions.js
1 day ago
latecheckbox.js
1 year ago
lateselect.js
1 year ago
notifications.js
1 year ago
shared.js
1 year ago
time.js
1 year ago
latecheckbox.js
133 lines
| 1 | /* |
| 2 | * Copyright (c) 2023 LatePoint LLC. All rights reserved. |
| 3 | */ |
| 4 | |
| 5 | (function($) { |
| 6 | |
| 7 | jQuery.fn.lateCheckbox = function() { |
| 8 | |
| 9 | function applyChanges(id){ |
| 10 | let $wrapper = jQuery('.latecheckbox-w[data-latecheckbox-id="' + id + '"]'); |
| 11 | $wrapper.find('.latecheckbox-options-w').html(jQuery('.latecheckbox-options-w[data-latecheckbox-id="' + id + '"]').html()); |
| 12 | |
| 13 | let $options = $wrapper.find('.latecheckbox-options'); |
| 14 | let total_checked = $options.find('.latecheckbox-option input[type="checkbox"]:checked').length; |
| 15 | let total_available = $options.find('.latecheckbox-option input[type="checkbox"]').length; |
| 16 | if(total_checked < total_available){ |
| 17 | $wrapper.find('.latecheckbox .filter-value').text(total_checked); |
| 18 | }else{ |
| 19 | $wrapper.find('.latecheckbox .filter-value').text('All'); |
| 20 | } |
| 21 | // set indeterminate, since it can only be set via JS |
| 22 | $wrapper.find('input[type="checkbox"][indeterminate="indeterminate"]').prop('indeterminate', true).removeAttr('indeterminate'); |
| 23 | |
| 24 | $wrapper.find('.latecheckbox').trigger('change'); |
| 25 | } |
| 26 | |
| 27 | this.each( function() { |
| 28 | var $latecheckbox_wrapper = jQuery(this).closest('.latecheckbox-w'); |
| 29 | $latecheckbox_wrapper.attr('data-latecheckbox-id', 'latecheckbox-' + latepoint_random_generator()); |
| 30 | |
| 31 | $latecheckbox_wrapper.on('click', '.latecheckbox', function(){ |
| 32 | let $latecheckbox = jQuery(this); |
| 33 | jQuery('body > .latecheckbox-options-w').remove(); |
| 34 | if(jQuery(this).hasClass('is-active')){ |
| 35 | jQuery(this).removeClass('is-active'); |
| 36 | }else{ |
| 37 | jQuery('.latecheckbox.is-active').removeClass('is-active'); |
| 38 | jQuery(this).addClass('is-active'); |
| 39 | let position = jQuery(this).position(); |
| 40 | let left = position.left; |
| 41 | let $options_wrapper = $latecheckbox_wrapper.find('.latecheckbox-options-w'); |
| 42 | let $options_wrapper_clone = $options_wrapper.clone(); |
| 43 | $options_wrapper_clone.attr('data-latecheckbox-id', jQuery(this).closest('.latecheckbox-w').attr('data-latecheckbox-id')).appendTo('body'); |
| 44 | if(true){ |
| 45 | // todo add ability to change position |
| 46 | left = left + jQuery(this).outerWidth() - $options_wrapper_clone.outerWidth(); |
| 47 | } |
| 48 | $options_wrapper_clone.css({"top": position.top + jQuery(this).outerHeight() +5 , "left": left}); |
| 49 | if($options_wrapper_clone.find('.latecheckbox-filter-input').length) $options_wrapper_clone.find('.latecheckbox-filter-input').trigger('focus'); |
| 50 | |
| 51 | $options_wrapper_clone.on('change', '.latecheckbox-all-check', function(){ |
| 52 | if(jQuery(this).is(':checked')){ |
| 53 | jQuery(this).attr('checked', 'checked').removeAttr('indeterminate'); |
| 54 | jQuery(this).closest('.latecheckbox-options-w').find('.latecheckbox-options input[type="checkbox"]').prop('checked', true).prop('indeterminate', false).attr('checked', 'checked'); |
| 55 | }else{ |
| 56 | jQuery(this).removeAttr('checked').removeAttr('indeterminate'); |
| 57 | jQuery(this).closest('.latecheckbox-options-w').find('.latecheckbox-options input[type="checkbox"]').prop('checked', false).prop('indeterminate', false).removeAttr('checked'); |
| 58 | } |
| 59 | applyChanges(jQuery(this).closest('.latecheckbox-options-w').attr('data-latecheckbox-id')); |
| 60 | }); |
| 61 | $options_wrapper_clone.on('change', '.latecheckbox-group-check', function(){ |
| 62 | if(jQuery(this).is(':checked')){ |
| 63 | jQuery(this).attr('checked', 'checked').removeAttr('indeterminate'); |
| 64 | jQuery(this).closest('.latecheckbox-group').find('.latecheckbox-group-options input[type="checkbox"]').prop('checked', true).attr('checked', 'checked'); |
| 65 | }else{ |
| 66 | jQuery(this).removeAttr('checked').removeAttr('indeterminate'); |
| 67 | jQuery(this).closest('.latecheckbox-group').find('.latecheckbox-group-options input[type="checkbox"]').prop('checked', false).removeAttr('checked'); |
| 68 | } |
| 69 | applyChanges(jQuery(this).closest('.latecheckbox-options-w').attr('data-latecheckbox-id')); |
| 70 | }); |
| 71 | |
| 72 | $options_wrapper_clone.on('keyup', '.latecheckbox-filter-input', function(){ |
| 73 | let q = jQuery(this).val().toLowerCase(); |
| 74 | if(q == ''){ |
| 75 | jQuery(this).closest('.latecheckbox-options-w').find('.latecheckbox-option.hidden').removeClass('hidden'); |
| 76 | }else{ |
| 77 | jQuery(this).closest('.latecheckbox-options-w').find('.latecheckbox-option').each(function(){ |
| 78 | let text = jQuery(this).text().toLowerCase(); |
| 79 | (text.indexOf(q) >= 0) ? jQuery(this).removeClass('hidden') : jQuery(this).addClass('hidden'); |
| 80 | }); |
| 81 | } |
| 82 | }); |
| 83 | |
| 84 | $options_wrapper_clone.on('change', '.latecheckbox-option input[type="checkbox"]', function(){ |
| 85 | if(jQuery(this).is(':checked')){ |
| 86 | jQuery(this).attr('checked', 'checked'); |
| 87 | }else{ |
| 88 | jQuery(this).removeAttr('checked'); |
| 89 | } |
| 90 | |
| 91 | // group checkbox |
| 92 | if(jQuery(this).closest('.latecheckbox-group-options').length){ |
| 93 | let $group = jQuery(this).closest('.latecheckbox-group'); |
| 94 | let checked_count = $group.find('.latecheckbox-option input:checked').length; |
| 95 | let unchecked_count = $group.find('.latecheckbox-option input:not(:checked)').length; |
| 96 | |
| 97 | if(checked_count && unchecked_count){ |
| 98 | $group.find('.latecheckbox-group-check').prop('indeterminate', true).attr('indeterminate', 'indeterminate'); |
| 99 | $group.find('.latecheckbox-group-check').prop('checked', false).removeAttr('checked'); |
| 100 | }else{ |
| 101 | $group.find('.latecheckbox-group-check').prop('indeterminate', false).removeAttr('indeterminate'); |
| 102 | if(!checked_count){ |
| 103 | $group.find('.latecheckbox-group-check').prop('checked', false).removeAttr('checked'); |
| 104 | } |
| 105 | if(!unchecked_count){ |
| 106 | $group.find('.latecheckbox-group-check').prop('checked', true).attr('checked', 'checked'); |
| 107 | } |
| 108 | } |
| 109 | } |
| 110 | let checked_count = $options_wrapper_clone.find('.latecheckbox-option input:checked').length; |
| 111 | let unchecked_count = $options_wrapper_clone.find('.latecheckbox-option input:not(:checked)').length; |
| 112 | |
| 113 | if(checked_count && unchecked_count){ |
| 114 | $options_wrapper_clone.find('.latecheckbox-all-check').prop('indeterminate', true).attr('indeterminate', 'indeterminate'); |
| 115 | $options_wrapper_clone.find('.latecheckbox-all-check').prop('checked', false).removeAttr('checked'); |
| 116 | }else{ |
| 117 | $options_wrapper_clone.find('.latecheckbox-all-check').prop('indeterminate', false).removeAttr('indeterminate'); |
| 118 | if(!checked_count){ |
| 119 | $options_wrapper_clone.find('.latecheckbox-all-check').prop('checked', false).removeAttr('checked'); |
| 120 | } |
| 121 | if(!unchecked_count){ |
| 122 | $options_wrapper_clone.find('.latecheckbox-all-check').prop('checked', true).attr('checked', 'checked'); |
| 123 | } |
| 124 | } |
| 125 | applyChanges(jQuery(this).closest('.latecheckbox-options-w').attr('data-latecheckbox-id')); |
| 126 | }); |
| 127 | } |
| 128 | return false; |
| 129 | }); |
| 130 | |
| 131 | }); |
| 132 | } |
| 133 | }(jQuery)); |