Documentação
🇺🇸

Módulos e pacotes

Suggest Edits

Pacotes NPM

Para melhorar o desempenho da Kommo e aumentar a velocidade da sua operação no navegador do cliente, é recomendado reduzir o número de recursos baixados da rede. Uma maneira de alcançar isso é utilizando as bibliotecas de terceiros fornecidas pelo sistema em seus widgets.

PacoteVersão
accounting0.3.2
backbone1.1.2
browser-detect0.2.28
chartjs2.9.2
clipboard1.5.10
cocktail0.5.15
colorpicker3.0.0
cropperjs1.2.2
device0.8.0
enquire2.1.1
FileAPI2.0.5
fullcalendar2.9.1
google-libphonenumber3.2.33
intl_tel_input3.7.1
jplayer2.9.2
jquery2.1.3
js-uuid0.0.6
moment2.24.0
pubsub1.5.3
quill1.3.6
rangeslider2.3.2
steady2.0.0
store1.3.20
twigjs0.8.9
underscore1.9.1
virtualized-list2.2.0

Para adicionar qualquer uma dessas bibliotecas ao seu widget, você pode usar a API da versão especificada. Você pode aprender mais sobre a API clicando nos links para o NPM. Para incluir corretamente a biblioteca como uma dependência no seu arquivo script.js, certifique-se de especificar o código do módulo da tabela nas dependências do widget:

define(['jquery', 'moment'], function ($, moment) {
  $('#my_widget_selector').css('color', 'red');

  console.log(moment().format('DD-MM-YYYY'));
});

Módulos do Kommo

Vale ressaltar que os widgets no Kommo podem utilizar certos recursos incorporados para se integrar perfeitamente com o sistema. Um dos recursos mais utilizados é a janela modal, que está localizada no módulo lib/components/base/modal. Isso permite uma experiência mais nativa e coesa dentro da plataforma.

Aqui está um exemplo de como usar o módulo no arquivo 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: '',
             init: _.noop,
             destroy: _.noop,
             container: document.body,
             disable_overlay_click: false,
             disable_escape_keydown: false,
             disable_enter_keydown: false,
             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; }
   }
 };
});

Parâmetros que podem ser passados para o modal

ParâmetroDescrição
class_nameClasses adicionais para uma janela modal, caso você precise alterar alguns estilos nela.
can_centrifyOpção de centralização para dispositivos móveis. Algumas janelas modais precisam ser re-centralizadas intencionalmente após o fechamento do teclado em um tablet.
initO método é executado quando a janela modal está aberta e recebe o objeto jQuery $modal_body que é o corpo da janela modal, contendo tudo dentro dela.
destroyDestruição personalizada destroy, se retornar false, a janela não será fechada.
containerContêiner com a janela modal. Ele indica em relação a qual elemento a janela será centralizada.
disable_overlay_clickPasse isso se você precisar evitar que a janela modal seja fechada ao clicar no overlay.
disable_escape_keydownPasse isso se você precisar evitar que a janela modal seja fechada ao pressionar a tecla ESC.
disable_enter_keydownPasse isso para desabilitar o processamento padrão da tecla ENTER.
init_animationResponsável pela animação de aparecimento da janela modal. Se você passar true, ela aparecerá com uma animação de expansão.
default_overlayAs janelas modais possuem uma sobreposição branca por padrão. Você deve alterá-la se quiser mudar para uma sobreposição escura.
preload_templatesVocê pode passar um array dos templates twig necessários para carregar.
focus_elementO elemento que recebe o foco é o botão de aceitação, por padrão.
Este parâmetro é usado para remover o foco do botão que causou o evento.
centrify_animationDetermina se é necessária animação ao centralizar a janela modal.
disable_cancel_clickDesativa o fechamento da janela modal ao clicar no “X” ou na sobreposição.
disable_resizeDesativa o redimensionamento da janela modal durante a inicialização.

Objeto Modal para trabalhar com uma janela modal

Se você deseja utilizar um objeto de janela modal em seu código, você precisará conectá-lo através da função require (define no início do script.js) e passar os parâmetros necessários: class_name, init(), e destroy().

O método init() deve aceitar os dados que você deseja exibir dentro da janela modal, além dos eventos de gatilho (que habilitarão os métodos do objeto modal para serem executados e exibirem a janela modal no DOM).

Este exemplo mostra o uso do objeto Modal:

define(['jquery', 'lib/components/base/modal'], function ($, Modal) {
    var CustomWidget = function () {
        this.callbacks = {
            // ...
            bind_actions: function () {
                // ...
                var data = '<h1>Teste</h1><p>Algum texto</p>';
                modal = new Modal({
                    class_name: 'modal-window',
                    init: function ($modal_body) {
                        var $this = $(this);
                        $modal_body
                            .trigger('modal:loaded') // gatilhos para exibir a janela modal
                            .html(data)
                            .trigger('modal:centrify')  // configura a janela modal
                            .append('');
                    },
                    destroy: function () {
                    }
                });
                // ...
                return true;
            }
        }
    }
    return CustomWidget;
});

Updated about 1 month ago