aristath/kirki

/* global kirkiPostMessage */

import "./control.scss";

/**
 * Hook in the kirkiPostMessageStylesOutput filter.
 *
 * Handles postMessage styles for typography controls.
 */
jQuery( document ).ready( function() {
    wp.hooks.addFilter(
        'kirkiPostMessageStylesOutput',
        'kirki',

        /**
         * Append styles for this control.
         *
         * @param {string} styles      - The styles.
         * @param {Object} value       - The control value.
         * @param {Object} output      - The control's "output" argument.
         * @param {string} controlType - The control type.
         * @returns {string} - Returns the CSS as a string.
         */
        function( styles, value, output, controlType ) {
            var processedValue;
            if ( 'kirki-dimensions' === controlType ) {
                styles += output.element + '{';
                _.each( value, function( val, key ) {
                    if ( output.choice && key !== output.choice ) {
                        return;
                    }
                    processedValue = kirkiPostMessage.util.processValue( output, val );

                    if ( false !== processedValue ) {

                        // Mostly used for padding, margin & position properties.
                        if ( output.property ) {
                            styles += output.property;
                            if ( '' !== output.property && ( 'top' === key || 'bottom' === key || 'left' === key || 'right' === key ) ) {
                                styles += '-' + key;
                            }
                            styles += ':' + processedValue + ';';
                        } else {
                            styles += key + ':' + processedValue + ';';
                        }
                    }
                } );
                styles += '}';
            }
            return styles;
        }
    );
} );