@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
437 lines (436 loc) • 23.9 kB
JavaScript
import { ListView } from '@syncfusion/ej2-lists';
import { Button, CheckBox } from '@syncfusion/ej2-buttons';
import { createElement, L10n, isNullOrUndefined } from '@syncfusion/ej2-base';
import { ContentControl, ContentControlListItems } from '../viewer/page';
import { ColorPicker, TextBox } from '@syncfusion/ej2-inputs';
var ContentControlPropertiesDialog = /** @class */ (function () {
/**
* @param {DocumentHelper} documentHelper - Specifies the document helper.
* @private
*/
function ContentControlPropertiesDialog(documentHelper) {
var _this = this;
this.colorPicker = undefined;
this.fontColor = undefined;
/**
* @private
*/
this.characterFormat = undefined;
/* eslint-disable */
this.clearButtonClick = function (args) {
_this.textBoxInput.value = '';
_this.valueBoxInput.value = '';
for (var i = 0; i < _this.convertedItems.length; i++) {
if (_this.convertedItems[parseInt(i.toString(), 10)].value === _this.currentSelectedItem) {
_this.currentContentControl.contentControlProperties.contentControlListItems.splice(i, 1);
_this.convertedItems.splice(i, 1);
}
}
_this.listviewInstance.dataSource = _this.convertedItems.slice();
_this.listviewInstance.dataBind();
};
/* eslint-disable */
this.setButtonClick = function (args) {
if (!isNullOrUndefined(_this.textBoxInput.value) ||
!isNullOrUndefined(_this.valueBoxInput.value)) {
var newItem = new ContentControlListItems();
newItem.displayText = _this.textBoxInput.value ? _this.textBoxInput.value : '';
newItem.value = _this.valueBoxInput.value ? _this.valueBoxInput.value : '';
_this.currentContentControl.contentControlProperties.contentControlListItems.push(newItem);
var convertedItem = {
displayText: newItem.displayText,
value: newItem.value
};
_this.convertedItems.push(convertedItem);
_this.listviewInstance.addItem([convertedItem]);
}
_this.textBoxInput.value = '';
_this.valueBoxInput.value = '';
};
/**
* @private
* @returns {void}
*/
this.onKeyUpOnTextBox = function () {
_this.enableOrDisableButton();
};
this.loadPropertiesdialog = function () {
_this.currentContentControl = _this.documentHelper.owner.editor.getContentControl();
if (!isNullOrUndefined(_this.currentContentControl)) {
_this.contentEditedCheckBox.checked = _this.currentContentControl.contentControlProperties.lockContents;
_this.contentDeletedCheckBox.checked = _this.currentContentControl.contentControlProperties.lockContentControl;
_this.removeCheckBox.checked = _this.currentContentControl.contentControlProperties.isTemporary;
_this.multilineCheckBox.checked = _this.currentContentControl.contentControlProperties.multiline;
_this.colorPicker.value = _this.currentContentControl.contentControlProperties.color;
if (_this.removeCheckBox.checked) {
_this.contentEditedCheckBox.checked = false;
}
_this.titleText.value = _this.currentContentControl.contentControlProperties.title ? _this.currentContentControl.contentControlProperties.title : '';
_this.tagText.value = _this.currentContentControl.contentControlProperties.tag ? _this.currentContentControl.contentControlProperties.tag : '';
_this.fontColor = _this.currentContentControl.contentControlProperties.color;
if (_this.currentContentControl.contentControlProperties.type === 'Text') {
_this.plainTextPropertiesDiv.style.display = 'block';
}
else {
_this.plainTextPropertiesDiv.style.display = 'none';
}
if (_this.currentContentControl.contentControlProperties.type === 'ComboBox' || _this.currentContentControl.contentControlProperties.type === 'DropDownList') {
_this.dropDownPropertiesDiv.style.display = 'block';
}
else {
_this.dropDownPropertiesDiv.style.display = 'none';
}
if (!isNullOrUndefined(_this.currentContentControl.contentControlProperties.contentControlListItems !== undefined)) {
_this.convertedItems = _this.currentContentControl.contentControlProperties.contentControlListItems.map(function (item) {
var convertedItem = {};
for (var prop in item) {
convertedItem["" + prop] = item["" + prop];
}
return convertedItem;
});
_this.listviewInstance.dataSource = _this.convertedItems;
_this.listviewInstance.dataBind();
}
}
_this.documentHelper.updateFocus();
};
this.applyProperties = function () {
if (!isNullOrUndefined(_this.fontColor)) {
_this.currentContentControl.contentControlProperties.color = _this.fontColor;
}
var contentControlImage = _this.documentHelper.owner.getImageContentControl();
if ((contentControlImage instanceof ContentControl && contentControlImage.contentControlProperties.type == 'Picture')) {
contentControlImage.contentControlProperties.lockContents = _this.contentEditedCheckBox.checked;
contentControlImage.contentControlProperties.lockContentControl = _this.contentDeletedCheckBox.checked;
contentControlImage.contentControlProperties.isTemporary = _this.removeCheckBox.checked;
if (_this.removeCheckBox.checked) {
contentControlImage.contentControlProperties.lockContents = false;
}
contentControlImage.contentControlProperties.title = _this.titleText.value !== undefined ? _this.titleText.value : '';
contentControlImage.contentControlProperties.tag = _this.tagText.value !== undefined ? _this.tagText.value : '';
contentControlImage.contentControlProperties.multiline = _this.multilineCheckBox.checked;
}
if (!isNullOrUndefined(_this.currentContentControl)) {
_this.currentContentControl.contentControlProperties.lockContents = _this.contentEditedCheckBox.checked;
_this.currentContentControl.contentControlProperties.lockContentControl = _this.contentDeletedCheckBox.checked;
_this.currentContentControl.contentControlProperties.isTemporary = _this.removeCheckBox.checked;
if (_this.removeCheckBox.checked) {
_this.currentContentControl.contentControlProperties.lockContents = false;
}
_this.currentContentControl.contentControlProperties.title = _this.titleText.value !== undefined ? _this.titleText.value : '';
_this.currentContentControl.contentControlProperties.tag = _this.tagText.value !== undefined ? _this.tagText.value : '';
_this.currentContentControl.contentControlProperties.multiline = _this.multilineCheckBox.checked;
}
_this.unWireEventsAndBindings();
_this.documentHelper.dialog.hide();
_this.documentHelper.viewer.updateScrollBars();
_this.documentHelper.updateFocus();
};
this.closePropertiesDialog = function () {
_this.documentHelper.dialog.hide();
_this.unWireEventsAndBindings();
_this.documentHelper.updateFocus();
};
this.fontColorUpdate = function (args) {
if (!isNullOrUndefined(args.currentValue)) {
_this.fontColor = args.currentValue.hex;
}
};
/**
* @private
* @param args args value.
* @returns {void}
*/
/* eslint-disable */
this.selectHandler = function (args) {
_this.currentSelectedItem = args.text;
};
this.documentHelper = documentHelper;
}
ContentControlPropertiesDialog.prototype.getModuleName = function () {
return 'ContentControlPropertiesDialog';
};
ContentControlPropertiesDialog.prototype.createInputElement = function (type, id, className) {
var element = createElement('input', {
attrs: { type: type },
id: id,
className: className
});
return element;
};
ContentControlPropertiesDialog.prototype.initContentControlPropertiesDialog = function (localeValue, enableRtl) {
var _this = this;
this.target = createElement('div', { className: 'e-de-hyperlink' });
var container = createElement('div');
var generalDiv = createElement('div');
var genLabel = createElement('div', { className: 'e-de-para-dlg-heading', innerHTML: localeValue.getConstant('General') });
generalDiv.appendChild(genLabel);
var displayText = createElement('div', { className: 'e-de-dlg-container' });
this.titleText = createElement('input', { className: 'e-input' });
displayText.appendChild(this.titleText);
generalDiv.appendChild(displayText);
this.tagText = createElement('input', { className: 'e-input' });
generalDiv.appendChild(this.tagText);
var colorDiv = createElement('div', { className: 'e-de-container-row' });
colorDiv.style.paddingTop = '10px';
this.fontColorDiv = createElement('div', { className: 'e-de-font-dlg-display' });
var fontColorLabel = createElement('label', {
className: 'e-de-font-dlg-header-font-color e-de-font-color-margin',
innerHTML: localeValue.getConstant('Color')
});
// if (isRtl) {
// fontColorLabel.classList.add('e-de-rtl');
// }
this.fontColorDiv.appendChild(fontColorLabel);
var fontColorElement = this.createInputElement('color', this.target.id + '_ColorDiv', 'e-de-font-dlg-color');
this.fontColorDiv.appendChild(fontColorElement);
colorDiv.appendChild(this.fontColorDiv);
generalDiv.appendChild(colorDiv);
var _a = this.documentHelper.owner.documentEditorSettings.colorPickerSettings, columns = _a.columns, createPopupOnClick = _a.createPopupOnClick, cssClass = _a.cssClass, disabled = _a.disabled, enablePersistence = _a.enablePersistence, inline = _a.inline, mode = _a.mode, modeSwitcher = _a.modeSwitcher, noColor = _a.noColor, presetColors = _a.presetColors, showButtons = _a.showButtons;
this.colorPicker = new ColorPicker({
change: this.fontColorUpdate, value: '#000000', locale: this.documentHelper.owner.locale, enableOpacity: false, mode: mode, modeSwitcher: modeSwitcher, showButtons: showButtons, columns: columns, createPopupOnClick: createPopupOnClick, cssClass: cssClass, disabled: disabled, enablePersistence: enablePersistence, inline: inline, noColor: noColor, presetColors: presetColors
});
this.colorPicker.appendTo(fontColorElement);
var style = createElement('div', { styles: 'display:block' });
generalDiv.appendChild(style);
var remove = createElement('div', { styles: 'display:block' });
generalDiv.appendChild(remove);
var removeContent = createElement('input', {
attrs: { type: 'checkbox' }
});
remove.appendChild(removeContent);
this.removeCheckBox = new CheckBox({
label: localeValue.getConstant('Remove content control when contents are edited'),
cssClass: 'e-de-para-dlg-cs-check-box'
});
this.removeCheckBox.appendTo(removeContent);
removeContent.setAttribute('aria-label', localeValue.getConstant('Remove content control when contents are edited'));
container.appendChild(generalDiv);
var lockedDiv = createElement('div');
lockedDiv.style.paddingTop = '10px';
var lockedLabel = createElement('div', { className: 'e-de-para-dlg-heading', innerHTML: localeValue.getConstant('Locking') });
lockedDiv.appendChild(lockedLabel);
var contentDelete = createElement('div', { styles: 'display:block' });
lockedDiv.appendChild(contentDelete);
var contentDeleted = createElement('input', {
attrs: { type: 'checkbox' }
});
contentDelete.appendChild(contentDeleted);
this.contentDeletedCheckBox = new CheckBox({
label: localeValue.getConstant('Content control cannot be deleted'),
cssClass: 'e-de-para-dlg-cs-check-box',
change: function (args) {
if (args.checked) {
_this.removeCheckBox.disabled = true;
_this.removeCheckBox.dataBind();
}
else {
_this.removeCheckBox.disabled = false;
_this.removeCheckBox.dataBind();
}
}
});
this.contentDeletedCheckBox.appendTo(contentDeleted);
contentDeleted.setAttribute('aria-label', localeValue.getConstant('Content control cannot be deleted'));
var contentEdit = createElement('div', { styles: 'display:block' });
lockedDiv.appendChild(contentEdit);
var contentEdited = createElement('input', {
attrs: { type: 'checkbox' }
});
contentEdit.appendChild(contentEdited);
this.contentEditedCheckBox = new CheckBox({
label: localeValue.getConstant('Contents cannot be edited'),
cssClass: 'e-de-para-dlg-cs-check-box'
});
this.contentEditedCheckBox.appendTo(contentEdited);
contentEdited.setAttribute('aria-label', localeValue.getConstant('Contents cannot be edited'));
container.appendChild(lockedDiv);
this.plainTextPropertiesDiv = createElement('div');
this.plainTextPropertiesDiv.style.marginTop = '10px';
this.plainTextPropertiesDiv.style.display = 'none';
var plainTextLabel = createElement('div', { className: 'e-de-para-dlg-heading', innerHTML: localeValue.getConstant('Plain Text properties') });
this.plainTextPropertiesDiv.appendChild(plainTextLabel);
var multiline = createElement('input', {
attrs: { type: 'checkbox' }
});
this.plainTextPropertiesDiv.appendChild(multiline);
this.multilineCheckBox = new CheckBox({
label: localeValue.getConstant('Allow carriage returns'),
//enableRtl: isRtl,
cssClass: 'e-de-para-dlg-cs-check-box'
});
this.multilineCheckBox.appendTo(multiline);
multiline.setAttribute('aria-label', localeValue.getConstant('Allow carriage returns'));
container.appendChild(this.plainTextPropertiesDiv);
this.dropDownPropertiesDiv = createElement('div');
this.dropDownPropertiesDiv.style.marginTop = '10px';
this.dropDownPropertiesDiv.style.display = 'none';
var lockedcontentLabel = createElement('div', { className: 'e-de-para-dlg-heading', innerHTML: localeValue.getConstant('Drop_Down List properties') });
this.dropDownPropertiesDiv.appendChild(lockedcontentLabel);
var commonDiv = createElement('div', { className: 'e-bookmark-common' });
this.dropDownPropertiesDiv.appendChild(commonDiv);
var searchDiv = createElement('div', { className: 'e-bookmark-list' });
commonDiv.appendChild(searchDiv);
var textBoxDiv = createElement('div', { className: 'e-bookmark-textboxdiv' });
searchDiv.appendChild(textBoxDiv);
this.textBoxInput = createElement('input', { className: 'e-input e-bookmark-textbox-input', id: 'bookmark_text_box' });
this.textBoxInput.setAttribute('type', 'text');
this.textBoxInput.addEventListener('keyup', this.onKeyUpOnTextBox);
this.textBoxInput.setAttribute('aria-label', localeValue.getConstant('Display Text'));
textBoxDiv.appendChild(this.textBoxInput);
var valueBoxDiv = createElement('div', { className: 'e-bookmark-textboxdiv' });
searchDiv.appendChild(valueBoxDiv);
this.valueBoxInput = createElement('input', { className: 'e-input e-bookmark-textbox-input', id: 'bookmark_text_box' });
this.valueBoxInput.setAttribute('type', 'text');
this.valueBoxInput.addEventListener('keyup', this.onKeyUpOnTextBox);
this.valueBoxInput.setAttribute('aria-label', localeValue.getConstant('Value'));
valueBoxDiv.appendChild(this.valueBoxInput);
var listviewDiv = createElement('div', { className: 'e-bookmark-listViewDiv', id: 'bookmark_listview', attrs: { tabindex: '-1', role: 'listbox' } });
searchDiv.appendChild(listviewDiv);
this.listviewInstance = new ListView({
cssClass: 'e-bookmark-listview',
select: this.selectHandler,
fields: { text: 'value' }
});
this.listviewInstance.appendTo(listviewDiv);
var buttonDiv = createElement('div', { className: 'e-bookmark-button' });
commonDiv.appendChild(buttonDiv);
var addbuttonDiv = createElement('div', { className: 'e-bookmark-addbutton' });
buttonDiv.appendChild(addbuttonDiv);
var addButtonElement = createElement('button', {
innerHTML: 'Add', id: 'add',
attrs: { type: 'button' }
});
addButtonElement.setAttribute('aria-label', localeValue.getConstant('Add'));
addbuttonDiv.appendChild(addButtonElement);
this.addButton = new Button({ cssClass: 'e-button-custom' });
this.addButton.disabled = true;
this.addButton.appendTo(addButtonElement);
//addButtonElement.addEventListener('click', this.setButtonClick);
addButtonElement.addEventListener('click', this.setButtonClick.bind(this));
var deleteButtonDiv = createElement('div', { className: 'e-bookmark-deletebutton' });
buttonDiv.appendChild(deleteButtonDiv);
var deleteButtonElement = createElement('button', {
innerHTML: 'Delete', id: 'delete',
attrs: { type: 'button' }
});
deleteButtonElement.setAttribute('aria-label', 'Delete');
deleteButtonDiv.appendChild(deleteButtonElement);
this.deleteButton = new Button({ cssClass: 'e-button-custom' });
this.deleteButton.appendTo(deleteButtonElement);
deleteButtonElement.addEventListener('click', this.clearButtonClick);
container.appendChild(this.dropDownPropertiesDiv);
this.target.appendChild(container);
new TextBox({ placeholder: localeValue.getConstant('Title'), floatLabelType: 'Always' }, this.titleText);
new TextBox({ placeholder: localeValue.getConstant('Tag'), floatLabelType: 'Always' }, this.tagText);
new TextBox({ placeholder: localeValue.getConstant('Display Text'), floatLabelType: 'Always' }, this.textBoxInput);
new TextBox({ placeholder: localeValue.getConstant('Value'), floatLabelType: 'Always' }, this.valueBoxInput);
};
/**
* @private
* @returns {void}
*/
ContentControlPropertiesDialog.prototype.show = function () {
var localValue = new L10n('documenteditor', this.documentHelper.owner.defaultLocale);
localValue.setLocale(this.documentHelper.owner.locale);
this.localeValue = localValue;
if (!this.target) {
this.initContentControlPropertiesDialog(localValue, false);
}
if (this.documentHelper.selection.caret.style.display !== 'none') {
this.documentHelper.selection.caret.style.display = 'none';
}
if (this.dropDownPropertiesDiv.style.display !== 'none' || this.plainTextPropertiesDiv.style.display !== 'none') {
this.dropDownPropertiesDiv.style.display = 'none';
this.plainTextPropertiesDiv.style.display = 'none';
}
this.documentHelper.dialog.header = localValue.getConstant('Content Control Properties');
this.documentHelper.dialog.height = 'auto';
this.documentHelper.dialog.width = 'auto';
this.documentHelper.dialog.beforeOpen = this.loadPropertiesdialog;
this.documentHelper.dialog.content = this.target;
this.documentHelper.dialog.buttons = [
{
click: this.applyProperties,
buttonModel: { content: this.localeValue.getConstant('Ok'), cssClass: 'e-flat e-para-okay', isPrimary: true }
},
{
click: this.closePropertiesDialog,
buttonModel: { content: this.localeValue.getConstant('Cancel'), cssClass: 'e-flat e-para-cancel' }
}
];
this.documentHelper.dialog.close = this.documentHelper.updateFocus;
this.documentHelper.dialog.dataBind();
this.documentHelper.dialog.show();
};
ContentControlPropertiesDialog.prototype.enableOrDisableButton = function () {
if (!isNullOrUndefined(this.addButton)) {
this.addButton.disabled = this.textBoxInput.value === '' || this.valueBoxInput.value === '';
}
};
ContentControlPropertiesDialog.prototype.unWireEventsAndBindings = function () {
this.fontColor = undefined;
this.currentContentControl = undefined;
this.currentSelectedItem = undefined;
this.convertedItems = [];
};
/**
* @private
* @returns {void}
*/
ContentControlPropertiesDialog.prototype.destroy = function () {
if (this.contentDeletedCheckBox) {
this.contentDeletedCheckBox.destroy();
this.contentDeletedCheckBox = undefined;
}
if (this.contentEditedCheckBox) {
this.contentEditedCheckBox.destroy();
this.contentEditedCheckBox = undefined;
}
if (this.removeCheckBox) {
this.removeCheckBox.destroy();
this.removeCheckBox = undefined;
}
if (this.multilineCheckBox) {
this.multilineCheckBox.destroy();
this.multilineCheckBox = undefined;
}
if (this.listviewInstance) {
this.listviewInstance.destroy();
this.listviewInstance = undefined;
}
if (this.textBoxInput) {
this.textBoxInput.remove();
this.textBoxInput = undefined;
}
if (this.valueBoxInput) {
this.valueBoxInput.remove();
this.valueBoxInput = undefined;
}
if (this.titleText) {
this.titleText.remove();
this.titleText = undefined;
}
if (this.tagText) {
this.tagText.remove();
this.tagText = undefined;
}
if (this.colorPicker) {
this.colorPicker.destroy();
}
this.colorPicker = undefined;
this.documentHelper = undefined;
if (!isNullOrUndefined(this.target)) {
if (this.target.parentElement) {
this.target.parentElement.removeChild(this.target);
}
for (var i = 0; i < this.target.childNodes.length; i++) {
this.target.removeChild(this.target.childNodes[parseInt(i.toString(), 10)]);
i--;
}
this.target = undefined;
}
};
return ContentControlPropertiesDialog;
}());
export { ContentControlPropertiesDialog };