web-dev-qa-db-fra.com

Transmettre des données de personnaliser-controls.js à la personnaliser-preview.js

Est-ce la bonne façon de transmettre des données de personnaliser-controls.js à personnaliser-preview.js?

( function( api ) {

api.controlConstructor['typography'] = api.Control.extend( {
    ready: function() {
        var control = this;

        function addGoogleFont(fontName) {
                var font = control.params.ogf_fonts[fontName];
                var weights = $.map(font.variants, function(value, key) {
                  return key;
                });
                var weightsURL = weights.join(',');
                var fontURL = font.family.replace(' ','+') + ':' + weightsURL;
                wp.customize.previewer.send( 'olympusFontURL', "<link href='https://fonts.googleapis.com/css?family=" + fontURL + "' rel='stylesheet' type='text/css'>" );
        }

        control.container.on( 'change', '.typography-font-family select',
            function() {
                var value = jQuery( this ).val();
                control.settings['family'].set( value );
                if( value != 'default' ) {

                    addGoogleFont( value );

                    var font = control.params.ogf_fonts[value];
                    var weightsSelect = jQuery( '.typography-font-weight select' );
                    var newWeights = font.variants;
                    weightsSelect.empty();
                    $.each( newWeights, function( key, val ) {
                        weightsSelect.append( $( "<option></option>" )
                             .attr( "value", key ).text( val ) );
                    });
                }
            }
        );

    }
} );

} )( wp.customize );

Est-ce également mieux que d'essayer de .append() à l'aperçu iframe directement dans personnaliser-controls.js?

Voici personnaliser-preview.js pour toute personne intéressée:

jQuery( document ).ready( function() {

    wp.customize.bind( 'preview-ready', function() {
      wp.customize.preview.bind( 'olympusFontURL', function( url ) {
         console.log(url);
         $("head").append(url);
      } );
    } );

} ); // jQuery( document ).ready
theme-customizer
1
Danny Cooper

Message de personnalisation en cours de transmission

Vous trouverez ci-dessous des extraits indiquant l’ordre des opérations requis pour que les poignées de transfert de message fonctionnent. Dans votre exemple de code, le contrôle envoie le message sur change. Il est donc probable que cela ne se produira pas avant l'événement ready dans son ensemble et cela devrait être correct.

Volet → Aperçu

/* Pane, enqueue w/ customize-controls dependency at customize_controls_enqueue_scripts */
wp.customize.bind( 'ready', function() {
  wp.customize.previewer.bind( 'ready', function() {
     wp.customize.previewer.send( 'greeting', 'Howdy, Preview!' );
  } );
} );

/* Preview, enqueue /w customize-preview dependency at wp_enqueue_scripts if is_customize_preview() */
wp.customize.bind( 'preview-ready', function() {
  wp.customize.preview.bind( 'greeting', function( message ) {
     console.info( Pane sent message:', message );
  } );
} );

Aperçu → volet

/* Preview, enqueue /w customize-preview dependency at wp_enqueue_scripts if is_customize_preview() */
wp.customize.bind( 'preview-ready', function() {
  wp.customize.preview.bind( 'active', function() {
     wp.customize.preview.send( 'greeting', 'Howdy, Pane!' );
  } );
} );

/* Pane, enqueue w/ customize-controls dependency at customize_controls_enqueue_scripts */
wp.customize.bind( 'ready', function() {
  wp.customize.previewer.bind( 'greeting', function( message ) {
     console.info( 'Preview sent greeting:', message );
  } );
} );

Suggestion

Au lieu d'ajouter un écouteur d'événement change pour l'élément select via jQuery, l'élément select devrait plutôt être lié à un paramètre que vous écoutez à la place. Donc, votre méthode ready devrait vraiment ressembler davantage à ceci:

this.setting.bind( function( newFont ) {
    if ( 'default' !== newFont ) {
        addGoogleFont( newFont );
    }
} );

Mais cette addGoogleFont transmet l'intégralité de la balise link à l'aperçu, en plus du changement de paramètre envoyé. Ne vaudrait-il pas mieux déplacer toute la logique addGoogleFont dans l'aperçu proprement dit? Par exemple:

wp.customize( fontSettingId, function( setting ) {
    setting.bind( function( newFont ) {
        if ( 'default' !== newFont ) {
            addGoogleFont( newFont );
        }
    } );
} )

Vous ne devez donc écouter que les modifications apportées aux paramètres de police dans l'aperçu, puis créer la balise link à mettre à jour dans l'aperçu.

3
Weston Ruter