@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
163 lines (162 loc) • 6.62 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 PROTECT_GROUP = '_protect_group';
export var PROTECT_DOCUMENT_ID = '_protect_document';
export var READ_ONLY_ID = '_read_only';
export var RESTRICT_EDITING_ID = '_restrict_editing';
/**
* Represents the Protect Group in Review
* @private
*/
var ProtectGroup = /** @class */ (function (_super) {
__extends(ProtectGroup, _super);
/**
* Constructor for the ProtectGroup
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function ProtectGroup(container) {
return _super.call(this, container) || this;
}
/**
* Gets the ribbon group model for Protect
* @returns {RibbonGroupModel} The ribbon group model
*/
ProtectGroup.prototype.getGroupModel = function () {
var locale = this.localObj;
// Create items for the protect document dropdown
var protectItems = [
{
id: this.ribbonId + PROTECT_DOCUMENT_ID + '_readonly',
text: locale.getConstant('Read Only'),
iconCss: 'e-icons e-de-read-only'
},
{
id: this.ribbonId + PROTECT_DOCUMENT_ID + '_restrict',
text: locale.getConstant('Restrict Editing'),
iconCss: 'e-icons e-de-restrict-edit'
}
];
return {
id: this.ribbonId + PROTECT_GROUP,
header: locale.getConstant('Protect'),
orientation: 'Rows',
keyTip: 'ZR',
enableGroupOverflow: true,
overflowHeader: locale.getConstant('Protect'),
collections: [
{
items: [
{
id: this.ribbonId + PROTECT_DOCUMENT_ID,
type: 'DropDown',
dropDownSettings: {
content: locale.getConstant('Protect Document'),
items: protectItems,
iconCss: 'e-icons e-de-ctnr-lock',
select: this.protectDocumentDropdownHandler.bind(this),
beforeItemRender: this.onBeforeRenderProtectDropdown.bind(this)
},
ribbonTooltipSettings: {
title: locale.getConstant('Protect Document'),
content: locale.getConstant('Control what types of changes can be made to the document')
}
}
]
}
]
};
};
/**
* Handle selection in protect document dropdown
* @param {MenuEventArgs} args - Menu event arguments
* @returns {void}
*/
ProtectGroup.prototype.protectDocumentDropdownHandler = function (args) {
var id = args.item.id;
if (args.item && id) {
if (id === this.ribbonId + PROTECT_DOCUMENT_ID + '_readonly') {
// Toggle read-only mode
this.container.restrictEditing = !this.container.restrictEditing;
this.updateReadOnlyIcon(args.element);
}
else if (id === this.ribbonId + PROTECT_DOCUMENT_ID + '_restrict') {
// Show restrict editing dialog
this.documentEditor.documentHelper.restrictEditingPane.showHideRestrictPane(true);
}
}
};
/**
* Handle rendering of protection dropdown items to show current state
* @param {MenuEventArgs} args - Menu event arguments
* @returns {void}
*/
ProtectGroup.prototype.onBeforeRenderProtectDropdown = function (args) {
var selectedIcon = args.element.getElementsByClassName('e-menu-icon')[0];
if (!selectedIcon) {
return;
}
if (args.item.id === this.ribbonId + PROTECT_DOCUMENT_ID + '_readonly') {
this.toggleSelectedIcon(selectedIcon, this.documentEditor.isReadOnly);
}
else if (args.item.id === this.ribbonId + PROTECT_DOCUMENT_ID + '_restrict') {
var restrictPane = document.getElementsByClassName('e-de-restrict-pane')[0];
if (restrictPane) {
var isRestrictPaneVisible = !(restrictPane.style.display === 'none');
this.toggleSelectedIcon(selectedIcon, isRestrictPaneVisible);
}
}
};
/**
* Updates the read-only icon in the dropdown item
* @param {HTMLElement} menuElement - The menu element
* @returns {void}
*/
ProtectGroup.prototype.updateReadOnlyIcon = function (menuElement) {
var selectedIcon = menuElement.getElementsByClassName('e-menu-icon')[0];
if (selectedIcon) {
this.toggleSelectedIcon(selectedIcon, this.documentEditor.isReadOnly);
}
};
/**
* Toggles the selected icon state
* @param {HTMLElement} icon - The icon element
* @param {boolean} isSelected - Whether the item is selected
* @returns {void}
*/
ProtectGroup.prototype.toggleSelectedIcon = function (icon, isSelected) {
if (isSelected) {
icon.classList.add('e-de-selected-item');
}
else {
icon.classList.remove('e-de-selected-item');
}
};
/**
* Update UI based on document protection state
* @returns {void}
*/
ProtectGroup.prototype.updateSelection = function () {
// Update UI to reflect current document protection state if needed
var isReadOnly = this.documentEditor.isReadOnly;
// Update read-only button state if it exists in the UI
var readOnlyElement = document.getElementById(this.ribbonId + READ_ONLY_ID);
if (readOnlyElement) {
readOnlyElement.classList.toggle('e-active', isReadOnly);
}
};
return ProtectGroup;
}(RibbonGroupBase));
export { ProtectGroup };