it-swarm.com.de

Ersetzen von select2 im Admin-Backend für alle Selects

Ich habe diese Frage ursprünglich als JavaScript-Frage hier gepostet, denke aber, dass sie hier besser gestellt werden sollte. Ich habe versucht, select2 zu allen WordPress-Admin-Bildschirmen hinzuzufügen. Da jedoch viele Auswahlen dynamisch erstellt werden, musste ich einen Weg finden, um die dynamischen Auswahlen zu erkennen. Ich habe es zum Laufen gebracht, aber die dynamischen Auswahlen werden nicht mit der richtigen Breite und Positionierung geladen. Nehmen Sie zum Beispiel die http://example.com/wp-admin/edit.php Seite. Wenn Sie auf Schnellbearbeitung klicken, findet select2 nicht die richtige Breite und Position der neuen Auswahl. Wenn Sie sich die Quelle ansehen, sehen Sie, dass die Dropdown-Liste die folgenden Stilattribute enthält:

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

Aus diesem Grund wird es nicht angezeigt, wenn Sie darauf klicken. Wenn Sie jedoch auf eine neue Auswahl klicken und dann direkt darunter erneut klicken, werden die Stile aktualisiert, und die Überlagerung select2 wird jetzt direkt rechts von den Auswahlen verschoben.

Hier ist ein Beispiel-Plugin, wenn jemand es testen möchte, gefolgt von einigen Screenshots:

<?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

3
Bryan Willis

Das Problem ist, wie schnell die Bearbeitung funktioniert - WordPress verwendet einen versteckten <div />, um das Formular zu generieren, auf das bereits select2 angewendet wurde (und somit die bereits berechneten Positionen).

Ihr click -Ereignis-Listener für den Body wird nicht ausgelöst, wenn Sie ihn benötigen, da der zentrale Ereignishandler für die schnelle Bearbeitung false zurückgibt und die Ereignisweitergabe stoppt. Stattdessen können Sie sich das Ereignis focus für die Titeleingabe anhören, das nach dem Rendern des Schnellbearbeitungsformulars ausgelöst wird:

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

Sie werden sehen, dass ich auch das Argument width: "element" hinzugefügt habe. Dies bedeutet, dass select2 eine geeignete Breite basierend auf der Länge der Optionen berechnet. Andernfalls ist select2 für einige Optionen viel zu eng, insbesondere für "Übergeordnete Seite" mit langen Seitentiteln.

Diese Lösung behebt Ihr Problem mit der Schnellbearbeitung, aber Sie müssen wahrscheinlich zusätzliche "Korrekturen" für andere dynamische Situationen implementieren, insbesondere wenn Sie Nice mit Plugins wie Advanced Custom Fields spielen möchten.

1
TheDeadMedic