Skip to content

Instantly share code, notes, and snippets.

@delowardev
Created August 13, 2016 16:38
Show Gist options
  • Save delowardev/5f20eec2fd5b11ec2eabe1b7e3913fb9 to your computer and use it in GitHub Desktop.
Save delowardev/5f20eec2fd5b11ec2eabe1b7e3913fb9 to your computer and use it in GitHub Desktop.
<?php
/**
* Set a max limit on the number of times
* a repeating group can be added.
*/
/**
* Setup the group field metabox
*/
function js_limited_group_setup() {
/**
* Repeatable Field Groups
*/
$cmb = new_cmb2_box( array(
'id' => 'field_group_test',
'title' => __( 'Repeating Field Group', 'cmb2' ),
'object_types' => array( 'page', ),
'rows_limit' => 3, // custom attribute to use in our JS
) );
$group_id = $cmb->add_field( array(
'id' => '_cmb2_repeat_group',
'type' => 'group',
'description' => __( 'Generates reusable form entries', 'cmb2' ),
'options' => array(
'group_title' => __( 'Entry {#}', 'cmb2' ), // {#} gets replaced by row number
'add_button' => __( 'Add Another Entry', 'cmb2' ),
'remove_button' => __( 'Remove Entry', 'cmb2' ),
'sortable' => true, // beta
),
) );
$cmb->add_group_field( $group_id, array(
'name' => 'Entry Title',
'id' => 'title',
'type' => 'text',
) );
$cmb->add_group_field( $group_id, array(
'name' => 'Description',
'desc' => 'Write a short description for this entry',
'id' => 'description',
'type' => 'textarea_small',
) );
}
add_action( 'cmb2_admin_init', 'js_limited_group_setup', 9999 );
function js_limit_group_repeat( $post_id, $cmb ) {
// Grab the custom attribute to determine the limit
$limit = absint( $cmb->prop( 'rows_limit' ) );
$limit = $limit ? $limit : 0;
?>
<script type="text/javascript">
jQuery(document).ready(function($){
// Only allow 3 groups
var limit = <?php echo $limit; ?>;
var fieldGroupId = '_cmb2_repeat_group'; // This should match the ID of your group field.
var $fieldGroupTable = $( document.getElementById( fieldGroupId + '_repeat' ) );
var countRows = function() {
return $fieldGroupTable.find( '> .cmb-row.cmb-repeatable-grouping' ).length;
};
var disableAdder = function() {
$fieldGroupTable.find('.cmb-add-group-row.button').prop( 'disabled', true );
};
var enableAdder = function() {
$fieldGroupTable.find('.cmb-add-group-row.button').prop( 'disabled', false );
};
$fieldGroupTable
.on( 'cmb2_add_row', function() {
if ( countRows() >= limit ) {
disableAdder();
}
})
.on( 'cmb2_remove_row', function() {
if ( countRows() < limit ) {
enableAdder();
}
});
});
</script>
<?php
}
// Replace `field_group_test` with the ID of the CMB2 meta box in question e.g. this
// should match the value of $cmb->id in the above example.
add_action( 'cmb2_after_post_form_field_group_test', 'js_limit_group_repeat', 10, 2 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment