Системные модули

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

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

Модуль Версия Ссылка на NPM

underscore

1.9.1

https://www.npmjs.com/package/underscore

backbone

1.1.2

https://www.npmjs.com/package/backbone

jquery

2.1.3

https://www.npmjs.com/package/jquery

twigjs

0.8.9

https://www.npmjs.com/package/twigjs

browser-detect

0.2.28

https://www.npmjs.com/package/browser-detect

chartjs

2.9.2

https://www.npmjs.com/package/chart.js

colorpicker

3.0.0

https://www.npmjs.com/package/jquery-colpick

rangeslider

2.3.2

https://www.npmjs.com/package/rangeslider.js

clipboard

1.5.10

https://www.npmjs.com/package/clipboard

cocktail

0.5.15

https://www.npmjs.com/package/backbone.cocktail

accounting

0.3.2

https://www.npmjs.com/package/accounting

device

0.8.0

https://www.npmjs.com/package/current-device

enquire

2.1.1

https://www.npmjs.com/package/enquire.js

FileAPI

2.0.5

https://www.npmjs.com/package/fileapi

google-libphonenumber

3.0.0

https://www.npmjs.com/package/google-libphonenumber

jplayer

2.9.2

https://www.npmjs.com/package/jplayer

js-uuid

0.0.6

https://www.npmjs.com/package/js-uuid

fullcalendar

2.3.1

https://www.npmjs.com/package/fullcalendar

moment

2.24.0

https://www.npmjs.com/package/moment

pubsub

1.5.3

https://www.npmjs.com/package/pubsub-js

steady

2.0.0

https://www.npmjs.com/package/steady

store

1.3.20

https://www.npmjs.com/package/store

cropperjs

1.2.2

https://www.npmjs.com/package/cropperjs

virtualized-list

2.2.0

https://www.npmjs.com/package/virtualized-list

quill

1.3.6

https://www.npmjs.com/package/quill

intl_tel_input

3.7.1

https://www.npmjs.com/package/intl-tel-input

Можно использовать любую из этих библиотек в соответствии с 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; }
   }
 };
});