readme-ru.md

English version

Chat UI

Модуль для отображения чат интерфейса

Технологии

• ES6
• Babel
• Webpack
• Gulp
• Less

Базовое использование

Можно подключить чат в качестве модуля:

import ChatUI from './vendor/chat-ui';

или использовать как отдельный файл:

<script src="../lib/chat-ui.js"></script>
<link href="../lib/chat-ui.css" rel="stylesheet" media="all" />

$(document).ready(function() {

    var chat = ChatUI({
        title: 'John Doe',
        avatar: './john-doe.jpg',
        subtitle: 'consultant'
    }).render('#chat');
    
});

Инициализация

var chat = ChatUI(settings).render(tagId);

• settings - объект с настройками для чата
• tagId - id тега, в котором будет отрендерин чат

Настройки чата

• title - заголовок чата или имя консультанта
• subtitle - должность, либо описание
• avatar - аватар консультанта - string или boolean
• sendText - текст кнопки "send" в окне чата
• inputPlaceholder - placeholder text on the input
• isTyping - текст (или html) сообщение, о том, что оператор печатает

Настройки по-умолчанию:

let settings = {
    title: 'John Doe',
    subtitle: 'consultant',
    avatar: false,
    sendText: 'Send',
    inputPlaceholder: 'Enter your message',
    isTyping: `
        <div class="${LIB_NAME}-dots-loading">
            <span class="dots-loading__dot">&#8226;</span>
            <span class="dots-loading__dot">&#8226;</span>
            <span class="dots-loading__dot">&#8226;</span>
        </div>
    `
}

События

Интеракция с чатом проходит путем исопльзование событий

.trigger(eventName)

Открыть окно чата

chat.trigger('open-chat');

Отобразить сообщение в списке диалога чата

// Есть несколько способов передат сообщение
// Это может быть строка:
// var message = 'Hello!';
// Простой объект:
// var message = {message:'Hello'};
// Комплексный объект, в котором можно указать на какой стороне должно появиться сообщение: 'user' или 'chat'
// var message = {side: 'chat', message:'Hello'};
chat.trigger('add-phrase', message);

Закрыть окно чата

chat.trigger('close-chat');

Очистить окно чата

chat.trigger('clear-dialog');

Показать "typing" иконку пользователю

chat.trigger('is-typing');

.on(eventName)

Колбек, вызываемый после того как пользователь отправил сообщение

chat.on('user-send-message', function(message) {
    // ...
});

Колбек о том что чат закрылся

chat.on('chat-closed', function(data) {
    console.log('chat-closed', data);
});

Разработка

Компиляция кода по каждому изменению в реальном времени

$ npm run watch

Собираем обычную и минифаенную версию всех файлов библиотеки

$ npm run build

Качество кода

• eslint, based on airbnb specs

Тестирование

• Mocha npm:mocha
• jsdom npm:jsdom

Библиотеки

• Bean - an events api library github:bean, npm:bean
• google caja html sanitizer - https://github.com/google/caja/blob/master/src/com/google/caja/plugin/html-sanitizer.js