Управление стилями панели администратора WP с помощью событий

У меня смешанные чувства по поводу панели администратора WordPress, но это связано с тем, как сторонние решения добавляют к ней свои параметры (плюс, ее можно отключить, если вы не являетесь ее большим поклонником).

Недавно я опубликовал небольшой плагин, предназначенный в первую очередь для разработчиков, который позволяет пользователям переключать уведомления администратора всякий раз, когда они работают с WordPress (в идеале в своей локальной среде, хотя его можно установить везде, где установлен WordPress).

Плагин прост:

• Он вводит элемент в панель администратора WP,
• Когда вы нажимаете на элемент, он переключает любые отображаемые уведомления или сообщения,
• Когда вы нажмете на нее еще раз, она изменит их видимость.

Но есть небольшой нюанс, который, я думаю, стоит осветить, и он связан с манипулированием стилями панели администратора WP с использованием кода на стороне клиента.

Все это описано в начальном посте, но есть один аспект кода, которым, я думаю, стоит поделиться с теми, кто работает с панелью администратора и теми, кто работает с JavaScript.

Стили панели администратора WP

Если вы посмотрите на исходный код JavaScript, включенного в плагин, вы увидите следующее :

(function( $) {
    'use strict';

    /**
     * Hide all of the messages when the option is include and restore the menu items'
     * default hover state style.
     */
    var hide_menu_notices = function() {

        // Setup references to the plugin menu item and all admin notices.
        var $admin_button = $( '#wp-admin-bar-toggle-admin-notices a' ),
            $messages     = $( '.notice, .warning, .error' );

        $admin_button.on( 'click', function( evt) {
            evt.preventDefault();

            $messages.toggle( 'medium' );
            $( this ).trigger( 'blur' );
        });
    };

    $(function() {
    hide_admin_notices();
    });
})( jQuery );

Вообще говоря, всякий раз, когда пользователь щелкает элемент в панели администратора WP, он перенаправляет его на другую страницу [сервера] или отображает элемент подменю, который делает то же самое. Однако в случае с этим плагином он работает на стороне клиента, так что это все JavaScript.

Это означает, что мы должны знать о событиях, связанных с элементом, чтобы мы могли манипулировать ими. И это то, к чему я веду этот пост.

Короче говоря:

К элементам меню прикреплено событие размытия, которое позволяет нам запускать их, чтобы мы могли управлять стилями панели администратора WP.

Конечно, это не должно быть изолировано от функциональности на стороне клиента, но если вы хотите манипулировать стилями пункта меню при наведении указателя мыши на элемент перед загрузкой другой страницы, это событие, которое вы хотите использовать (в по крайней мере на момент написания этого поста).

Если вы работаете над плагином, который интегрируется со строкой меню, и хотите манипулировать стилями панели администратора WP с помощью JavaScript, событие размытия — это то, что вы хотите использовать всякий раз, когда ваш конкретный элемент строки меню вызывает событие.