Библиотека 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
).
Опции конструктора
Имя | Тип | Значение по умолчанию | Описание |
---|---|---|---|
id | string | нет (Обязательный параметр) | ID с которым будут связаны кешированые даные |
url | string | нет (Обязательный параметр) | Сссылка для запроса. Должна возвращать JSON |
callback | function | нет (Обязательный параметр) | Функция, в которую передаются даные |
refresh | number | 30 | Частота запросов (секунды) |
after | number | 0 | Отложить выполнение запроса на after секунд после загрузки страницы |
format | function(json) | return json | Функция, которая позволяет отформатировать даные перед передачей в callback. В кеш сохраняются отформатированые даные |
fail | function(error) | console.log(self.id, 'Got bad JSON') | Будет вызвана, если запрос завершился с ошибкой |
Интерфейс
Метод | Описание |
---|---|
stop() | Остановить таймер |
checkUpdates(force, callback) | Позволяет принудительно выполнить обработку даных. Если кеш свежий, то будут использоваться даные из кеша. Флаг force инвалидирует кеш. callback - будет вызван без параметров дополнительно, после обработки даных |
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)