Модальные окна

Все модальные окна, имеют архитектуру и взаимодействия от semantic-ui modal. Ссылка на документацию

Html

Модальное окно должно состоять из следующих элементов:


Любое модальное окно должно иметь классы «ui modal» и атрибут data-backdrop = «false» — для того, что бы не было конфликтов с bootstrap.

Размеры окна на разрешении fullHD (Все окна адаптивны):

  • mini — ширина ~380px
  • tiny — ширина ~570px
  • small — ширина ~760px
  • large — ширина ~1140px
  • fullscreen — ширина ~1824px

Внутри следующая структура:

  • header — заголовок
  • content — основное тело
  • actions — тут находятся все кнопки

Header

Заголовок вверху модального окна и может содержать текст и цвет

Сontent

Может иметь дополнительные класс — scrolling, говорит модальному окну, что контент внутри может быть прокручиваемый

Actions

Содержит все кнопки действий, связанные с событиями окна на javascript.
В Любом окне можно добавить кнопки действия Approve и Deny.
Для Approve, кнопка должна иметь хотя бы один из классов: ‘.actions .positive, .actions .approve, .actions .ok’. В системе в основном используется «ok»
При нажатии на такие кнопки, модальное окно генерирует javascript callback: onApprove($element)

Javascript

Модальное окно создается и открывается следующей конструкцией:

$("#confirmModal").modal("show");

Опции

Все опции можно посмотреть на официальной странице документации


$(«#confirmModal»).modal({
//возможность открывать несколько модальных окон сразу.
allowMultiple: true,
//Не закрывать при клике на фон или по клавише Escape
closable: false,
//отключить анимацию
duration: 0,
}).modal(«show»);

Методы

Все методы можно посмотреть на официальной странице документации, в конце страницы


//Показывает модальное окно
$(«#confirmModal»).modal(«show»);
//Скрывает модальное окно
$(«#confirmModal»).modal(«hide»);

Все созданные окна после метода hide не удаляются!

Обратные функции(callback)

Обратные вызовы определяют функцию, которая возникает после определенного поведения.
Если в методе вернуть (return false), то метод не выполнится, например в onApprove, onHide

  • onShow — Срабатывает, когда вызван метод «show», но до момента самого показа.
  • onVisible — Срабатывает, когда вызван метод «show» и все анимации закончились. После того как окно полностью показалось
  • onHide($element) — Вызывается перед тем, как окно закроется
  • onHidden — Вызывается, когда окно только что закрылось
  • onApprove($element) — Вызывается, когда нажата одна из кнопок, имеющих один из классов в разделе actions: (‘.actions .positive, .actions .approve, .actions .ok’)
  • onDeny($element) — Вызывается, когда нажата одна из кнопок, имеющих один из классов в разделе actions: (‘.actions .negative, .actions .deny, .actions .cancel’)


$(«#confirmModal»).modal({
//возможность открывать несколько модальных окон сразу.
allowMultiple: true,
//Не закрывать при клике на фон или по клавише Escape
closable: false,
//отключить анимацию
duration: 0,

//OK
onApprove: function($element) {

},

//Cancel
onDeny($element) {

}
}).modal(«show»);

jsApplication.modal — модальные окна

В jsApplication есть несколько заготовленных модальных окон, с возможностью клонирования и удаления.

Опции

{
//Заголовок окна
title: jsApplication.getTranslate(«emptyModal.title»),

//Контент html
body: «»,

//Размер окна
size: «big»,

//Закрывать при клике на фон.
closable: true,

//Настройка Approve button
actionButton: {
//Название кнопки
label: jsApplication.getTranslate(«buttons.Save»),
//Post action
action: «save»,
//Цвет из библиотеки цветов
appendClass: «green»,
},

//multiple window
multi: false
}

Функция для установки объекта modal settings в модальное окно
jsApplication.setModalOptions (String | Selector selectorModal, Object modalOptions = {})
selectorModal — ссылка на clonedModal
modalOptions — Какие опции переопределить

Функция для клонирование окна и всех элементов
Selector String jsApplication.getClonedModal(String | Selector selectorModal)
selectorModal — ссылка на clonedModal
Возвращает ID селектор нового модального окна, с клонированного с оригинала. Все id будут заменены на id_%NUM%

Если модальное окно создано было через clonedModal, то его удалить можно следующей функцией.
jsApplication.closeModal(String | Selector selectorModal)
selectorModal — ссылка на clonedModal
Удаляет cloned modal из dom дерева.

Во всех jsApplication.*modal эта процедура выполняется автоматически в onHide.

Функция очистки размеров окна для установки нового
jsApplication.clearModalSize(String | Selector selectorModal)
selectorModal — html selector

jsApplication.clearModalSize("#LookupModal");

Функция для получения settings Modal по атрибутам
Selector String jsApplication.getModalOptionsAttr (String | Selector selectorModal)
selectorModal — html selector

Для того что бы взять атрибут например title и size, то необходимо поставить префикс modal-%name%:

Модальные окна инициализировать лучше через jsApplication. Так как там есть механизмы для работы с нескольким окнами, с возможностью наслоения, клонирования в список модальных окон и удаление их из DOM дерева. Все подобные окна, если не переопределять onHide, то автоматически выполняется jsApplication.closeModal();

jsApplication.showModal(selectorModal, settings)

Данный метод, берет любое semantic-ui modal окно и создает cloneModal, а при закрытии closeModal автоматически.

Есть так же некоторые готовые наборы

jsApplication.emptyModal(modalOptions, selectorModal)

Вызывает простое модальное окно. Если не задан selectorModal, то берет системный #emptyModal.
Возвращает ID селектор нового модального окна

Дополнительные опции (modalOptions)

{
//Заголовок окна
title: jsApplication.getTranslate(«emptyModal.title»),

//Размер окна
size: «big»,

//Закрывать при клике на фон.
closable: true,

//Настройка Approve button
actionButton: {
//Название кнопки
label: jsApplication.getTranslate(«emptyModal.cancelButton.title»),
//Цвет из библиотеки цветов
appendClass: «green»,
},
}

Шаблон


Вызов

jsApplication.emptyModal({
    title: "test",
    onShow: function(){
        //you code
    }
});

jsApplication.confirmModal(modalOptions, selectorModal)

Вызывает модальное окно подтверждения. Если не задан selectorModal, то берет системный #confirmModal.
Возвращает ID селектор нового модального окна

Дополнительные опции (modalOptions)

{
//заголовок окна
title: «Confirm»,

//содержание
body: «»,

//Настройка Approve button
actionButton: {
//Название кнопки
label: ‘Ok’,
//Цвет из библиотеки цветов
appendClass: «green»,
},
}

Шаблон


Вызов

jsApplication.confirmModal({
    title: "Удаление объекта",
    body: "Вы действительно хотите удалить?",
    onApprove: function(){
         //здесь какой-то код 

         //или ajax запрос
         //то тогда нужно поставить return false;
         //И закрыть окно самостоятельно 
         //jsApplication.closeModal(this);
    }
});

Результат:

confirm modal

jsApplication.frameModal(selectorModal, urlFrame, dopPramas, modalOptions, onSelect, onClose, onReady)

Базовое модальное окно для всех frame-подобных модальных окон. В таких окнах есть callback функции, для того что бы не переопределять через onApprove, т.к. во frameModal в таких методах переопределены многие надстройки, необходимые системе. В том числе autoresize frame.
selectorModal — селектор окна, от которого будет клонироваться.
urlFrame — адрес url для frame
dopPramas — дополнительные параметры к Url. заводится как массив {paramName:paramValue}
modalOptions — опции модального окна
onSelect(Selector currentModal, function closeCallback) — вызывается, когда срабатывает onApprove
onClose — вызывается при onDeny
onReady(Selector selectorModal, Element bodyFrame) — вызывается, когда у окна frame произойдет document.ready
Возвращает ID селектор нового модального окна

При создании frameModal, создается top.currentModal = selectorModal;

Расширенные опции frame modal

{
//0-активность кнопок Approve активируется после frame.document.ready,
//1- это задача ложится на пользователя
customready: 0
}

Шаблон


Вызов

 jsApplication.frameModal($("#EditModal"), "/url/frame", {p1:"value1", p2:2}, { size: "big" },
    function(currentModal, closeCallback){
      if(closeCallback != undefined)
         closeCallback(currentModal);
    }
);

После того, как frame загружен, срабатывает событие top.body(readyModal). Во втором параметре передается [selectorModal, modalName]

Так это событие можно выловить во frame. Подписываться на событие надо до момента frame.document.ready


jsApplication.lookupModal(selectorModal, urlFrame, dopPramas, onSelect, modalOptions, clickObject)

Надстройка frameModal для lookup полей.
selectorModal — селектор окна, от которого будет клонироваться.
urlFrame — адрес url для frame
dopPramas — дополнительные параметры к Url. заводится как массив {paramName:paramValue}
onSelect(Selector currentModal, clickObject) — вызывается, когда срабатывает onApprove
modalOptions — опции модального окна
clickObject — селектор ссылки в lookup
Возвращает ID селектор нового модального окна

Шаблон


Вызов

top.jsApplication.lookupModal( $("#LookupModal"), "/url/", undefined, function(obj, clickObject){
  //obj = {id: 33, value: "text selected", loadedData: {}}
  //you code on onSelected
}, modalSettings, clickObject);

jsApplication.editModal(selectorModal, urlFrame, dopPramas, onSelect, modalOptions)

Надстройка frameModal для всех edit форм (EditModal). Обычно используется при добавлении записи в табличную часть
selectorModal — селектор окна, от которого будет клонироваться.
urlFrame — адрес url для frame
dopPramas — дополнительные параметры к Url. заводится как массив {paramName:paramValue}
onSelect(Selector currentModal, clickObject) — вызывается, когда срабатывает onApprove
modalOptions — опции модального окна
Возвращает ID селектор нового модального окна
Шаблон


В случае с editModal, внутри должна быть форма. При onApprove, editModal ищет форму и выполняет submit. Результат в Action должен быть описан следующий метод:

//this = \Kernel\Actions\Forms\ModalEdit
protected function responseChange() {
    // works - имя динамической таблицы, в которую вставляться будут значения
    $this->response([
	"works"=>[
			"id" => $this->structure->id,
			"act" => $this->formType,
			"product" => $this->structure->name,
			"article" => $this->structure->article,
			"number" => $this->structure->number,
			"price_nds" => String::money($this->structure->price_nds),
			"total" => String::money($this->structure->total)
		]
	]);
    ]);
}

Вызов

top.jsApplication.editModal( $("#EditModal"), "/url/form, {}, function(response){
	//your code
	//response - то что возвращает responseChange
}, modalSettings);
Последние правки: 11.10.2018 18:26:59