@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
216 lines (215 loc) • 10 kB
JavaScript
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
import { RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { BulletListHelper } from '../../helper/bullet-list-helper';
// Bullet list constants
export var BULLET_LIST_ID = '_bullet_list';
/**
* BulletsGroup class for handling bullet list operations in Document Editor ribbon
* @private
*/
var BulletsGroup = /** @class */ (function () {
/**
* Constructor for BulletsGroup
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function BulletsGroup(container) {
// Track the last applied bullet style
this.appliedBulletStyle = 'dot';
this.eventHandlers = {};
// HTML Elements for bullet options
this.bulletElements = {};
this.container = container;
this.ribbonId = this.container.element.id + RIBBON_ID;
this.localObj = this.container.localObj;
}
Object.defineProperty(BulletsGroup.prototype, "documentEditor", {
get: function () {
return this.container.documentEditor;
},
enumerable: true,
configurable: true
});
/**
* Get the bullet list split button item configuration
* @returns {RibbonItemModel} The ribbon item model for bullet list
* @private
*/
BulletsGroup.prototype.getBulletListItem = function () {
var id = this.ribbonId;
return {
type: 'SplitButton',
allowedSizes: RibbonItemSize.Small,
keyTip: 'U',
splitButtonSettings: this.createBulletSplitButton(),
id: id + BULLET_LIST_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Bullets') }
};
};
/**
* Create bullet dropdown in ribbon
* @returns {RibbonSplitButtonSettingsModel} SplitButtonModel configuration
* @private
*/
BulletsGroup.prototype.createBulletSplitButton = function () {
var _this = this;
var bulletIconCss = 'e-de-ctnr-bullets e-icons';
if (this.container.enableRtl) {
bulletIconCss += ' e-de-flip';
}
// Create the HTML template for bullets dropdown
var bulletDropDiv = createElement('div', {
id: this.ribbonId + '_bullet_list_div',
styles: 'width: 196px;height: auto;visibility: hidden'
});
var bulletDropUlTag = createElement('ul', {
styles: 'visibility: visible; outline: 0px;',
id: this.ribbonId + '_listMenu',
className: 'e-de-floating-menu e-de-bullets-menu e-de-list-container e-de-list-thumbnail'
});
bulletDropDiv.appendChild(bulletDropUlTag);
// Create bullet list options using a more efficient approach
this.createBulletElements(bulletDropUlTag);
return {
target: bulletDropDiv,
iconCss: bulletIconCss,
content: this.localObj.getConstant('Bullets'),
items: this.getBulletItems(),
select: this.handleBulletSelection.bind(this),
beforeOpen: function () {
bulletDropDiv.style.visibility = 'visible';
if (!isNullOrUndefined(_this.documentEditor.selectionModule)) {
if (isNullOrUndefined(_this.documentEditor.selectionModule.paragraphFormat.listId) ||
_this.documentEditor.selectionModule.paragraphFormat.listId === -1) {
// No current list format
_this.updateSelectedBulletListType(_this.documentEditor.selectionModule.paragraphFormat.listText);
}
else {
// Get current bullet list format
var startParagraph = _this.documentEditor.selectionModule.isForward ?
_this.documentEditor.selectionModule.start.paragraph : _this.documentEditor.selectionModule.end.paragraph;
_this.updateSelectedBulletListType(startParagraph.paragraphFormat.listFormat.listLevel.numberFormat);
}
}
},
beforeClose: function () {
bulletDropDiv.style.visibility = 'hidden';
_this.removeSelectedList();
},
click: function () {
_this.applyLastAppliedBullet();
}
};
};
BulletsGroup.prototype.createBulletElements = function (ulTag) {
var _this = this;
// Define bullet types with their properties
var bulletTypes = [
{ key: 'none', cssClass: 'e-de-ctnr-bullet-none e-icons e-de-ctnr-list', isNone: true, handler: this.bulletNoneClick.bind(this) },
{ key: 'dot', cssClass: 'e-de-ctnr-bullet-dot e-icons e-de-ctnr-list', isNone: false, handler: this.bulletDotClick.bind(this) },
{ key: 'circle', cssClass: 'e-de-ctnr-bullet-circle e-icons e-de-ctnr-list', isNone: false, handler: this.bulletCircleClick.bind(this) },
{ key: 'square', cssClass: 'e-de-ctnr-bullet-square e-icons e-de-ctnr-list', isNone: false, handler: this.bulletSquareClick.bind(this) },
{ key: 'flower', cssClass: 'e-de-ctnr-bullet-flower e-icons e-de-ctnr-list', isNone: false, handler: this.bulletFlowerClick.bind(this) },
{ key: 'arrow', cssClass: 'e-de-ctnr-bullet-arrow e-icons e-de-ctnr-list', isNone: false, handler: this.bulletArrowClick.bind(this) },
{ key: 'tick', cssClass: 'e-de-ctnr-bullet-tick e-icons e-de-ctnr-list', isNone: false, handler: this.bulletTickClick.bind(this) }
];
// Create all elements and store them
bulletTypes.forEach(function (type) {
var element = _this.createBulletListTag(ulTag, type.cssClass, type.isNone);
element.addEventListener('click', type.handler);
_this.bulletElements[type.key] = element;
_this.eventHandlers[type.key] = { element: element, handler: type.handler };
});
};
BulletsGroup.prototype.getBulletItems = function () {
return [
{ id: this.ribbonId + '_bullet-none', text: this.localObj.getConstant('None') },
{ id: this.ribbonId + '_bullet-dot', text: this.localObj.getConstant('Dot') },
{ id: this.ribbonId + '_bullet-circle', text: this.localObj.getConstant('Circle') },
{ id: this.ribbonId + '_bullet-square', text: this.localObj.getConstant('Square') },
{ id: this.ribbonId + '_bullet-flower', text: this.localObj.getConstant('Flower') },
{ id: this.ribbonId + '_bullet-arrow', text: this.localObj.getConstant('Arrow') },
{ id: this.ribbonId + '_bullet-tick', text: this.localObj.getConstant('Tick') }
];
};
BulletsGroup.prototype.createBulletListTag = function (ulTag, iconCss, isNone) {
return BulletListHelper.createBulletListTag(ulTag, iconCss, isNone, this.localObj);
};
BulletsGroup.prototype.updateSelectedBulletListType = function (listText) {
BulletListHelper.updateSelectedBulletListType(listText, this.bulletElements);
};
BulletsGroup.prototype.removeSelectedList = function () {
BulletListHelper.removeSelectedList(this.bulletElements);
};
/**
* Apply the last used bullet style
* @returns {void}
* @private
*/
BulletsGroup.prototype.applyLastAppliedBullet = function () {
this.applyBulletStyle(this.appliedBulletStyle);
};
/**
* Handle bullet style selection from dropdown
* @param {any} args - The event arguments
* @returns {void}
* @private
*/
BulletsGroup.prototype.handleBulletSelection = function (args) {
var styleMap = {};
styleMap[this.localObj.getConstant('None')] = 'none';
styleMap[this.localObj.getConstant('Dot')] = 'dot';
styleMap[this.localObj.getConstant('Circle')] = 'circle';
styleMap[this.localObj.getConstant('Square')] = 'square';
styleMap[this.localObj.getConstant('Flower')] = 'flower';
styleMap[this.localObj.getConstant('Arrow')] = 'arrow';
styleMap[this.localObj.getConstant('Tick')] = 'tick';
var style = styleMap[args.item.text];
if (style) {
this.applyBulletStyle(style);
}
};
BulletsGroup.prototype.applyBulletStyle = function (style) {
var appliedStyle = { value: this.appliedBulletStyle };
BulletListHelper.applyBulletStyle(this.documentEditor, style, appliedStyle);
this.appliedBulletStyle = appliedStyle.value;
};
BulletsGroup.prototype.bulletNoneClick = function () {
BulletListHelper.clearList(this.documentEditor);
};
BulletsGroup.prototype.bulletDotClick = function () {
this.applyBulletStyle('dot');
};
BulletsGroup.prototype.bulletCircleClick = function () {
this.applyBulletStyle('circle');
};
BulletsGroup.prototype.bulletSquareClick = function () {
this.applyBulletStyle('square');
};
BulletsGroup.prototype.bulletFlowerClick = function () {
this.applyBulletStyle('flower');
};
BulletsGroup.prototype.bulletArrowClick = function () {
this.applyBulletStyle('arrow');
};
BulletsGroup.prototype.bulletTickClick = function () {
this.applyBulletStyle('tick');
};
BulletsGroup.prototype.destroy = function () {
// Remove event listeners
var keys = Object.keys(this.eventHandlers);
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var key = keys_1[_i];
/* eslint-disable */
var item = this.eventHandlers[key];
if (item.element && item.handler) {
item.element.removeEventListener('click', item.handler);
}
}
// Clear references
this.eventHandlers = {};
this.bulletElements = {};
};
return BulletsGroup;
}());
export { BulletsGroup };