@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
200 lines (199 loc) • 8.74 kB
JavaScript
import { TABLE_DESIGN_TAB_ID } from './../table-design-tab/table-design-tab';
import { TABLE_LAYOUT_TAB_ID } from './../table-layout-tab/table-tab';
import { HEADER_FOOTER_TAB_ID } from './../header-footer-tab/header-footer-tab';
import { RIBBON_ID } from './ribbon-constants';
import { PICTURE_FORMAT_TAB_ID } from '../picture-format-tab/picture-format-tab';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
/**
* Manages contextual tabs in the ribbon
* @private
*/
var RibbonContextualTabManager = /** @class */ (function () {
/**
* Constructor for RibbonContextualTabManager
* @param {DocumentEditorContainer} container - Document editor container
*/
function RibbonContextualTabManager(container) {
/**
* Flag to track if the current operation is content change
* @private
*/
this.isContentChange = false;
this.container = container;
this.ribbonDocumentEditor = this.container.ribbon;
}
/**
* Set content change flag
* @param {boolean} value - Flag value
* @returns {void}
* @private
*/
RibbonContextualTabManager.prototype.setContentChangeFlag = function (value) {
this.isContentChange = value;
};
/**
* Get contextual tabs configuration
* @returns {any[]} Array of contextual tab configurations
* @private
*/
RibbonContextualTabManager.prototype.getContextualTabs = function () {
return [
{
tabs: [
this.ribbonDocumentEditor.tabManager.tableDesignTab.getTableDesignTab(),
this.ribbonDocumentEditor.tabManager.tableLayoutTab.getTableLayoutTab()
],
visible: false
},
{
tabs: [this.ribbonDocumentEditor.tabManager.headerFooterTab.getHeaderFooterTab()],
visible: false
},
{
tabs: [this.ribbonDocumentEditor.tabManager.pictureFormatTab.getPictureFormatTab()],
visible: false
}
];
};
/**
* Update contextual tabs visibility based on selection
* @param {Ribbon} ribbon - Ribbon instance
* @returns {void}
* @private
*/
RibbonContextualTabManager.prototype.updateContextualTabs = function (ribbon) {
if (!this.container.documentEditor || !this.container.documentEditor.selection ||
(!isNullOrUndefined(this.container.documentEditor.selection) &&
this.container.documentEditor.selection.contextType === this.ribbonDocumentEditor.previousContext &&
this.container.documentEditor.selection.isEmpty) || (!isNullOrUndefined(this.container.documentEditor.editor)
&& this.container.documentEditor.editor.isInsertingTOC)) {
return;
}
var currentContext = this.container.documentEditor.selection.contextType;
this.updateTableContextualTabs(ribbon, currentContext);
this.updateHeaderFooterContextualTab(ribbon, currentContext);
this.updatePictureFormatContextualTab(ribbon, currentContext);
};
RibbonContextualTabManager.prototype.updateTableContextualTabs = function (ribbon, currentContext) {
var isTableVisible = currentContext.indexOf('Table') >= 0 && currentContext !== 'TableOfContents';
var tableDesignId = this.container.element.id + RIBBON_ID + TABLE_DESIGN_TAB_ID;
var tableLayoutId = this.container.element.id + RIBBON_ID + TABLE_LAYOUT_TAB_ID;
if (isTableVisible) {
var isTabPresent = false;
// Check if the tab is already present in contextual tabs
for (var _i = 0, _a = ribbon.contextualTabs; _i < _a.length; _i++) {
var contextualTab = _a[_i];
for (var _b = 0, _c = contextualTab.tabs; _b < _c.length; _b++) {
var tab = _c[_b];
if ((tab.id === tableDesignId || tab.id === tableLayoutId) && contextualTab.visible) {
isTabPresent = true;
break;
}
}
if (isTabPresent) {
break;
}
}
if (!isTabPresent) {
ribbon.showTab(tableDesignId, true);
ribbon.showTab(tableLayoutId, true);
// Only select the tab if this is a content change (insert table)
if (this.isContentChange) {
ribbon.selectTab(tableDesignId);
this.isContentChange = false;
}
}
if (this.ribbonDocumentEditor.tabManager.tableDesignTab) {
this.ribbonDocumentEditor.tabManager.tableDesignTab.onSelectionChange();
}
if (this.ribbonDocumentEditor.tabManager.tableLayoutTab) {
this.ribbonDocumentEditor.tabManager.tableLayoutTab.onTableLayoutChange();
}
}
else {
ribbon.hideTab(tableDesignId, true);
ribbon.hideTab(tableLayoutId, true);
}
};
/**
* hide the contextual tab
* @param {EJ2Ribbon} ribbon - ribbon instance
* @returns {void}
* @private
*/
RibbonContextualTabManager.prototype.hideContextualTab = function (ribbon) {
if (this.container.documentEditor.selection &&
this.container.documentEditor.selection.contextType === this.ribbonDocumentEditor.previousContext) {
return;
}
var ribbonId = this.container.element.id + RIBBON_ID;
ribbon.hideTab(ribbonId + TABLE_DESIGN_TAB_ID, true);
ribbon.hideTab(ribbonId + TABLE_LAYOUT_TAB_ID, true);
ribbon.hideTab(ribbonId + HEADER_FOOTER_TAB_ID, true);
ribbon.hideTab(ribbonId + PICTURE_FORMAT_TAB_ID, true);
// ribbon.selectTab(ribbonId + HOME_TAB_ID);
};
RibbonContextualTabManager.prototype.updateHeaderFooterContextualTab = function (ribbon, currentContext) {
var isInHeaderFooter = currentContext.indexOf('Header') >= 0 || currentContext.indexOf('Footer') >= 0;
var headerFooterTabId = this.container.element.id + RIBBON_ID + HEADER_FOOTER_TAB_ID;
if (isInHeaderFooter) {
var isTabPresent = false;
// Check if the tab is already present in contextual tabs
for (var _i = 0, _a = ribbon.contextualTabs; _i < _a.length; _i++) {
var contextualTab = _a[_i];
for (var _b = 0, _c = contextualTab.tabs; _b < _c.length; _b++) {
var tab = _c[_b];
if (tab.id === headerFooterTabId && contextualTab.visible) {
isTabPresent = true;
break;
}
}
if (isTabPresent) {
break;
}
}
if (!isTabPresent) {
ribbon.showTab(headerFooterTabId, true);
ribbon.selectTab(headerFooterTabId);
}
}
else {
ribbon.hideTab(headerFooterTabId, true);
}
};
RibbonContextualTabManager.prototype.updatePictureFormatContextualTab = function (ribbon, currentContext) {
var isImageSelected = currentContext.indexOf('Image') >= 0;
var pictureFormatTab = this.container.element.id + RIBBON_ID + PICTURE_FORMAT_TAB_ID;
if (isImageSelected) {
var isTabPresent = false;
// Check if the tab is already present in contextual tabs
for (var _i = 0, _a = ribbon.contextualTabs; _i < _a.length; _i++) {
var contextualTab = _a[_i];
for (var _b = 0, _c = contextualTab.tabs; _b < _c.length; _b++) {
var tab = _c[_b];
if (tab.id === pictureFormatTab && contextualTab.visible) {
isTabPresent = true;
break;
}
}
if (isTabPresent) {
break;
}
}
if (!isTabPresent) {
ribbon.showTab(pictureFormatTab, true);
// Only select the tab if this is a content change (insert picture)
if (this.isContentChange) {
ribbon.selectTab(pictureFormatTab);
this.isContentChange = false;
}
this.ribbonDocumentEditor.tabManager.pictureFormatTab.updateImageProperties();
}
}
else {
ribbon.hideTab(pictureFormatTab, true);
}
};
return RibbonContextualTabManager;
}());
export { RibbonContextualTabManager };