js_vars add class function

[xplodedthemes]

I needed to be able to set the value as a class using the js_vars, I know that it's possible using function => "html" with the "attr" => "class" argument, however this will override all classes, not very convenient. So I added a new function "class".

Example of usage:

Kirki::add_field( 'my_config', array(
    'settings'    => 'position',
    'section'     => 'general',
    'label'       => 'Position',
    'type'        => 'radio',
    'choices'     => array(
        'top-left' => esc_attr__( 'Top Left' ),
        'top-right'  => esc_attr__( 'Top Right'),
        'bottom-left' => esc_attr__( 'Bottom Left'),
        'bottom-right'  => esc_attr__( 'Bottom Right')
    ),
    'default'     => 'bottom-right',
    'transport'=>'postMessage',
    'js_vars'   => array(
        array(
            'element'  => '.selector',
            'function' => 'class',
            'prefix' => 'pos-'
        )
    )
));

This will apply the appropriate class based on the value. Also supports prefix and suffix.

[xplodedthemes]

Hi Guys,

I am new to pull requests and first time hearing of the Travis CI.
I see that "All checks have failed", not sure what the issue is.

Will you consider adding this feature in the next update ? I am currently using it but I rather include kirki as a plugin instead of directly within my project.

Thanks

[aristath]

You can now use %value% in the value_pattern argument as a placeholder for the old value - in this case the CSS classes.

I opted to do it this way instead of adding a new function as this is more abstract and will allow greater flexibility.

So your example above would become like this:

'js_vars'   => array(
    array(
        'element'       => '.selector',
        'function'      => 'html',
        'attr'          => 'class',
        'value_pattern' => '%value% pos-$',
    ),
),

[pingram3541]

I tried this using your example above:

'js_vars'   => array(
    array(
        'element'       => '.selector',
        'function'      => 'html',
        'attr'          => 'class',
        'value_pattern' => '%value% pos-$',
    ),
),

I'm getting:
<div class="selector $">...

Instead of:
<div class="selector pos-bottom-right">...

Also upon each setting change the class concatenates rather than replacing the previous value:

<div class="selector $ $ $ $">...

So when this works and $ does return the value, the result would still be as follows:

class="selector" (original)
class="selector pos-bottom-right"
class="selector pos-bottom-right pos-top-right"
class="selector pos-bottom-right pos-top-right pos-bottom-left"

It should be:

class="selector" (original)
class="selector pos-bottom-right"
class="selector pos-top-right"
class="selector pos-bottom-left"

[aristath]

After a lot of experimentation, getting the previous classes via JS is quite problematic and it looks a bit overkill.
So I completely removed the %value% implementation and only kept the value_pattern.

It works fine like this:

Kirki::add_field( 'kirki_demo', array(
    'type'        => 'dashicons',
	'settings'    => 'dashicons0',
	'label'       => __( 'Dashicons Control', 'my_textdomain' ),
    'description' => esc_attr__( 'This control is using postMessage & js_vars', 'kirki-demo' ),
	'section'     => 'dashicons',
	'default'     => 'format-status',
	'priority'    => 10,
    'transport'   => 'postMessage',
    'js_vars'     => array(
        array(
            'element'       => '.control-section-demo.dashicons .dashicons0 .dashicons',
            'function'      => 'html',
            'attr'          => 'class',
            'value_pattern' => 'dashicons dashicons-$',
        ),
    ),
) );

In other words, just add the full value in the value_pattern argument and it's fine.

Example implementation:
Control: https://github.com/aristath/kirki-demo/blob/master/controls/dashicons.php
Template: https://github.com/aristath/kirki-demo/blob/master/templates/dashicons.php