Skip to content

Add “select all” & “select none” option to checkboxes #835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mboynes wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Add “select all” & “select none” option to checkboxes #835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f55c15e
Add “select all” & “select none” to checkboxes
mboynes Apr 4, 2022
0569468
Fill in missing phpdoc
mboynes Apr 4, 2022
424b22f
phpcs fix
mboynes Apr 4, 2022
3785d87
Change select all/none buttons to a checkbox
mboynes Apr 5, 2022
43ae911
Update property name
mboynes Apr 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions css/fieldmanager.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -680,3 +680,10 @@ a.fm-delete:hover {
margin-bottom: 0;
}
}

.fm-bulk-actions {
border-bottom: 1px solid #dfdfdf;
margin-bottom: 10px;
max-width: 200px;
padding-bottom: 10px;
}
20 changes: 20 additions & 0 deletions js/fieldmanager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,26 @@ var fm_init = function () {
init_sortable();

$document.on( 'fm_activate_tab', init_sortable );

fm.init_bulk_checkboxes_actions = function() {
var $this = $( this );
var $bulk_toggle = $this.find( '.fm-bulk-action' );
var $checkboxes = $this.siblings().find( 'input:checkbox' );
var all_checked;
$bulk_toggle.change( function() {
var is_checked = $bulk_toggle.prop( 'checked' );
$checkboxes.prop( 'checked', is_checked );
all_checked = is_checked;
} );
$checkboxes.change( function() {
var is_checked = $( this ).prop( 'checked' );
if ( all_checked && !is_checked ) {
all_checked = false;
$bulk_toggle.prop( 'checked', false );
}
} );
};
$( '.fm-bulk-actions' ).each( fm.init_bulk_checkboxes_actions );
};

fmLoadModule( fm_init );
Expand Down
28 changes: 27 additions & 1 deletion php/class-fieldmanager-checkboxes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,13 @@ class Fieldmanager_Checkboxes extends Fieldmanager_Options {
*/
public $multiple = true;

/**
* Add a "select all" bulk action to the list of checkboxes.
*
* @var boolean
*/
public $bulk_actions = true;

/**
* Render form element.
*
Expand All @@ -37,12 +44,31 @@ class Fieldmanager_Checkboxes extends Fieldmanager_Options {
*/
public function form_element( $value = array() ) {
return sprintf(
'<div class="fm-checkbox-group" id="%s">%s</div>',
'<div class="fm-checkbox-group" id="%s">%s%s</div>',
esc_attr( $this->get_element_id() ),
$this->bulk_actions ? $this->add_bulk_actions() : '',
$this->form_data_elements( $value )
);
}

/**
* Get the HTML for the bulk actions.
*
* @return string
*/
public function add_bulk_actions() {
return sprintf(
'<div class="fm-bulk-actions">
<label for="%1$s">
<input type="checkbox" id="%1$s" class="fm-bulk-action" />
%2$s
</label>
</div>' . "\n",
esc_attr( $this->get_element_id() . '-bulk-action' ),
esc_html__( 'Select all', 'fieldmanager' )
);
}

/**
* Override function to allow all boxes to be checked by default.
*
Expand Down