/**
* The class constructor.
*
* @var string the setting ID.
* @var string theme_mod / option
* @var array an array of arrays of the output arguments.
* @var mixed a callable function.
*/
public static function css($field)
{
/**
* Make sure the field is sanitized before proceeding any further.
*/
$field = Kirki_Field::sanitize_field($field);
/**
* Get the config ID used in the Kirki class.
*/
$config_id = Kirki::get_config_id($field);
/**
* Set class vars
*/
self::$settings = $field['settings'];
self::$output = $field['output'];
self::$callback = $field['sanitize_callback'];
/**
* Get the value of this field
*/
if ('option' == Kirki::$config[$config_id]['option_type'] && '' != Kirki::$config[$config_id]['option_name']) {
self::$value = Kirki::get_option($config_id, str_replace(array(']', Kirki::$config[$config_id]['option_name'] . '['), '', $field['settings']));
} else {
self::$value = Kirki::get_option($config_id, $field['settings']);
}
/**
* Returns the styles
*/
if (!is_array(self::$value)) {
return self::styles();
}
}
/**
* Add the inline styles
*/
public function enqueue_styles()
{
$config = apply_filters('kirki/config', array());
/**
* If we have set $config['disable_output'] to true,
* then do not proceed any further.
*/
if (isset($config['disable_output']) && true == $config['disable_output']) {
return;
}
wp_add_inline_style('kirki-styles', Kirki_Output::generate_css_by_fields(Kirki::$fields));
}
/**
* The class constructor.
*
* @var string the setting ID.
* @var string theme_mod / option
* @var array an array of arrays of the output arguments.
* @var mixed a callable function.
*/
public static function css($setting = '', $type = 'theme_mod', $output = array(), $callback = '', $return_array = false)
{
// No need to proceed any further if we don't have the required arguments.
if ('' == $setting || empty($output)) {
return;
}
self::$settings = $setting;
self::$type = $type;
self::$output = Kirki_Field::sanitize_output(array('output' => $output));
self::$value = self::get_value();
self::$callback = $callback;
return true === $return_array ? self::styles() : self::styles_parse(self::add_prefixes(self::styles()));
}
public function test_add_prefixes()
{
$this->assertEquals(null, Kirki_Output::add_prefixes(''));
$css = array();
$css['global']['body']['border-radius'] = '3px';
$css['global']['body']['box-shadow'] = '10px 10px 5px 0px rgba(0,0,0,0.75)';
$css['global']['body']['box-sizing'] = 'border-box';
$css['global']['body']['text-shadow'] = '0';
$css['global']['body']['transform'] = 'rotate(30deg)';
$css['global']['body']['background-size'] = 'cover';
$css['global']['body']['transition'] = 'width 1s';
$css['global']['body']['transition-property'] = 'width';
$this->assertEquals(array('global' => array('body' => array('border-radius' => '3px', '-moz-border-radius' => '3px', '-webkit-border-radius' => '3px', 'box-shadow' => '10px 10px 5px 0px rgba(0,0,0,0.75)', '-moz-box-shadow' => '10px 10px 5px 0px rgba(0,0,0,0.75)', '-webkit-box-shadow' => '10px 10px 5px 0px rgba(0,0,0,0.75)', 'box-sizing' => 'border-box', '-moz-box-sizing' => 'border-box', '-webkit-box-sizing' => 'border-box', 'text-shadow' => '0', '-moz-text-shadow' => '0', '-webkit-text-shadow' => '0', 'transform' => 'rotate(30deg)', '-moz-transform' => 'rotate(30deg)', '-webkit-transform' => 'rotate(30deg)', '-ms-transform' => 'rotate(30deg)', '-o-transform' => 'rotate(30deg)', 'background-size' => 'cover', '-moz-background-size' => 'cover', '-webkit-background-size' => 'cover', '-ms-background-size' => 'cover', '-o-background-size' => 'cover', 'transition' => 'width 1s', '-moz-transition' => 'width 1s', '-webkit-transition' => 'width 1s', '-ms-transition' => 'width 1s', '-o-transition' => 'width 1s', 'transition-property' => 'width', '-moz-transition-property' => 'width', '-webkit-transition-property' => 'width', '-ms-transition-property' => 'width', '-o-transition-property' => 'width'))), Kirki_Output::add_prefixes($css));
}
/**
* loop through all fields and create an array of style definitions
*/
public function loop_controls()
{
$fields = Kirki::$fields;
$css = array();
// Early exit if no fields are found.
if (empty($fields)) {
return;
}
foreach ($fields as $field) {
// Only continue if $field['output'] is set
if (isset($field['output']) && 'background' != $field['type']) {
$css = array_merge_recursive($css, Kirki_Output::css(Kirki_Field::sanitize_settings_raw($field), Kirki_Field::sanitize_type($field), Kirki_Field::sanitize_output($field), isset($field['output']['callback']) ? $field['output']['callback'] : '', true));
}
}
return Kirki_Output::styles_parse(Kirki_Output::add_prefixes($css));
}
public function generate_script()
{
global $wp_customize;
// Early exit if we're not in the customizer
if (!isset($wp_customize)) {
return;
}
// Get an array of all the fields
$fields = Kirki::$fields;
$script = 'jQuery( "#kirki-styles-inline-css" ).remove();';
$styles = array();
// Parse the fields and create the script.
foreach ($fields as $field) {
$field['transport'] = Kirki_Field::sanitize_transport($field);
$field['js_vars'] = Kirki_Field::sanitize_js_vars($field);
if (!empty($field['setting'])) {
$inline_id = 'kirki-' . $field['setting'];
$styles[] = '<style id="' . esc_attr($inline_id) . '">' . Kirki_Output::generate_css_by_fields(array($field)) . '</style>';
}
if ('postMessage' == $field['transport']) {
$script .= 'wp.customize( \'' . Kirki_Field::sanitize_settings($field) . '\', function( value ) {';
$script .= 'value.bind( function( newval ) {';
if (!is_null($field['js_vars'])) {
foreach ($field['js_vars'] as $js_vars) {
if ('html' == $js_vars['function']) {
$script .= '$(\'' . esc_js($js_vars['element']) . '\').html( newval );';
} elseif ('css' == $js_vars['function']) {
$script .= '$(\'' . esc_js($js_vars['element']) . '\').css(\'' . esc_js($js_vars['property']) . '\', newval' . (!empty($js_vars['units']) ? ' + \'' . $js_vars['units'] . "'" : '') . ' );';
}
}
} else {
$output_unit = '';
if (!empty($field['output']) && !empty($field['output']['units'])) {
$output_unit = $field['output']['units'];
}
$inline_id = 'kirki-' . $field['setting'];
$placeholder_inline_css = Kirki_Output::generate_css_by_fields(array($field), true);
$script .= 'jQuery( "#' . $inline_id . '" )[0].innerHTML = "' . str_replace(array('{value}', '>'), array('" + newval + "' . $output_unit, '>'), esc_js($placeholder_inline_css)) . '";';
}
$script .= '}); });';
}
}
return array($script, $styles);
}
public static function generate_css_by_fields($fields, $placeholder = false)
{
// Early exit if no fields are found.
if (empty($fields)) {
return;
}
$css = array();
foreach ($fields as $field) {
// Only continue if $field['output'] is set
if (isset($field['output']) && !empty($field['output']) && 'background' != $field['type']) {
$css = array_merge_recursive($css, self::css(Kirki_Field::sanitize_field($field)));
}
}
// Replace all values with placeholder
if ($placeholder) {
foreach ($css as $media_query => $styles) {
foreach ($styles as $style => $style_array) {
foreach ($style_array as $property => $value) {
$css[$media_query][$style][$property] = '{value}';
}
}
}
}
if (is_array($css)) {
return Kirki_Output::styles_parse(Kirki_Output::add_prefixes($css));
}
return;
}
public function test_css_option()
{
update_option('foo', '#333');
$this->assertEquals('@media (min-width: 700px) and (orientation: landscape){body > #foo{background-color:#333!important;}}#bar{color:#333;}', Kirki_Output::css('foo', 'option', array(array('element' => 'body > #foo', 'property' => 'background-color', 'units' => '!important', 'prefix' => '@media (min-width: 700px) and (orientation: landscape) {', 'suffix' => '}'), array('element' => '#bar', 'property' => 'color')), null));
}