Cackle Tips and Hacks. Callback Ready. Оправка сообщений по Enter.

Мы решили публиковать некоторые полезные примеры использования , которые являются результатами ответов нашим клиентам в службе поддержки.

Сегодня мы посмотрим callback.ready - событие которое срабатывает по окончанию загрузки виджета.

Для примера возьмем такую задачу: Расширим функционал виджета комментариев через отправку сообщений по клавише Enter.

Алгоритм действий, необходимый для решения задачи:

  • Понять, что виджет загружен и запустить свой код, который по нашему примеру будет отправлять сообщения
  • Найти Dom элемент ввода сообщения и привязать к нему листенер нажатия кнопки "enter"
  • По срабатываю обработчика вызвать Click по кнопке, которая сабмитит сообщение

Пример кода на JS:


 cackle_widget.push({widget: 'Comment', id: 'your_id', channel:'feedback',
  callback: {
   ready: [function() {
    //в данной функции выполнится код после загрузки виджета
    //получаем элемент позиционирования курсора
    var doc = document.getElementsByClassName("mc-editor-message")[0];
    doc.onkeydown = function(evt) {
      evt = evt || window.event;
     //След.условие проверяет нажатие на Enter
      if (evt.keyCode == 13) {
      //create mouse event for Comments pushing
        var clickEvent = new MouseEvent("click", {
        "view": window,
        "bubbles": true,
        "cancelable": false
        });
        var element = document.getElementsByClassName("mc-comment-submit")[0];
        element.dispatchEvent(clickEvent);
      }
   }]
  }
 });
 

Пример является упрощенным (без проверок кросс-браузерности) и просто является демонстрацией работы события.

Спасибо за внимание! Если у вас есть свои нестандартные примеры использования Cackle API, то присылайте их нам на support, мы обязательно разместим.

Комментарии для сайта Cackle

Alexey Denisov

Read more posts by this author.

Subscribe to Блог облачного сервиса Cackle

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!