@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
238 lines (237 loc) • 10.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 __());
};
})();
import { RibbonGroupBase } from '../ribbon-interfaces';
// Constants for UI element IDs
export var COMMENTS_GROUP = '_comments_group';
export var NEW_COMMENT_ID = '_new_comment';
export var PREVIOUS_COMMENT_ID = '_previous_comment';
export var NEXT_COMMENT_ID = '_next_comment';
export var DELETE_COMMENT_ID = '_delete_comment';
export var DELETE_ALL_COMMENTS_ID = '_delete_all_comments';
export var SHOW_COMMENTS_ID = '_show_comments';
/**
* Represents the Comments Group in Review tab
* @private
*/
var CommentsGroup = /** @class */ (function (_super) {
__extends(CommentsGroup, _super);
/**
* Constructor for the CommentsGroup
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function CommentsGroup(container) {
var _this = _super.call(this, container) || this;
_this.showComments = true;
return _this;
}
/**
* Gets the ribbon group model for Comments
* @returns {RibbonGroupModel} - Ribbon group model for Comments
* @private
*/
CommentsGroup.prototype.getGroupModel = function () {
var locale = this.localObj;
return {
id: this.ribbonId + COMMENTS_GROUP,
header: locale.getConstant('Comments'),
enableGroupOverflow: true,
overflowHeader: locale.getConstant('Comments'),
collections: [{
items: [
{
id: this.ribbonId + NEW_COMMENT_ID,
type: 'Button',
keyTip: 'C',
buttonSettings: {
content: locale.getConstant('New Comment'),
iconCss: 'e-icons e-de-cnt-cmt-add',
isToggle: false,
clicked: this.newCommentHandler.bind(this)
},
ribbonTooltipSettings: {
content: locale.getConstant('Insert a comment at the cursor position')
}
}
]
}, {
items: [
{
id: this.ribbonId + PREVIOUS_COMMENT_ID,
type: 'Button',
keyTip: 'V',
buttonSettings: {
content: locale.getConstant('Previous'),
iconCss: 'e-icons e-de-ctnr-previous-comment',
isToggle: false,
clicked: this.previousCommentHandler.bind(this)
},
ribbonTooltipSettings: {
content: locale.getConstant('Go to the previous comment')
}
},
{
id: this.ribbonId + NEXT_COMMENT_ID,
type: 'Button',
keyTip: 'N',
buttonSettings: {
content: locale.getConstant('Next'),
iconCss: 'e-icons e-de-ctnr-next-comment',
isToggle: false,
clicked: this.nextCommentHandler.bind(this)
},
ribbonTooltipSettings: {
content: locale.getConstant('Go to the next comment')
}
}
]
}, {
items: [
{
id: this.ribbonId + SHOW_COMMENTS_ID,
type: 'Button',
keyTip: 'K',
buttonSettings: {
content: locale.getConstant('Show Comments'),
iconCss: 'e-comment-show e-icons',
isToggle: true,
clicked: this.showCommentsHandler.bind(this)
},
ribbonTooltipSettings: {
content: locale.getConstant('Show or hide comments')
}
},
{
id: this.ribbonId + DELETE_COMMENT_ID,
type: 'DropDown',
keyTip: 'D',
dropDownSettings: {
content: locale.getConstant('Delete'),
items: [
{
id: this.ribbonId + DELETE_COMMENT_ID + '_delete',
text: locale.getConstant('Delete'),
iconCss: 'e-icons e-de-ctnr-close-comment'
},
{
id: this.ribbonId + DELETE_ALL_COMMENTS_ID,
text: locale.getConstant('Delete All'),
iconCss: 'e-icons e-de-ctnr-delete-all-comments'
}
],
iconCss: 'e-icons e-de-ctnr-close-comment',
select: this.deleteCommentDropdownHandler.bind(this)
},
ribbonTooltipSettings: {
content: locale.getConstant('Delete comments')
}
}
]
}]
};
};
CommentsGroup.prototype.newCommentHandler = function () {
this.container.documentEditor.editorModule.isUserInsert = true;
this.container.documentEditor.editorModule.insertComment('');
this.container.documentEditor.editorModule.isUserInsert = false;
};
CommentsGroup.prototype.previousCommentHandler = function () {
this.documentEditor.selection.navigatePreviousComment();
};
CommentsGroup.prototype.nextCommentHandler = function () {
this.documentEditor.selection.navigateNextComment();
};
CommentsGroup.prototype.deleteCommentDropdownHandler = function (args) {
var item = args.item;
if (item && item.id) {
if (item.id === this.ribbonId + DELETE_ALL_COMMENTS_ID) {
this.documentEditor.editor.deleteAllComments();
}
else if (item.id === this.ribbonId + DELETE_COMMENT_ID + '_delete') {
this.documentEditor.editor.deleteComment();
}
}
};
CommentsGroup.prototype.showCommentsHandler = function () {
this.showComments = !this.showComments;
this.documentEditor.showComments = this.showComments;
// Update toggle state
var showCommentsElement = document.getElementById(this.ribbonId + SHOW_COMMENTS_ID);
if (showCommentsElement) {
showCommentsElement.classList.toggle('e-active', this.showComments);
}
};
/**
* Update comment controls based on selection
* @returns {void}
* @private
*/
CommentsGroup.prototype.updateSelection = function () {
var hasComments = this.documentEditor.documentHelper.comments.length > 0;
var isCommentSelected = this.documentEditor.documentHelper.currentSelectedComment !== undefined;
var ribbon = this.container.ribbon.ribbon;
var currentContext = this.documentEditor.selection.contextType;
var isInHeaderFooter = currentContext.indexOf('Header') >= 0
|| currentContext.indexOf('Footer') >= 0;
if (isInHeaderFooter
|| this.container.documentEditor.selection.isinEndnote
|| this.container.documentEditor.selection.isinFootnote
|| this.container.documentEditor.commentReviewPane.commentPane.isEditMode
|| !this.container.enableComment) {
ribbon.disableGroup(this.ribbonId + COMMENTS_GROUP);
}
else if (!this.container.restrictEditing) {
ribbon.enableGroup(this.ribbonId + COMMENTS_GROUP);
}
if (hasComments && this.container.enableComment) {
ribbon.enableItem(this.ribbonId + PREVIOUS_COMMENT_ID);
ribbon.enableItem(this.ribbonId + NEXT_COMMENT_ID);
ribbon.enableItem(this.ribbonId + DELETE_COMMENT_ID);
ribbon.enableItem(this.ribbonId + SHOW_COMMENTS_ID);
// Update the enabled state of the Delete option in the dropdown
this.updateDeleteMenuItemState(ribbon.getItem(this.ribbonId + DELETE_COMMENT_ID), isCommentSelected);
}
else {
ribbon.disableItem(this.ribbonId + PREVIOUS_COMMENT_ID);
ribbon.disableItem(this.ribbonId + NEXT_COMMENT_ID);
ribbon.disableItem(this.ribbonId + DELETE_COMMENT_ID);
ribbon.disableItem(this.ribbonId + SHOW_COMMENTS_ID);
}
};
CommentsGroup.prototype.updateDeleteMenuItemState = function (dropDownItem, isCommentSelected) {
if (dropDownItem) {
if (!isCommentSelected) {
dropDownItem.dropDownSettings.items[0].disabled = true;
}
else {
dropDownItem.dropDownSettings.items[0].disabled = false;
}
}
};
/**
* @param {boolean} enable - Enable the comment
* @returns {void}
* @private
*/
CommentsGroup.prototype.enableDisableCommentGroup = function (enable) {
var ribbon = this.container.ribbon.ribbon;
if (enable) {
ribbon.enableGroup(this.ribbonId + COMMENTS_GROUP);
}
else {
ribbon.disableGroup(this.ribbonId + COMMENTS_GROUP);
}
};
return CommentsGroup;
}(RibbonGroupBase));
export { CommentsGroup };