Created
August 13, 2016 16:38
-
-
Save delowardev/5f20eec2fd5b11ec2eabe1b7e3913fb9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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