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

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

Html

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

<div class="ui tiny modal" id="confirmModal" data-backdrop="false">
    <div class="header">Заголовок модального окна</div>
    <div class="content">
        Тело модального окна
    </div>
    <div class="actions">
        <!--Кнопки действий обязательно находится должны здесь-->
        <input type="submit" class="btn btn-rbs green button ok btn-sm" value="Ok">
        <a class="cancel btn btn-default btn-sm" data-dismiss="modal">Закрыть</a>
    </div>
</div>

Любое модальное окно должно иметь классы «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%:

<div class="ui tiny modal" id="confirmModal" data-backdrop="false" modal-title="test" modal-size="large">
......
jsApplication.getModalOptionsAttr ($("#confirmModal"))
//Вернет {title: "test", size: "large"}

Модальные окна инициализировать лучше через 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",
    },
}

Шаблон

<div class="ui small longer modal" id="emptyModal" data-backdrop="false">
    <div class="header">Простое модальное окно</div>
    <div class="scrolling content">
        <p>simple modal</p>
    </div>
    <div class="actions">
        <a class="cancel btn btn-default btn-sm" data-dismiss="modal">##L:Close</a>
    </div>
</div>

Вызов

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",
        },
}

Шаблон

<div class="ui tiny modal" id="confirmModal" data-backdrop="false">
    <div class="header">#L:Deleting</div>
    <div class="content">
        <p>#L:DialogsConfirmDeleteText</p>
    </div>
    <div class="actions">
        <input type="submit" id="confirmModalOkButton" class="btn btn-rbs green button ok btn-sm" value="#L:Confirm">
        <a class="cancel btn btn-default btn-sm" data-dismiss="modal">##L:Close</a>
    </div>
</div>

Вызов

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
}

Шаблон

<div class="ui fullscreen longer modal" id="EditModal" data-backdrop="false">
    <div class="header">Добавить значение</div>
    <div class="scrolling content frame-mode no-space">
        <p>edit</p>
    </div>
    <div class="actions">
        <input type="submit"  class="btn btn-rbs green button ok btn-sm" value="#L:Save">
        <a class="cancel btn btn-default btn-sm" data-dismiss="modal">##L:Close</a>
    </div>
</div>

Вызов

 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

<script>
top.jsApplication.findTop("body").on("readyModal", function(e, selectorModal, modalName){
    modalName = jsApplication.getString(modalName);
    //Получить модальное окно в Top
    jsApplication.getModal(selectorModal).find(".actions .btn.cancel").removeClass("disabled");
    jsApplication.getModal(selectorModal).find(".content").removeClass("loading");
});
</script>

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 селектор нового модального окна

Шаблон

<div class="ui fullscreen longer modal" id="LookupModal" data-backdrop="false">
    <div class="header">##L:Select</div>
    <div class="scrolling content frame-mode">
        <p>lookup</p>
    </div>
    <div class="actions">
        <input type="submit" id="delStruct22222" class="btn btn-rbs green button ok btn-sm" value="#L:Select">
        <a class="cancel btn btn-default btn-sm" data-dismiss="modal">##L:Close</a>
    </div>
</div>

Вызов

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 селектор нового модального окна
Шаблон

<div class="ui fullscreen longer modal" id="EditModal" data-backdrop="false">
    <div class="header">Добавить значение</div>
    <div class="scrolling content frame-mode no-space">
        <p>edit</p>
    </div>
    <div class="actions">
        <input type="submit"  class="btn btn-rbs green button ok btn-sm" value="#L:Save">
        <a class="cancel btn btn-default btn-sm" data-dismiss="modal">##L:Close</a>
    </div>
</div>

В случае с 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