@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
1,136 lines • 55.7 kB
JavaScript
import { L10n, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
import { CheckBox, Button } from '@syncfusion/ej2-buttons';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { ListView } from '@syncfusion/ej2-lists';
import { DialogUtility, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
/**
* The Table of contents dialog is used to insert or edit table of contents at selection.
*/
var TableOfContentsDialog = /** @class */ (function () {
/**
* @param {DocumentHelper} documentHelper - Specifies the document helper.
* @private
*/
function TableOfContentsDialog(documentHelper) {
var _this = this;
this.changeStyleClickHandler = this.onChangeStyleClick.bind(this);
this.changingStyleClickHandler = this.onChangingStyleClick.bind(this);
this.resetClickHandler = this.onResetClick.bind(this);
this.selectHandlerClickHandler = this.onSelectHandlerClick.bind(this);
this.showDialogHandler = this.onShowDialog.bind(this);
/**
* @private
* @returns {void}
*/
this.loadTableofContentDialog = function () {
_this.documentHelper.updateFocus();
_this.pageNumber.checked = true;
_this.rightAlign.disabled = false;
_this.rightAlign.checked = true;
_this.tabLeader.enabled = true;
_this.hyperlink.checked = true;
_this.style.checked = true;
_this.outline.checked = true;
_this.outline.disabled = false;
_this.showLevel.enabled = true;
};
/**
* @private
* @returns {void}
*/
this.closeTableOfContentDialog = function () {
_this.unWireEventsAndBindings();
_this.documentHelper.updateFocus();
};
/**
* @private
* @returns {void}
*/
this.onCancelButtonClick = function () {
_this.documentHelper.dialog3.hide();
_this.unWireEventsAndBindings();
_this.documentHelper.updateFocus();
};
/**
* @param {SelectEventArgs} args - Specifies the event args.
* @returns {void}
*/
this.selectHandler = function (args) {
_this.textBoxInput.value = args.text;
var value = _this.textBoxInput;
value.setSelectionRange(0, args.text.length);
value.focus();
};
/**
* @private
* @returns {void}
*/
this.showStyleDialog = function () {
if (!isNullOrUndefined(_this.documentHelper.owner.styleDialogModule)) {
_this.documentHelper.owner.styleDialogModule.show(_this.textBoxInput.value);
}
};
/**
* @returns {void}
*/
this.reset = function () {
_this.showLevel.enabled = true;
_this.showLevel.value = 3;
_this.outline.disabled = false;
_this.outline.checked = true;
var values = ['1', '2', '3', null, null, null, null, null, null];
_this.changeByValue(values);
_this.normal.value = null;
};
/**
* @param {KeyboardEvent} args - Specifies the event args.
* @returns {void}
*/
this.changeStyle = function (args) {
var headingLevel = 0;
if (!isNullOrUndefined(args.srcElement.value)) {
var headingValue = args.srcElement.value;
headingLevel = parseInt(headingValue);
if (!headingValue.match(/^[0-9]+$/) && headingValue !== '') {
_this.initAlertDialog(false);
return;
}
else if (headingLevel < 1 || headingLevel > 9) {
_this.initAlertDialog(true);
return;
}
else {
var value = _this.getElementValue(args.srcElement);
if (headingValue !== value && headingValue !== '') {
_this.showLevel.enabled = false;
}
else {
_this.showLevel.enabled = true;
_this.checkLevel();
}
}
}
};
/**
* @param {KeyboardEvent} args - Specifies the event args.
* @returns {void}
*/
this.changeHeadingStyle = function (args) {
var headingLevel = 0;
if (!isNullOrUndefined(args.srcElement.value)) {
var headingValue = args.srcElement.value;
headingLevel = parseInt(headingValue);
if (!headingValue.match(/^[0-9]+$/) && headingValue !== '') {
_this.initAlertDialog(false);
return;
}
else if (headingLevel < 1 || headingLevel > 9) {
_this.initAlertDialog(true);
return;
}
else {
if (headingValue === '') {
_this.showLevel.enabled = true;
}
else {
_this.showLevel.enabled = false;
}
if (_this.normal === args.srcElement) {
_this.outline.checked = false;
_this.outline.disabled = true;
}
}
}
};
/**
* @param {ChangeEventArgs} args - Specifies the event args.
* @returns {void}
*/
this.changePageNumberValue = function (args) {
if (args.checked) {
_this.rightAlign.checked = true;
_this.rightAlign.disabled = false;
_this.tabLeader.enabled = true;
}
else {
_this.rightAlign.disabled = true;
_this.tabLeader.enabled = false;
}
};
/**
* @param {ChangeEventArgs} args - Specifies the event args.
* @returns {void}
*/
this.changeRightAlignValue = function (args) {
if (args.checked) {
_this.tabLeader.enabled = true;
}
else {
_this.tabLeader.enabled = false;
}
};
/**
* @param {ChangeEventArgs} args - Specifies the event args.
* @returns {void}
*/
this.changeStyleValue = function (args) {
if (args.checked) {
_this.heading1.disabled = false;
_this.heading2.disabled = false;
_this.heading3.disabled = false;
_this.heading4.disabled = false;
_this.heading5.disabled = false;
_this.heading6.disabled = false;
_this.heading7.disabled = false;
_this.heading8.disabled = false;
_this.heading9.disabled = false;
_this.normal.disabled = false;
}
else {
_this.heading1.disabled = true;
_this.heading2.disabled = true;
_this.heading3.disabled = true;
_this.heading4.disabled = true;
_this.heading5.disabled = true;
_this.heading6.disabled = true;
_this.heading7.disabled = true;
_this.heading8.disabled = true;
_this.heading9.disabled = true;
_this.normal.disabled = true;
}
};
/**
* @private
* @returns {void}
*/
this.applyTableOfContentProperties = function () {
var tocSettings = {
startLevel: 1,
endLevel: _this.showLevel.value,
includeHyperlink: _this.hyperlink.checked,
includePageNumber: _this.pageNumber.checked,
rightAlign: _this.rightAlign.checked,
tabLeader: _this.tabLeader.value,
includeOutlineLevels: _this.outline.checked
};
if (_this.applyLevelSetting(tocSettings)) {
showSpinner(_this.documentHelper.owner.element);
setTimeout(function () {
_this.documentHelper.owner.editorModule.insertTableOfContents(tocSettings);
_this.documentHelper.dialog3.hide();
_this.documentHelper.updateFocus();
hideSpinner(_this.documentHelper.owner.element);
});
}
};
/**
* @private
* @returns {void}
*/
this.unWireEventsAndBindings = function () {
_this.pageNumber.checked = false;
_this.rightAlign.checked = false;
if (_this.tabLeader) {
_this.tabLeader.value = '';
}
_this.hyperlink.checked = false;
_this.style.checked = false;
_this.outline.checked = false;
if (_this.normal) {
_this.normal.value = '';
}
};
this.documentHelper = documentHelper;
}
TableOfContentsDialog.prototype.getModuleName = function () {
return 'TableOfContentsDialog';
};
/* eslint-disable */
/**
* @private
* @param {L10n} localValue - Specifies the locale value
* @param {boolean} isRtl - Specifies the is rtl
* @returns {void}
*/
TableOfContentsDialog.prototype.initTableOfContentDialog = function (locale, isRtl) {
var instance = this;
var ownerId = this.documentHelper.owner.containerId;
var id = ownerId + '_toc_dialog';
this.target = createElement('div', { id: id, className: 'e-de-toc-dlg-container' });
this.generalDiv = createElement('div', { id: 'general_div', className: 'e-de-toc-dlg-sub-container' });
this.target.appendChild(this.generalDiv);
this.genLabel = createElement('div', { id: ownerId + '_genLabel', className: 'e-de-toc-dlg-main-heading', styles: 'margin-bottom: 13px;', innerHTML: locale.getConstant('General') });
this.generalDiv.appendChild(this.genLabel);
var leftGeneralDivStyles;
var rightBottomGeneralDivStyles;
if (isRtl) {
leftGeneralDivStyles = 'float:right;';
rightBottomGeneralDivStyles = 'float:left;position:relative;';
}
else {
leftGeneralDivStyles = 'float:left;';
rightBottomGeneralDivStyles = 'float:right;';
}
this.topContainer = createElement('div', { className: 'e-de-container-row' });
this.leftGeneralDiv = createElement('div', { className: 'e-de-subcontainer-left' });
this.topContainer.appendChild(this.leftGeneralDiv);
this.rightGeneralDiv = createElement('div', { className: 'e-de-subcontainer-right' });
this.topContainer.appendChild(this.rightGeneralDiv);
this.generalDiv.appendChild(this.topContainer);
this.bottomContainer = createElement('div', { className: 'e-de-dlg-row' });
this.leftBottomGeneralDiv = createElement('div', { className: 'e-de-subcontainer-left' });
this.bottomContainer.appendChild(this.leftBottomGeneralDiv);
this.rightBottomGeneralDiv = createElement('div', { className: 'e-de-subcontainer-right' });
this.bottomContainer.appendChild(this.rightBottomGeneralDiv);
this.pageNumberDiv = createElement('div', { className: 'e-de-toc-dlg-sub-container' });
this.pageNumber1 = createElement('input', {
attrs: { 'type': 'checkbox' }, id: this.target.id + '_pageNumber'
});
this.pageNumberDiv.appendChild(this.pageNumber1);
this.rightAlignDiv = createElement('div', { className: 'e-de-toc-dlg-sub-container' });
this.rightAlign1 = createElement('input', {
attrs: { 'type': 'checkbox' }, id: this.target.id + '_rightAlign'
});
this.rightAlignDiv.appendChild(this.rightAlign1);
this.pageNumber = new CheckBox({ label: locale.getConstant('Show page numbers'), enableRtl: isRtl, checked: true, change: this.changePageNumberValue });
this.rightAlign = new CheckBox({ label: locale.getConstant('Right align page numbers'), enableRtl: isRtl, checked: true, change: this.changeRightAlignValue });
this.pageNumber.appendTo(this.pageNumber1);
this.rightAlign.appendTo(this.rightAlign1);
this.tabDivContainer = createElement('div', { className: 'e-de-container-row' });
this.tabDiv = createElement('div', { className: 'e-de-subcontainer-left' });
this.tabLeaderLabelDiv = createElement('div');
this.tabLeaderLabel = createElement('label', { className: 'e-de-toc-dlg-heading', innerHTML: locale.getConstant('Tab leader') + ':' });
this.tabLeaderLabelDiv.appendChild(this.tabLeaderLabel);
this.tabLeaderDiv = createElement('div', { id: 'tabLeader_div' });
this.tabLeader1 = createElement('select', {
id: ownerId + '_tabLeader',
innerHTML: '<option value="None">' + '(' + locale.getConstant('None').toLocaleLowerCase() + ')' +
'</option><option value="Dot" selected>' + '....................' +
'</option><option value="Hyphen">' + '-------------------' +
'</option><option value="Underscore">' + '____________' + '</option>'
});
this.tabLeaderDiv.appendChild(this.tabLeader1);
this.tabDiv.appendChild(this.tabLeaderLabelDiv);
this.tabDiv.appendChild(this.tabLeaderDiv);
this.leftGeneralDiv.appendChild(this.pageNumberDiv);
this.leftGeneralDiv.appendChild(this.rightAlignDiv);
this.tabDivContainer.appendChild(this.tabDiv);
this.tabLeader = new DropDownList({ enableRtl: isRtl });
this.tabLeader.appendTo(this.tabLeader1);
this.hyperlink1 = createElement('input', {
attrs: { 'type': 'checkbox' }, id: this.target.id + '_hyperlink'
});
this.rightGeneralDiv.appendChild(this.hyperlink1);
this.hyperlink = new CheckBox({ label: locale.getConstant('Use hyperlinks instead of page numbers'), cssClass: 'e-de-toc-label', enableRtl: isRtl, checked: true });
this.hyperlink.appendTo(this.hyperlink1);
this.showDiv = createElement('div', { className: 'e-de-subcontainer-right' });
this.showLevelLabelDiv = createElement('div', { className: 'e-de-toc-dlg-show-level-div' });
this.showLevelLabel = createElement('label', { className: 'e-de-toc-dlg-heading', innerHTML: locale.getConstant('Show levels') + ':' });
this.showLevelLabelDiv.appendChild(this.showLevelLabel);
this.showLevelDiv = createElement('div', { className: 'e-de-toc-dlg-showlevel-div' });
this.showLevel1 = createElement('input', { id: ownerId + '_showLevel', attrs: { 'type': 'text', 'aria-label': 'showLevel' } });
this.showLevelDiv.appendChild(this.showLevel1);
this.showDiv.appendChild(this.showLevelLabelDiv);
this.showDiv.appendChild(this.showLevelDiv);
this.tabDivContainer.appendChild(this.showDiv);
this.generalDiv.appendChild(this.tabDivContainer);
this.showLevel = new NumericTextBox({ format: '#', value: 3, min: 1, max: 9, change: this.changeShowLevelValue.bind(this) });
this.showLevel.appendTo(this.showLevel1);
if (isRtl) {
this.hyperlink.cssClass = 'e-de-toc-label-rtl';
this.showLevelLabelDiv.classList.add('e-de-rtl');
this.showLevelDiv.classList.add('e-de-rtl');
this.rightBottomGeneralDiv.classList.add('e-de-rtl');
}
//let buildTableDiv: HTMLDivElement = createElement('div', { className: 'e-de-toc-dlg-sub-container' }) as HTMLDivElement;
this.buildTableLabel = createElement('div', { className: 'e-de-toc-dlg-main-heading e-de-toc-dlg-build-table', innerHTML: locale.getConstant('Build table of contents from') + ':' });
//leftBottomGeneralDiv.appendChild(buildTableDiv);
// generalDiv.appendChild(buildTableLabel);
this.generalDiv.appendChild(this.bottomContainer);
var style = createElement('input', {
attrs: { 'type': 'checkbox' }, id: this.target.id + '_style',
});
this.leftBottomGeneralDiv.appendChild(this.buildTableLabel);
this.leftBottomGeneralDiv.appendChild(style);
this.style = new CheckBox({ label: locale.getConstant('Styles'), enableRtl: isRtl, checked: true, change: this.changeStyleValue });
this.style.appendTo(style);
this.table = createElement('TABLE', { styles: 'margin-top:3px;' });
this.tr1 = createElement('tr');
this.td1 = createElement('td', { styles: 'width:120px;padding-left:10px;' });
this.availableLabel = createElement('label', {
innerHTML: locale.getConstant('Available styles'), className: 'e-de-toc-dlg-main-heading e-de-toc-dlg-sub-level-heading', id: this.target.id + '_availableLabel'
});
this.td1.appendChild(this.availableLabel);
this.td2 = createElement('td');
this.tocLabel = createElement('label', {
innerHTML: locale.getConstant('TOC level') + ':', className: 'e-de-toc-dlg-main-heading e-de-toc-dlg-sub-level-heading',
id: this.target.id + '_tocLabel'
});
this.td2.appendChild(this.tocLabel);
this.tr1.appendChild(this.td1);
this.tr1.appendChild(this.td2);
this.table.appendChild(this.tr1);
this.tableDiv = createElement('div', { id: 'table_div', className: 'e-de-toc-table-div' });
this.table1 = createElement('TABLE');
this.tr2 = createElement('tr');
this.td3 = createElement('td');
this.heading1Label = createElement('label', {
innerHTML: locale.getConstant('Heading') + ' 1',
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading1Label'
});
this.td3.appendChild(this.heading1Label);
this.td4 = createElement('td');
this.heading1 = createElement('input', { id: '_heading1', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Heading') + ' 1' } });
this.heading1.value = '1';
this.heading1.addEventListener('keyup', this.changeStyleClickHandler);
this.td4.appendChild(this.heading1);
this.tr2.appendChild(this.td3);
this.tr2.appendChild(this.td4);
this.tr3 = createElement('tr');
this.td5 = createElement('td');
this.heading2Label = createElement('label', {
innerHTML: locale.getConstant('Heading') + ' 2',
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading2Label'
});
this.td5.appendChild(this.heading2Label);
this.td6 = createElement('td');
this.heading2 = createElement('input', { id: '_heading2', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Heading') + ' 2' } });
this.heading2.value = '2';
this.heading2.addEventListener('keyup', this.changeStyleClickHandler);
this.td6.appendChild(this.heading2);
this.tr3.appendChild(this.td5);
this.tr3.appendChild(this.td6);
this.tr4 = createElement('tr');
this.td7 = createElement('td');
this.heading3Label = createElement('label', {
innerHTML: locale.getConstant('Heading') + ' 3',
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading3Label'
});
this.td7.appendChild(this.heading3Label);
this.td8 = createElement('td');
this.heading3 = createElement('input', { id: '_heading3', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Heading') + ' 3' } });
this.heading3.value = '3';
this.heading3.addEventListener('keyup', this.changeStyleClickHandler);
this.td8.appendChild(this.heading3);
this.tr4.appendChild(this.td7);
this.tr4.appendChild(this.td8);
this.tr5 = createElement('tr');
this.td9 = createElement('td');
this.heading4Label = createElement('label', {
innerHTML: locale.getConstant('Heading') + ' 4',
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading4Label'
});
this.td9.appendChild(this.heading4Label);
this.td10 = createElement('td');
this.heading4 = createElement('input', { id: '_heading4', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Heading') + ' 4' } });
this.heading4.addEventListener('keyup', this.changeStyleClickHandler);
this.td10.appendChild(this.heading4);
this.tr5.appendChild(this.td9);
this.tr5.appendChild(this.td10);
this.tr6 = createElement('tr');
this.td11 = createElement('td');
this.heading5Label = createElement('label', {
innerHTML: locale.getConstant('Heading') + ' 5',
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading5Label'
});
this.td11.appendChild(this.heading5Label);
this.td12 = createElement('td');
this.heading5 = createElement('input', { id: '_heading5', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Heading') + ' 5' } });
this.heading5.addEventListener('keyup', this.changeStyleClickHandler);
this.td12.appendChild(this.heading5);
this.tr6.appendChild(this.td11);
this.tr6.appendChild(this.td12);
this.tr7 = createElement('tr');
this.td13 = createElement('td');
this.heading6Label = createElement('label', {
innerHTML: locale.getConstant('Heading') + ' 6',
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading6Label'
});
this.td13.appendChild(this.heading6Label);
this.td14 = createElement('td');
this.heading6 = createElement('input', { id: '_heading6', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Heading') + ' 6' } });
this.heading6.addEventListener('keyup', this.changeStyleClickHandler);
this.td14.appendChild(this.heading6);
this.tr7.appendChild(this.td13);
this.tr7.appendChild(this.td14);
this.tr8 = createElement('tr');
this.td15 = createElement('td');
this.heading7Label = createElement('label', {
innerHTML: locale.getConstant('Heading') + ' 7',
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading7Label'
});
this.td15.appendChild(this.heading7Label);
this.td16 = createElement('td');
this.heading7 = createElement('input', { id: '_heading7', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Heading') + ' 7' } });
this.heading7.addEventListener('keyup', this.changeStyleClickHandler);
this.td16.appendChild(this.heading7);
this.tr8.appendChild(this.td15);
this.tr8.appendChild(this.td16);
this.tr9 = createElement('tr');
this.td17 = createElement('td');
this.heading8Label = createElement('label', {
innerHTML: locale.getConstant('Heading') + ' 8',
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading8Label'
});
this.td17.appendChild(this.heading8Label);
this.td18 = createElement('td');
this.heading8 = createElement('input', { id: '_heading8', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Heading') + ' 8' } });
this.heading8.addEventListener('keyup', this.changeStyleClickHandler);
this.td18.appendChild(this.heading8);
this.tr9.appendChild(this.td17);
this.tr9.appendChild(this.td18);
this.tr10 = createElement('tr');
this.td19 = createElement('td');
this.heading9Label = createElement('label', {
innerHTML: locale.getConstant('Heading') + ' 9',
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_heading9Label'
});
this.td19.appendChild(this.heading9Label);
this.td20 = createElement('td');
this.heading9 = createElement('input', { id: '_heading9', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Heading') + ' 9' } });
this.heading9.addEventListener('keyup', this.changeStyleClickHandler);
this.td20.appendChild(this.heading9);
this.tr10.appendChild(this.td19);
this.tr10.appendChild(this.td20);
this.tr12 = createElement('tr');
this.td23 = createElement('td');
this.normalLabel = createElement('label', {
innerHTML: locale.getConstant('Normal'),
className: 'e-de-toc-dlg-sub-heading', id: this.target.id + '_normalLabel'
});
this.td23.appendChild(this.normalLabel);
this.td24 = createElement('td');
this.normal = createElement('input', { id: '_normal', className: 'e-input e-de-toc-dlg-toc-level', attrs: { 'aria-label': locale.getConstant('Normal') } });
this.normal.addEventListener('keyup', this.changingStyleClickHandler);
this.td24.appendChild(this.normal);
this.tr12.appendChild(this.td23);
this.tr12.appendChild(this.td24);
if (isRtl) {
this.normal.classList.add('e-de-rtl');
this.heading1.classList.add('e-de-rtl');
this.heading2.classList.add('e-de-rtl');
this.heading3.classList.add('e-de-rtl');
this.heading4.classList.add('e-de-rtl');
this.heading5.classList.add('e-de-rtl');
this.heading6.classList.add('e-de-rtl');
this.heading7.classList.add('e-de-rtl');
this.heading8.classList.add('e-de-rtl');
this.heading9.classList.add('e-de-rtl');
}
this.table1.appendChild(this.tr2);
this.table1.appendChild(this.tr3);
this.table1.appendChild(this.tr4);
this.table1.appendChild(this.tr5);
this.table1.appendChild(this.tr6);
this.table1.appendChild(this.tr7);
this.table1.appendChild(this.tr8);
this.table1.appendChild(this.tr9);
this.table1.appendChild(this.tr10);
this.table1.appendChild(this.tr12);
this.tableDiv.appendChild(this.table1);
this.stylesLevelDiv = createElement('div', { className: 'e-de-toc-styles-table-div' });
this.stylesLevelDiv.appendChild(this.table);
this.stylesLevelDiv.appendChild(this.tableDiv);
this.leftBottomGeneralDiv.appendChild(this.stylesLevelDiv);
//leftBottomGeneralDiv.appendChild(table); leftBottomGeneralDiv.appendChild(tableDiv);
this.fieldsDiv = createElement('div', { id: 'fields_div', styles: 'display: flex;' });
this.leftBottomGeneralDiv.appendChild(this.fieldsDiv);
this.outDiv = createElement('div', { id: 'out_div' });
this.outlineDiv = createElement('div', { id: 'outline_div', className: 'e-de-toc-dlg-sub-container e-de-toc-dlg-outline-levels' });
this.outline1 = createElement('input', {
attrs: { 'type': 'checkbox' }, id: '_outline'
});
this.outlineDiv.appendChild(this.outline1);
this.outDiv.appendChild(this.outlineDiv);
this.fieldsDiv.appendChild(this.outDiv);
this.outline = new CheckBox({
label: locale.getConstant('Outline levels'),
enableRtl: isRtl, checked: true, cssClass: 'e-de-outline-rtl'
});
this.outline.appendTo(this.outline1);
this.resetButtonDiv = createElement('div', { className: 'e-de-toc-reset-button' });
this.fieldsDiv.appendChild(this.resetButtonDiv);
this.resetElement = createElement('button', {
innerHTML: locale.getConstant('Reset'), id: 'reset',
attrs: { type: 'button' }
});
this.resetButtonDiv.appendChild(this.resetElement);
this.resetButton = new Button({ cssClass: 'e-btn e-flat' });
this.resetButton.appendTo(this.resetElement);
this.resetElement.addEventListener('click', this.resetClickHandler);
// let tocStylesDiv: HTMLDivElement = createElement('div', { id: 'tocStyles_div', className: 'e-de-toc-dlg-sub-container' }) as HTMLDivElement;
this.tocStylesLabel = createElement('div', {
id: ownerId + '_tocStylesLabel', className: 'e-de-toc-dlg-main-heading',
innerHTML: locale.getConstant('Styles') + ':'
});
//rightBottomGeneralDiv.appendChild(tocStylesDiv);
this.rightBottomGeneralDiv.appendChild(this.tocStylesLabel);
this.textBoxDiv = createElement('div');
this.rightBottomGeneralDiv.appendChild(this.textBoxDiv);
this.textBoxInput = createElement('input', { className: 'e-input', attrs: { 'aria-label': 'Type of TOC' } });
this.textBoxInput.setAttribute('type', 'text');
this.textBoxDiv.appendChild(this.textBoxInput);
this.listViewDiv = createElement('div', { className: 'e-de-toc-list-view' });
var styleLocale = ['TOC 1', 'TOC 2', 'TOC 3', 'TOC 4', 'TOC 5', 'TOC 6', 'TOC 7', 'TOC 8', 'TOC 9'];
var styleValues = this.styleLocaleValue(styleLocale, locale);
this.listViewInstance = new ListView({ dataSource: styleValues, cssClass: 'e-toc-list-view' });
this.listViewInstance.appendTo(this.listViewDiv);
this.listViewInstance.addEventListener('select', this.selectHandlerClickHandler);
this.rightBottomGeneralDiv.appendChild(this.listViewDiv);
this.modifyButtonDiv = createElement('div', { className: 'e-de-toc-modify-button' });
this.rightBottomGeneralDiv.appendChild(this.modifyButtonDiv);
this.modifyElement = createElement('button', {
innerHTML: locale.getConstant('Modify') + '...', id: 'modify',
attrs: { type: 'button' }
});
this.modifyButtonDiv.appendChild(this.modifyElement);
this.modifyButton = new Button({ cssClass: 'e-btn e-flat' });
this.modifyButton.appendTo(this.modifyElement);
this.modifyElement.addEventListener('click', this.showDialogHandler);
if (isRtl) {
this.resetButtonDiv.classList.add('e-de-rtl');
this.tocStylesLabel.classList.add('e-de-rtl');
this.textBoxDiv.classList.add('e-de-rtl');
this.listViewDiv.classList.add('e-de-rtl');
this.modifyButtonDiv.classList.add('e-de-rtl');
}
};
TableOfContentsDialog.prototype.styleLocaleValue = function (styleLocale, localValue) {
var styleName = [];
for (var index = 0; index < styleLocale.length; index++) {
styleName.push(localValue.getConstant(styleLocale[index]));
}
return styleName;
};
/**
* @private
*/
TableOfContentsDialog.prototype.show = function () {
var localValue = new L10n('documenteditor', this.documentHelper.owner.defaultLocale);
localValue.setLocale(this.documentHelper.owner.locale);
if (!this.target) {
this.initTableOfContentDialog(localValue, this.documentHelper.owner.enableRtl);
}
this.documentHelper.dialog3.header = localValue.getConstant('Table of Contents');
this.documentHelper.dialog3.position = { X: 'center', Y: 'center' };
this.documentHelper.dialog3.width = 'auto';
this.documentHelper.dialog3.height = 'auto';
this.documentHelper.dialog3.content = this.target;
this.documentHelper.dialog3.beforeOpen = this.loadTableofContentDialog;
this.documentHelper.dialog3.close = this.closeTableOfContentDialog;
this.documentHelper.dialog3.buttons = [{
click: this.applyTableOfContentProperties,
buttonModel: { content: localValue.getConstant('Ok'), cssClass: 'e-flat e-toc-okay', isPrimary: true }
},
{
click: this.onCancelButtonClick,
buttonModel: { content: localValue.getConstant('Cancel'), cssClass: 'e-flat e-toc-cancel' }
}];
this.documentHelper.dialog3.dataBind();
this.documentHelper.dialog3.show();
};
TableOfContentsDialog.prototype.onSelectHandlerClick = function (args) {
this.selectHandler(args);
};
TableOfContentsDialog.prototype.onShowDialog = function () {
this.showStyleDialog();
};
TableOfContentsDialog.prototype.changeShowLevelValue = function (event) {
var levels = event.value;
var values = [];
switch (levels) {
case 1:
values = ['1', null, null, null, null, null, null, null, null];
this.changeByValue(values);
break;
case 2:
values = ['1', '2', null, null, null, null, null, null, null];
this.changeByValue(values);
break;
case 3:
values = ['1', '2', '3', null, null, null, null, null, null];
this.changeByValue(values);
break;
case 4:
values = ['1', '2', '3', '4', null, null, null, null, null];
this.changeByValue(values);
break;
case 5:
values = ['1', '2', '3', '4', '5', null, null, null, null];
this.changeByValue(values);
break;
case 6:
values = ['1', '2', '3', '4', '5', '6', null, null, null];
this.changeByValue(values);
break;
case 7:
values = ['1', '2', '3', '4', '5', '6', '7', null, null];
this.changeByValue(values);
break;
case 8:
values = ['1', '2', '3', '4', '5', '6', '7', '8', null];
this.changeByValue(values);
break;
case 9:
values = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
this.changeByValue(values);
break;
}
};
TableOfContentsDialog.prototype.changeByValue = function (headings) {
this.heading1.value = headings[0];
this.heading2.value = headings[1];
this.heading3.value = headings[2];
this.heading4.value = headings[3];
this.heading5.value = headings[4];
this.heading6.value = headings[5];
this.heading7.value = headings[6];
this.heading8.value = headings[7];
this.heading9.value = headings[8];
};
TableOfContentsDialog.prototype.onResetClick = function () {
this.reset();
};
TableOfContentsDialog.prototype.onChangeStyleClick = function (args) {
this.changeStyle(args);
};
TableOfContentsDialog.prototype.initAlertDialog = function (isvalid) {
var localValue = new L10n("documenteditor", this.documentHelper.owner.defaultLocale);
localValue.setLocale(this.documentHelper.owner.locale);
var dialogContent = isvalid ? localValue.getConstant("The number must be between") : localValue.getConstant("The Invalid number");
DialogUtility.alert({
title: localValue.getConstant("Information"),
content: dialogContent,
closeOnEscape: true,
showCloseIcon: true,
position: { X: "center", Y: "center" },
}).enableRtl = this.documentHelper.owner.enableRtl;
};
TableOfContentsDialog.prototype.checkLevel = function () {
if (this.heading1.value !== '') {
this.showLevel.value = 1;
}
if (this.heading2.value !== '') {
this.showLevel.value = 2;
}
if (this.heading3.value !== '') {
this.showLevel.value = 3;
}
if (this.heading4.value !== '') {
this.showLevel.value = 4;
}
if (this.heading5.value !== '') {
this.showLevel.value = 5;
}
if (this.heading6.value !== '') {
this.showLevel.value = 6;
}
if (this.heading7.value !== '') {
this.showLevel.value = 7;
}
if (this.heading8.value !== '') {
this.showLevel.value = 8;
}
if (this.heading9.value !== '') {
this.showLevel.value = 9;
}
};
TableOfContentsDialog.prototype.getElementValue = function (element) {
switch (element) {
case this.heading1:
return '1';
case this.heading2:
return '2';
case this.heading3:
return '3';
case this.heading4:
return '4';
case this.heading5:
return '5';
case this.heading6:
return '6';
case this.heading7:
return '7';
case this.heading8:
return '8';
case this.heading9:
return '9';
default:
return '1';
}
};
TableOfContentsDialog.prototype.onChangingStyleClick = function (args) {
this.changeHeadingStyle(args);
};
TableOfContentsDialog.prototype.getHeadingLevel = function (index) {
switch (index) {
case 1:
return parseInt(this.heading1.value);
case 2:
return parseInt(this.heading2.value);
case 3:
return parseInt(this.heading3.value);
case 4:
return parseInt(this.heading4.value);
case 5:
return parseInt(this.heading5.value);
case 6:
return parseInt(this.heading6.value);
case 7:
return parseInt(this.heading7.value);
case 8:
return parseInt(this.heading8.value);
case 9:
return parseInt(this.heading9.value);
default:
return 0;
}
};
TableOfContentsDialog.prototype.applyLevelSetting = function (tocSettings) {
tocSettings.levelSettings = {};
var headingPrefix = 'Heading ';
var newStartLevel = 0;
var newEndLevel = 0;
var isEndLevel = false;
for (var i = 1; i <= tocSettings.endLevel; i++) {
var outlineLevelValue = this.getTOCInputValue(i);
var outlineLevel = this.getHeadingLevel(i);
if (i === outlineLevel && outlineLevelValue.match(/^[0-9]+$/)) {
if (newStartLevel === 0) {
newStartLevel = i;
isEndLevel = false;
}
if (!isEndLevel) {
newEndLevel = i;
}
}
else {
isEndLevel = true;
if (!outlineLevelValue.match(/^[0-9]+$/)) {
this.initAlertDialog(false);
return false;
}
else if (outlineLevel < 1 || outlineLevel > 9) {
this.initAlertDialog(true);
return false;
}
else {
var headingStyle = headingPrefix + i.toString();
tocSettings.levelSettings[headingStyle] = outlineLevel;
}
}
}
tocSettings.startLevel = newStartLevel;
tocSettings.endLevel = newEndLevel;
if (newEndLevel) {
for (var j = newEndLevel + 1; j <= 9; j++) {
var outlineHeader = this.getTOCInputValue(j);
var outlineLevel = this.getHeadingLevel(j);
if (!outlineHeader.match(/^[0-9]+$/) && outlineHeader !== "") {
this.initAlertDialog(false);
return false;
}
else {
if (outlineLevel < 1 || outlineLevel > 9) {
this.initAlertDialog(true);
return false;
}
}
}
}
if (this.normal.value !== '') {
var normalvalue = parseInt(this.normal.value);
if (!this.normal.value.match(/^[0-9]+$/)) {
this.initAlertDialog(false);
return false;
}
else if (normalvalue < 1 || normalvalue > 9) {
this.initAlertDialog(true);
return false;
}
else {
tocSettings.levelSettings["Normal"] = normalvalue;
}
}
return true;
};
TableOfContentsDialog.prototype.getTOCInputValue = function (input) {
switch (input) {
case 1:
return this.heading1.value;
case 2:
return this.heading2.value;
case 3:
return this.heading3.value;
case 4:
return this.heading4.value;
case 5:
return this.heading5.value;
case 6:
return this.heading6.value;
case 7:
return this.heading7.value;
case 8:
return this.heading8.value;
case 9:
return this.heading9.value;
default:
return "";
}
};
/**
* @private
* @returns {void}
*/
TableOfContentsDialog.prototype.destroy = function () {
if (this.pageNumber) {
this.pageNumber.destroy();
this.pageNumber = undefined;
}
if (this.rightAlign) {
this.rightAlign.destroy();
this.rightAlign = undefined;
}
if (this.tabLeader) {
this.tabLeader.destroy();
this.tabLeader = undefined;
}
if (this.showLevel) {
this.showLevel.destroy();
this.showLevel = undefined;
}
if (this.hyperlink) {
this.hyperlink.destroy();
this.hyperlink = undefined;
}
if (this.style) {
this.style.destroy();
this.style = undefined;
}
if (this.outline) {
this.outline.destroy();
this.outline = undefined;
}
if (this.listViewInstance) {
this.listViewInstance.destroy();
this.listViewInstance = undefined;
}
this.removeEvents();
this.removeElements();
this.heading1 = undefined;
this.heading2 = undefined;
this.heading3 = undefined;
this.heading4 = undefined;
this.heading5 = undefined;
this.heading6 = undefined;
this.heading7 = undefined;
this.heading8 = undefined;
this.heading9 = undefined;
this.normal = undefined;
this.textBoxInput = undefined;
this.documentHelper = undefined;
if (!isNullOrUndefined(this.target)) {
if (this.target.parentElement) {
this.target.parentElement.removeChild(this.target);
}
for (var count = 0; count < this.target.childNodes.length; count++) {
this.target.removeChild(this.target.childNodes[count]);
count--;
}
this.target = undefined;
}
};
TableOfContentsDialog.prototype.removeEvents = function () {
if (this.heading1) {
this.heading1.removeEventListener('keyup', this.changeStyleClickHandler);
}
if (this.heading2) {
this.heading2.removeEventListener('keyup', this.changeStyleClickHandler);
}
if (this.heading3) {
this.heading3.removeEventListener('keyup', this.changeStyleClickHandler);
}
if (this.heading4) {
this.heading4.removeEventListener('keyup', this.changeStyleClickHandler);
}
if (this.heading5) {
this.heading5.removeEventListener('keyup', this.changeStyleClickHandler);
}
if (this.heading6) {
this.heading6.removeEventListener('keyup', this.changeStyleClickHandler);
}
if (this.heading7) {
this.heading7.removeEventListener('keyup', this.changeStyleClickHandler);
}
if (this.heading8) {
this.heading8.removeEventListener('keyup', this.changeStyleClickHandler);
}
if (this.heading9) {
this.heading9.removeEventListener('keyup', this.changeStyleClickHandler);
}
if (this.normal) {
this.normal.removeEventListener('keyup', this.changingStyleClickHandler);
}
if (this.resetElement) {
this.resetElement.removeEventListener('click', this.resetClickHandler);
}
if (this.listViewInstance) {
this.listViewInstance.removeEventListener('select', this.selectHandlerClickHandler);
}
if (this.modifyElement) {
this.modifyElement.removeEventListener('click', this.showDialogHandler);
}
};
TableOfContentsDialog.prototype.removeElements = function () {
if (this.generalDiv) {
this.generalDiv.remove();
this.generalDiv = undefined;
}
if (this.genLabel) {
this.genLabel.remove();
this.genLabel = undefined;
}
if (this.topContainer) {
this.topContainer.remove();
this.topContainer = undefined;
}
if (this.leftGeneralDiv) {
this.leftGeneralDiv.remove();
this.leftGeneralDiv = undefined;
}
if (this.rightGeneralDiv) {
this.rightGeneralDiv.remove();
this.rightGeneralDiv = undefined;
}
if (this.bottomContainer) {
this.bottomContainer.remove();
this.bottomContainer = undefined;
}
if (this.leftBottomGeneralDiv) {
this.leftBottomGeneralDiv.remove();
this.leftBottomGeneralDiv = undefined;
}
if (this.rightBottomGeneralDiv) {
this.rightBottomGeneralDiv.remove();
this.rightBottomGeneralDiv = undefined;
}
if (this.pageNumberDiv) {
this.pageNumberDiv.remove();
this.pageNumberDiv = undefined;
}
if (this.pageNumber1) {
this.pageNumber1.remove();
this.pageNumber1 = undefined;
}
if (this.rightAlignDiv) {
this.rightAlignDiv.remove();
this.rightAlignDiv = undefined;
}
if (this.rightAlign1) {
this.rightAlign1.remove();
this.rightAlign1 = undefined;
}
if (this.tabDivContainer) {
this.tabDivContainer.remove();
this.tabDivContainer = undefined;
}
if (this.tabDiv) {
this.tabDiv.remove();
this.tabDiv = undefined;
}
if (this.tabLeaderLabelDiv) {
this.tabLeaderLabelDiv.remove();
this.tabLeaderLabelDiv = undefined;
}
if (this.tabLeaderLabel) {
this.tabLeaderLabel.remove();
this.tabLeaderLabel = undefined;
}
if (this.tabLeaderDiv) {
this.tabLeaderDiv.remove();
this.tabLeaderDiv = undefined;
}
if (this.tabLeader1) {
this.tabLeader1.remove();
this.tabLeader1 = undefined;
}
if (this.hyperlink1) {
this.hyperlink1.remove();
this.hyperlink1 = undefined;
}
if (this.hyperlink1) {
this.hyperlink1.remove();
this.hyperlink1 = undefined;
}
if (this.showDiv) {
this.showDiv.remove();
this.showDiv = undefined;
}
if (this.showLevelLabelDiv) {
this.showLevelLabelDiv.remove();
this.showLevelLabelDiv = undefined;
}
if (this.showLevelLabel) {
this.showLevelLabel.remove();
this.showLevelLabel = undefined;
}
if (this.showLevelDiv) {
this.showLevelDiv.remove();
this.showLevelDiv = undefined;
}
if (this.showLevel1) {
this.showLevel1.remove();
this.showLevel1 = undefined;
}
if (this.buildTableLabel) {
this.buildTableLabel.remove();
this.buildTableLabel = undefined;
}
if (this.table) {
this.table.remove();
this.table = undefined;
}
if (this.tr1) {
this.tr1.remove();
this.tr1 = undefined;
}
if (this.td1) {
this.td1.remove();
this.td1 = undefined;
}
if (this.availableLabel) {
this.availableLabel.remove();
this.availableLabel = undefined;
}
if (this.td2) {
this.td2.remove();
this.td2 = undefined;
}
if (this.tocLabel) {
this.tocLabel.remove();
this.tocLabel = undefined;
}
if (this.tableDiv) {
this.tableDiv.remove();
this.tableDiv = undefined;
}
if (this.table1) {
this.table1.remove();
this.table1 = undefined;
}
if (this.tr2) {
this.tr2.remove();
this.tr2 = undefined;
}
if (this.td3) {
this.td3.remove();
this.td3 = undefined;
}
if (this.heading1Label) {
this.heading1Label.remove();
this.heading1Label = undefined;
}
if (this.td4) {
this.td4.remove();
this.t