@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
148 lines (147 loc) • 5.03 kB
JavaScript
/**
* Constants for form fields group identification
*/
export var FORM_FIELDS_GROUP = '_form_fields_group';
export var FORM_FIELDS_ID = '_form_fields';
export var TEXT_FORM = '_text_form';
export var CHECKBOX = '_checkbox';
export var DROPDOWN = '_dropdown';
/**
* FormFieldsGroup module
* @private
*/
var FormFieldsGroup = /** @class */ (function () {
/**
* Constructor for FormFieldsGroup class
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function FormFieldsGroup(container) {
this.container = container;
this.ribbonId = this.container.element.id + '_ribbon';
}
Object.defineProperty(FormFieldsGroup.prototype, "documentEditor", {
/**
* Get the DocumentEditor instance
* @returns {DocumentEditor} The DocumentEditor instance
*/
get: function () {
return this.container.documentEditor;
},
enumerable: true,
configurable: true
});
/**
* Get the FormFields group model
* @returns {RibbonGroupModel} The FormFields group model
*/
FormFieldsGroup.prototype.getGroupModel = function () {
var locale = this.container.localObj;
var id = this.ribbonId + FORM_FIELDS_GROUP;
return {
id: id,
header: locale.getConstant('Form Fields'),
orientation: 'Row',
cssClass: 'e-formfields-group',
enableGroupOverflow: true,
overflowHeader: locale.getConstant('Form Fields'),
collections: [
{
items: [
this.getFormFieldsDropDownModel()
]
}
]
};
};
/**
* Get the FormFields dropdown model
* @returns {RibbonItemModel} The FormFields dropdown model
*/
FormFieldsGroup.prototype.getFormFieldsDropDownModel = function () {
var locale = this.container.localObj;
var id = this.ribbonId;
return {
type: 'DropDown',
id: id + FORM_FIELDS_ID,
dropDownSettings: {
iconCss: 'e-icons e-de-formfield',
content: locale.getConstant('Form Fields'),
items: [
{
text: locale.getConstant('Text Form'),
iconCss: 'e-icons e-de-textform',
id: id + TEXT_FORM
},
{
text: locale.getConstant('Check Box'),
iconCss: 'e-icons e-de-checkbox-form',
id: id + CHECKBOX
},
{
text: locale.getConstant('DropDown'),
iconCss: 'e-icons e-de-dropdownform',
id: id + DROPDOWN
}
],
select: this.onFormFieldsDropDownSelect.bind(this)
},
ribbonTooltipSettings: {
content: locale.getConstant('Insert form fields')
}
};
};
/**
* Handle form fields dropdown selection
* @param {MenuEventArgs} args - Menu event arguments
* @returns {void}
*/
FormFieldsGroup.prototype.onFormFieldsDropDownSelect = function (args) {
var _this = this;
var id = this.ribbonId;
if (args.item.id === id + TEXT_FORM) {
this.documentEditor.editorModule.insertFormField('Text');
}
else if (args.item.id === id + CHECKBOX) {
this.documentEditor.editorModule.insertFormField('CheckBox');
}
else if (args.item.id === id + DROPDOWN) {
this.documentEditor.editorModule.insertFormField('DropDown');
}
setTimeout(function () {
_this.documentEditor.focusIn();
}, 30);
};
/**
* Update UI based on current selection
* @returns {void}
*/
FormFieldsGroup.prototype.updateSelection = function () {
var isHeaderFooter = this.documentEditor.selection.contextType.indexOf('Header') >= 0 ||
this.documentEditor.selection.contextType.indexOf('Footer') >= 0;
var ribbon = this.container.ribbon.ribbon;
if (ribbon) {
if (isHeaderFooter) {
ribbon.disableItem(this.ribbonId + FORM_FIELDS_ID);
}
else {
ribbon.enableItem(this.ribbonId + FORM_FIELDS_ID);
}
}
};
/**
* Destroy the FormFieldsGroup instance
* @returns {void}
*/
FormFieldsGroup.prototype.destroy = function () {
// Destroy UI components
if (this.formFieldDropDown) {
this.formFieldDropDown.destroy();
this.formFieldDropDown = undefined;
}
// Clear all references
this.container = undefined;
this.ribbonId = undefined;
};
return FormFieldsGroup;
}());
export { FormFieldsGroup };