devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
173 lines (171 loc) • 7.88 kB
JavaScript
/**
* DevExtreme (cjs/__internal/scheduler/m_compact_appointments_helper.js)
* Version: 25.2.7
* Build date: Tue May 05 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CompactAppointmentsHelper = void 0;
var _translator = require("../../common/core/animation/translator");
var _date = _interopRequireDefault(require("../../common/core/localization/date"));
var _message = _interopRequireDefault(require("../../common/core/localization/message"));
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _function_template = require("../../core/templates/function_template");
var _button = _interopRequireDefault(require("../../ui/button"));
var _constants = require("./constants");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const APPOINTMENT_COLLECTOR_CLASS = "dx-scheduler-appointment-collector";
const COMPACT_APPOINTMENT_COLLECTOR_CLASS = `${APPOINTMENT_COLLECTOR_CLASS}-compact`;
const APPOINTMENT_COLLECTOR_CONTENT_CLASS = `${APPOINTMENT_COLLECTOR_CLASS}-content`;
class CompactAppointmentsHelper {
constructor(instance) {
this.elements = [];
this.instance = instance
}
render(options) {
const {
isCompact: isCompact,
items: items
} = options;
const template = this.createTemplate(items.length, isCompact);
const button = this.createCompactButton(template, options);
const $button = button.$element();
this.elements.push($button);
$button.data("items", items);
return $button
}
clear() {
this.elements.forEach(button => {
button.detach();
button.remove()
});
this.elements = []
}
onButtonClick(e, options) {
const $button = (0, _renderer.default)(e.element);
this.instance.showAppointmentTooltipCore($button, $button.data("items"), this.getExtraOptionsForTooltip(options, $button))
}
getExtraOptionsForTooltip(options, $appointmentCollector) {
return {
clickEvent: this.clickEvent(options.onAppointmentClick).bind(this),
dragBehavior: options.allowDrag && this.createTooltipDragBehavior($appointmentCollector).bind(this),
isButtonClick: true,
_loopFocus: true
}
}
clickEvent(onAppointmentClick) {
return e => {
const clickEventArgs = this.instance._createEventArgs(e);
onAppointmentClick(clickEventArgs)
}
}
createTooltipDragBehavior($appointmentCollector) {
return e => {
const $element = (0, _renderer.default)(e.element);
const $schedulerElement = (0, _renderer.default)(this.instance.element());
const workSpace = this.instance.getWorkSpace();
const initialPosition = (0, _translator.locate)($appointmentCollector);
const options = {
filter: `.${_constants.LIST_ITEM_CLASS}`,
isSetCursorOffset: true,
initialPosition: initialPosition,
getItemData: itemElement => {
var _$$data;
return null === (_$$data = (0, _renderer.default)(itemElement).data(_constants.LIST_ITEM_DATA_KEY)) || void 0 === _$$data ? void 0 : _$$data.appointment
},
getItemSettings: (_, event) => event.itemSettings
};
workSpace.createDragBehaviorBase($element, $schedulerElement, options)
}
}
setPosition(element, position) {
(0, _translator.move)(element, {
top: position.top,
left: position.left
})
}
createCompactButton(template, options) {
const $button = this.createCompactButtonElement(options);
return this.instance._createComponent($button, _button.default, {
type: "default",
width: options.width,
height: options.height,
onClick: e => this.onButtonClick(e, options),
template: this.renderTemplate(template, options.items, options.isCompact)
})
}
static measureCollectorDimensions($container, isCompact) {
const $collector = (0, _renderer.default)("<div>").addClass(APPOINTMENT_COLLECTOR_CLASS).toggleClass(COMPACT_APPOINTMENT_COLLECTOR_CLASS, isCompact).appendTo($container);
const styles = getComputedStyle($collector.get(0));
const geometry = {
width: styles.width,
height: styles.height,
marginLeft: styles.marginLeft,
marginRight: styles.marginRight,
marginTop: styles.marginTop,
marginBottom: styles.marginBottom
};
$collector.detach();
$collector.remove();
return geometry
}
createCompactButtonElement(_ref) {
let {
isCompact: isCompact,
$container: $container,
coordinates: coordinates,
sortedIndex: sortedIndex,
items: items
} = _ref;
const appointmentDate = this.getDateText(items[0].appointment, items[0].targetedAppointment);
const result = (0, _renderer.default)("<div>").addClass(APPOINTMENT_COLLECTOR_CLASS).attr("aria-roledescription", appointmentDate).toggleClass(COMPACT_APPOINTMENT_COLLECTOR_CLASS, isCompact).appendTo($container);
result.data(_constants.APPOINTMENT_SETTINGS_KEY, {
sortedIndex: sortedIndex
});
this.setPosition(result, coordinates);
return result
}
renderTemplate(template, items, isCompact) {
return new _function_template.FunctionTemplate(options => template.render({
model: {
appointmentCount: items.length,
items: items.map(item => item.appointment),
isCompact: isCompact
},
container: options.container
}))
}
createTemplate(count, isCompact) {
this.initButtonTemplate(count, isCompact);
return this.instance.getAppointmentTemplate("appointmentCollectorTemplate")
}
initButtonTemplate(count, isCompact) {
this.instance._templateManager.addDefaultTemplates({
appointmentCollector: new _function_template.FunctionTemplate(options => this.createButtonTemplate(count, (0, _renderer.default)(options.container), isCompact))
})
}
createButtonTemplate(appointmentCount, element, isCompact) {
const text = isCompact ? appointmentCount : _message.default.getFormatter("dxScheduler-moreAppointments")(appointmentCount);
return element.append((0, _renderer.default)("<span>").text(text)).addClass(APPOINTMENT_COLLECTOR_CONTENT_CLASS)
}
localizeDate(date) {
return `${_date.default.format(date,"monthAndDay")}, ${_date.default.format(date,"year")}`
}
getDateText(appointment, targetedAppointment) {
const startDate = (null === targetedAppointment || void 0 === targetedAppointment ? void 0 : targetedAppointment.displayStartDate) ?? appointment.startDate;
const endDate = (null === targetedAppointment || void 0 === targetedAppointment ? void 0 : targetedAppointment.displayEndDate) ?? appointment.endDate;
const startDateText = this.localizeDate(startDate);
const endDateText = this.localizeDate(endDate);
return startDateText === endDateText ? startDateText : `${startDateText} - ${endDateText}`
}
}
exports.CompactAppointmentsHelper = CompactAppointmentsHelper;