Интерфейс слушателей событий

Общие сведения

Панель управления (Backend UI) Pimcore основана на фреймворке Ext JS. Слушатель событий может добавлять компоненты Ext JS в пользовательский интерфейс или выполнять любой другой JavaScript-код, необходимый в контексте слушателя.

Все скрипты JavaScript и таблицы стилей CSS, которые должны быть включены, необходимо определить в классе вашего бандла, как описано в разделе бандлы Pimcore.

В качестве альтернативы, вы можете настроить это через EventListener:

services:  
  # Добавляет дополнительные статические файлы в админ-панель 
  App\EventListener\PimcoreAdminListener:  
    tags:  
      - { name: kernel.event_listener, event: pimcore.bundle_manager.paths.css, method: addCSSFiles }  
      - { name: kernel.event_listener, event: pimcore.bundle_manager.paths.js, method: addJSFiles }  

<?php  
namespace App\EventListener;  
  
use Pimcore\Event\BundleManager\PathsEvent;  
  
class PimcoreAdminListener  
{  
    public function addCSSFiles(PathsEvent $event): void  
    {  
        $event->addPaths([  
            '/admin-static/css/admin-style.css',  
        ]);  
    }  
  
    public function addJSFiles(PathsEvent $event): void  
    {  
        $event->addPaths([  
            '/admin-static/js/startup.js',  
        ]);  
    }  
}  

Эти скрипты загружаются последними при запуске Pimcore в том же порядке, который указан в классе бандла.

Точкой входа для разработки на JavaScript является JavaScript-слушатель событий.

Пример слушателя:

document.addEventListener(pimcore.events.pimcoreReady, (e) => {  
    //Вывод параметров события в консоль
    console.log(e.detail)  
});  

JavaScript UI События

Для регистрации событий просто добавьте слушатель, используя события из events.js.

Валидация данных объекта Pimcore перед сохранением

Вы можете валидировать данные объекта на стороне клиента и при необходимости отменить сохранение.

Это делается с помощью методов preventDefault() и stopPropagation():

Пример кода в startup.js:

document.addEventListener(pimcore.events.preSaveObject, (e) => {  
    let userAnswer = confirm(`Are you sure you want to save ${e.detail.object.data.general.className}?`);  
    if (!userAnswer) {  
        e.preventDefault();  
        e.stopPropagation();  
        pimcore.helpers.showNotification(t("Info"), t("saving_failed") + ' ' + 'placeholder', 'info');  
  
    }  
});  

Интернационализация для JS

Pimcore поддерживает локализацию расширений интерфейса. Сначала подготовьте данные на стороне сервера (см. раздел Интернационализация для бандлов.

После этого к переводам можно обращаться в любом месте JS-кода:

t('translation_key')  

Добавление собственных пунктов в главное меню

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

pimcore.plugin.mybundle = Class.create({  
    initialize: function () {  
        document.addEventListener(pimcore.events.preMenuBuild, this.preMenuBuild.bind(this));  
    },  
  
    preMenuBuild: function (e) {  
        // Событие, содержащее существующее меню  
        let menu = e.detail.menu;  
  
        let items = [];  
        // Имя свойства используется как ID с префиксом pimcore_menu_ (например, pimcore_menu_mybundle) 
        menu.mybundle = {  
            label: t('myBundleLabel'), // установите здесь свой ярлык, который будет показан в виде всплывающей подсказки
            iconCls: 'pimcore_main_nav_icon_myIcon', // укажите здесь полное название иконки
            priority: 42, // определите позицию, в которой должно отображаться ваше меню. В основных пунктах меню будет оставлен промежуток в 10 пользовательских пунктов главного меню 
            items: items, //если в вашем главном меню есть подпункты, пожалуйста, ознакомьтесь с разделом Добавление пользовательских подменю к существующим элементам навигации
            shadow: false,  
            handler: this.openMyBundle, // определение обработчика переопределит стандартную функциональность "showSubMenu", используемую в сочетании с "noSubmenus"  
            noSubmenus: true, // если подменю отсутствуют, установите значение true, в противном случае меню не будет отображаться
            cls: "pimcore_navigation_flyout", // используйте pimcore_navigation_flyout, если у вас есть подпункты
        };  
    },  
  
    openMyBundle: function(e) {  
        try {  
            pimcore.globalmanager.get("plugin_pimcore_mybundle").activate();  
        } catch (e) {  
            pimcore.globalmanager.add("plugin_pimcore_mybundle", new pimcore.plugin.mybundle());  
        }  
    }  
});  
  
var myBundle = new pimcore.plugin.mybundle();  

Добавление пользовательских подменю к существующим элементам навигации

Можно добавить подменю к существующим меню, просто добавив новый пункт меню в подменю.

pimcore.registerNS("pimcore.bundle.glossary.startup");  
  
pimcore.bundle.glossary.startup = Class.create({  
    initialize: function () {  
        document.addEventListener(pimcore.events.preMenuBuild, this.preMenuBuild.bind(this));  
    },  
  
    preMenuBuild: function (e) {  
        let menu = e.detail.menu;  
        // получение пользователя для проверки наличия разрешений
        const user = pimcore.globalmanager.get('user');  
        const perspectiveCfg = pimcore.globalmanager.get("perspective");  
  
        if (menu.extras && user.isAllowed("glossary") && perspectiveCfg.inToolbar("extras.glossary")) {  
            // просто добавьте новый пункт меню в существующее меню
            menu.extras.items.push({  
                text: t("glossary"),  
                iconCls: "pimcore_nav_icon_glossary", // убедитесь, что ваш класс иконок существует
                priority: 5, // определите позицию, в которой должно отображаться ваше меню. Для основных пунктов меню будет оставлен промежуток в 10 пунктов пользовательского меню
                itemId: 'pimcore_menu_extras_glossary', // укажите здесь свой пользовательский ItemId
                handler: this.editGlossary, // определите обработчик того, что должно произойти, если вы нажмете на пункт меню
            });  
        }  
    },  
  
    editGlossary: function() {  
        try {  
            pimcore.globalmanager.get("bundle_glossary").activate();  
        } catch (e) {  
            pimcore.globalmanager.add("bundle_glossary", new pimcore.bundle.glossary.settings());  
        }  
    }  
});  
  
const pimcoreBundleGlossary = new pimcore.bundle.glossary.startup();  

Добавление собственных горячих клавиш

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

pimcore_admin:  
    user:  
        default_key_bindings:  
            glossary:  
                key: 'G'  
                action: glossary # убедитесь, что действие имеет то же имя, что и функция, которую вы добавляете в keyBindingMapping, например, pimcore.helpers.keyBindingMapping.glossary  
                alt: true  
                shift: true  

pimcore.registerNS("pimcore.bundle.glossary.startup");  
  
pimcore.bundle.glossary.startup = Class.create({  
    initialize: function () {  
        document.addEventListener(pimcore.events.preRegisterKeyBindings, this.registerKeyBinding.bind(this));  
    },  
      
    registerKeyBinding: function(e) {  
        const user = pimcore.globalmanager.get('user');  
        // всегда проверяйте наличие разрешений перед добавлением привязки клавиш
        if (user.isAllowed("glossary")) {  
            // убедитесь, что функция и название действия совпадают
            pimcore.helpers.keyBindingMapping.glossary = function() {  
                pimcoreBundleGlossary.editGlossary();  
            }  
        }  
    }  
});  
  
const pimcoreBundleGlossary = new pimcore.bundle.glossary.startup();