devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
107 lines (106 loc) • 4.04 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/chat/messagebubble.js)
* Version: 25.1.3
* Build date: Wed Jun 25 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import _extends from "@babel/runtime/helpers/esm/extends";
import messageLocalization from "../../../common/core/localization/message";
import {
getPublicElement
} from "../../../core/element";
import $ from "../../../core/renderer";
import {
ICON_CLASS
} from "../../core/utils/m_icon";
import Widget from "../../core/widget/widget";
export const CHAT_MESSAGEBUBBLE_CLASS = "dx-chat-messagebubble";
export const CHAT_MESSAGEBUBBLE_DELETED_CLASS = "dx-chat-messagebubble-deleted";
export const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = "dx-chat-messagebubble-content";
export const CHAT_MESSAGEBUBBLE_ICON_PROHIBITION_CLASS = `${ICON_CLASS}-cursorprohibition`;
export const CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS = "dx-has-image";
export const CHAT_MESSAGEBUBBLE_IMAGE_CLASS = "dx-chat-messagebubble-image";
export const MESSAGE_DATA_KEY = "dxMessageData";
class MessageBubble extends Widget {
_getDefaultOptions() {
return _extends({}, super._getDefaultOptions(), {
isDeleted: false,
isEdited: false,
text: "",
template: null
})
}
_initMarkup() {
const $element = $(this.element());
$element.addClass("dx-chat-messagebubble");
$("<div>").addClass("dx-chat-messagebubble-content").appendTo($element);
super._initMarkup();
this._updateContent()
}
_updateContent() {
const {
template: template,
type: type,
text: text,
src: src,
alt: alt,
isDeleted: isDeleted = false
} = this.option();
this.$element().removeClass("dx-chat-messagebubble-deleted");
const $bubbleContainer = $(this.element()).find(".dx-chat-messagebubble-content");
$bubbleContainer.empty();
if (template) {
template({
type: type,
text: text,
src: src,
alt: alt
}, getPublicElement($bubbleContainer));
return
}
if (isDeleted) {
this.$element().addClass("dx-chat-messagebubble-deleted");
const icon = $("<div>").addClass(ICON_CLASS).addClass(CHAT_MESSAGEBUBBLE_ICON_PROHIBITION_CLASS);
const deletedMessage = $("<div>").text(messageLocalization.format("dxChat-deletedMessageText"));
$bubbleContainer.append(icon).append(deletedMessage);
return
}
if ("image" === type) {
this.$element().addClass("dx-has-image");
$("<img>").attr("src", src ?? "").attr("alt", alt ?? messageLocalization.format("dxChat-defaultImageAlt")).addClass("dx-chat-messagebubble-image").appendTo($bubbleContainer)
} else {
$bubbleContainer.text(text ?? "")
}
}
_updateMessageData(property, value) {
const messageData = this.$element().data("dxMessageData") || {};
messageData[property] = value;
this.$element().data("dxMessageData", messageData)
}
_optionChanged(args) {
const {
name: name,
value: value
} = args;
switch (name) {
case "text":
case "src":
case "alt":
case "isDeleted":
this._updateMessageData(name, value);
this._updateContent();
break;
case "template":
this._updateContent();
break;
case "isEdited":
this._updateMessageData(name, value);
break;
default:
super._optionChanged(args)
}
}
}
export default MessageBubble;