Skip to content

Latest commit

 

History

History
168 lines (119 loc) · 4.25 KB

readme-ru.md

File metadata and controls

168 lines (119 loc) · 4.25 KB
Raw

English version

Chat UI

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

alt tag

Технологии

  • 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

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

Библиотеки