Chat это комплексный виджет, разработанный с помощью MV* фреймворка Webix Jet. Это готовое приложение с минимальной конфигурацией и специальным API для переопределения логики внутренних модулей.
Кастомизация компонентов и моделей подразумевает работу с исходным кодом.
Chat построен как Jet приложение в обёртке Webix компонента, поэтому вы можете инициализировать его любым из двух способов.
Интерфейс Chat разбит по частям (компонентам). Каждый компонент, это класс, который наследуется от класса JetView и имеет свои методы и конфигурацию.
Исходный код частей интерфейса (компонентов Jet) находится в папке sources/views.
views
chats.js
list.js
messages
toolbar.js
...
На странице карты классов представлен список используемых компонентов, а также их расположение в интерфейсе.
В моделях Chat описана логика для загрузки, хранения и кэширования данных, загрузки аватаров, работы с темплейтами и другое. В Webix Jet модели называются сервисами.
Исходный код для моделей (сервисов Jet) находятся в папке sources/models.
models
Backend.js
Helpers.js
Local.js
Operations.js
Upload.js
Emojis.js
VoiceMessages.js
Методы сервисов вызываются самим интерфейсом, но также могут быть вызваны программистом напрямую:
$$('myChat').getService('helpers').listAvatar(user, cssClass);
Для начала создайте класс и наследуйте его от класса по умолчанию или от chat.views.JetView:
class CustomToolbar extends chat.views["messages/toolbar"] {
config(){
// получаем JSON объект с конфигурацией
const ui = super.config();
// изменения конкретного компонента
ui.height = 60;
return ui;
}
init() {
// вызываем логику по умолчанию
super.init();
// а это уже пользовательский метод
this.doSomething();
}
doSomething(){
// делаем что-либо при инициализации
}
}
Затем переопределите компонент (класс) по умолчанию с помощью свойства override:
webix.ui({
view: "chat",
override: new Map([
[chat.views["messages/toolbar"], CustomToolbar]
])
});
Чтобы добавить произвольные данные в тулбар вам необходимо:
1. Создать класс и наследовать его от chat.views["messages/toolbar"].
2. Переопределить метод TitleTemplate таким образом, чтобы он возвращал желаемый результат.
class CustomToolbar extends chat.views["messages/toolbar"] {
TitleTemplate(chat) {
var helpers = this.app.getService("helpers");
// получаем аватарки
var result = helpers.listAvatar(chat, "webix_chat_toolbar_avatar");
return (
result +
`
<div class='webix_chat_title'>
<div class="webix_chat_messages_groupchat_name">${chat.name}</div>
<div class="webix_chat_messages_groupchat_members">
Custom content here
</div>
</div>`
);
}
}
3. Затем переопределите класс по умолчанию новым классом с помощью свойства override:
webix.ui({
view: "chat",
override: new Map([
[chat.views["messages/toolbar"], CustomToolbar],
]),
// другие свойства
});
Related sample: Chat: Custom Toolbar Content
Больше примеров кастомизации смотрите в практических руководствах.
Рекомендации
1. Мы не рекомендуем удалять компоненты из интерфейса, т.к. внутренняя логика может всё ещё обращаться к ним. Вы можете скрывать компоненты.
class CustomToolbar extends chat.views.sidebar {
init(view) {
// сохраняем логику по умолчанию
super.init();
// удаление компонента может привести к ошибке
// прятать компонент безопасно
this.$$("search").hide();
}
}
2. Получить экземпляр компонента внутри Jet можно следующими способами:
Метод работает для внутреннего компонента, у которого определён локальный ID (localId).
init(view) {
// сохраняем логику по умолчанию
super.init();
// удаление компонента может привести к ошибке
// прятать компонент безопасно
this.$$("search").hide();
}
init(view) {
// логика по умолчанию
super.init();
// получаем экземпляр поисковой строки
view.queryView("chat-search").hide();
}
3. С помощью кода ниже можно определить, в компактном ли режиме приложение в данный момент:
const compact = this.getParam('compact', true);
Метод доступен из любого компонента или сервиса.
4. Чтобы получить текущее состояние приложения и его реактивные свойства воспользуйтесь одним из способов ниже:
const state = this.app.getState();
// или
const state = this.getParam("state");
Метод доступен из любого компонента или сервиса.
Прежде всего создайте свой класс сервиса и наследуйте его от класса сервиса по умолчанию:
class MyBackend extends chat.services.backend {
chats(){
// клиентские данные
return webix.promise.resolve(chats);
}
}
Затем переопределите класс по умолчанию вашим с помощью свойства override:
{
view: "chat",
url:"https://docs.webix.com/chat-backend/",
override: new Map([
[chat.services.Backend, MyBackend]
])
}
Related sample: Chat: Local Data
Больше информации о сервисе Backend в Chat читайте в этой статье.
Chat - это очень гибкий виджет в отношении кастомизаций: вы можете менять в нём практически всё, что угодно. Однако следует помнить о следующих моментах:
Обратите внимание, что у кода для Edge Сhromium должен быть другой синтаксис.