@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
317 lines (316 loc) • 13.8 kB
JavaScript
import { L10n, createElement, EventHandler } from '@syncfusion/ej2-base';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { RibbonItemSize, RibbonItemType } from '@syncfusion/ej2-ribbon';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
// Constants for UI element IDs
export var SIZE_GROUP = '_size_group';
export var WIDTH_BOX_ID = '_width_box';
export var HEIGHT_BOX_ID = '_height_box';
export var ASPECT_RATIO_ID = '_aspect_ratio';
/**
* Size group implementation for Picture Format tab
* @private
*/
var SizeGroup = /** @class */ (function () {
/**
* Constructor for SizeGroup class
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function SizeGroup(container) {
this.isMaintainAspectRatio = false;
this.isInitialized = false;
this.container = container;
this.localObj = new L10n('documenteditorcontainer', this.container.defaultLocale, this.container.locale);
this.isInitialized = false;
// Create a hidden container for templates
this.templateContainer = createElement('div', {
styles: 'position: absolute; visibility: hidden; height: 0; width: 0; overflow: hidden;'
});
document.body.appendChild(this.templateContainer);
// Create template elements
this.createWidthTemplate();
this.createHeightTemplate();
}
/**
* Get the Ribbon items for Size group
* @returns {RibbonGroupModel} - Ribbon group model for Size group
* @private
*/
SizeGroup.prototype.getSizeGroup = function () {
var id = this.container.element.id + '_pictureformat';
return {
header: this.localObj.getConstant('Size'),
id: id + SIZE_GROUP,
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant('Size'),
collections: [
{
items: [
{
keyTip: 'W',
type: RibbonItemType.Template,
allowedSizes: RibbonItemSize.Small,
itemTemplate: '#' + this.container.element.id + RIBBON_ID + '_pictureformat_width',
ribbonTooltipSettings: {
title: this.localObj.getConstant('Width'),
content: this.localObj.getConstant('Adjust image width')
}
},
{
keyTip: 'H',
type: RibbonItemType.Template,
itemTemplate: '#' + this.container.element.id + RIBBON_ID + '_pictureformat_height',
ribbonTooltipSettings: {
title: this.localObj.getConstant('Height'),
content: this.localObj.getConstant('Adjust image height')
}
},
{
type: RibbonItemType.CheckBox,
keyTip: 'X',
checkBoxSettings: {
label: this.localObj.getConstant('Aspect ratio'),
checked: false,
change: this.onAspectRatioBtnClick.bind(this)
},
id: id + ASPECT_RATIO_ID,
ribbonTooltipSettings: {
title: this.localObj.getConstant('Aspect Ratio'),
content: this.localObj.getConstant('Maintain aspect ratio when resizing')
}
}
]
}
]
};
};
SizeGroup.prototype.createWidthTemplate = function () {
var script = document.createElement('script');
script.id = this.container.element.id + RIBBON_ID + '_pictureformat_width';
script.setAttribute('type', 'text/x-template');
script.innerHTML = "\n <div class=\"e-de-ctnr-picture-ribbon-segment e-de-ctnr-picture-format-tab\"\n title=\"" + this.localObj.getConstant('Width') + "\">\n <div class=\"e-de-picture-label-container\">\n <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Width') + ":</span>\n </div>\n <input id=\"" + (this.container.element.id + WIDTH_BOX_ID) + "\" class=\"e-textbox\" />\n </div>\n ";
document.head.appendChild(script);
// Register numeric textbox for initialization
this.container.ribbon.numericTextBoxCollection.add(this.container.element.id + WIDTH_BOX_ID, 'pictureFormatTab');
};
SizeGroup.prototype.createHeightTemplate = function () {
var script = document.createElement('script');
script.id = this.container.element.id + RIBBON_ID + '_pictureformat_height';
script.setAttribute('type', 'text/x-template');
script.innerHTML = "\n <div class=\"e-de-ctnr-picture-ribbon-segment e-de-ctnr-picture-format-tab\" \n title=\"" + this.localObj.getConstant('Height') + "\">\n <div class=\"e-de-picture-label-container\">\n <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Height') + ":</span>\n </div>\n <input id=\"" + (this.container.element.id + HEIGHT_BOX_ID) + "\" class=\"e-textbox\"/>\n </div>\n ";
document.head.appendChild(script);
// Register numeric textbox for initialization
this.container.ribbon.numericTextBoxCollection.add(this.container.element.id + HEIGHT_BOX_ID, 'pictureFormatTab');
};
/**
* Initializes the NumericTextBox instances
* @returns {void}
* @private
*/
SizeGroup.prototype.initializeNumericTextBoxes = function () {
if (this.isInitialized) {
return;
}
this.isInitialized = true;
this.initializeWidthNumericBox();
this.initializeHeightNumericBox();
};
SizeGroup.prototype.initializeWidthNumericBox = function () {
var _this = this;
var element = document.getElementById(this.container.element.id + WIDTH_BOX_ID);
if (!element) {
return;
}
this.widthNumericBox = new NumericTextBox({
min: 0,
max: 23500,
value: 0,
showSpinButton: false,
format: 'n0',
decimals: 2,
width: '100px',
change: this.onWidthChange.bind(this)
});
this.widthNumericBox.appendTo(element);
element.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
setTimeout(function () {
_this.applyImageWidth();
}, 30);
}
});
element.addEventListener('blur', this.applyImageWidth.bind(this));
};
SizeGroup.prototype.initializeHeightNumericBox = function () {
var _this = this;
var element = document.getElementById(this.container.element.id + HEIGHT_BOX_ID);
if (!element) {
return;
}
this.heightNumericBox = new NumericTextBox({
min: 0,
max: 23500,
value: 0,
showSpinButton: false,
format: 'n0',
decimals: 2,
width: '100px',
change: this.onHeightChange.bind(this)
});
this.heightNumericBox.appendTo(element);
element.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
setTimeout(function () {
_this.applyImageHeight();
}, 30);
}
});
element.addEventListener('blur', this.applyImageHeight.bind(this));
};
SizeGroup.prototype.onWidthChange = function () {
this.applyImageWidth();
};
SizeGroup.prototype.onHeightChange = function () {
this.applyImageHeight();
};
SizeGroup.prototype.onAspectRatioBtnClick = function (args) {
this.isMaintainAspectRatio = args.checked;
};
/**
* Updates the size property controls with current image properties
* @returns {void}
* @private
*/
SizeGroup.prototype.updateSizeProperties = function () {
var imageFormat = this.container.documentEditor.selectionModule.imageFormat;
if (this.widthNumericBox && this.heightNumericBox) {
this.widthNumericBox.value = imageFormat.width;
this.heightNumericBox.value = imageFormat.height;
}
};
/**
* Applies the width value to the selected image
* @returns {void}
* @private
*/
SizeGroup.prototype.applyImageWidth = function () {
if (!this.widthNumericBox || !this.heightNumericBox) {
return;
}
if (!this.isMaintainAspectRatio) {
var width = this.widthNumericBox.value;
var height = this.heightNumericBox.value;
if (width > this.widthNumericBox.max) {
width = this.widthNumericBox.max;
}
if (height > this.heightNumericBox.max) {
height = this.heightNumericBox.max;
}
if (!(width === null || height === null)) {
this.container.documentEditor.selectionModule.imageFormat.resize(width, height);
}
}
else if (this.isMaintainAspectRatio) {
var width = this.widthNumericBox.value;
if (width > this.widthNumericBox.max) {
width = this.widthNumericBox.max;
}
var imageFormat = this.container.documentEditor.selectionModule.imageFormat;
var ratio = width / imageFormat.width;
var height = this.heightNumericBox.value * ratio;
this.heightNumericBox.value = height;
if (!(width === null || height === null)) {
imageFormat.resize(width, height);
}
}
};
SizeGroup.prototype.applyImageHeight = function () {
if (!this.widthNumericBox || !this.heightNumericBox) {
return;
}
if (!this.isMaintainAspectRatio) {
var width = this.widthNumericBox.value;
var height = this.heightNumericBox.value;
if (!(width === null || height === null)) {
this.container.documentEditor.selectionModule.imageFormat.resize(width, height);
}
}
else if (this.isMaintainAspectRatio) {
var height = this.heightNumericBox.value;
var imageFormat = this.container.documentEditor.selectionModule.imageFormat;
var ratio = height / imageFormat.height;
var width = this.widthNumericBox.value * ratio;
this.widthNumericBox.value = width;
if (!(width === null || height === null)) {
imageFormat.resize(width, height);
}
}
};
/**
* Resets the initialization state to allow re-initialization after layout changes
* @returns {void}
* @private
*/
SizeGroup.prototype.resetInitializationState = function () {
this.isInitialized = false;
// Clean up existing instances if they exist before re-initialization
if (this.widthNumericBox) {
this.widthNumericBox.destroy();
this.widthNumericBox = undefined;
}
if (this.heightNumericBox) {
this.heightNumericBox.destroy();
this.heightNumericBox = undefined;
}
};
/**
* Clean up resources when destroyed
* @returns {void}
* @private
*/
SizeGroup.prototype.destroy = function () {
this.isInitialized = false;
// Destroy UI components
if (this.widthNumericBox) {
// Remove event listeners from the input element
var widthElement = document.getElementById(this.container.element.id + WIDTH_BOX_ID);
if (widthElement) {
EventHandler.clearEvents(widthElement);
}
this.widthNumericBox.destroy();
this.widthNumericBox = undefined;
}
if (this.heightNumericBox) {
// Remove event listeners from the input element
var heightElement = document.getElementById(this.container.element.id + HEIGHT_BOX_ID);
if (heightElement) {
EventHandler.clearEvents(heightElement);
}
this.heightNumericBox.destroy();
this.heightNumericBox = undefined;
}
if (this.aspectRatioBtn) {
this.aspectRatioBtn.destroy();
this.aspectRatioBtn = undefined;
}
// Remove template elements
var elementsToRemove = [
document.getElementById(this.container.element.id + RIBBON_ID + '_pictureformat_width'),
document.getElementById(this.container.element.id + RIBBON_ID + '_pictureformat_height')
];
elementsToRemove.forEach(function (element) {
if (element && element.parentNode) {
element.parentNode.removeChild(element);
}
});
if (this.templateContainer && this.templateContainer.parentNode) {
this.templateContainer.parentNode.removeChild(this.templateContainer);
this.templateContainer = undefined;
}
// Clear all references
this.container = undefined;
this.localObj = undefined;
};
return SizeGroup;
}());
export { SizeGroup };