@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
248 lines (247 loc) • 11.1 kB
JavaScript
import { createElement } from '@syncfusion/ej2-base';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
import { RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { BulletListHelper } from '../../helper/bullet-list-helper';
// Numbering list constants
export var NUMBER_LIST_ID = '_number_list';
/**
* NumberingGroup class for handling numbering list operations in Document Editor ribbon
* @private
*/
var NumberingGroup = /** @class */ (function () {
/**
* Constructor for NumberingGroup
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function NumberingGroup(container) {
// Track the last applied numbering style
this.appliedNumberingStyle = 'arabic';
// Event handlers for numbering options
this.numberedAndBulletNoneClickHandler = this.bulletNoneClick.bind(this);
this.numberedNumberDotClickHandler = this.numberedNumberDotClick.bind(this);
this.numberedLowLetterClickHandler = this.numberedLowLetterClick.bind(this);
this.numberedUpLetterClickHandler = this.numberedUpLetterClick.bind(this);
this.numberedLowRomanClickHandler = this.numberedLowRomanClick.bind(this);
this.numberedUpRomanClickHandler = this.numberedUpRomanClick.bind(this);
this.container = container;
this.ribbonId = this.container.element.id + RIBBON_ID;
this.localObj = this.container.localObj;
}
Object.defineProperty(NumberingGroup.prototype, "documentEditor", {
get: function () {
return this.container.documentEditor;
},
enumerable: true,
configurable: true
});
/**
* Get the numbering list split button item configuration
* @returns {RibbonItemModel} - Numbering list split button item configuration
* @private
*/
NumberingGroup.prototype.getNumberingListItem = function () {
var id = this.ribbonId;
return {
type: 'SplitButton',
keyTip: 'N',
allowedSizes: RibbonItemSize.Small,
splitButtonSettings: this.createNumberingSplitButton(),
id: id + NUMBER_LIST_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Numbering') }
};
};
NumberingGroup.prototype.createNumberingSplitButton = function () {
var _this = this;
var numberIconCss = 'e-de-ctnr-numbering e-icons';
if (this.container.enableRtl) {
numberIconCss += ' e-de-flip';
}
// Create the HTML template for numbering dropdown
var numberListDropDiv = createElement('div', {
id: this.ribbonId + '_number_list_div',
styles: 'width: 211px;height: auto;visibility: hidden'
});
var numberListDropUlTag = createElement('ul', {
styles: 'visibility: visible; outline: 0px;',
id: this.ribbonId + '_numberListMenu',
className: 'e-de-floating-menu e-de-bullets-menu e-de-list-container e-de-list-thumbnail'
});
numberListDropDiv.appendChild(numberListDropUlTag);
// Create numbering list options using BulletListHelper
this.noneNumberTag = BulletListHelper.createNumberNoneListTag(numberListDropUlTag, this.localObj);
this.noneNumberTag.addEventListener('click', this.numberedAndBulletNoneClickHandler);
this.numberList = BulletListHelper.createNumberListTag(numberListDropUlTag, '1.', '2.', '3.');
this.numberList.addEventListener('click', this.numberedNumberDotClickHandler);
this.lowLetter = BulletListHelper.createNumberListTag(numberListDropUlTag, 'a.', 'b.', 'c.');
this.lowLetter.addEventListener('click', this.numberedLowLetterClickHandler);
this.upLetter = BulletListHelper.createNumberListTag(numberListDropUlTag, 'A.', 'B.', 'C.');
this.upLetter.addEventListener('click', this.numberedUpLetterClickHandler);
this.lowRoman = BulletListHelper.createNumberListTag(numberListDropUlTag, 'i.', 'ii.', 'iii.');
this.lowRoman.addEventListener('click', this.numberedLowRomanClickHandler);
this.upRoman = BulletListHelper.createNumberListTag(numberListDropUlTag, 'I.', 'II.', 'III.');
this.upRoman.addEventListener('click', this.numberedUpRomanClickHandler);
// Initialize element map for easier management
this.numberElements = {
'none': this.noneNumberTag,
'number': this.numberList,
'lowletter': this.lowLetter,
'upletter': this.upLetter,
'lowroman': this.lowRoman,
'uproman': this.upRoman
};
return {
target: numberListDropDiv,
iconCss: numberIconCss,
items: this.getNumberingItems(),
content: this.localObj.getConstant('Numbering'),
select: this.handleNumberingSelection.bind(this),
beforeOpen: function () {
numberListDropDiv.style.visibility = 'visible';
var levelPattern = BulletListHelper.getCurrentListPattern(_this.documentEditor);
_this.updateSelectedNumberedListType(levelPattern);
},
beforeClose: function () {
numberListDropDiv.style.visibility = 'hidden';
_this.removeSelectedList();
},
click: function () {
_this.applyLastAppliedNumbering();
},
close: function () {
_this.refreshHomeSelection();
}
};
};
NumberingGroup.prototype.getNumberingItems = function () {
return [
{ id: this.ribbonId + '_number-none', text: this.localObj.getConstant('None') },
{ id: this.ribbonId + '_number-arabic', text: this.localObj.getConstant('Arabic') },
{ id: this.ribbonId + '_number-lowletter', text: this.localObj.getConstant('Lower Letter') },
{ id: this.ribbonId + '_number-upletter', text: this.localObj.getConstant('Upper Letter') },
{ id: this.ribbonId + '_number-lowroman', text: this.localObj.getConstant('Lower Roman') },
{ id: this.ribbonId + '_number-uproman', text: this.localObj.getConstant('Upper Roman') }
];
};
NumberingGroup.prototype.removeSelectedList = function () {
BulletListHelper.removeSelectedList(this.numberElements);
};
NumberingGroup.prototype.updateSelectedNumberedListType = function (listPattern) {
BulletListHelper.updateSelectedNumberedListType(listPattern, this.numberElements);
};
/**
* Apply the last used numbering style
* @returns {void}
* @private
*/
NumberingGroup.prototype.applyLastAppliedNumbering = function () {
switch (this.appliedNumberingStyle) {
case 'arabic':
this.numberedNumberDotClick();
break;
case this.ribbonId + '_lowroman':
this.numberedLowRomanClick();
break;
case this.ribbonId + '_uproman':
this.numberedUpRomanClick();
break;
case this.ribbonId + '_lowletter':
this.numberedLowLetterClick();
break;
case this.ribbonId + '_upletter':
this.numberedUpLetterClick();
break;
default:
this.numberedNumberDotClick();
break;
}
};
NumberingGroup.prototype.handleNumberingSelection = function (args) {
switch (args.item.id) {
case this.ribbonId + '_number-none':
this.bulletNoneClick();
break;
case this.ribbonId + '_number-arabic':
this.numberedNumberDotClick();
break;
case this.ribbonId + '_number-lowroman':
this.numberedLowRomanClick();
break;
case this.ribbonId + '_number-uproman':
this.numberedUpRomanClick();
break;
case this.ribbonId + '_number-lowletter':
this.numberedLowLetterClick();
break;
case this.ribbonId + '_number-upletter':
this.numberedUpLetterClick();
break;
}
};
NumberingGroup.prototype.bulletNoneClick = function () {
BulletListHelper.clearList(this.documentEditor);
this.refreshHomeSelection();
};
NumberingGroup.prototype.numberedNumberDotClick = function () {
this.applyNumbering('Arabic', 'arabic');
};
NumberingGroup.prototype.numberedLowLetterClick = function () {
this.applyNumbering('LowLetter', 'lowletter');
};
NumberingGroup.prototype.numberedUpLetterClick = function () {
this.applyNumbering('UpLetter', 'upletter');
};
NumberingGroup.prototype.numberedLowRomanClick = function () {
this.applyNumbering('LowRoman', 'lowroman');
};
NumberingGroup.prototype.numberedUpRomanClick = function () {
this.applyNumbering('UpRoman', 'uproman');
};
NumberingGroup.prototype.applyNumbering = function (pattern, style) {
var _this = this;
if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
this.appliedNumberingStyle = style;
var format = BulletListHelper.getLevelFormatNumber(this.documentEditor);
this.documentEditor.editorModule.applyNumbering(format, pattern);
setTimeout(function () {
_this.documentEditor.focusIn();
_this.refreshHomeSelection();
}, 30);
}
};
NumberingGroup.prototype.refreshHomeSelection = function () {
var ribbonModule = this.container.ribbonModule;
if (ribbonModule && ribbonModule.tabManager && ribbonModule.tabManager.homeTab) {
ribbonModule.tabManager.homeTab.updateSelection();
}
};
NumberingGroup.prototype.destroy = function () {
// Remove event listeners for numbering tags
if (this.noneNumberTag) {
this.noneNumberTag.removeEventListener('click', this.numberedAndBulletNoneClickHandler);
}
if (this.numberList) {
this.numberList.removeEventListener('click', this.numberedNumberDotClickHandler);
}
if (this.lowLetter) {
this.lowLetter.removeEventListener('click', this.numberedLowLetterClickHandler);
}
if (this.upLetter) {
this.upLetter.removeEventListener('click', this.numberedUpLetterClickHandler);
}
if (this.lowRoman) {
this.lowRoman.removeEventListener('click', this.numberedLowRomanClickHandler);
}
if (this.upRoman) {
this.upRoman.removeEventListener('click', this.numberedUpRomanClickHandler);
}
// Clear references
this.noneNumberTag = null;
this.numberList = null;
this.lowLetter = null;
this.upLetter = null;
this.lowRoman = null;
this.upRoman = null;
};
return NumberingGroup;
}());
export { NumberingGroup };