@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
128 lines (127 loc) • 5.13 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { RibbonGroupBase } from '../ribbon-interfaces';
import { createElement, Browser, EventHandler } from '@syncfusion/ej2-base';
export var IMAGE_LOCAL_ID = '_image_local';
/**
* Illustrations group implementation for Insert tab
* @private
*/
var IllustrationsGroup = /** @class */ (function (_super) {
__extends(IllustrationsGroup, _super);
/**
* Constructor for IllustrationsGroup
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function IllustrationsGroup(container) {
var _this = _super.call(this, container) || this;
// Create image picker for file upload
_this.imagePicker = createElement('input', {
attrs: { type: 'file', accept: '.jpg,.jpeg,.png,.bmp,.svg' },
className: 'e-de-ctnr-file-picker'
});
if (Browser.isIE) {
document.body.appendChild(_this.imagePicker);
}
// Add event handler for image selection
EventHandler.add(_this.imagePicker, 'change', _this.onImageChange, _this);
return _this;
}
/**
* Get the Ribbon items for Illustrations group
* @returns {RibbonGroupModel} - Ribbon group model for Illustrations group
* @private
*/
IllustrationsGroup.prototype.getGroupModel = function () {
return {
header: this.localObj.getConstant('Illustrations'),
groupIconCss: 'e-icons e-de-ctnr-image',
keyTip: 'P',
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant('Illustrations'),
collections: [{
items: [{
type: 'DropDown',
keyTip: 'U',
dropDownSettings: {
content: this.localObj.getConstant('Image'),
iconCss: 'e-icons e-de-ctnr-image',
items: [
{
text: this.localObj.getConstant('Upload from computer'),
id: this.ribbonId + IMAGE_LOCAL_ID,
iconCss: 'e-icons e-de-ctnr-upload'
}
],
select: this.onImageDropDownSelect.bind(this)
},
id: this.ribbonId + '_image',
ribbonTooltipSettings: {
content: this.localObj.getConstant('Insert inline picture from a file')
}
}]
}]
};
};
IllustrationsGroup.prototype.onImageDropDownSelect = function (args) {
var id = args.item.id;
if (id === this.ribbonId + IMAGE_LOCAL_ID) {
this.imageClickHandler();
}
};
IllustrationsGroup.prototype.imageClickHandler = function () {
this.imagePicker.value = '';
this.imagePicker.click();
};
IllustrationsGroup.prototype.onImageChange = function () {
var _this = this;
var file = this.imagePicker.files[0];
if (!file) {
return;
}
var fileReader = new FileReader();
fileReader.onload = function () {
_this.insertImage(fileReader.result);
};
fileReader.readAsDataURL(file);
};
IllustrationsGroup.prototype.insertImage = function (data) {
var image = document.createElement('img');
var container = this.container;
image.addEventListener('load', function () {
container.documentEditor.editorModule.insertImageInternal(data, true, this.width, this.height, this.alt);
});
image.src = data;
};
/**
* Clean up resources
* @returns {void}
*/
IllustrationsGroup.prototype.destroy = function () {
// Remove event listeners
if (this.imagePicker) {
EventHandler.remove(this.imagePicker, 'change', this.onImageChange);
// Clean up DOM elements
if (this.imagePicker.parentElement) {
this.imagePicker.parentElement.removeChild(this.imagePicker);
}
this.imagePicker = undefined;
}
// Clear all references
this.container = undefined;
this.localObj = undefined;
};
return IllustrationsGroup;
}(RibbonGroupBase));
export { IllustrationsGroup };