CMB2 Dynamic Group Titles

Used in conjunction with CMB2. This trick allows the display of one of the text input to update the titles. Allows details glance on collapsed repeater fields.

Code Markup
function cmb_group_mod() {
	add_action( is_admin() ? 'admin_footer' : 'wp_footer', 'dynamic_text_to_group_headers' );
}
function dynamic_text_to_group_headers() {
		?>
	
	jQuery( function( $ ) {
		var $box = $( document.getElementById( '_prefix_your_group' ) );
		var replaceTitles = function() {
			$box.find( '.cmb-group-title' ).each( function() {
				var $this = $( this );
				var txt = $this.next().find( '[id$="the_field_to_use"]' ).val();
				var rowindex;
				if ( ! txt ) {
					txt = $box.find( '[data-grouptitle]' ).data( 'grouptitle' );
					if ( txt ) {
						rowindex = $this.parents( '[data-iterator]' ).data( 'iterator' );
						txt = txt.replace( '{#}', ( rowindex + 1 ) );
					}
				}
				if ( txt ) {
					$this.text( txt );
				}
			});
		};
		var replaceOnKeyUp = function( evt ) {
			var $this = $( evt.target );
			var id = 'the_field_to_use';
			if ( evt.target.id.indexOf(id, evt.target.id.length - id.length) !== -1 ) {
				$this.parents( '.cmb-row.cmb-repeatable-grouping' ).find( '.cmb-group-title' ).text( $this.val() );
			}
		};
		$box
			.on( 'cmb2_add_row cmb2_shift_rows_complete', replaceTitles )
			.on( 'keyup', replaceOnKeyUp );
		replaceTitles();
	});
	
<?php }

Be Smarter.
Mind Maps