devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
271 lines (269 loc) • 12.7 kB
JavaScript
/**
* DevExtreme (cjs/__internal/scheduler/tooltip_strategies/tooltip_strategy_base.js)
* Version: 25.2.8
* Build date: Mon Jun 08 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TooltipStrategyBase = void 0;
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _function_template = require("../../../core/templates/function_template");
var _type = require("../../../core/utils/type");
var _button = _interopRequireDefault(require("../../../ui/button"));
var _promise = require("../../core/utils/promise");
var _list = _interopRequireDefault(require("../../ui/list/list.edit"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const TOOLTIP_APPOINTMENT_ITEM = "dx-tooltip-appointment-item";
const TOOLTIP_APPOINTMENT_ITEM_CONTENT = `${TOOLTIP_APPOINTMENT_ITEM}-content`;
const TOOLTIP_APPOINTMENT_ITEM_CONTENT_SUBJECT = `${TOOLTIP_APPOINTMENT_ITEM}-content-subject`;
const TOOLTIP_APPOINTMENT_ITEM_CONTENT_DATE = `${TOOLTIP_APPOINTMENT_ITEM}-content-date`;
const TOOLTIP_APPOINTMENT_ITEM_MARKER = `${TOOLTIP_APPOINTMENT_ITEM}-marker`;
const TOOLTIP_APPOINTMENT_ITEM_MARKER_BODY = `${TOOLTIP_APPOINTMENT_ITEM}-marker-body`;
const TOOLTIP_APPOINTMENT_ITEM_DELETE_BUTTON_CONTAINER = `${TOOLTIP_APPOINTMENT_ITEM}-delete-button-container`;
const TOOLTIP_APPOINTMENT_ITEM_DELETE_BUTTON = `${TOOLTIP_APPOINTMENT_ITEM}-delete-button`;
const APPOINTMENT_TOOLTIP_TEMPLATE = "appointmentTooltipTemplate";
class TooltipStrategyBase {
constructor(options) {
this.asyncTemplatePromises = new Set;
this.tooltip = null;
this.extraOptions = null;
this.$target = null;
this._options = options
}
show(target, dataList, extraOptions) {
if (dataList.length) {
this.hide();
this.$target = target;
this.extraOptions = extraOptions;
this.showCore(dataList)
}
}
setTarget($target) {
this.$target = $target;
if (this.isDesktop() && this.tooltip) {
const originalAnimationValue = this.tooltip.option("animation");
this.tooltip.option("animation", null);
this.tooltip.option("target", $target);
this.tooltip.option("animation", originalAnimationValue)
}
}
getTarget() {
return this.$target
}
setListItems(dataList) {
if (0 === dataList.length) {
this.hide()
}
this.list.option("dataSource", dataList)
}
showCore(dataList) {
const {
$target: $target
} = this;
const describedByValue = $target && (0, _type.isRenderer)($target) ? $target.attr("aria-describedby") : void 0;
if (!this.tooltip) {
this.tooltip = this.createTooltip(dataList)
} else {
if (this.isDesktop()) {
this.tooltip.option("target", this.$target)
}
this.list.option("dataSource", dataList)
}
this.prepareBeforeVisibleChanged(dataList);
this.tooltip.option("visible", true);
if (describedByValue) {
var _this$$target;
null === (_this$$target = this.$target) || void 0 === _this$$target || _this$$target.attr("aria-describedby", describedByValue)
}
}
prepareBeforeVisibleChanged(dataList) {}
isDeletingAllowed(appointment) {
const {
editing: editing
} = this.extraOptions ?? {};
const disabled = this._options.getAppointmentDisabled(appointment);
const isDeletingAllowed = true === editing || "object" === typeof editing && true === editing.allowDeleting;
return !disabled && isDeletingAllowed
}
getContentTemplate(dataList) {
return container => {
var _this$list$registerKe, _this$list, _this$list$registerKe2, _this$list2;
const listElement = (0, _renderer.default)("<div>");
(0, _renderer.default)(container).append(listElement);
this.list = this.createList(listElement, dataList);
null === (_this$list$registerKe = (_this$list = this.list).registerKeyHandler) || void 0 === _this$list$registerKe || _this$list$registerKe.call(_this$list, "escape", () => {
var _this$getTarget;
this.hide();
null === (_this$getTarget = this.getTarget()) || void 0 === _this$getTarget || null === (_this$getTarget = _this$getTarget.get(0)) || void 0 === _this$getTarget || _this$getTarget.focus()
});
null === (_this$list$registerKe2 = (_this$list2 = this.list).registerKeyHandler) || void 0 === _this$list$registerKe2 || _this$list$registerKe2.call(_this$list2, "del", () => {
const {
focusedElement: focusedElement
} = this.list.option();
if (!focusedElement) {
return
}
const {
appointment: appointment,
targetedAppointment: targetedAppointment
} = this.list._getItemData(focusedElement);
if (!appointment) {
return
}
if (this.isDeletingAllowed(appointment)) {
this._options.checkAndDeleteAppointment(appointment, targetedAppointment)
}
})
}
}
isShownForTarget($target) {
var _this$tooltip, _this$$target2;
if (!(null !== (_this$tooltip = this.tooltip) && void 0 !== _this$tooltip && _this$tooltip.option("visible"))) {
return false
}
return $target.get(0) === (null === (_this$$target2 = this.$target) || void 0 === _this$$target2 ? void 0 : _this$$target2.get(0))
}
onShown() {
var _this$extraOptions;
this.list.option("focusStateEnabled", null === (_this$extraOptions = this.extraOptions) || void 0 === _this$extraOptions ? void 0 : _this$extraOptions.focusStateEnabled)
}
dispose() {}
hide() {
if (this.tooltip) {
this.tooltip.option("visible", false)
}
}
isDesktop() {
return true
}
createListOption(dataList) {
return {
dataSource: dataList,
onContentReady: this.onListRender.bind(this),
onInitialized: this.onListInitialized.bind(this),
onDisposing: this._options.onListDisposing,
onItemClick: e => this.onListItemClick(e),
onItemContextMenu: this.onListItemContextMenu.bind(this),
itemTemplate: (item, index) => this.renderTemplate(item.appointment, item.targetedAppointment, index, item.color),
_swipeEnabled: false,
pageLoadMode: "scrollBottom"
}
}
onListInitialized(e) {}
onListRender(e) {}
createTooltipElement(wrapperClass) {
return (0, _renderer.default)("<div>").appendTo(this._options.container).addClass(wrapperClass)
}
createList(listElement, dataList) {
return this._options.createComponent(listElement, _list.default, this.createListOption(dataList))
}
renderTemplate(appointment, targetedAppointment, index, color) {
const itemListContent = this.createItemListContent(appointment, targetedAppointment, color);
this._options.addDefaultTemplates({
appointmentTooltip: new _function_template.FunctionTemplate(options => {
const $container = (0, _renderer.default)(options.container);
$container.append(itemListContent);
return $container
})
});
const template = this._options.getAppointmentTemplate("appointmentTooltipTemplate");
return this.createFunctionTemplate(template, appointment, targetedAppointment, index)
}
createFunctionTemplate(template, appointmentData, targetedAppointmentData, index) {
var _this$extraOptions2;
const isButtonClicked = Boolean(null === (_this$extraOptions2 = this.extraOptions) || void 0 === _this$extraOptions2 ? void 0 : _this$extraOptions2.isButtonClick);
return new _function_template.FunctionTemplate(options => {
const {
promise: promise,
resolve: resolve
} = (0, _promise.createPromise)();
this.asyncTemplatePromises.add(promise);
return template.render({
model: {
appointmentData: appointmentData,
targetedAppointmentData: targetedAppointmentData,
isButtonClicked: isButtonClicked
},
container: options.container,
index: index,
onRendered: () => {
this.asyncTemplatePromises.delete(promise);
resolve()
}
})
})
}
onListItemClick(e) {
if (!e.itemData) {
return
}
this.hide();
if (this._options.newAppointments) {
var _this$extraOptions3;
if (null !== (_this$extraOptions3 = this.extraOptions) && void 0 !== _this$extraOptions3 && _this$extraOptions3.isButtonClick) {
this._options.onAppointmentClick({
appointmentElement: e.itemElement,
appointmentData: e.itemData.appointment,
targetedAppointmentData: e.itemData.targetedAppointment,
event: e.event
})
}
} else {
var _this$extraOptions4, _this$extraOptions4$c;
null === (_this$extraOptions4 = this.extraOptions) || void 0 === _this$extraOptions4 || null === (_this$extraOptions4$c = _this$extraOptions4.clickEvent) || void 0 === _this$extraOptions4$c || _this$extraOptions4$c.call(_this$extraOptions4, e)
}
this._options.showAppointmentPopup(e.itemData.appointment, false, e.itemData.targetedAppointment)
}
onListItemContextMenu(e) {}
createItemListContent(appointment, targetedAppointment, color) {
const $itemElement = (0, _renderer.default)("<div>").addClass(TOOLTIP_APPOINTMENT_ITEM);
$itemElement.append(this.createItemListMarker(color));
$itemElement.append(this.createItemListInfo(this._options.createFormattedDateText(appointment, targetedAppointment)));
if (this.isDeletingAllowed(appointment)) {
$itemElement.append(this.createDeleteButton(appointment, targetedAppointment))
}
return $itemElement
}
createItemListMarker(color) {
const $marker = (0, _renderer.default)("<div>").addClass(TOOLTIP_APPOINTMENT_ITEM_MARKER);
const $markerBody = (0, _renderer.default)("<div>").addClass(TOOLTIP_APPOINTMENT_ITEM_MARKER_BODY);
$marker.append($markerBody);
color.then(value => {
if (value) {
$markerBody.css("background", value)
}
}, () => {});
return $marker
}
createItemListInfo(object) {
const result = (0, _renderer.default)("<div>").addClass(TOOLTIP_APPOINTMENT_ITEM_CONTENT);
const $title = (0, _renderer.default)("<div>").addClass(TOOLTIP_APPOINTMENT_ITEM_CONTENT_SUBJECT).text(object.text);
const $date = (0, _renderer.default)("<div>").addClass(TOOLTIP_APPOINTMENT_ITEM_CONTENT_DATE).text(object.formatDate);
return result.append($title).append($date)
}
createDeleteButton(appointment, targetedAppointment) {
const $container = (0, _renderer.default)("<div>").addClass(TOOLTIP_APPOINTMENT_ITEM_DELETE_BUTTON_CONTAINER);
const $deleteButton = (0, _renderer.default)("<div>").addClass(TOOLTIP_APPOINTMENT_ITEM_DELETE_BUTTON);
$container.append($deleteButton);
this._options.createComponent($deleteButton, _button.default, {
icon: "trash",
stylingMode: "text",
onClick: e => {
var _e$event;
null === (_e$event = e.event) || void 0 === _e$event || _e$event.stopPropagation();
this._options.checkAndDeleteAppointment(appointment, targetedAppointment)
}
});
return $container
}
}
exports.TooltipStrategyBase = TooltipStrategyBase;