web-dev-qa-db-fra.com

Dans la nouvelle API Theme Customizer, comment envoyer une valeur de l'avant au panneau d'administration?

Je m'intéresse un peu à la nouvelle API Theme Customizer, en particulier à celle javascript, et ce que je trouve ravissant. J'ai réussi à ajouter mes propres paramètres personnalisés et j'ai également la partie javascript pour mettre à jour ces paramètres en direct dans l'aperçu.

Cependant, j'aimerais aller un peu plus loin: je dois placer un point sur une position absolue sur une image d'arrière-plan, puis enregistrer la position dans la base de données. Voici une capture d'écran. enter image description here Je peux déplacer le point grâce au plugin jQuery draggable, mais je ne sais pas comment renvoyer la position obtenue au personnalisateur.

Voici mon code jusqu'à présent:

functions.php:

add_action( 'customize_register', 'minisites_customize_register' );
function minisites_customize_register($wp_customize){
    // gestion du placement des points
    class Minisites_Customize_Page_Control extends WP_Customize_Control {

        public function render_content() {
            ?>
            <label>
                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
                Points position
                <input <?php $this->link(); ?> value="<?php echo $this->value()?>">
            </label>
            <?php
        }
    }
    $wp_customize->add_setting( 'points', array(
        'transport' => 'postMessage'
    ) );
    $wp_customize->add_control( new Minisites_Customize_Page_Control( $wp_customize, 'points', array(
        'label'      => __( 'Lier les pages', 'minisites' ),
        'section'    => 'background_image',
        'settings'   => 'points',
    ) ) );

}

customize-theme.js:

jQuery( function( $ ) {

    var points;
    wp.customize( 'points', function( value ) {
        points = value;
        value.bind( function( newval ) {
            // this code is called when the value change
            console.log('position change', newval);
        });
    } );

    $('.point').draggable({ 
        drag: function(event, ui){
            // update the position value
            point.set(ui.position);
        }
    });

});

L’appel javascript points.set() met à jour la valeur de la position (j’obtiens les informations correctes dans la console), mais ne peut pas met à jour l'élément d'entrée situé dans le personnaliseur de thème lui-même.

J'ai jeté un œil à la classe api.Value (la sorcière est la classe de ma variable points) dans wp-includes/js/customize-base.js. Ce qu'il me faudrait, c'est obtenir l'instance du api.Element correspondant et appeler sa méthode update. Mais je ne peux pas comprendre d'où je peux obtenir ceci.

customizationapitheme-customizer
3
Fabien Quatravaux

J'ai finalement réussi à résoudre mon problème, mais pas de la manière la plus élégante: le sondage. Je serais toujours intéressé par une solution plus élégante!

Le problème principal que j'ai est que le déplacement de point est effectué dans l'iframe contenant l'aperçu du site, alors que les entrées de formulaire de personnalisation de thème se trouvent dans le document principal. J'ai donc besoin d'un moyen de passer variable de l'iframe au document principal.

Dans l'iframe:

// update point global var
$('.point').draggable({ 
    drag: function(event, ui){
        // update the position value
        var ref = 'id'+$(this).attr('data-id');
        points[ref].top = ui.position.top;
        points[ref].left = ui.position.left;   
    }
});

Dans le personnalisateur de thème:

setInterval(function(){
    if(frames.length) {
        var from = $('#customize-points').val();
        var to = JSON.stringify(frames[0].points);

        // use theme customizer API in order to enable the save button
        if(from != to) $('#customize-points').val(to).change();
    }
}, 500);

J'ai également ajouté un système permettant de calculer la position des points par rapport à l'image d'arrière-plan, mais ce n'est pas le sujet ici.

Je sais que le personnalisateur de thème génère des événements ciblant l'aperçu iframe pour permettre à l'auteur du thème de mettre à jour en direct l'aperçu, mais je ne trouve pas comment faire l'inverse: générer un événement de l'aperçu au personnalisateur de thème.

Vous pouvez voir le résultat en ligne ici: focus.tv5monde.com , même si vous ne pouvez pas accéder au backend.

2
Fabien Quatravaux