В комплекте Drupal включает в себя jquery dialog, который можно подключить и использовать для ваших целей на фронт-енд. Эта статья о том, как это быстро сделать и начать собственно использовать в своей теме оформления.
Типичная тема представляет из себя многослойную матрешку, где вам еще и нужно следить за зависимостями между отдельными библиотеками.
Давайте создадим вспомогательную функцию, которая просто открывает в модальном окне определенную ноду вашего документа. Это удобная обёртка над Drupal.dialog для быстрого создания модальных окон с предустановленными настройками.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/** * @param {jQuery} $elm - jQuery-элемент, который станет содержимым диалога * @param {Object} [props={}] - Дополнительные/переопределяющие настройки диалога * @param {string} [specificClass] - Дополнительный css-класс для конкретного диалога */ function dialogPopup($elm, props = {}, specificClass = '') { // Базовые настройки по умолчанию const defaultProps = { width: 800, effect: "blind", // красивое "слепое" появление сверху вниз duration: 800, // довольно плавно — 0.8 секунды classes: ["ui-dialog", specificClass], // сохраняем стандартный класс + свой beforeClose: (event, ui) => { // можно добавить логику перед закрытием (пока пустая заглушка) }, }; // Создаём диалог, объединяя дефолтные настройки с переданными const dialog = new Drupal.dialog($elm, { ...defaultProps, ...props, }); // Сразу показываем как модальное окно dialog.showModal(); } |
Назовем этот файл как /js/dialogPopupFunc.js и объявим его в *.libraries.yml:
|
1 2 3 4 5 6 7 8 |
function-dialog-popup: version: 1 js: js/dialogPopupFunc.js: { minified: false } dependencies: - core/drupal - core/jquery - core/drupal.dialog |
Дальше можно пытать использовать эту обертку в других библиотеках, например, вы хотите показывать спрятанную в HTML форму как модальное окошко при нажатии на кнопку-ссылку с специфическим url — #callback. В примере — это форма обратного звонка.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/** * Callback Popups. */ (function ($, Drupal) { Drupal.behaviors.componentProjectImagesSlider = { attach: function (context, settings) { // обратный звонок let callbacks = once('popup-demand-once', 'a[href="#callback"]', context); callbacks.forEach((elm) => { // форма окружена оберткой, по которой мы её и находим const $formCallbackElm = $('div.callback-wrapper'); // при клике на кнопку - запускаем библиотечную функцию $(elm).bind('click', (ev) => { ev.stopPropagation(); dialogPopup($formCallbackElm, { title: "Оставить заявку" }); }); }); } }; } (jQuery, Drupal)); |
Назвав этот файл как /js/callbackPopups.js, объявим его в библиотеках темы:
|
1 2 3 4 5 6 7 8 9 10 11 |
component-dialog-popup: version: 1 js: js/callbackPopups.js: { minified: false } dependencies: - core/drupal - core/jquery - core/once - core/drupal.dialog - core/jquery-ui-dialog - MYTHEME/function-dialog-popup |
У библиотеки множество зависимостей от ядра и плюсом идет ранее объявленная библиотека с функцией модального окна.
Наша последняя библиотека скорее всего потребует подключения в шаблоне /templates/layout/page.html.twig. Это делается вот так:
|
1 |
{{ attach_library('MYTHEME/component-dialog-popup') }} |
