Документация разработчика

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

Модальное окно — это окно, которое не имеет своей индивидуальной формы в «Конфигураторе» (Редактирования/Списка).

Форма добавляется в ручном режиме в уже существующей другой (родительской) форме.

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

Структура модального окна

Header

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

Content

Основное тело окна (контент). Может иметь дополнительные класс «scrolling», который говорит модальному окну, что контент внутри может быть прокручиваемый.

Actions

Содержит кнопки действий, связанные с событиями окна на JavaScript.

В любом окне можно добавить кнопки действия: Approve и Deny.

Для Approve кнопка должна иметь хотя бы один из классов: «.actions .positive, .actions .approve, .actions .ok».

В Системе в основном используется «ok».

При нажатии на такие кнопки, модальное окно генерирует Сallback-событие (см. ниже).

Пример модального окна:

<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

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

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

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

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

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

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

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

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

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

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

Доступные Callback:

• 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 есть несколько заготовленных модальных окон с возможностью клонирования и удаления.

Пример:

{    //Заголовок окна
    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"}
</div>

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

Результат:

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);

Открыть модальное окно в модальном окне

Код кнопки для открытия модального окна:

<button class="btn green-meadow" onclick="edition('$parent0', '$parent1')"><i class="fa fa-plus"></i> Открыть модальное окно</button>

Функция JS:

function edition(owner, id) {
    var modalSettings = {
        size: 'fullscreen',
        name: 'edition',
        title: 'Тираж',
        actionMode: 'saved',
        actionButton: {
            label: 'Сохранить'
        }
    };

    owner = jsApplication.getNumber(owner);
    id = jsApplication.getNumber(id);
    var link = "/companies/" + owner + "/deals/" + id + "/calculation_edition/add";

    top.jsApplication.frameModal( $("#EditModal"), link, undefined, modalSettings, function(currentModal, closeCallback) {
        var form = $(currentModal).find("iframe").contents().find("#content form").get(0);
        if(form != undefined) {
// здесь можно прописать валидацию, отправку формы на какой-либо адрес
            jsApplication.closeModal(currentModal);
        } else {
            jsApplication.closeModal(currentModal);
        }
    });
}