Кастомизация разметки компонента чат

В компоненте as.messages предусмотрены JS коллбеки, через которые можно менять разметку отдельных элементов чата. 

  • as.messages.makeup.getChatToolbar(cont, params, data) - разметка верхней панели компонента чат (там где кнопки startChat chatSearch).
  • as.messages.makeup.getNoRooms(cont, params, data)- сообщение слева, что нет переписок.
  • as.messages.makeup.getRoomListItem(item, sNotRead, time) - разметка элемента комнаты слева в списке комнат.
  • as.messages.makeup.getStartText(cont, params, data)  Разметка начального состояния справа  (когда не выбрана комната).
  • as.messages.makeup.getNoMessages(cont, params, data) -  нет сообщений в конате. 
  • as.messages.makeup.getRoomToolbar(cont, params, data) - верх комнаты (заголовок и панель кнопок)
  • as.messages.makeup.getMessage(item, user, options, text, deliveryStatus) - разметка одного сообщения. 
  • as.messages.makeup.newMessage(cont, params, data) - разметка для добавления нового сообщения в комнату (где поле ввода, кнопка Отправить и добавление файлов).

Все они возвращают строку. Если функция определена, то она будет использована вместо стандартной разметки.

В выходной разметке можно использовать также дополнительные компоненты (формы, таблицы), тем самым получая еще больше гибкости по функциональности чата. 

Пример использования кастом разметки (используется специальный коллбек  as.messagesInitCallback, т.к. компонент as.messages загружается асинхронно): 

$(function(){
  as.messagesInitCallback = function(){
    console.log("X111111111111111")
	as.messages.makeup.getRoomToolbar = function(cont, params, data){
	    var res = "XXXXXXXXXXXXXX";		
		return res;
	}
  }
});
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK