it-swarm.com.ru

Замена select2 в админ-панели для всех селектов

Я первоначально разместил этот вопрос как вопрос javascript здесь, но думаю, что, возможно, его лучше задать здесь. Я попытался добавить select2 ко всем экранам администратора WordPress. Однако, поскольку многие выборки создаются динамически, мне нужно было найти способ распознавать динамические выборки. Я получил это работает, но динамические выделения не загружаются с правильной шириной и позиционированием. Возьмите, например, страницу http://example.com/wp-admin/edit.php . При нажатии быстрого редактирования, select2 не находит правильную ширину и расположение новых селекторов. Если вы посмотрите на источник, вы увидите, что выпадающий список со следующими атрибутами стиля:

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

Из-за этого он не отображается при нажатии на него. Однако, если вы щелкнете по новому селекту, а затем снова кликните прямо под ним, он обновит стили, но теперь переместит оверлей select2 вправо от селектов.

Вот пример плагина, если кто-то хочет его протестировать, а затем несколько скриншотов:

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

Проблема заключается в том, как работает быстрое редактирование - WordPress использует скрытый <div /> для генерации формы, к которой уже был применен select2 (и, следовательно, позиции уже рассчитаны).

Ваш прослушиватель событий click в теле не будет запускаться, когда вам это нужно, поскольку основной обработчик событий для быстрого редактирования возвращает false, останавливая любое распространение события. Вместо этого вы можете незаметно прослушивать событие focus для ввода заголовка, которое запускается после визуализации формы быстрого редактирования:

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

Вы увидите, что я также добавил аргумент width: "element". Это означает, что select2 вычислит подходящую ширину на основе длины опций. Без этого select2 слишком узок для некоторых опций, в частности для "Page Parent" с длинными заголовками страниц.

Это решение определенно решит вашу проблему с быстрым редактированием, но вам, вероятно, потребуется внедрить дополнительные "исправления" для других динамических ситуаций, особенно если вы хотите играть в "Ниццу" с плагинами, такими как Advanced Custom Fields.

1
TheDeadMedic