@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
112 lines (111 loc) • 4.83 kB
JavaScript
import { L10n, createElement } from '@syncfusion/ej2-base';
import { TextArea } from '@syncfusion/ej2-inputs';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
/**
* Dialog class to manage alternative text input for images.
* @returns {AltTextDialog} - Returns the AltTextDialog instance.
* @private
*/
var AltTextDialog = /** @class */ (function () {
/**
* Constructor for AltTextDialog class
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function AltTextDialog(container) {
var _this = this;
// Constants for UI elements
this.ALT_TEXT_INPUT_ID = '_de-alt-text-input';
/**
* Show the Alt Text Dialog
* @returns {void}
*/
this.show = function () {
_this.localObj = new L10n('documenteditorcontainer', _this.container.defaultLocale, _this.container.locale);
if (!_this.target) {
_this.initDialog(_this.localObj);
}
// Get the document helper's dialog from the container
var documentHelper = (_this.container.documentEditor).documentHelper;
documentHelper.dialog.header = _this.localObj.getConstant('Alt Text');
documentHelper.dialog.height = 'auto';
documentHelper.dialog.width = 'auto'; // Wider dialog for textarea
documentHelper.dialog.content = _this.target;
documentHelper.dialog.buttons = [{
click: _this.applyAltText,
buttonModel: { content: _this.localObj.getConstant('Apply'), cssClass: 'e-flat', isPrimary: true }
},
{
click: _this.hideDialog,
buttonModel: { content: _this.localObj.getConstant('Cancel'), cssClass: 'e-flat' }
}];
// Set current alt text value
var currentAltText = _this.getCurrentAltText();
_this.altTextArea.value = currentAltText;
documentHelper.dialog.dataBind();
documentHelper.dialog.show();
};
this.applyAltText = function () {
var altText = _this.altTextArea.value;
// Apply alt text to the selected image
_this.container.documentEditor.selection.imageFormat.applyImageAlternativeText(altText);
// Hide dialog
_this.hideDialog();
};
this.hideDialog = function () {
var documentHelper = (_this.container.documentEditor).documentHelper;
_this.altTextArea.value = '';
documentHelper.dialog.hide();
_this.container.documentEditor.focusIn();
};
this.container = container;
this.localObj = new L10n('documenteditorcontainer', this.container.defaultLocale, this.container.locale);
}
AltTextDialog.prototype.initDialog = function (localValue) {
var id = this.container.element.id + RIBBON_ID + '_alt_text_dialog';
this.target = createElement('div', { id: id, className: 'e-de-alt-text' });
var container = createElement('div');
var label = createElement('div', {
className: 'e-de-alt-text-dlg-title',
innerHTML: localValue.getConstant('Alternative Text')
});
// Create textarea element instead of input
this.textAreaElement = createElement('textarea', {
id: this.container.element.id + RIBBON_ID + this.ALT_TEXT_INPUT_ID,
className: 'e-input e-de-alt-text-dlg-textarea'
});
container.appendChild(label);
container.appendChild(this.textAreaElement);
this.target.appendChild(container);
// Initialize TextArea with placeholder
this.altTextArea = new TextArea({
// placeholder: localValue.getConstant('Enter alt text for this image'),
// floatLabelType: 'Always',
rows: 5,
cssClass: 'e-de-alt-text-area'
});
this.altTextArea.appendTo(this.textAreaElement);
};
AltTextDialog.prototype.getCurrentAltText = function () {
if (this.container.documentEditor &&
this.container.documentEditor.selection &&
this.container.documentEditor.selection.imageFormat) {
return this.container.documentEditor.selection.imageFormat.alternateText;
}
return '';
};
/**
* Clean up resources when destroyed
* @returns {void}
*/
AltTextDialog.prototype.destroy = function () {
if (this.altTextArea) {
this.altTextArea.destroy();
this.altTextArea = undefined;
}
this.container = undefined;
this.target = undefined;
this.textAreaElement = undefined;
};
return AltTextDialog;
}());
export { AltTextDialog };