Для того, чтобы сократить количество загружаемых ресурсов из сети и ускорить работу amoCRM в браузере клиента, виджеты могут использовать вендорные библиотеки, предоставляемые системой.
Можно использовать любую из этих библиотек в соответствии с API указанной версии, ознакомиться с API можно по ссылкам на NPM. Для использования в своем виджете укажите код модуля из таблицы в зависимостях виджета в script.js:
define(['jquery', 'moment'], function ($, moment) {
$('#my_widget_selector').css('color', 'red');
console.log(moment().format('DD-MM-YYYY'));
});
Помимо внешних модулей виджеты могут использовать некоторые части amoCRM для более нативной интеграции в систему.
Наверное, самый часто используемый модуль это модальное окно (lib/components/base/modal). Вот пример его использования в script.js:
define(['jquery', 'underscore', 'lib/components/base/modal'], function ($, _, Modal) {
return function () {
var self = this;
this.callbacks = {
init: function () { return true; },
bind_actions: function () {
$(document).on(
'click.' + self.get_settings().widget_code,
'.my_widget_button',
function () {
new Modal({
// собственный класс для модального окна,
// если нужно в нем поменять какие-то стили
class_name: '',
// метод, отрабатывающий при
// готовности модального окна
// получает в параметр jQuery-объект $modal_body
// тела модального окна, все внутренности
// окна будут в нем
init: _.noop,
// кастомный `destroy`, может вернуть `false`,
// тогда закрытия окна не произойдет
destroy: _.noop,
// контейнер, куда попадет
// модальное окно и относительно
// какого элемента будет центрироваться
container: document.body,
// если нужно запретить закрытие модального окна
// по клику на оверлэе, просто передаем в options
// `disable_overlay_click`
disable_overlay_click: false,
// если нужно запретить закрытие модального окна
// по нажатию на escape
disable_escape_keydown: false,
// если нужно запретить дефолтную обработку enter
disable_enter_keydown: false,
// параметр отвечает за анимацию всплывания
// модального окна, если передать `true`,
// то оно запустится с анимацией увеличения и появления
init_animation: false,
// по умолчанию оверлей у модалок белый,
// изменить если нужен темный оверлей
default_overlay: false,
// элемент, который получает фокус,
// по умолчанию это кнопка акцепта. нужен для того,
// чтобы снимать фокус с кнопки вызвавшей событие
focus_element: '.js-modal-accept',
});
}
)
},
render: function () { return true; },
destroy: function () {
$(document).off('.' + self.get_settings().widget_code);
return true;
},
settings: function () { return true; },
onSave: function () { return true; }
}
};
});
Для работы с ним необходимо:
В данном примере показано использование объекта модального окна Modal
Отдельный пример приведен ниже.
define(['jquery', 'lib/components/base/modal'], function ($, Modal) {
var CustomWidget = function () {
this.callbacks = {
// ...
bind_actions: function () {
// ...
var data = '<h1>Test</h1><p>Some text</p>';
modal = new Modal({
class_name: 'modal-window',
init: function ($modal_body) {
var $this = $(this);
$modal_body
.trigger('modal:loaded') // запускает отображение модального окна
.html(data)
.trigger('modal:centrify') // настраивает модальное окно
.append('');
},
destroy: function () {
}
});
// ...
return true;
}
}
}
return CustomWidget;
});
Для работы с объектом модальное окно необходимо подключить его через require (define в начале script.js) и передать параметры : class_name, init() , destroy(). В init передаются данные для отображения в модальном окне и события trigger для того, чтобы запустить методы объекта Modal и вывести модальное окно в DOM.
Параметр | Описание |
---|---|
class_name | Дополнительные классы для модального окна |
can_centrify | костыльный параметр центровки для мобильных устройств некоторые модальные окна нужно специаль перецентрировать после закрытия клавиатуры на мобильном планшете |
init | метод, отрабатывающий при готовности модального окна получает в параметр jQuery-объект $modal_body тела модального окна, все внутренности окна будут в нем |
destroy | кастомный `destroy`, может вернуть `false`, тогда закрытия окна не произойдет |
container | контейнер, куда попадет модальное окно и относительно какого элемента будет центрироваться |
disable_overlay_click | если нужно запретить закрытие модального окна по клику на оверлэе, просто передаем в options `disable_overlay_click` |
disable_escape_keydown | если нужно запретить закрытие модального окна по нажатию на escape |
disable_enter_keydown | если нужно запретить дефолтную обработку enter |
init_animation | параметр отвечает за анимацию всплывания модального окна, если передать `true`, то оно запустится с анимацией увеличения и появления |
default_overlay | по умолчанию оверлей у модалок белый, изменить если нужен темный оверлей |
preload_templates | шаблоны для прелоада, можно передать массив необходимых шаблонов twig для подгрузки |
focus_element | элемент, который получает фокус, по умолчанию это кнопка акцепта. нужен для того, чтобы снимать фокус с кнопки вызвавшей событие |
centrify_animation | нужна ли анимация при центрировании модального окна |
disable_cancel_click | отключает закрытие модального окна по крестику и оверлею |
disable_resize | отключить ресайз модального окна при инициализации |