Библиотека modals

Библиотека представлена файлом js/modals.js. Позволяет ускорить процесс разработки с использованием модальных окон.
Есть 2 реализации: старая через глобальные функции и новая с использованием AModal

Создание кнопки вызова модального окна в Perl коде выглядит так:

  my $load_to_modal_btn = $html->button( '', undef,
    {
      class          => 'btn btn-sm btn-default',
      JAVASCRIPT     => '',
      SKIP_HREF      => 1,
      NO_LINK_FORMER => 1,
      ex_params      => qq/onclick=loadToModal('?get_index=referral_show&header=2&USER_ID=$referrer_id')/,
      ICON           => 'glyphicon glyphicon-tree-deciduous'
    } );
  }

Ниже представлено описание основных методов

Глобальные функции

Для показа используется объявленное в metatags.tpl модальное окно #PopupModal, контент для показа загружается непосредственно внутрь блока, или в блок #modalContent

loadToModal (url, [callback])

Динамически загружает страницу по заданному url, создаёт обьект aModal, устанавливает полученную страницу в modal-body и показывает новое модальное окно.

loadRawToModal (url, [callback])

Динамически загружает страницу по заданному url, создаёт обьект aModal, вставляет даные телом модального окна и показывает новое модальное окно.
Если данные не обернуты в div.modal-body или div.modal-content, фон модалки будет прозрачным

loadDataToModal(data, decorated, withoutButton)

Вставляет в модальное окно то, что передано в data.
Если decorated=true, то data обёртывается в тело модального окна. Если withoutButton=true, то тело сгенерированного модального окна будет без кнопки.

showImgInModal(url)

Вставляет в модальное окно картинку, с атрибутом src равным заданному url

Объект AModal

Свойства:

• id, дефолтное значение ('PopupModal')

• header

• body

• footer

• rawMode

• is_form
• form_url
• size

Методы:

• setId(id) - установить id
• isForm(boolean) - если true, модальное окно будет обёрнуто тегом form
• setFormUrl(url) - установить URL, на который будет отправлена форма
• setRawMode(boolean) - см. Особые окна
• setHeader(data) - установить заголовок окна
• setBody(body) - установить modal-body
• setSmall(boolean) - если true, модальное окно будет меньшего размера (класс modal-sm)
• setLarge(boolean) - если true, модальное окно будет большего размера (класс modal-lg)
• setFooter(data) - установить modal-footer
• addButton(text, btnId, class_, type) - добавить кнопку
• updateBody(content) - изменить modal-body
• loadUrl(url, callback) - будет загружена страница (url), её содержимое будет подставлено в модальное окно. если передана функция callback, она будет вызвана
• onClose(callback) - установить callback на закрытие окна
• show(callback) - показать модальное окно. если передать параметр callback, будет установлен callback на появление окна
• hide() - скрыть модальное окно
• clear() - очистить модальное окно

Объект представляет собой реализацию конкретной части паттерна Builder.

Пример использования: Показать сообщение в модальном окне:

var modal = aModal.clear()
                    .setBody('<div class="alert alert-success text-center">Самое обычное сообщение</div>')
                    .show();

Показ сложного модального окна с обработчиком кнопки

// Для того чтобы не забивать память созданием нового обьекта,
    // просто очищаем предыдущее модальное окно
    modal = aModal.clear();

    modal
        // Устанавливаем id (необязательно)
        .setId('modalTest')
        
        // Устанавливаем modal-header (необязательно)
        .setHeader('Header')
        
        // Устанавливаем modal-body (необязательно)
        .setBody('<h2>One fine body</h2>')
        
        // Устанавливаем modal-footer (необязательно)
        .setFooter('Footer')
        
        // Добавляем кнопку закрытия (необязательно, в header есть крестик)
        .addButton('Cancel', 'modalCancelBtn', 'default')
        
        // Показываем и устанавливаем обработчик (необязательно)
        .show(function(){
                // Устанавливаем обработчики. 
                // Спрятать модальное окно по клику на кнопку '#modalCancelBtn'
                $('#modalCancelBtn').on('click',  aModal.hide);
              }
       );

Особые окна

Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).
особое окно будет без заголовка и футера, можно вставлять собственные. При этом, значение, установленное через setBody() будет вставлено внутрь .modal-content

Пример:

var modal = aModal.clear();

modal.setRawMode(true)
     .setBody('<div class="alert alert-success text-center">Самое обычное сообщение</div>')
     .show();

Открытие обычного (HTML) модального окна при загрузке страницы

Нужно прописать аттрибут data-open='1'. Удобно использовать для этого переменную шаблона. Если есть несколько окон, которые нужно открыть, откроется первое найденное (обычно, которое прописано выше).

  <div class='modal fade' id='changeCreditModal' data-open='%OPEN_CREDIT_MODAL%'>

JsonLoaderCached

Обьект который удобно использовать для запроса JSON обьектов.

Удобен тем, что он запрашивает даные только если время кеша уже истекло (не чаще, чем указано в параметре refresh).

Опции конструктора

Интерфейс

AColorPalette

Содержит палитру цветов Material Design Всего предопределено 15 цветов.
Пример использования:

var colorHex = aColorPalette.getNextColorHex();
var colorRGB = aColorPalette.getNextColorRGB();

//RGBA позволяет задать прозрачность цвета.
var colorRGBA = aColorPalette.getNextColorRGBA(0.7);

Если нужно получить тот же цвет 2 раза в разных областях видимости, для HEX можно использовать:

var colorHex = aColorPalette.getCurrentColorHex();

Для конвертации из HEX в RGB есть функция convertHexToRGB(hex)
Для конвертации из HEX в RGBA есть функция convertHexToRGBA(hex, opacity)