script .= $this->script( $field ); } } $this->script = apply_filters( 'kirki_postmessage_script', $this->script ); wp_add_inline_script( 'kirki_auto_postmessage', $this->script, 'after' ); } /** * Generates script for a single field. * * @access protected * @since 3.0.0 * @param array $args The arguments. */ protected function script( $args ) { $script = 'wp.customize(\'' . $args['settings'] . '\',function(value){value.bind(function(newval){'; $add_css = false; foreach ( $args['js_vars'] as $js_var ) { if ( ! isset( $js_var['function'] ) || 'html' !== $js_var['function'] ) { $add_css = true; } } if ( $add_css ) { // append unique style tag if not exist // The style ID. $style_id = 'kirki-postmessage-' . str_replace( array( '[', ']' ), '', $args['settings'] ); $script .= 'if(null===document.getElementById(\'' . $style_id . '\')||\'undefined\'===typeof document.getElementById(\'' . $style_id . '\')){jQuery(\'head\').append(\'\');}'; } // Add anything we need before the main script. $script .= $this->before_script( $args ); $field = array( 'scripts' => array(), ); // Loop through the js_vars and generate the script. foreach ( $args['js_vars'] as $key => $js_var ) { // Skip styles if "exclude" is defined and value is excluded. if ( isset( $js_var['exclude'] ) ) { $js_var['exclude'] = (array) $js_var['exclude']; $script .= 'exclude=false;'; foreach ( $js_var['exclude'] as $exclussion ) { $script .= "if(newval=='{$exclussion}'||(''==='{$exclussion}'&&_.isObject(newval)&&_.isEmpty(newval))){exclude=true;}"; } } if ( isset( $js_var['element'] ) ) { // Array to string. if ( is_array( $js_var['element'] ) ) { $js_var['element'] = implode( ',', $js_var['element'] ); } // Replace single quotes with double quotes to avoid issues with the compiled JS. $js_var['element'] = str_replace( '\'', '"', $js_var['element'] ); } if ( isset( $js_var['function'] ) && 'html' === $js_var['function'] ) { $script .= $this->script_html_var( $js_var ); continue; } $js_var['index_key'] = $key; $callback = $this->get_callback( $args ); if ( is_callable( $callback ) ) { $field['scripts'][ $key ] = call_user_func_array( $callback, array( $js_var, $args ) ); continue; } $field['scripts'][ $key ] = $this->script_var( $js_var ); } $combo_extra_script = ''; $combo_css_script = ''; foreach ( $field['scripts'] as $script_array ) { $combo_extra_script .= $script_array['script']; $combo_css_script .= ( 'css' !== $combo_css_script ) ? $script_array['css'] : ''; } $text = ( 'css' === $combo_css_script ) ? 'css' : '\'' . $combo_css_script . '\''; $script .= $combo_extra_script . "var cssContent={$text};"; if ( isset( $js_var['exclude'] ) ) { $script .= 'if(true===exclude){cssContent="";}'; } if ( $add_css ) { $script .= "jQuery('#{$style_id}').text(cssContent);jQuery('#{$style_id}').appendTo('head');"; } $script .= '});});'; return $script; } /** * Generates script for a single js_var when using "html" as function. * * @access protected * @since 3.0.0 * @param array $args The arguments for this js_var. */ protected function script_html_var( $args ) { $script = ( isset( $args['choice'] ) ) ? "newval=newval['{$args['choice']}'];" : ''; // Apply the value_pattern. if ( isset( $args['value_pattern'] ) && '' !== $args['value_pattern'] ) { $script .= $this->value_pattern_replacements( 'newval', $args ); } if ( isset( $args['attr'] ) ) { $script .= "jQuery('{$args['element']}').attr('{$args['attr']}',newval);"; return $script; } $script .= "jQuery('{$args['element']}').html(newval);"; return $script; } /** * Generates script for a single js_var. * * @access protected * @since 3.0.0 * @param array $args The arguments for this js_var. */ protected function script_var( $args ) { $script = ''; $property_script = ''; $value_key = 'newval' . $args['index_key']; $property_script .= $value_key . '=newval;'; $args = $this->get_args( $args ); // Apply callback to the value if a callback is defined. if ( ! empty( $args['js_callback'] ) && is_array( $args['js_callback'] ) && isset( $args['js_callback'][0] ) && ! empty( $args['js_callback'][0] ) ) { $script .= $value_key . '=' . $args['js_callback'][0] . '(' . $value_key . ',' . $args['js_callback'][1] . ');'; } // Apply the value_pattern. if ( '' !== $args['value_pattern'] ) { $script .= $this->value_pattern_replacements( $value_key, $args ); } // Tweak to add url() for background-images. if ( 'background-image' === $args['property'] && ( ! isset( $args['value_pattern'] ) || false === strpos( $args['value_pattern'], 'gradient' ) ) ) { $script .= 'if(-1===' . $value_key . '.indexOf(\'url(\')){' . $value_key . '=\'url("\'+' . $value_key . '+\'")\';}'; } // Apply prefix. $value = $value_key; if ( '' !== $args['prefix'] ) { $value = "'" . $args['prefix'] . "'+" . $value_key; } $css = $args['element'] . '{' . $args['property'] . ':\'+' . $value . '+\'' . $args['units'] . $args['suffix'] . ';}'; if ( isset( $args['media_query'] ) ) { $css = $args['media_query'] . '{' . $css . '}'; } return array( 'script' => $property_script . $script, 'css' => $css, ); } /** * Processes script generation for fields that save an array. * * @access protected * @since 3.0.0 * @param array $args The arguments for this js_var. */ protected function script_var_array( $args ) { $script = ( 0 === $args['index_key'] ) ? 'css=\'\';' : ''; $property_script = ''; // Define choice. $choice = ( isset( $args['choice'] ) && '' !== $args['choice'] ) ? $args['choice'] : ''; $value_key = 'newval' . $args['index_key']; $property_script .= $value_key . '=newval;'; $args = $this->get_args( $args ); // Apply callback to the value if a callback is defined. if ( ! empty( $args['js_callback'] ) && is_array( $args['js_callback'] ) && isset( $args['js_callback'][0] ) && ! empty( $args['js_callback'][0] ) ) { $script .= $value_key . '=' . $args['js_callback'][0] . '(' . $value_key . ',' . $args['js_callback'][1] . ');'; } $script .= '_.each(' . $value_key . ', function(subValue,subKey){'; // Apply the value_pattern. if ( '' !== $args['value_pattern'] ) { $script .= $this->value_pattern_replacements( 'subValue', $args ); } // Tweak to add url() for background-images. if ( '' === $choice || 'background-image' === $choice ) { $script .= 'if(\'background-image\'===\'' . $args['property'] . '\'||\'background-image\'===subKey){if(-1===subValue.indexOf(\'url(\')){subValue=\'url("\'+subValue+\'")\';}}'; } // Apply prefix. $value = $value_key; if ( '' !== $args['prefix'] ) { $value = '\'' . $args['prefix'] . '\'+subValue'; } // Mostly used for padding, margin & position properties. $direction_script = 'if(_.contains([\'top\',\'bottom\',\'left\',\'right\'],subKey)){'; $direction_script .= 'css+=\'' . $args['element'] . '{' . $args['property'] . '-\'+subKey+\':\'+subValue+\'' . $args['units'] . $args['suffix'] . ';}\';}'; // Allows us to apply this just for a specific choice in the array of the values. if ( '' !== $choice ) { $choice_is_direction = ( false !== strpos( $choice, 'top' ) || false !== strpos( $choice, 'bottom' ) || false !== strpos( $choice, 'left' ) || false !== strpos( $choice, 'right' ) ); // The script. $script .= 'if(\'' . $choice . '\'===subKey){'; $script .= ( $choice_is_direction ) ? $direction_script . 'else{' : ''; $script .= 'css+=\'' . $args['element'] . '{' . $args['property'] . ':\'+subValue+\';}\';'; $script .= ( $choice_is_direction ) ? '}' : ''; $script .= '}'; } else { // This is where most object-based fields will go. $script .= $direction_script . 'else{css+=\'' . $args['element'] . '{\'+subKey+\':\'+subValue+\'' . $args['units'] . $args['suffix'] . ';}\';}'; } $script .= '});'; if ( isset( $args['media_query'] ) ) { $script .= 'css=\'' . $args['media_query'] . '{\'+css+\'}\';'; } return array( 'script' => $property_script . $script, 'css' => 'css', ); } /** * Processes script generation for typography fields. * * @access protected * @since 3.0.0 * @param array $args The arguments for this js_var. * @param array $field The field arguments. */ protected function script_var_typography( $args, $field ) { $args = $this->get_args( $args ); $script = ''; $css = ''; // Load the font using WenFontloader. // This is a bit ugly because wp_add_inline_script doesn't allow adding