WP Customizer live preview borders

customizer-live-preview.js

/**
 * Theme Customizer enhancements for a better user experience.
 *
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 * $deselector to exclude elements with var
 */
 
 function osq_classes_live_update( id, classes, selector, deselector, prefix ) {
	classes = typeof classes !== 'undefined' ? classes : '';
	prefix = typeof prefix !== 'undefined' ? prefix : '';
	wp.customize( 'osq_settings[' + id + ']',
	function ( value ) {
		value.bind( function ( newval ) {
			jQuery.each( classes, function ( i, v ) {
				jQuery( selector ).not( deselector ).removeClass( prefix + v );
			} );
			jQuery( selector ).not( deselector ).addClass( prefix + newval );
		} );
	});
}

function osq_borders_live_update( id, id2, selector, selector2 ) {
	wp.customize( 'osq_settings[' + id + ']', function ( value ) {
		value.bind( function ( newval ) {
			if ( selector === newval ) {
				wp.customize( 'osq_settings[' + id2 + ']', function ( value ) {
					value.bind( function ( newval ) {
						if ( newval ) {
							jQuery( selector2 )[0].style.setProperty( 'border-color', newval, 'important' );
						}
					} );
				} );
			} else {
				wp.customize( 'osq_settings[' + id2 + ']', function ( value ) {
					jQuery( selector2 )[0].style.removeProperty( 'border-color' );
				} );
			}
		} );
	} );
}

( function ( $ ) {

/* Usage */

/* these are some Bootstrap border classes we apply to the avatar - notice last choice is border-user, if that class
is selected then we move on to the next function */
osq_classes_live_update( 'avatar_bdr_color', ['border-dark', 'border-light', 'border-white', 'border-info', 'border-primary', 'border-secondary', 'border-success', 'border-danger', 'border-warning', 'border-user'], '.comment-avatar img.avatar' );

/* lets recheck, if id is border-user, then id2 targets the avatar class. */ 
osq_borders_live_update( 'avatar_bdr_color', 'avatar_user_bdr_color', 'border-user', '.comment-avatar img.avatar' );




} )( jQuery );

I wrote this because in the customizer I give a choice of using Bootstrap border classes, or choosing a custom color with color picker. The issue I was having that led to this bloated function:

When initially choosing classes, everything was as expected.

When using color selector after choosing its trigger for the color picker - "border-user",
everything was as expected.

Problem: When switching back to classes, live preview would not longer change. It would still work in the color picker though.

So nesting some code in the osq_borders_live_update() function helped to remove the border-color property and thus the class select menu worked for live preview again.

Tried using .css and other jQuery methods but for live preview to update changes using color picker but I found I had to use the !important attribute. ( Probably because Bootstrap css uses the !important attribute on border colors. )

If you can optimize the code or have another method, please share. It would be worth a 1983 "Jump in the Fire" EP