false, 'font_variant' => false, 'text_transform' => false, 'text_decoration' => false, 'font_size' => false, 'line_height' => false, 'letter_spacing' => false, 'colors' => false ); $fields = []; $fields_exist = !empty( $this->fields ) ? $this->fields : $default_fields; foreach( $fields_exist as $field_key => $field_value ){ $fields[ str_replace( '-', '_', $field_key ) ] = true; } $fields = wp_parse_args( $fields, $default_fields ); // Fields $this->json['fields'] = $fields; } /** * Set up our control. * * @access public * @param object $manager * @param string $id * @param array $args * @return void */ public function __construct( $manager, $id, $args = array() ) { // Let the parent class do its thing. parent::__construct( $manager, $id, $args ); // Make sure we have labels. $this->l10n = wp_parse_args( $this->l10n, array( 'option_default' => esc_html__( 'Default', 'blogin-aarambha' ), ) ); add_action( 'customize_controls_enqueue_scripts', array( $this, 'localize_script' ) ); } /** * Localize google fonts to customize-controls.js file. * * @access public */ public function localize_script() { // Get formatted array of standard fonts, google fonts and all variants. wp_localize_script( 'blogin-aarambha-customize-controls', 'AllFonts', array( 'allFonts' => Blogin_Aarambha_Google_Fonts::get_fonts() ) ); } /** * Underscore JS template to handle the control's output. * * @access public * @return void */ public function content_template() { ?> <# const fields = data.fields, resetData = data.default, inheritData = data.inherits; const responsive_class = Object.keys( data.responsive ).length > 1 ? ' has-responsive-switcher' : ''; const switcher_class = Object.keys( data.responsive ).length > 1 ? 'responsive-devices d-flex align-items-center' : 'd-flex align-items-center'; #> <# if ( data.label ) { #>
{{{ data.label }}}
<# } #> <# if ( data.description ) { #> {{{ data.description }}} <# } #>
<# if ( fields.font_family ) { #>
<# let font_reset = ( resetData !== '' && resetData['font_family'] !== undefined ) ? resetData['font_family'].toLowerCase() : ''; font_reset = font_reset.replace(/ /g, '-'); #>
<# } #> <# if ( fields.font_family && data.fields.font_variant ) { #>
<# const variant_reset = ( resetData !== '' && resetData['font_variant'] !== undefined ) ? resetData['font_variant'] : ''; #>
<# } #> <# if ( fields.text_transform ) { #>
<# const transform_reset = ( resetData !== '' && resetData['text_transform'] !== undefined ) ? resetData['text_transform'] : ''; #>
<# } #> <# if ( fields.text_decoration ) { #>
<# const decoration_reset = ( resetData !== '' && resetData['text_decoration'] !== undefined ) ? resetData['text_decoration'] : ''; #>
<# } #> <# if ( fields.font_size ) { #>
<# if ( Object.keys( data.responsive ).length > 1 ) { #>
    <# Object.keys( data.responsive ).forEach( function( key ) { let active_class = ( (data.responsive)[key] === 'desktop' ) ? ' active' : ''; #>
    • <# }); #>
<# } #>
<# Object.keys( data.responsive ).forEach( function( key ) { let fontDevice = (data.responsive)[key]; let active_class = ( (data.responsive)[key] === 'desktop' ) ? ' active' : ''; #>
<# let font_size_reset = ( resetData !== '' && resetData['font_size'] !== undefined && resetData['font_size'][fontDevice] !== undefined ) ? resetData['font_size'][fontDevice] : ''; #>
    <#_.each( data.units, function( unit_key, unit_index ) { const unit_class = unit_index === 0 ? 'single-unit active' : 'single-unit'; #>
  • {{{ unit_key }}}
    • <# }); #>
<# }); #>
<# } #> <# if ( fields.line_height ) { #>
<# if ( Object.keys( data.responsive ).length > 1 ) { #>
    <# Object.keys( data.responsive ).forEach( function( key ) { let active_class = ( (data.responsive)[key] === 'desktop' ) ? ' active' : ''; #>
    • <# }); #>
<# } #>
<# Object.keys( data.responsive ).forEach( function( key ) { let HeightDevice = (data.responsive)[key]; let active_class = ( (data.responsive)[key] === 'desktop' ) ? ' active' : ''; #>
<# let line_height_reset = ( resetData !== '' && resetData['line_height'] !== undefined && resetData['line_height'][HeightDevice] !== undefined ) ? resetData['line_height'][HeightDevice] : ''; #>
    <#_.each( data.units, function( unit_key, unit_index ) { const unit_class = unit_index === 0 ? 'single-unit active' : 'single-unit'; #>
  • {{{ unit_key }}}
    • <# }); #>
<# }); #>
<# } #> <# if ( fields.letter_spacing ) { #>
<# if ( Object.keys( data.responsive ).length > 1 ) { #>
    <# Object.keys( data.responsive ).forEach( function( key ) { let active_class = ( (data.responsive)[key] === 'desktop' ) ? ' active' : ''; #>
    • <# }); #>
<# } #>
<# Object.keys( data.responsive ).forEach( function( key ) { let SpacingDevice = (data.responsive)[key]; let active_class = ( (data.responsive)[key] === 'desktop' ) ? ' active' : ''; #>
<# let spacing_reset = ( resetData !== '' && resetData['letter_spacing'] !== undefined && resetData['letter_spacing'][SpacingDevice] !== undefined ) ? resetData['letter_spacing'][SpacingDevice] : ''; #>
    <#_.each( data.units, function( unit_key, unit_index ) { const unit_class = unit_index === 0 ? 'single-unit active' : 'single-unit'; #>
  • {{{ unit_key }}}
    • <# }); #>
<# }); #>
<# } #> <# if ( fields.colors ) { const colors = data.colors; #>
<# Object.keys( colors ).forEach( function ( key ) { #>
style="background:{{ inheritData[key] }}" <# } #>> <# let color_reset = ( resetData !== '' && resetData['colors'] !== undefined && resetData['colors'][key] !== undefined ) ? resetData['colors'][key] : ''; #> <# let color_inherit = ( inheritData !== '' && inheritData[key] !== undefined ) ? inheritData[key] : ''; #>
<# }); #>
<# } #>
register_control_type( 'Blogin_Aarambha_Customize_Typography_Control' );