listItem

определяет template для комментариев

object listItem;

Example

webix.ui({
    view:"comments",
    currentUser:4,
    id:"comments",
    url:"./data/comments",
    users:"./data/users",
    listItem:{
        templateText: function(obj){
            return "<div class='webix_comments_message'>"+obj.text+"</div>";
        }
    }
});

Related samples

Comments: Templates

Details

template определяет вид и содержимое комментария.

listItem - это объект со следующими свойствами:

templateUser
templateMenu
templateDate
templateText
templateLinks
templateAvatar
templateMentioned
menuPosition

Имя пользователя

Чтобы изменить то, как отображаются имена пользователей, переопределите свойство templateUser:

templateUser:function(obj){
    var name = $$("comments").getUsers().getItem(obj.user_id).value;
    return "<span class='webix_comments_user'>"+name+"</span>";
}

Иконка контекстного меню

Вы можете выбрать другую иконку для контекстного меню. Для этого переопределите свойство templateMenu:

templateMenu:function(obj){
    var html = "";
    if ($$("comments").config.currentUser == obj.user_id)
        html += "<span class='webix_icon mdi mdi-chevron-down webix_comments_menu'></span>";
    return html;
}

Вы также можете добавить другие иконки рядом с иконкой меню, например:

templateMenu:function(obj){
    var html = "<span class ='webix_comments_icons'>";
    html += "<span class='star mdi mdi-star"+(obj.star?"":"-outline")+"'></span>";
 
    if ($$("comments").config.currentUser == obj.user_id)
        html += "<span class='webix_comments_menu mdi mdi-chevron-down'></span>";
 
    html += "</span>";
    return html;
}

Отображение даты

Чтобы изменить вид строк с датой, переопределите свойство templateDate:

templateDate:function(obj){
    var date = webix.Date.dateToStr("%Y.%m")(obj.date);
    return "<span class='webix_comments_date'>"+date+"</span>";
}

Обратите внимание, что с помощью темплейта вы можете изменить стиль или скрыть дату, но чтобы изменить формат даты, используйте scheme.

Отображение текста комментария

Чтобы изменить стиль блока с самим комментарием, переопределите свойство templateText:

templateText: function(obj){
    return "<div class ='webix_comments_message'>"+obj.text+"</div>"
}

Отображение ссылок и изображений

В комментариях картинки и ссылки будут форматироваться и отображаться как HTML, если в тексте есть URL-ы. Это работает благодаря темплейту templateLinks:

templateLinks:function(obj){
    var text = obj.text.replace(/(https?:\/\/[^\s]+)/g, function(match){
        if(match.match(/.(jpg|jpeg|png|gif)$/))
            return "<img class='webix_comments_image' src='"+match+"'/>";
        return "<a target='_blank' href='"+match+"'>"+match+"</a>";
    });
    return text;
}

Отображение аватара

Если вы хотите изменить аватары, переопределите свойство templateAvatar:

//  отобразите инициалы пользователя
templateAvatar:function(obj){
    var name = $$("comments").getUsers().getItem(obj.user_id);
    var parts = name.value.split(" ");
    var letters = parts[0][0].toUpperCase()+(parts[1]?parts[1][0].toUpperCase():"");
    return "<span class='webix_comments_avatar'>" + letters + "</span>";
}

Отображение упомянутых пользователей

Вы можете переопределить стили для упомянутых в переписке пользователей через свойство templateMentioned:

templateMentioned: function(obj, common){
    obj.text = obj.text.replaceAll("&#64;'Corvo Attano'", 
    "<span style='color:red'>Corvo Attano</span>");
    return obj.text;
}

Определение позиции меню

Контекстное меню отображается левее и ниже иконки меню. Чтобы расположить его иначе, передайте желаемое положение и/или отступы в свойство menuPosition:

menuPosition:{
    pos:"bottom",
    y:-5
}

Все опции для изменения расположения контекстного меню здесь.

Наверх