web-dev-qa-db-fra.com

Remplacement de select2 dans le backend admin pour tous les selects

À l’origine, j’avais posté cette question sous forme de question javascript ici, mais je pense qu’il serait peut-être préférable de la poser ici. J'ai essayé d'ajouter select2 à tous les écrans d'administration wordpress. Cependant, comme beaucoup de sélections sont créées de manière dynamique, je devais trouver un moyen de reconnaître les sélections dynamiques. Je l’ai fait fonctionner, mais les sélections dynamiques ne se chargent pas avec la bonne largeur et le bon positionnement. Prenons par exemple la page http://example.com/wp-admin/edit.php . Lorsque vous cliquez sur Édition rapide, select2 ne trouve pas la largeur et le positionnement corrects des nouvelles sélections. Si vous regardez la source, vous pouvez voir que la liste déroulante contient les attributs de style suivants:

style="width:0; top:0; left:0;

Pour cette raison, cela ne s'affiche pas lorsque vous cliquez dessus. Cependant, si vous cliquez sur une nouvelle sélection, puis cliquez à nouveau juste en dessous, les styles sont mis à jour, mais le calque select2 est maintenant déplacé à droite des sélections.

Voici un exemple de plugin si quelqu'un veut le tester suivi de quelques captures d'écran:

<?php

/**
 * Plugin Name: Admin Select2 Not Working Everywhere
 * Plugin URI: 
 * Description: Adds select2 to all admin screens
 * Version: 1.0
 * Author: Bryan Willis
 * Author URI: 
 * License: GPL2
 */

function enqueue_select2_jquery() {
    wp_register_style( 'select2css', 'http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css', false, '1.0', 'all' );
    wp_register_script( 'select2', 'http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'select2css' );
    wp_enqueue_script( 'select2' );
    }
add_action( 'admin_enqueue_scripts', 'enqueue_select2_jquery' );

function select2jquery_inline() {
    ?>
<style type="text/css">
.select2-container {margin: 0 2px 0 2px;}
.tablenav.top #doaction, #doaction2, #post-query-submit {margin: 0px 4px 0 4px;}
</style>        
<script type='text/javascript'>
jQuery(document).ready(function ($) {
   $("select").select2(); 
   $( document.body ).on( "click", function() {
        $("select").select2(); 
     });
});
</script>   
    <?php
 }
add_action( 'admin_head', 'select2jquery_inline' );

enter image description here

enter image description here

enter image description here

enter image description here

functionsjqueryadminwp-adminselect
3
Bryan Willis

Le problème est lié à la rapidité de l’édition - WordPress utilise un <div /> caché pour générer le formulaire, sur lequel select2 aura déjà été appliqué (et donc les positions déjà calculées).

Votre écouteur d'événement click sur le corps ne se déclenchera pas lorsque vous en aurez besoin, car le gestionnaire d'événements principal pour l'édition rapide renvoie false, en arrêtant toute propagation d'événement. Au lieu de cela, vous pouvez écouter discrètement l'événement focus pour l'entrée de titre, qui est déclenché une fois le formulaire d'édition rapide rendu:

jQuery( document ).ready(
    function( $ ) {
        $( "select:visible" ).select2(); // Only fire on visible inputs to begin with.
        $( document.body ).on( "focus", ".ptitle,select",
            function ( ev ) {
                if ( ev.target.nodeName === "SELECT" ) {
                    // Fire for this element only
                    $( this ).select2({ width: "element" });
                } else {
                    // Fire again, but only for selects that haven't yet been select2'd
                    $( "select:visible" ).not( ".select2-offscreen" ).select2({
                        width: "element"
                    });
                }
            }
        );
    }
);

Vous verrez que j'ai également ajouté l'argument width: "element". Cela signifie que select2 calculera une largeur appropriée en fonction de la longueur des options. Sans cela, select2 est beaucoup trop étroit pour certaines options, notamment "Page Parent" avec de longs titres de page.

Cette solution résoudra spécifiquement votre problème avec l'édition rapide, mais vous devrez probablement implémenter des "correctifs" supplémentaires pour d'autres situations dynamiques, en particulier si vous souhaitez jouer à Nice avec des plugins tels que Advanced Custom Fields.

1
TheDeadMedic