Хук в wp.media для добавления новой вкладки

Вопрос или проблема

(function($) {

    // Сохраняем оригинальную функцию инициализации
    var originalInitialize = wp.media.view.MediaFrame.Select.prototype.initialize;

    // Расширяем прототип MediaFrame.Select
    wp.media.view.MediaFrame.Select.prototype.initialize = function() {

        // Вызываем оригинальный метод инициализации, чтобы гарантировать правильную настройку фрейма
        originalInitialize.apply(this, arguments);

        // Ваш пользовательский код здесь
        // Например, показать alert, когда модальное окно медиа инициализировано
        alert('Модальное окно медиа инициализировано!');

        // Настраиваем слушателя событий для добавления пользовательской вкладки, когда создается маршрутизатор
        this.on('router:create:browse', this.addCustomTab, this);
    };

    // Определяем функцию для добавления пользовательской вкладки
    wp.media.view.MediaFrame.Select.prototype.addCustomTab = function(routerView) {
        routerView.set({
            // Определите вашу пользовательскую вкладку
            myCustomTab: {
                text: 'Моя пользовательская вкладка', // Метка вкладки
                priority: 100,        // Позиция вкладки
                click: function() {   // Действие при нажатии на вкладку
                    // Переключаемся на режим вашего пользовательского контента
                    this.content.mode('myCustomContent');
                }
            }
        });
    };

    // Переопределяем bindHandlers, чтобы включить ваш пользовательский режим контента
    var originalBindHandlers = wp.media.view.MediaFrame.Select.prototype.bindHandlers;
    wp.media.view.MediaFrame.Select.prototype.bindHandlers = function() {
        // Вызываем оригинальный метод bindHandlers
        originalBindHandlers.apply(this, arguments);

        // Добавляем обработчик для вашего пользовательского режима контента
        this.on('content:render:myCustomContent', this.renderCustomContent, this);
    };

    // Определяем функцию для рендеринга вашего пользовательского контента
    wp.media.view.MediaFrame.Select.prototype.renderCustomContent = function() {
        // Создайте новый вид для вашего пользовательского контента
        var view = new wp.media.View({
            className: 'my-custom-content',
            controller: this
        });

        // Устанавливаем содержимое вида
        view.$el.html('<h1>Мой пользовательский контент</h1><p>Это контент в пользовательской вкладке.</p>');

        // Отображаем вид в модальном окне
        this.content.set(view);
    };

})(jQuery);

.

Ответ или решение

Добавление новой вкладки в модальное окно wp.media

Если вы разрабатываете плагин и хотите расширить функциональность модального окна wp.media.view.MediaFrame.Select, добавив новую вкладку, вы можете добиться этого, модифицируя прототипы встроенных функций WordPress. Такой подход позволит вам внедрять свои изменения в любые модальные окна, включая те, которые используются в настройщике (Customizer).

Основной принцип

Для начала мы изменим метод инициализации MediaFrame.Select, чтобы выполнять дополнительные действия при открытии модального окна. Мы также добавим обработчик событий, который создаст пользовательскую вкладку. Рассмотрим основной шаг за шагом:

1. Переопределение инициализации: Сначала мы сохраним оригинальную инициализацию и создадим новую, в которой добавим нужный функционал.
2. Создание пользовательской вкладки: В рамках нового метода инициализации мы добавим вкладку с определённым контентом.
3. Рендеринг пользовательского контента: Нам нужно будет создать метод для отображения содержимого на новой вкладке.

Вот как может выглядеть решение:

(function($) {

    // Сохраняем оригинальную функцию инициализации
    var originalInitialize = wp.media.view.MediaFrame.Select.prototype.initialize;

    // Расширяем прототип MediaFrame.Select
    wp.media.view.MediaFrame.Select.prototype.initialize = function() {

        // Вызываем оригинальный метод инициализации
        originalInitialize.apply(this, arguments);

        // Здесь будет ваш код - например, можно вывести алерт при инициализации
        alert('Модальное окно медиа инициализировано!');

        // Устанавливаем обработчик события для добавления кастомной вкладки
        this.on('router:create:browse', this.addCustomTab, this);
    };

    // Функция для добавления пользовательской вкладки
    wp.media.view.MediaFrame.Select.prototype.addCustomTab = function(routerView) {
        routerView.set({
            myCustomTab: {
                text: 'Моя Кастомная Вкладка', // Заголовок вкладки
                priority: 100,                // Порядок отображения
                click: function() {           // Действие при нажатии на вкладку
                    // Переход к вашему пользовательскому контенту
                    this.content.mode('myCustomContent');
                }
            }
        });
    };

    // Переопределяем bindHandlers для включения вашего пользовательского контента
    var originalBindHandlers = wp.media.view.MediaFrame.Select.prototype.bindHandlers;
    wp.media.view.MediaFrame.Select.prototype.bindHandlers = function() {
        // Вызываем оригинальный метод
        originalBindHandlers.apply(this, arguments);

        // Добавляем обработчик для вашего пользовательского контента
        this.on('content:render:myCustomContent', this.renderCustomContent, this);
    };

    // Функция для рендеринга вашего пользовательского контента
    wp.media.view.MediaFrame.Select.prototype.renderCustomContent = function() {
        // Создаем новое представление для вашего контента
        var view = new wp.media.View({
            className: 'my-custom-content',
            controller: this
        });

        // Устанавливаем содержание представления
        view.$el.html('<h1>Мой Пользовательский Контент</h1><p>Это содержимое в кастомной вкладке.</p>');

        // Отображаем представление в модальном окне
        this.content.set(view);
    };

})(jQuery);

Подведение итогов

Используя вышеописанный код, вам удастся добавить новую вкладку в модальное окно wp.media, а также обеспечить поддержку пользовательского контента, который будет выводиться при её активации. Этот подход является более чистым и эффективным по сравнению с обходными решениями, такими как хакерские методы или частое отслеживание состояния модального окна. Вы сможете легко настраивать и расширять функциональность вашего плагина.

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