@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
186 lines (185 loc) • 7.67 kB
JavaScript
/**
* Constants for control group identification
*/
export var CONTROL_GROUP = '_control_group';
export var CONTENT_CONTROL_ID = '_content_control';
export var RICHTEXT_CONTENT_CONTROL_ID = '_richtext_content_control';
export var PLAINTEXT_CONTENT_CONTROL_ID = '_plaintext_content_control';
export var COMBOBOX_CONTENT_CONTROL_ID = '_combobox_content_control';
export var DROPDOWNDOWN_CONTENT_CONTROL_ID = '_dropdown_content_control';
export var DATEPICKER_CONTENT_CONTROL_ID = '_datepicker_content_control';
export var CHECKBOX_CONTENT_CONTROL_ID = '_checkbox_content_control';
export var PICTURE_CONTENT_CONTROL_ID = '_picture_content_control';
/**
* ControlGroup module
* @private
*/
var ControlGroup = /** @class */ (function () {
/**
* Constructor for ControlGroup class
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function ControlGroup(container) {
this.container = container;
this.ribbonId = this.container.element.id + '_ribbon';
}
Object.defineProperty(ControlGroup.prototype, "documentEditor", {
/**
* Get the DocumentEditor instance
* @returns {DocumentEditor} The DocumentEditor instance
*/
get: function () {
return this.container.documentEditor;
},
enumerable: true,
configurable: true
});
/**
* Get the Control group model
* @returns {RibbonGroupModel} The Control group model
*/
ControlGroup.prototype.getGroupModel = function () {
var locale = this.container.localObj;
var id = this.ribbonId + CONTROL_GROUP;
return {
id: id,
header: locale.getConstant('Controls'),
orientation: 'Row',
cssClass: 'e-controls-group',
enableGroupOverflow: true,
overflowHeader: locale.getConstant('Controls'),
collections: [
{
items: [
this.getContentControlDropDownModel()
]
}
]
};
};
/**
* Get the Content Control dropdown model
* @returns {RibbonItemModel} The Content Control dropdown model
*/
ControlGroup.prototype.getContentControlDropDownModel = function () {
var locale = this.container.localObj;
var id = this.ribbonId + CONTROL_GROUP;
return {
type: 'DropDown',
id: id + CONTENT_CONTROL_ID,
dropDownSettings: {
iconCss: 'e-icons e-de-ctnr-content-control',
content: locale.getConstant('Content Control'),
items: [
{
text: locale.getConstant('Rich Text Content Control'),
iconCss: 'e-icons e-de-ctnr-change-case',
id: id + RICHTEXT_CONTENT_CONTROL_ID
},
{
text: locale.getConstant('Plain Text Content Control'),
iconCss: 'e-icons e-de-ctnr-change-case',
id: id + PLAINTEXT_CONTENT_CONTROL_ID
},
{
text: locale.getConstant('Picture Content Control'),
iconCss: 'e-icons e-de-ctnr-image',
id: id + PICTURE_CONTENT_CONTROL_ID
},
{
text: locale.getConstant('Combo Box Content Control'),
iconCss: 'e-icons e-de-combo-box',
id: id + COMBOBOX_CONTENT_CONTROL_ID
},
{
text: locale.getConstant('Drop-Down List Content Control'),
iconCss: 'e-icons e-de-dropdown-list',
id: id + DROPDOWNDOWN_CONTENT_CONTROL_ID
},
{
text: locale.getConstant('Date Picker Content Control'),
iconCss: 'e-icons e-timeline-today',
id: id + DATEPICKER_CONTENT_CONTROL_ID
},
{
text: locale.getConstant('Check Box Content Control'),
iconCss: 'e-icons e-check-box',
id: id + CHECKBOX_CONTENT_CONTROL_ID
}
],
select: this.onContentControlDropDownSelect.bind(this)
},
ribbonTooltipSettings: {
content: locale.getConstant('Insert content controls')
}
};
};
/**
* Handle content control dropdown selection
* @param {MenuEventArgs} args - Menu event arguments
* @returns {void}
*/
ControlGroup.prototype.onContentControlDropDownSelect = function (args) {
var _this = this;
var id = this.ribbonId + CONTROL_GROUP;
if (args.item.id === id + RICHTEXT_CONTENT_CONTROL_ID) {
this.documentEditor.editor.insertContentControl('RichText');
}
else if (args.item.id === id + PLAINTEXT_CONTENT_CONTROL_ID) {
this.documentEditor.editor.insertContentControl('Text');
}
else if (args.item.id === id + PICTURE_CONTENT_CONTROL_ID) {
this.documentEditor.showDialog('PictureContentControl');
}
else if (args.item.id === id + COMBOBOX_CONTENT_CONTROL_ID) {
this.documentEditor.editor.insertContentControl('ComboBox');
}
else if (args.item.id === id + DROPDOWNDOWN_CONTENT_CONTROL_ID) {
this.documentEditor.editor.insertContentControl('DropDownList');
}
else if (args.item.id === id + DATEPICKER_CONTENT_CONTROL_ID) {
this.documentEditor.editor.insertContentControl('Date');
}
else if (args.item.id === id + CHECKBOX_CONTENT_CONTROL_ID) {
this.documentEditor.editor.insertContentControl('CheckBox');
}
setTimeout(function () {
_this.documentEditor.focusIn();
}, 30);
};
/**
* Update UI based on current selection
* @returns {void}
* @private
*/
ControlGroup.prototype.updateSelection = function () {
// Update UI state based on current selection
var isReadOnly = this.documentEditor.isReadOnly;
var isDocumentProtected = this.documentEditor.documentHelper.isDocumentProtected;
var isHeaderFooter = this.documentEditor.enableHeaderAndFooter;
var isPlainContentControl = this.documentEditor.selectionModule.isPlainContentControl();
// Disable content controls in read-only mode, protected document, or header/footer
var enableContentControls = !isReadOnly && !isDocumentProtected && !isHeaderFooter && !isPlainContentControl;
// Implementation to enable/disable content control dropdown
var contentControlElement = document.getElementById(this.ribbonId + CONTROL_GROUP + CONTENT_CONTROL_ID);
if (contentControlElement) {
contentControlElement.classList.toggle('e-disabled', !enableContentControls);
}
};
/**
* Destroy the ControlGroup instance
* @returns {void}
*/
ControlGroup.prototype.destroy = function () {
// Destroy UI components
if (this.contentControlDropDown) {
this.contentControlDropDown.destroy();
this.contentControlDropDown = undefined;
}
// Clear all references
this.container = undefined;
this.ribbonId = undefined;
};
return ControlGroup;
}());
export { ControlGroup };