@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
412 lines (411 loc) • 21.8 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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { createElement, initializeCSPTemplate } from '@syncfusion/ej2-base';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { RibbonItemType } from '@syncfusion/ej2-ribbon';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
import { RibbonGroupBase } from '../ribbon-interfaces';
// Constants for UI element IDs
export var LAYOUT_PARAGRAPH_GROUP = '_layout_paragraph_group';
export var INDENT_LEFT_ID = '_indent_left';
export var INDENT_RIGHT_ID = '_indent_right';
export var SPACING_BEFORE_ID = '_spacing_before';
export var SPACING_AFTER_ID = '_spacing_after';
/**
* Layout Paragraph group implementation for simplified mode
* @private
*/
var LayoutParagraphGroup = /** @class */ (function (_super) {
__extends(LayoutParagraphGroup, _super);
/**
* Constructor for LayoutParagraphGroup class
*
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function LayoutParagraphGroup(container) {
var _this = _super.call(this, container) || this;
_this.isInitilized = false;
_this.eventHandlers = {};
_this.isInitilized = 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.createIndentLeftTemplate();
_this.createIndentRightTemplate();
_this.createSpacingBeforeTemplate();
_this.createSpacingAfterTemplate();
return _this;
}
/**
* Get the Ribbon items for Layout Paragraph group
*
* @returns {RibbonGroupModel} The ribbon group model
*/
LayoutParagraphGroup.prototype.getGroupModel = function () {
var _this = this;
var id = this.container.element.id + RIBBON_ID;
var leftIndentTemplate = function () { return "\n <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n title=\"" + _this.localObj.getConstant('Indent Left') + "\">\n <div class=\"e-de-indent-label-container\">\n \n <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Indent Left') + ":</span>\n </div>\n <input id=\"" + (_this.container.element.id + INDENT_LEFT_ID) + "\" class=\"e-textbox\" />\n </div>"; };
var rightIndentTemplate = function () { return "\n <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n title=\"" + _this.localObj.getConstant('Indent Right') + "\">\n <div class=\"e-de-indent-label-container\">\n \n <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Indent Right') + ":</span>\n </div>\n <input id=\"" + (_this.container.element.id + INDENT_RIGHT_ID) + "\" class=\"e-textbox\" />\n </div>\n "; };
var spacingBeforeTemplate = function () { return "\n <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n title=\"" + _this.localObj.getConstant('Spacing Before') + "\">\n <div class=\"e-de-property-label-container\">\n \n <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Spacing Before') + ":</span>\n </div>\n <input id=\"" + (_this.container.element.id + SPACING_BEFORE_ID) + "\" class=\"e-textbox\" />\n </div>\n "; };
var spacingAfterTemplate = function () { return "\n <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n title=\"" + _this.localObj.getConstant('Spacing After') + "\">\n <div class=\"e-de-property-label-container\">\n <span class=\"e-de-icon-spaceafter\"></span>\n <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Spacing After') + ":</span>\n </div>\n <input id=\"" + (_this.container.element.id + SPACING_AFTER_ID) + "\" class=\"e-textbox\" />\n </div>\n "; };
return {
header: this.localObj.getConstant('Paragraph'),
showLauncherIcon: true,
id: id + LAYOUT_PARAGRAPH_GROUP,
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant('Paragraph'),
collections: [
{
items: [
{
type: RibbonItemType.Template,
itemTemplate: initializeCSPTemplate(leftIndentTemplate),
ribbonTooltipSettings: {
title: this.localObj.getConstant('Indent Left'),
content: this.localObj.getConstant('Set the distance between paragraph and left margin')
}
},
{
type: RibbonItemType.Template,
itemTemplate: initializeCSPTemplate(rightIndentTemplate),
ribbonTooltipSettings: {
title: this.localObj.getConstant('Indent Right'),
content: this.localObj.getConstant('Set the distance between paragraph and right margin')
}
}
]
},
{
items: [
{
type: RibbonItemType.Template,
itemTemplate: initializeCSPTemplate(spacingBeforeTemplate),
ribbonTooltipSettings: {
title: this.localObj.getConstant('Spacing Before'),
content: this.localObj.getConstant('Set the spacing before the paragraph')
}
},
{
type: RibbonItemType.Template,
itemTemplate: initializeCSPTemplate(spacingAfterTemplate),
ribbonTooltipSettings: {
title: this.localObj.getConstant('Spacing After'),
content: this.localObj.getConstant('Set the spacing after the paragraph')
}
}
]
}
]
};
};
/**
* Creates indent left input template
*
* @returns {void}
*/
LayoutParagraphGroup.prototype.createIndentLeftTemplate = function () {
var script = document.createElement('script');
script.id = this.container.element.id + RIBBON_ID + '_indent_left';
script.setAttribute('type', 'text/x-template');
script.innerHTML = "\n <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n title=\"" + this.localObj.getConstant('Indent Left') + "\">\n <div class=\"e-de-indent-label-container\">\n \n <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Indent Left') + ":</span>\n </div>\n <input id=\"" + (this.container.element.id + INDENT_LEFT_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 + INDENT_LEFT_ID, 'simplifiedTab');
};
/**
* Creates indent right input template
*
* @returns {void}
*/
LayoutParagraphGroup.prototype.createIndentRightTemplate = function () {
var script = document.createElement('script');
script.id = this.container.element.id + RIBBON_ID + '_indent_right';
script.setAttribute('type', 'text/x-template');
script.innerHTML = "\n <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n title=\"" + this.localObj.getConstant('Indent Right') + "\">\n <div class=\"e-de-indent-label-container\">\n \n <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Indent Right') + ":</span>\n </div>\n <input id=\"" + (this.container.element.id + INDENT_RIGHT_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 + INDENT_RIGHT_ID, 'simplifiedTab');
};
/**
* Creates spacing before input template
*
* @returns {void}
*/
LayoutParagraphGroup.prototype.createSpacingBeforeTemplate = function () {
var script = document.createElement('script');
script.id = this.container.element.id + RIBBON_ID + '_spacing_before';
script.setAttribute('type', 'text/x-template');
script.innerHTML = "\n <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n title=\"" + this.localObj.getConstant('Spacing Before') + "\">\n <div class=\"e-de-property-label-container\">\n \n <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Spacing Before') + ":</span>\n </div>\n <input id=\"" + (this.container.element.id + SPACING_BEFORE_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 + SPACING_BEFORE_ID, 'simplifiedTab');
};
/**
* Creates spacing after input template
*
* @returns {void}
*/
LayoutParagraphGroup.prototype.createSpacingAfterTemplate = function () {
var script = document.createElement('script');
script.id = this.container.element.id + RIBBON_ID + '_spacing_after';
script.setAttribute('type', 'text/x-template');
script.innerHTML = "\n <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n title=\"" + this.localObj.getConstant('Spacing After') + "\">\n <div class=\"e-de-property-label-container\">\n <span class=\"e-de-icon-spaceafter\"></span>\n <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Spacing After') + ":</span>\n </div>\n <input id=\"" + (this.container.element.id + SPACING_AFTER_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 + SPACING_AFTER_ID, 'simplifiedTab');
};
/**
* Initializes the NumericTextBox instances
*
* @returns {void}
*/
LayoutParagraphGroup.prototype.initializeNumericTextBoxes = function () {
if (this.isInitilized) {
var leftIndent = document.getElementById(this.container.element.id + RIBBON_ID + '_indent_left');
var rightIndent = document.getElementById(this.container.element.id + RIBBON_ID + '_indent_right');
var beforeSpacing = document.getElementById(this.container.element.id + RIBBON_ID + '_spacing_before');
var afterSpacing = document.getElementById(this.container.element.id + RIBBON_ID + '_spacing_after');
if (leftIndent.classList.contains('e-numerictextbox') && rightIndent.classList.contains('e-numerictextbox') &&
beforeSpacing.classList.contains('e-numerictextbox') && afterSpacing.classList.contains('e-numerictextbox')) {
return;
}
}
this.resetInitializationState();
this.isInitilized = true;
this.initializeIndentLeftNumericBox();
this.initializeIndentRightNumericBox();
this.initializeSpacingBeforeNumericBox();
this.initializeSpacingAfterNumericBox();
};
/**
* Resets the initialization state to allow re-initialization after layout changes
*
* @returns {void}
*/
LayoutParagraphGroup.prototype.resetInitializationState = function () {
this.isInitilized = false;
// Clean up existing instances if they exist before re-initialization
if (this.indentLeftNumericBox) {
this.indentLeftNumericBox.destroy();
this.indentLeftNumericBox = undefined;
}
if (this.indentRightNumericBox) {
this.indentRightNumericBox.destroy();
this.indentRightNumericBox = undefined;
}
if (this.spacingBeforeNumericBox) {
this.spacingBeforeNumericBox.destroy();
this.spacingBeforeNumericBox = undefined;
}
if (this.spacingAfterNumericBox) {
this.spacingAfterNumericBox.destroy();
this.spacingAfterNumericBox = undefined;
}
};
LayoutParagraphGroup.prototype.initializeIndentLeftNumericBox = function () {
this.indentLeftNumericBox = this.initializeNumericBox(INDENT_LEFT_ID, {
format: 'n1',
value: 0,
min: -1584,
max: 1584,
placeholder: this.localObj.getConstant('Before text'),
change: this.onIndentLeftChange.bind(this)
}, this.applyIndentLeft);
};
LayoutParagraphGroup.prototype.initializeIndentRightNumericBox = function () {
this.indentRightNumericBox = this.initializeNumericBox(INDENT_RIGHT_ID, {
format: 'n1',
value: 0,
min: -1584,
max: 1584,
change: this.onIndentRightChange.bind(this)
}, this.applyIndentRight);
};
LayoutParagraphGroup.prototype.initializeSpacingBeforeNumericBox = function () {
this.spacingBeforeNumericBox = this.initializeNumericBox(SPACING_BEFORE_ID, {
format: 'n1',
value: 0,
min: -1,
max: 1584,
step: 6,
showSpinButton: true,
change: this.onSpacingBeforeChange.bind(this)
}, this.applySpacingBefore);
};
LayoutParagraphGroup.prototype.initializeSpacingAfterNumericBox = function () {
this.spacingAfterNumericBox = this.initializeNumericBox(SPACING_AFTER_ID, {
format: 'n1',
value: 0,
min: -1,
max: 1584,
step: 6,
showSpinButton: true,
change: this.onSpacingAfterChange.bind(this)
}, this.applySpacingAfter);
};
LayoutParagraphGroup.prototype.initializeNumericBox = function (id, options, applyMethod) {
var _this = this;
var element = document.getElementById(this.container.element.id + id);
if (!element) {
return null;
}
var numericBox = new NumericTextBox(__assign({ width: '100px', cssClass: 'e-de-paragraph-property', enablePersistence: false, floatLabelType: 'Always' }, options));
numericBox.appendTo(element);
var keydownHandler = function (e) {
if (e.key === 'Enter') {
setTimeout(function () {
applyMethod.call(_this);
}, 30);
}
};
var blurHandler = applyMethod.bind(this);
// Add event listeners
element.addEventListener('keydown', keydownHandler);
element.addEventListener('blur', blurHandler);
/* eslint-disable */
this.eventHandlers[id] = {
element: element,
keydownHandler: keydownHandler,
blurHandler: blurHandler
};
return numericBox;
};
LayoutParagraphGroup.prototype.onIndentLeftChange = function () {
this.applyIndentLeft();
};
LayoutParagraphGroup.prototype.onIndentRightChange = function () {
this.applyIndentRight();
};
LayoutParagraphGroup.prototype.onSpacingBeforeChange = function () {
this.applySpacingBefore();
};
LayoutParagraphGroup.prototype.onSpacingAfterChange = function () {
this.applySpacingAfter();
};
LayoutParagraphGroup.prototype.applyIndentLeft = function () {
if (!this.indentLeftNumericBox) {
return;
}
var leftIndent = this.indentLeftNumericBox.value;
if (leftIndent !== null) {
this.container.documentEditor.selection.paragraphFormat.leftIndent = leftIndent;
}
};
LayoutParagraphGroup.prototype.applyIndentRight = function () {
if (!this.indentRightNumericBox) {
return;
}
var rightIndent = this.indentRightNumericBox.value;
if (rightIndent !== null) {
this.container.documentEditor.selection.paragraphFormat.rightIndent = rightIndent;
}
};
LayoutParagraphGroup.prototype.applySpacingBefore = function () {
if (!this.spacingBeforeNumericBox) {
return;
}
var spacingBefore = this.spacingBeforeNumericBox.value;
if (spacingBefore !== null) {
this.container.documentEditor.selection.paragraphFormat.beforeSpacing = spacingBefore;
}
};
LayoutParagraphGroup.prototype.applySpacingAfter = function () {
if (!this.spacingAfterNumericBox) {
return;
}
var spacingAfter = this.spacingAfterNumericBox.value;
if (spacingAfter !== null) {
this.container.documentEditor.selection.paragraphFormat.afterSpacing = spacingAfter;
}
};
/**
* Updates the paragraph formatting properties in the UI
*
* @returns {void}
* @private
*/
LayoutParagraphGroup.prototype.updateSelection = function () {
var paragraphFormat = this.container.documentEditor.selection.paragraphFormat;
if (this.indentLeftNumericBox) {
this.indentLeftNumericBox.value = paragraphFormat.leftIndent;
}
if (this.indentRightNumericBox) {
this.indentRightNumericBox.value = paragraphFormat.rightIndent;
}
if (this.spacingBeforeNumericBox) {
this.spacingBeforeNumericBox.value = paragraphFormat.beforeSpacing;
}
if (this.spacingAfterNumericBox) {
this.spacingAfterNumericBox.value = paragraphFormat.afterSpacing;
}
};
/**
* Clean up resources when destroyed
*
* @returns {void}
*/
LayoutParagraphGroup.prototype.destroy = function () {
this.isInitilized = false;
// Remove event listeners
var keys = Object.keys(this.eventHandlers);
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var key = keys_1[_i];
/* eslint-disable */
var handler = this.eventHandlers[key];
if (handler.element) {
if (handler.keydownHandler) {
handler.element.removeEventListener('keydown', handler.keydownHandler);
}
if (handler.blurHandler) {
handler.element.removeEventListener('blur', handler.blurHandler);
}
}
}
// Clear event handlers
this.eventHandlers = {};
this.resetInitializationState();
// Remove template elements
var elementsToRemove = [
document.getElementById(this.container.element.id + RIBBON_ID + '_indent_left'),
document.getElementById(this.container.element.id + RIBBON_ID + '_indent_right'),
document.getElementById(this.container.element.id + RIBBON_ID + '_spacing_before'),
document.getElementById(this.container.element.id + RIBBON_ID + '_spacing_after')
];
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;
}
};
return LayoutParagraphGroup;
}(RibbonGroupBase));
export { LayoutParagraphGroup };