Вендорные модули

Для того, чтобы сократить количество загружаемых ресурсов из сети и ускорить работу 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

Помимо внешних модулей виджеты могут использовать некоторые части amoCRM для более нативной интеграции в систему.

Наверное, самый часто используемый модуль это модальное окно (lib/component/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; }
   }
 };
});