@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
108 lines (107 loc) • 5.12 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 { StylesHelper } from '../../helper/styles-helper';
import { SanitizeHtmlHelper, isNullOrUndefined } from '@syncfusion/ej2-base';
// Styles group constants
export var STYLES_GROUP_ID = '_styles_group';
/**
* StylesGroup class for handling style operations in Document Editor ribbon
* @private
*/
var StylesGroup = /** @class */ (function (_super) {
__extends(StylesGroup, _super);
function StylesGroup() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Get the Ribbon group model for Styles
* @returns {RibbonGroupModel} - Ribbon group model
* @private
*/
StylesGroup.prototype.getGroupModel = function () {
var _this = this;
var id = this.ribbonId;
return {
id: id + STYLES_GROUP_ID,
cssClass: 'e-styles-group',
header: this.localObj.getConstant('Styles'),
enableGroupOverflow: true,
keyTip: 'L',
overflowHeader: this.localObj.getConstant('Styles'),
groupIconCss: 'e-icons e-de-ctnr-paste',
orientation: 'Row',
showLauncherIcon: true,
launcherIconKeyTip: 'FY',
collections: [
{
id: this.ribbonId + '_style-gallery',
items: [
{
type: 'Gallery',
gallerySettings: {
groups: [
{
header: this.localObj.getConstant('Styles'),
items: this.getStyleItems()
}
],
itemCount: 3,
select: function (args) {
if (!_this.documentEditor.isReadOnly && _this.documentEditor.editorModule) {
var styleName = _this.documentEditor.stylesDialogModule.getStyleName(SanitizeHtmlHelper.sanitize(args.currentItem.content));
if (!isNullOrUndefined(_this.documentEditor.documentHelper.styles.findByName(styleName))) {
_this.documentEditor.editorModule.applyStyle(styleName, true);
}
}
},
popupWidth: '150px',
popupHeight: '300px'
},
id: this.ribbonId + '_style-item-gallery',
ribbonTooltipSettings: { content: this.localObj.getConstant('Styles') }
}
]
}
]
};
};
StylesGroup.prototype.getStyleItems = function () {
return StylesHelper.getStyleItems(this.documentEditor, this.localObj);
};
// Update the updateStyleGallery method
StylesGroup.prototype.updateStyleGallery = function () {
if (!this.container || !this.container.ribbon || !this.container.ribbon.ribbon) {
return;
}
var galleryItem = this.container.ribbon.ribbon.getItem(this.ribbonId + '_style-item-gallery');
if (!galleryItem || !galleryItem.gallerySettings || !galleryItem.gallerySettings.groups) {
return;
}
var prevItemLength = galleryItem.gallerySettings.groups[0].items.length;
// Update gallery items using the helper
galleryItem.gallerySettings.groups[0].items = StylesHelper.getStyleItems(this.documentEditor, this.localObj);
// Set the selected item based on current selection
var currentStyle = StylesHelper.getCurrentStyleName(this.documentEditor, this.localObj);
var prevSelectedItemIndex = galleryItem.gallerySettings.selectedItemIndex;
galleryItem.gallerySettings.selectedItemIndex = StylesHelper.findStyleIndex(currentStyle, galleryItem.gallerySettings.groups[0].items);
if (prevSelectedItemIndex !== galleryItem.gallerySettings.selectedItemIndex
|| prevItemLength !== galleryItem.gallerySettings.groups[0].items.length) {
// Update the gallery
this.container.ribbon.ribbon.updateItem(galleryItem);
}
};
return StylesGroup;
}(RibbonGroupBase));
export { StylesGroup };