@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
131 lines (130 loc) • 5.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';
import { RibbonConstants } from '../ribbon-constants';
import { RibbonHelper } from '../../helper/ribbon-helper';
/**
* Views group implementation for View tab
* @private
*/
var ViewsGroup = /** @class */ (function (_super) {
__extends(ViewsGroup, _super);
function ViewsGroup() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Get the Ribbon items for Document Views group
* @returns {RibbonGroupModel} The ribbon group model
*/
ViewsGroup.prototype.getGroupModel = function () {
return {
header: this.localObj.getConstant(RibbonConstants.VIEWS_GROUP_HEADER),
groupIconCss: RibbonConstants.VIEW_GROUP_ICON_CSS,
orientation: 'Row',
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant(RibbonConstants.VIEWS_GROUP_HEADER),
collections: [
{
items: [
{
type: 'Button',
keyTip: 'F',
buttonSettings: {
content: this.localObj.getConstant('Read Only'),
iconCss: 'e-icons e-de-ctnr-reading-view',
clicked: this.readOnlyHandler.bind(this)
},
id: this.ribbonId + RibbonConstants.READ_ONLY_BUTTON_ID,
ribbonTooltipSettings: {
content: this.localObj.getConstant('Toggle document to read only mode')
}
},
{
type: 'Button',
keyTip: 'P',
buttonSettings: {
content: this.localObj.getConstant('Print Layout'),
iconCss: RibbonConstants.PRINT_LAYOUT_ICON_CSS,
clicked: this.printLayoutHandler.bind(this)
},
id: this.ribbonId + RibbonConstants.PRINT_LAYOUT_BUTTON_ID,
ribbonTooltipSettings: {
content: this.localObj.getConstant('Print layout')
}
},
{
type: 'Button',
keyTip: 'L1',
buttonSettings: {
content: this.localObj.getConstant('Web Layout'),
iconCss: RibbonConstants.WEB_LAYOUT_ICON_CSS,
clicked: this.webLayoutHandler.bind(this)
},
id: this.ribbonId + RibbonConstants.WEB_LAYOUT_BUTTON_ID,
ribbonTooltipSettings: {
content: this.localObj.getConstant('Web layout')
}
}
]
}
]
};
};
/**
* Handler for print layout button click
* @returns {void}
*/
ViewsGroup.prototype.printLayoutHandler = function () {
this.documentEditor.layoutType = 'Pages';
this.toggleLayoutButton();
this.container.statusBar.toggleWebLayout();
};
/**
* Handler for web layout button click
* @returns {void}
*/
ViewsGroup.prototype.webLayoutHandler = function () {
this.documentEditor.layoutType = 'Continuous';
this.toggleLayoutButton();
this.container.statusBar.togglePageLayout();
};
/**
* Handler for read only button click
* @returns {void}
*/
ViewsGroup.prototype.readOnlyHandler = function () {
this.container.restrictEditing = !this.container.restrictEditing;
this.toggleReadOnlyButton();
};
/**
* Update selection to reflect current state
* @returns {void}
*/
ViewsGroup.prototype.updateSelection = function () {
this.toggleLayoutButton();
this.toggleReadOnlyButton();
};
ViewsGroup.prototype.toggleReadOnlyButton = function () {
var ribbon = this.container.ribbon.ribbon;
RibbonHelper.updateToggleButtonState(ribbon, this.ribbonId + RibbonConstants.READ_ONLY_BUTTON_ID, this.container.restrictEditing);
};
ViewsGroup.prototype.toggleLayoutButton = function () {
var ribbonObj = this.container.ribbon.ribbon;
var isPageLayout = this.documentEditor.layoutType === 'Pages';
RibbonHelper.updateToggleButtonState(ribbonObj, this.ribbonId + RibbonConstants.PRINT_LAYOUT_BUTTON_ID, isPageLayout);
RibbonHelper.updateToggleButtonState(ribbonObj, this.ribbonId + RibbonConstants.WEB_LAYOUT_BUTTON_ID, !isPageLayout);
};
return ViewsGroup;
}(RibbonGroupBase));
export { ViewsGroup };