WordPress : Comment supprimer la redirection des clics sur la balise d’ancrage dans le cadre d’aperçu du personnalisateur ?

J’ai remarqué 3 scénarios liés aux liens dans le cadre d’aperçu du personnalisateur.

1) Cliquer sur un lien vers une URL externe ne fait rien. C’est bon.

2) Cliquer sur un lien vers une même URL d’origine/domaine entraîne l’actualisation de l’aperçu du personnalisateur avec le contenu de cette URL. Encore une fois, bien.

3) Cliquer sur un lien avec un hachage ou une balise d’ancrage actualise l’aperçu du personnalisateur et si vous personnalisez ou non la page d’accueil du site, c’est là que vous vous retrouvez à moins que vous n’actualisiez le navigateur pour revenir à la personnalisation de la page/poste vous étiez à l’origine.

Lorsque l’on veut styliser un menu mobile par exemple, l’élément classique « hamburger » utilise une balise d’ancrage qui déclenche ce rafraîchissement indésirable. Je veux pouvoir révéler le menu comme le ferait l’événement de clic sur le front-end publié, puis utiliser mes outils de personnalisation astucieux pour styliser mon menu que mon plugin permet.

D’autres éléments entrent également en jeu, tels que des icônes, des onglets et d’autres animations subtiles de clics frontaux qui « révélent » du contenu supplémentaire sur la page.

Par exemple, cela pourrait être le code d’un thème qui exploiterait ce comportement :

<a href="#" class="show-me">
    <i class="some-nifty-icon-gizmo-that-animates-into-view"></i>
</a>

Existe-t-il un moyen de dissocier cet écouteur d’événement de clic intégré élément par élément ?

J’ai essayé les habituels event.preventDefault et event.stopPropagation pour contourner cela, mais sans succès jusqu’à présent. J’ai également essayé les méthodes jQuery « off » et « unbind », mais je n’arrive pas à le clouer.

Il semble que cela provienne de /wp-includes/js/customize-preview.min.js et tous les événements de clic de balise d’ancrage remontent jusqu’à l’élément body.

Un moyen de contourner cela pour le moment consiste à manipuler le DOM via l’inspecteur du navigateur pour ajouter la classe ou le CSS nécessaire que l’événement de clic d’origine aurait terminé.

Edit : S’il vous plaît, il ne s’agit pas de normes de codage de thème et de sémantique, les exemples fournis ci-dessus ne sont que cela, des exemples dans lesquels tous les plugins pourraient se heurter. Bien que je n’utilise pas nécessairement une balise d’ancrage pour un bouton de menu, nous (en tant que développeurs de logiciels) devons toujours planifier ces choses.

Solution n°1 trouvée

Mise à jour : Le correctif ici a été intégré à WordPress Core trunkpour la prochaine version 4.5 (maintenant en alpha). Voir r36371.

Je pense que le problème avec la dissociation du gestionnaire d’événements est qu’il est fait trop tôt. Essayez de le faire lors de l’ preview-readyévénement Customizer. Par exemple, mettez en file d’attente le JS suivant dans votre aperçu de Customizer (avec customize-previewcomme dépendance de script) ce qui court-circuite la click.previewlogique si le lien cliqué a une cible de lien dans la page ou s’il utilise le javascript:protocole :

if ( //customize.php$/.test( window.location.pathname ) ) {
    wp.customize.bind( 'preview-ready', function() {
        var body = $( 'body' );
        body.off( 'click.preview' );
        body.on( 'click.preview', 'a[href]', function( event ) {
            var link = $( this );
            if ( /^(#|javascript:)/.test( link.attr( 'href' ) ) ) {
                return;
            }
            event.preventDefault();
            wp.customize.preview.send( 'scroll', 0 );
            wp.customize.preview.send( 'url', link.prop( 'href' ) );
        });
    } );
}

L’inclusion du hreftype devrait vraiment faire partie de Core et je l’ajouterai à ma liste de tâches pour que cela soit engagé dans le cadre du cycle 4.5.

Notez que le test customize.phpconsiste à s’assurer que les transactions avec l’URL naturelle utilisée comme URL d’aperçu du personnalisateur iframen’ont pas encore été implémentées, car cette modification entraînera des modifications de la click.previewlogique.