@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
277 lines (276 loc) • 12.3 kB
JavaScript
import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
/**
* Helper class for bullet list operations in Document Editor
* @private
*/
var BulletListHelper = /** @class */ (function () {
function BulletListHelper() {
}
/**
* Creates a bullet list tag item for the dropdown
*
* @param {HTMLElement} ulTag - Parent UL element
* @param {string} iconCss - CSS class for the icon
* @param {boolean} isNone - Whether this is the "None" option
* @param {L10n} localObj - Localization object
* @returns {HTMLElement} The created list item element
*/
BulletListHelper.createBulletListTag = function (ulTag, iconCss, isNone, localObj) {
var liTag = createElement('li', {
styles: 'display:block;',
className: 'e-de-floating-menuitem e-de-floating-bullet-menuitem-md e-de-list-items e-de-list-item-size'
});
var liInnerDiv = createElement('div', {
className: 'e-de-bullet-list-header-presetmenu'
});
var spanDiv = createElement('div', {
styles: isNone ? 'font-size:8px;text-align: center;top: 8px;line-height:normal' : ''
});
var span = createElement('span', {
className: !isNone ? iconCss : ''
});
if (isNone) {
liInnerDiv.style.display = 'inline-table';
span.textContent = localObj.getConstant('None');
}
spanDiv.appendChild(span);
liInnerDiv.appendChild(spanDiv);
liTag.appendChild(liInnerDiv);
ulTag.appendChild(liTag);
return liTag;
};
/**
* Creates a number list tag item for the dropdown
* @param {HTMLElement} ulTag - Parent UL element
* @param {string} text1 - First number format text
* @param {string} text2 - Second number format text
* @param {string} text3 - Third number format text
* @returns {HTMLElement} The created list item element
*/
BulletListHelper.createNumberListTag = function (ulTag, text1, text2, text3) {
var liTag = createElement('li', {
styles: 'display:block',
className: 'e-de-floating-menuitem e-de-floating-menuitem-md e-de-list-items e-de-list-item-size'
});
ulTag.appendChild(liTag);
var innerHTML = '<div>' + text1 + '<span class="e-de-list-line"></span></div><div>' + text2 + '<span class="e-de-list-line">';
innerHTML += '</span></div><div>' + text3 + '<span class="e-de-list-line"> </span></div >';
var liInnerDiv = createElement('div', {
className: 'e-de-list-header-presetmenu',
innerHTML: innerHTML
});
liTag.appendChild(liInnerDiv);
return liTag;
};
/**
* Creates a number none list tag item for the dropdown
* @param {HTMLElement} ulTag - Parent UL element
* @param {L10n} localObj - Localization object
* @returns {HTMLElement} The created list item element
*/
BulletListHelper.createNumberNoneListTag = function (ulTag, localObj) {
var liTag = createElement('li', {
styles: 'display:block;',
className: 'e-de-floating-menuitem e-de-floating-menuitem-md e-de-list-items e-de-list-item-size'
});
ulTag.appendChild(liTag);
var innerHTML = '<div><span class="e-de-bullets">' + localObj.getConstant('None') + '</span></div>';
var liInnerDiv = createElement('div', {
className: 'e-de-list-header-presetmenu',
styles: 'position:relative;left:11px;top:13px',
innerHTML: innerHTML
});
liTag.appendChild(liInnerDiv);
return liTag;
};
/**
* Update the selected bullet list type in the dropdown
* @param {string} listText - The list text to match
* @param {ElementsMap} bulletElements - Map of bullet elements
* @returns {void}
*/
BulletListHelper.updateSelectedBulletListType = function (listText, bulletElements) {
var _a;
// Map character codes to bullet element keys
var bulletMap = (_a = {},
_a[String.fromCharCode(61623)] = 'dot',
_a[String.fromCharCode(61551) + String.fromCharCode(32)] = 'circle',
_a[String.fromCharCode(61607)] = 'square',
_a[String.fromCharCode(61558)] = 'flower',
_a[String.fromCharCode(61656)] = 'arrow',
_a[String.fromCharCode(61692)] = 'tick',
_a);
// Add selection to the matching bullet type or default to none
/* eslint-disable */
var elementKey = bulletMap[listText];
/* eslint-disable */
if (bulletElements[elementKey]) {
/* eslint-disable */
bulletElements[elementKey].classList.add('de-list-item-selected');
}
};
/**
* Update the selected numbered list type in the dropdown
* @param {string} listText - The list pattern to match
* @param {ElementsMap} numberElements - Map of number elements
* @returns {void}
*/
BulletListHelper.updateSelectedNumberedListType = function (listText, numberElements) {
var patternMap = {
'Arabic': 'number',
'UpRoman': 'uproman',
'UpLetter': 'upletter',
'LowLetter': 'lowletter',
'LowRoman': 'lowroman'
};
/* eslint-disable */
var elementKey = patternMap[listText];
/* eslint-disable */
if (numberElements[elementKey]) {
/* eslint-disable */
numberElements[elementKey].classList.add('de-list-item-selected');
}
};
/**
* Remove selected class from all list items
* @param {ElementsMap} elements - Map of elements to remove selection from
* @returns {void}
*/
BulletListHelper.removeSelectedList = function (elements) {
var className = 'de-list-item-selected';
for (var key in elements) {
/* eslint-disable */
if (Object.prototype.hasOwnProperty.call(elements, key)) {
/* eslint-disable */
var element = elements[key];
if (element) {
element.classList.remove(className);
}
}
}
};
/**
* Get the level format for numbering
* @param {DocumentEditor} documentEditor - Document editor instance
* @returns {string} The level format string
*/
BulletListHelper.getLevelFormatNumber = function (documentEditor) {
var numberFormat = '%';
var levelNumber = documentEditor.selectionModule.paragraphFormat.listLevelNumber;
numberFormat = numberFormat + (((levelNumber <= 0) ? 0 : levelNumber) + 1) + '.';
return numberFormat;
};
/**
* Apply bullet style to the document
* @param {DocumentEditor} documentEditor - Document editor instance
* @param {string} style - Bullet style name
* @param {Object} appliedBulletStyle - Reference to store the applied style
* @param {string} appliedBulletStyle.value - The value to store the applied style
* @returns {void}
*/
BulletListHelper.applyBulletStyle = function (documentEditor, style, appliedBulletStyle) {
if (style === 'none') {
BulletListHelper.clearList(documentEditor);
return;
}
// Find the bullet style configuration
var bulletStyle = null;
for (var key in BulletListHelper.BULLET_STYLES) {
if (Object.prototype.hasOwnProperty.call(BulletListHelper.BULLET_STYLES, key)) {
var s = BulletListHelper.BULLET_STYLES[key];
if (s.style === style) {
bulletStyle = s;
break;
}
}
}
if (bulletStyle && !documentEditor.isReadOnly && documentEditor.editorModule) {
appliedBulletStyle.value = style;
documentEditor.editorModule.applyBullet(bulletStyle.char, bulletStyle.font);
setTimeout(function () {
documentEditor.focusIn();
}, 30);
}
};
/**
* Clear the list formatting
* @param {DocumentEditor} documentEditor - Document editor instance
* @returns {void}
*/
BulletListHelper.clearList = function (documentEditor) {
if (!documentEditor.isReadOnly && documentEditor.editorModule) {
documentEditor.editorModule.clearList();
setTimeout(function () {
documentEditor.focusIn();
}, 30);
}
};
/**
* Apply numbering with specified format
* @param {DocumentEditor} documentEditor - Document editor instance
* @param {ListLevelPattern} pattern - Numbering pattern
* @param {Object} appliedNumberingStyle - Reference to store the applied style
* @param {string} appliedNumberingStyle.value - The value to store the applied style
* @returns {void}
*/
BulletListHelper.applyNumbering = function (documentEditor, pattern, appliedNumberingStyle) {
if (!documentEditor.isReadOnly && documentEditor.editorModule) {
appliedNumberingStyle.value = pattern.toLowerCase();
var format = BulletListHelper.getLevelFormatNumber(documentEditor);
documentEditor.editorModule.applyNumbering(format, pattern);
setTimeout(function () {
documentEditor.focusIn();
}, 30);
}
};
/**
* Get the current list pattern from selection
* @param {DocumentEditor} documentEditor - Document editor instance
* @returns {string} The current list pattern or 'None' if no list
*/
BulletListHelper.getCurrentListPattern = function (documentEditor) {
var levelPattern = 'None';
if (!isNullOrUndefined(documentEditor.selectionModule.paragraphFormat)) {
if (isNullOrUndefined(documentEditor.selectionModule.paragraphFormat.listId) ||
documentEditor.selectionModule.paragraphFormat.listId === -1) {
levelPattern = 'None';
}
else {
var list = documentEditor.documentHelper.getListById(documentEditor.selectionModule.paragraphFormat.listId);
var abstractList = documentEditor.documentHelper.getAbstractListById(list.abstractListId);
var startParagraph = documentEditor.selectionModule.isForward ?
documentEditor.selectionModule.start.paragraph : documentEditor.selectionModule.end.paragraph;
var level = abstractList.levels[startParagraph.paragraphFormat.listFormat.listLevelNumber];
levelPattern = level.listLevelPattern;
}
}
return levelPattern;
};
/**
* Get the current list text from selection
* @param {DocumentEditor} documentEditor - Document editor instance
* @returns {string} The current list text
*/
BulletListHelper.getCurrentListText = function (documentEditor) {
if (isNullOrUndefined(documentEditor.selectionModule.paragraphFormat.listId) ||
documentEditor.selectionModule.paragraphFormat.listId === -1) {
return documentEditor.selectionModule.paragraphFormat.listText;
}
else {
var startParagraph = documentEditor.selectionModule.isForward ?
documentEditor.selectionModule.start.paragraph : documentEditor.selectionModule.end.paragraph;
return startParagraph.paragraphFormat.listFormat.listLevel.numberFormat;
}
};
// Define bullet style constants
BulletListHelper.BULLET_STYLES = {
DOT: { style: 'dot', char: String.fromCharCode(61623), font: 'Symbol' },
CIRCLE: { style: 'circle', char: String.fromCharCode(61551) + String.fromCharCode(32), font: 'Symbol' },
SQUARE: { style: 'square', char: String.fromCharCode(61607), font: 'Wingdings' },
FLOWER: { style: 'flower', char: String.fromCharCode(61558), font: 'Wingdings' },
ARROW: { style: 'arrow', char: String.fromCharCode(61656), font: 'Wingdings' },
TICK: { style: 'tick', char: String.fromCharCode(61692), font: 'Wingdings' }
};
return BulletListHelper;
}());
export { BulletListHelper };