0

I'm trying to put a section in the customizer where you can choose how to put a box-shadow in a h1. The problem is that i need to write the whole box-shadow box at once, is not like border where you can split in border-top, border-color, border-style, border-with, etc. Then, i need to get some css values different than the one im changing at that moment. Well, i dont know if i explained my self properly. You can see what i mean in the following example code (it's just an example, this code doesnt work):

    wp.customize( 'shadowh1', function( value ) {
    value.bind( function( newval ) {
        if(newval == 1){
            let Hshadow = wp.customize.newvalue( 'horizontalShadow' );
            let Vshadow = wp.customize.newvalue( 'verticalShadow' );
            let Bshadow = wp.customize.newvalue( 'blurShadow' );
            let Sshadow = wp.customize.newvalue( 'SpreadShadow' );
            let Cshadow = wp.customize.newvalue( 'colorShadow' );
            $( 'h1' ).css( 'box-shadow', Hshadow . "px " . Vshadow . "px " . Bshadow . "px " . Sshadow . "px #" . Cshadow);
        }
    } );
} );

enter image description here

0

Well i couldnt find any answer all around internet... So, what i did was creating a hidden input where is collecting an array with every box-shadow value. So, when i change only a part of the total box-shadow value, only this part of the array is changed. Of course, each change must be triggered by javascript in that input. I dont know if it's the best option but it's the best i can do right now with my knowledge:

class My_customize_shadow extends WP_Customize_Control {
public $type = 'shadowh1';

public function __construct( $manager, $id, $args = array() ) {
    parent::__construct( $manager, $id, $args );
    $defaults = array(
        'min' => 0,
        'max' => 100,
        'step' => 1,
        'max_color' => 14,
    );
    $args = wp_parse_args( $args, $defaults );

    $this->min = $args['min'];
    $this->max = $args['max'];
    $this->step = $args['step'];
    $this->max_color = $args['max_color'];
}

public function render_content() {
?>
<p id="otec_shadow-button" onclick='jQuery("#shadow-block").slideToggle();'>
SOMBRA
</p>
<div id="shadow-block" style="display:none">
    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    <span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
    
    <label style="display:block">Sombra Horizontal</label>
    <input id="shadowx" class='range-slider' value="0" min="-50" max="50" step="<?php echo $this->step ?>" type='range'>
    
    <label style="display:block">Sombra Vertical</label>
    <input id="shadowy" class='range-slider' value="0" min="-50" max="50" step="<?php echo $this->step ?>" type='range'>
    
    <label style="display:block">Profundidad de sombra</label>
    <input id="shadowz" class='range-slider' value="0" min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type='range'>
    
    <label style="display:block">Extensión de sombra</label>
    <input id="shadoww" class='range-slider' value="0" min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type='range'>
    
    <label style="display:block">Color de la sombra</label>
    <input id="shadowc" type="text" placeholder="Escriba su código HTML">
    
    <a style="display:block" href="https://orbitalthemetips.com/colorpicker" target="__blank">color picker</a>
    
    <script>
    jQuery(document).ready(function(){
        let sombra = jQuery("#envio").val();
        let shadow = [];

        console.log(sombra);

        if(sombra == 0){
            shadow = ['0', '0', '0', '0', 'transparent'];
        }else{
            shadow = sombra.split(" ");
            for(let i = 0; i < 5; i++){
                shadow[i] = shadow[i].replace("px", "");
            }
        }
        
        jQuery("#shadowx").val(shadow[0]);
        jQuery("#shadowy").val(shadow[1]);
        jQuery("#shadowz").val(shadow[2]);
        jQuery("#shadoww").val(shadow[3]);
        jQuery("#shadowc").val(shadow[4]);
        

        let shadows = ["#shadowx", "#shadowy", "#shadowz", "#shadoww", "#shadowc"];
        
        jQuery(shadows).each(function(i, e){
            jQuery(e).change(function(){
                shadow[i] = jQuery(this).val();
                jQuery("#envio").val(shadow[0] + 'px ' + shadow[1] + 'px ' + shadow[2] + 'px ' + shadow[3] + 'px ' + shadow[4]);
                jQuery("#envio").trigger('change');
            })
        })
        
    })
    </script>

    <input id="envio" type="hidden" <?php echo $this->link(); ?> 
value='jQuery("#envio").val()'>
    
</div>
<?php
}
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.