En la nueva API del personalizador de temas, ¿cómo enviar un valor desde el frente hacia el panel de administración?

3

Estoy profundizando un poco en la nueva API de personalización de temas, en particular en la de JavaScript, y lo que encuentro es delicioso. Me las arreglé para agregar mis propios parámetros personalizados, y también tengo la parte de javascript para actualizar esos parámetros en vivo en la vista previa.

Sin embargo, me gustaría ir un poco más lejos: necesito colocar un punto en una posición absoluta sobre una imagen de fondo y luego volver a registrar la posición en la base de datos. Aquí hay una captura de pantalla. PuedomoverelpuntograciasalcomplementojQuerydraggable,peronosécómoenviarlaposiciónresultantealpersonalizador.

Aquíestámicódigohastaahora:

functions.php:

add_action('customize_register','minisites_customize_register');functionminisites_customize_register($wp_customize){//gestionduplacementdespointsclassMinisites_Customize_Page_ControlextendsWP_Customize_Control{publicfunctionrender_content(){?><label><spanclass="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);
        }
    });

});

El javascript points.set() call sí actualiza el valor de posición (obtengo la información correcta en la consola) pero no actualiza el elemento de entrada ubicado en el tema el propio personalizador.

Eché un vistazo a la clase api.Value (witch es la clase de mi variable points ) en wp-includes/js/customize-base.js . Lo que necesitaría es obtener la instancia del api.Element correspondiente y llamar a su método update . Pero no puedo averiguar de dónde puedo obtener esto.

    
pregunta Fabien Quatravaux 24.01.2013 - 11:41

1 respuesta

2

Finalmente logré resolver mi problema, pero no de la manera más elegante: sondeo. ¡Todavía estaría interesado en una solución más elegante!

El problema principal que tengo es que el movimiento de puntos se realiza en el iframe que contiene la vista previa del sitio, mientras que las entradas del formulario del personalizador de temas se encuentran en el documento principal. Así que necesito una forma de pasar la variable del iframe al documento principal.

Dentro del 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;   
    }
});

En el personalizador de tema:

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);

También he agregado un sistema para calcular la posición de los puntos en relación con la imagen de fondo, pero ese no es el tema aquí.

Sé que el personalizador de temas genera eventos dirigidos al iframe de vista previa para permitir que el autor del tema actualice la vista previa en vivo, pero no puedo encontrar la forma alternativa: generar un evento desde la vista previa al personalizador de temas .

Puede ver el resultado en línea aquí: focus.tv5monde.com , incluso si no puede acceder al backend.

    
respondido por el Fabien Quatravaux 08.04.2013 - 10:49

Lea otras preguntas en las etiquetas