@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
322 lines (321 loc) • 15.1 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 { RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { BulletsGroup, BULLET_LIST_ID } from './bullets-group';
import { NumberingGroup, NUMBER_LIST_ID } from './numbering-group';
import { LineSpacingGroup, LINE_SPACING_ID } from './line-spacing-group';
// Paragraph group constants
export var PARAGRAPH_GROUP_ID = '_paragraph_group';
export var ALIGN_LEFT_ID = '_align_left';
export var ALIGN_CENTER_ID = '_align_center';
export var ALIGN_RIGHT_ID = '_align_right';
export var JUSTIFY_ID = '_justify';
export var DECREASE_INDENT_ID = '_decrease_indent';
export var INCREASE_INDENT_ID = '_increase_indent';
export var SHOW_HIDE_MARKS_ID = '_show_hide_marks';
export var BORDERS_ID = '_borders';
/**
* HomeParagraphGroup class for handling paragraph formatting operations in Document Editor ribbon
* @private
*/
var HomeParagraphGroup = /** @class */ (function (_super) {
__extends(HomeParagraphGroup, _super);
/**
* Constructor for HomeParagraphGroup
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function HomeParagraphGroup(container) {
var _this = _super.call(this, container) || this;
// Initialize child components
_this.bulletsGroup = new BulletsGroup(container);
_this.numberingGroup = new NumberingGroup(container);
_this.lineSpacingGroup = new LineSpacingGroup(container);
return _this;
}
/**
* Get the Ribbon group model for Paragraph formatting
* @returns {RibbonGroupModel} - Ribbon group model for Paragraph formatting
* @private
*/
HomeParagraphGroup.prototype.getGroupModel = function () {
var _this = this;
var id = this.ribbonId;
return {
id: id + PARAGRAPH_GROUP_ID,
cssClass: 'e-paragraph-group',
header: this.localObj.getConstant('Paragraph'),
isCollapsible: false,
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant('More Paragraph Options'),
groupIconCss: 'e-icons e-de-paragraph',
orientation: 'Row',
showLauncherIcon: true,
launcherIconKeyTip: 'PG',
collections: [{
id: id + '_paragraph-bullets',
items: [
this.bulletsGroup.getBulletListItem(),
this.numberingGroup.getNumberingListItem(),
{
type: 'Button',
keyTip: 'AO',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Increase indent'),
iconCss: 'e-icons e-de-ctnr-increaseindent',
clicked: function () {
_this.increaseIndentAction();
}
},
id: id + INCREASE_INDENT_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Increase indent') }
},
{
type: 'Button',
keyTip: 'AI',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Decrease indent'),
iconCss: 'e-icons e-de-ctnr-decreaseindent',
clicked: function () {
_this.decreaseIndentAction();
}
},
id: id + DECREASE_INDENT_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Decrease indent') }
},
{
type: 'Button',
keyTip: 'FM',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Show/Hide Marks'),
iconCss: 'e-icons e-de-e-paragraph-mark',
isToggle: true,
clicked: function () {
_this.toggleHiddenMarks();
}
},
id: id + SHOW_HIDE_MARKS_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('ShowHiddenMarks Tooltip') }
}
]
},
{
items: [{
// type: RibbonItemType.GroupButton,
// allowedSizes: RibbonItemSize.Small,
// groupButtonSettings: {
// selection: RibbonGroupButtonSelection.Single,
// header: 'Alignment',
// items: [{
type: 'Button',
keyTip: 'AL',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Align left Tooltip'),
iconCss: 'e-icons e-de-ctnr-alignleft',
isToggle: true,
clicked: function () {
_this.leftAlignmentAction();
}
},
id: id + ALIGN_LEFT_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Align left Tooltip') }
},
{
type: 'Button',
keyTip: 'AC',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Center Tooltip'),
iconCss: 'e-icons e-de-ctnr-aligncenter',
isToggle: true,
clicked: function () {
_this.centerAlignmentAction();
}
},
id: id + ALIGN_CENTER_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Center Tooltip') }
},
{
type: 'Button',
keyTip: 'AR',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Align right Tooltip'),
iconCss: 'e-icons e-de-ctnr-alignright',
isToggle: true,
clicked: function () {
_this.rightAlignmentAction();
}
},
id: id + ALIGN_RIGHT_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Align right Tooltip') }
},
{
type: 'Button',
keyTip: 'AJ',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Justify Tooltip'),
iconCss: 'e-icons e-de-ctnr-justify',
isToggle: true,
clicked: function () {
_this.justifyAction();
}
},
id: id + JUSTIFY_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Justify Tooltip') }
// }]
// }
},
this.lineSpacingGroup.getLineSpacingItem(),
{
type: 'Button',
keyTip: 'B',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Borders'),
iconCss: 'e-icons e-de-ctnr-borders',
clicked: function () {
_this.bordersAction();
}
},
id: id + BORDERS_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Borders') }
}
]
}]
};
};
/**
* Update paragraph formatting buttons based on document state
* @returns {void} - void
* @private
*/
HomeParagraphGroup.prototype.updateSelection = function () {
// Get the ribbon from container
var ribbon = this.container.ribbonModule.ribbon;
if (!ribbon) {
return;
}
var id = this.ribbonId;
// Update toggle button states based on current selection
if (this.documentEditor.selection) {
var paragraphFormat = this.documentEditor.selection.paragraphFormat;
// Update text alignment buttons
this.updateToggleButtonState(id + ALIGN_LEFT_ID, paragraphFormat.textAlignment === 'Left');
this.updateToggleButtonState(id + ALIGN_CENTER_ID, paragraphFormat.textAlignment === 'Center');
this.updateToggleButtonState(id + ALIGN_RIGHT_ID, paragraphFormat.textAlignment === 'Right');
this.updateToggleButtonState(id + JUSTIFY_ID, paragraphFormat.textAlignment === 'Justify');
// Update show hidden marks button
this.updateToggleButtonState(id + SHOW_HIDE_MARKS_ID, this.container.documentEditorSettings.showHiddenMarks);
// Update line spacing
this.lineSpacingGroup.setLineSpacing();
// Disable buttons in read-only mode
if (this.documentEditor.isReadOnly) {
ribbon.disableItem(id + INCREASE_INDENT_ID);
ribbon.disableItem(id + DECREASE_INDENT_ID);
ribbon.disableItem(id + BULLET_LIST_ID);
ribbon.disableItem(id + NUMBER_LIST_ID);
ribbon.disableItem(id + BORDERS_ID);
ribbon.disableItem(id + LINE_SPACING_ID);
}
else {
ribbon.enableItem(id + INCREASE_INDENT_ID);
ribbon.enableItem(id + BULLET_LIST_ID);
ribbon.enableItem(id + NUMBER_LIST_ID);
ribbon.enableItem(id + BORDERS_ID);
ribbon.enableItem(id + LINE_SPACING_ID);
}
}
};
HomeParagraphGroup.prototype.updateToggleButtonState = function (buttonId, isActive) {
var buttonElement = document.querySelector('#' + buttonId);
if (buttonElement) {
if (isActive) {
buttonElement.classList.add('e-active');
}
else {
buttonElement.classList.remove('e-active');
}
}
};
HomeParagraphGroup.prototype.leftAlignmentAction = function () {
if (!this.documentEditor.isReadOnly && this.documentEditor.selection) {
this.documentEditor.selection.paragraphFormat.textAlignment = 'Left';
}
};
HomeParagraphGroup.prototype.centerAlignmentAction = function () {
if (!this.documentEditor.isReadOnly && this.documentEditor.selection) {
this.documentEditor.selection.paragraphFormat.textAlignment = 'Center';
}
};
HomeParagraphGroup.prototype.rightAlignmentAction = function () {
if (!this.documentEditor.isReadOnly && this.documentEditor.selection) {
this.documentEditor.selection.paragraphFormat.textAlignment = 'Right';
}
};
HomeParagraphGroup.prototype.justifyAction = function () {
if (!this.documentEditor.isReadOnly && this.documentEditor.selection) {
this.documentEditor.selection.paragraphFormat.textAlignment = 'Justify';
}
};
HomeParagraphGroup.prototype.increaseIndentAction = function () {
if (!this.documentEditor.isReadOnly && this.documentEditor.editor) {
this.documentEditor.editor.increaseIndent();
}
};
HomeParagraphGroup.prototype.decreaseIndentAction = function () {
if (!this.documentEditor.isReadOnly && this.documentEditor.editor) {
this.documentEditor.editor.decreaseIndent();
}
};
HomeParagraphGroup.prototype.toggleHiddenMarks = function () {
var _this = this;
if (this.documentEditor) {
this.container.documentEditorSettings.showHiddenMarks = !this.container.documentEditorSettings.showHiddenMarks;
setTimeout(function () {
_this.documentEditor.focusIn();
}, 30);
}
};
HomeParagraphGroup.prototype.bordersAction = function () {
if (!this.documentEditor.isReadOnly) {
this.documentEditor.showDialog('BordersAndShading');
}
};
/**
* Clean up resources when group is destroyed
* @returns {void}
* @private
*/
HomeParagraphGroup.prototype.destroy = function () {
if (this.bulletsGroup) {
this.bulletsGroup.destroy();
this.bulletsGroup = null;
}
if (this.numberingGroup) {
this.numberingGroup.destroy();
this.numberingGroup = null;
}
if (this.lineSpacingGroup) {
this.lineSpacingGroup = null;
}
};
return HomeParagraphGroup;
}(RibbonGroupBase));
export { HomeParagraphGroup };