@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
129 lines (128 loc) • 4.49 kB
JavaScript
import { classList } from '@syncfusion/ej2-base';
/**
* Constants for protect group identification
*/
export var PROTECT_GROUP = '_developer_protect_group';
export var RESTRICT_EDITING_ID = '_restrict_edit';
/**
* ProtectGroup module
*/
var ProtectGroup = /** @class */ (function () {
/**
* Constructor for ProtectGroup class
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function ProtectGroup(container) {
this.container = container;
this.ribbonId = this.container.element.id + '_ribbon';
}
Object.defineProperty(ProtectGroup.prototype, "documentEditor", {
/**
* Get the DocumentEditor instance
* @returns {DocumentEditor} The document editor instance
*/
get: function () {
return this.container.documentEditor;
},
enumerable: true,
configurable: true
});
/**
* Get the Protect group model
* @returns {RibbonGroupModel} The ribbon group model
*/
ProtectGroup.prototype.getGroupModel = function () {
var locale = this.container.localObj;
var id = this.ribbonId + PROTECT_GROUP;
return {
id: id,
header: locale.getConstant('Protect'),
orientation: 'Row',
enableGroupOverflow: true,
overflowHeader: locale.getConstant('Protect'),
collections: [
{
items: [
this.getRestrictEditingButtonModel()
]
}
]
};
};
/**
* Get the Restrict Editing button model
* @returns {RibbonItemModel} The ribbon item model
*/
ProtectGroup.prototype.getRestrictEditingButtonModel = function () {
var locale = this.container.localObj;
var id = this.ribbonId + PROTECT_GROUP;
return {
type: 'Button',
id: id + RESTRICT_EDITING_ID,
buttonSettings: {
iconCss: 'e-icons e-de-ctnr-lock',
content: locale.getConstant('Restrict Editing'),
clicked: this.onRestrictEditingClick.bind(this)
},
ribbonTooltipSettings: {
content: locale.getConstant('Restrict editing')
}
};
};
/**
* Handle restrict editing button click
* @returns {void}
*/
ProtectGroup.prototype.onRestrictEditingClick = function () {
var _this = this;
this.documentEditor.documentHelper.restrictEditingPane.showHideRestrictPane(true);
setTimeout(function () {
_this.documentEditor.focusIn();
}, 30);
};
/**
* Update UI based on current selection
* @returns {void}
*/
ProtectGroup.prototype.updateSelection = function () {
// Update UI state based on current selection
var isReadOnly = this.documentEditor.isReadOnly;
var isDocumentProtected = this.documentEditor.documentHelper.isDocumentProtected;
// Enable/disable restrict editing button based on document state
var enableRestrictEditing = !isReadOnly;
// Implementation to enable/disable restrict editing button
var restrictEditingElement = document.getElementById(this.ribbonId + PROTECT_GROUP + RESTRICT_EDITING_ID);
if (restrictEditingElement) {
restrictEditingElement.classList.toggle('e-disabled', !enableRestrictEditing);
// Update button state if document is protected
this.toggleButton(restrictEditingElement, this.container.restrictEditing);
}
};
/**
* Toggle button state
* @param {HTMLElement} element - The HTML element to toggle
* @param {boolean} toggle - The toggle state
* @returns {void}
*/
ProtectGroup.prototype.toggleButton = function (element, toggle) {
if (toggle) {
classList(element, ['e-btn-toggle'], []);
element.setAttribute('aria-pressed', 'true');
}
else {
classList(element, [], ['e-btn-toggle']);
element.setAttribute('aria-pressed', 'false');
}
};
/**
* Destroy the ProtectGroup instance
* @returns {void}
*/
ProtectGroup.prototype.destroy = function () {
// Clear all references
this.container = undefined;
this.ribbonId = undefined;
};
return ProtectGroup;
}());
export { ProtectGroup };