@syncfusion/ej2-pdfviewer
Version:
Essential JS 2 PDF viewer Component
938 lines • 102 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { Browser, createElement, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
import { Toolbar as Tool } from '@syncfusion/ej2-navigations';
import { Dialog } from '@syncfusion/ej2-popups';
import { Tab } from '@syncfusion/ej2-navigations';
import { ColorPicker, Slider, TextBox } from '@syncfusion/ej2-inputs';
import { Button, CheckBox, RadioButton } from '@syncfusion/ej2-buttons';
import { ComboBox, DropDownList } from '@syncfusion/ej2-dropdowns';
import { Query } from '@syncfusion/ej2-data';
/**
* Redaction Toolbar module
*/
var RedactionToolbar = /** @class */ (function () {
function RedactionToolbar(viewer, viewerBase, toolbar) {
this.defaultRedactionSettings = {
markerFillColor: '',
markerBorderColor: '',
markerOpacity: 0,
overlayText: '',
fontSize: 0,
fontFamily: '',
fontColor: '',
fillColor: '',
textAlignment: 'Left',
isRepeat: false,
useOverlayText: false
};
this.updatedProperties = __assign({}, this.defaultRedactionSettings);
/**
* @private
*/
this.isToolbarHidden = false;
/**
* @private
*/
this.isPropertyDialogOpen = false;
/**
* @private
*/
this.isTextRedactMode = false;
/**
* @private
*/
this.isTextRedact = false;
/**
* @private
*/
this.isPageDialogOpen = false;
this.pdfViewer = viewer;
this.pdfViewerBase = viewerBase;
this.primaryToolbar = toolbar;
}
/**
* @private
* @returns {void}
*/
RedactionToolbar.prototype.initializeRedactionToolbar = function () {
this.toolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_redaction_toolbar', className: 'e-pv-redaction-toolbar' });
if (this.pdfViewer.isInsertBefore) {
var toolbarContainer = document.getElementById(this.pdfViewer.element.id + '_annotation_toolbar');
if (toolbarContainer && toolbarContainer.parentNode === this.pdfViewerBase.viewerMainContainer) {
this.pdfViewerBase.viewerMainContainer.insertBefore(this.toolbarElement, toolbarContainer.nextSibling);
}
}
else {
this.pdfViewerBase.viewerMainContainer.appendChild(this.toolbarElement);
}
this.toolbar = new Tool({
width: '', height: '', overflowMode: 'Popup', cssClass: 'e-pv-toolbar-scroll',
items: this.createToolbarItems(), clicked: this.onToolbarClicked.bind(this)
});
this.toolbar.isStringTemplate = true;
if (this.pdfViewer.enableRtl) {
this.toolbar.enableRtl = true;
}
this.toolbar.appendTo(this.toolbarElement);
this.afterToolbarCreation();
this.showRedactionToolbar(null, true);
this.toolbarElement.setAttribute('aria-label', 'Redaction Toolbar');
};
RedactionToolbar.prototype.createToolbarItems = function () {
var items = [];
items.push({ prefixIcon: 'e-pv-text-redact-icon e-pv-icon', className: 'e-pv-mark-for-redaction-container', id: this.pdfViewer.element.id + '_markForRedaction', align: 'Left', tabIndex: '0' });
items.push({ prefixIcon: 'e-pv-redact-pages-icon e-pv-icon', className: 'e-pv-redact-pages-container', id: this.pdfViewer.element.id + '_redactPages', align: 'Left', tabIndex: '0' });
items.push({ prefixIcon: 'e-pv-redaction-panel-icon e-pv-icon', className: 'e-pv-redaction-panel-container', id: this.pdfViewer.element.id + '_redactionPanel', align: 'Left', tabIndex: '0' });
items.push({ prefixIcon: 'e-pv-redaction-icon e-pv-icon', className: 'e-pv-redaction-container', id: this.pdfViewer.element.id + '_redact', align: 'Left', tabIndex: '0' });
items.push({ prefixIcon: 'e-pv-annotation-delete-icon e-pv-icon', className: 'e-pv-annotation-delete-container', id: this.pdfViewer.element.id + '_redaction_delete', align: 'Left', tabIndex: '0' });
items.push({ prefixIcon: 'e-pv-comment-panel-icon e-pv-icon', className: 'e-pv-comment-panel-icon-container', id: this.pdfViewer.element.id + '_redaction_commentPanel', align: 'Right', tabIndex: '0' });
items.push({ prefixIcon: 'e-pv-annotation-tools-close-icon e-pv-icon', className: 'e-pv-annotation-tools-close-container', id: this.pdfViewer.element.id + '_redaction_close', align: 'Right', tabIndex: '0' });
return items;
};
RedactionToolbar.prototype.onToolbarClicked = function (args) {
var targetId = args.originalEvent.target.parentElement.id;
var isKeyBoardEvent = args.originalEvent && args.originalEvent.pointerType !== 'mouse' && args.originalEvent.pointerType !== 'touch';
switch (targetId) {
case this.pdfViewer.element.id + '_markForRedaction':
case this.pdfViewer.element.id + '_markForRedactionIcon':
case this.pdfViewer.element.id + '_markForRedactionContainer':
this.pdfViewer.annotation.textMarkupAnnotationModule.isSelectionMaintained = false;
this.handleMarkForRedaction();
break;
case this.pdfViewer.element.id + '_redactPages':
case this.pdfViewer.element.id + '_redactPagesIcon':
case this.pdfViewer.element.id + '_redactPagesContainer':
this.pdfViewer.tool = '';
this.isTextRedactMode = false;
this.pdfViewer.toolbarModule.deSelectItem(this.markForRedactionItem);
this.createRedactPagesWindow();
break;
case this.pdfViewer.element.id + '_redactionPanel':
case this.pdfViewer.element.id + '_redactionPanelIcon':
case this.pdfViewer.element.id + '_redactionPanelContainer':
this.pdfViewer.tool = '';
this.isTextRedactMode = false;
this.pdfViewer.toolbarModule.deSelectItem(this.markForRedactionItem);
this.createPropertiesWindow();
break;
case this.pdfViewer.element.id + '_redact':
case this.pdfViewer.element.id + '_redactIcon':
case this.pdfViewer.element.id + '_redactContainer':
{
this.pdfViewer.tool = '';
this.isTextRedactMode = false;
this.pdfViewer.toolbarModule.deSelectItem(this.markForRedactionItem);
if (!this.pdfViewer.redactionSettings.disableConfirmationPopup) {
this.createRedactDialog();
}
else {
this.pdfViewer.annotationModule.handleRedact(args);
}
break;
}
case this.pdfViewer.element.id + '_redaction_delete':
case this.pdfViewer.element.id + '_redaction_deleteIcon':
case this.pdfViewer.element.id + '_redaction_deleteContainer':
this.pdfViewer.toolbarModule.deSelectItem(this.markForRedactionItem);
this.pdfViewer.annotationModule.deleteAnnotation();
this.pdfViewer.toolbarModule.annotationToolbarModule.resetFreeTextAnnot();
break;
case this.pdfViewer.element.id + '_redaction_commentPanel':
case this.pdfViewer.element.id + '_redaction_commentPanelIcon':
case this.pdfViewer.element.id + '_redaction_commentPanelContainer': {
this.pdfViewer.toolbarModule.deSelectItem(this.markForRedactionItem);
var commentPanel = document.getElementById(this.pdfViewer.element.id + '_commantPanel');
if (this.pdfViewer.annotation && this.pdfViewer.annotation.textMarkupAnnotationModule) {
this.pdfViewer.annotation.textMarkupAnnotationModule.showHideDropletDiv(true);
}
if (commentPanel.style.display === 'block') {
this.pdfViewerBase.navigationPane.closeCommentPanelContainer();
}
else {
this.pdfViewer.annotationModule.showCommentsPanel();
if (isKeyBoardEvent && !isNullOrUndefined(commentPanel.firstElementChild) &&
!isNullOrUndefined(commentPanel.firstElementChild.lastElementChild) &&
commentPanel.firstElementChild.lastElementChild instanceof HTMLButtonElement) {
commentPanel.firstElementChild.lastElementChild.focus();
}
}
break;
}
case this.pdfViewer.element.id + '_redaction_close':
case this.pdfViewer.element.id + '_redaction_closeIcon':
case this.pdfViewer.element.id + '_redaction_closeContainer': {
var commentsPanel = document.getElementById(this.pdfViewer.element.id + '_commantPanel');
if (commentsPanel.style.display === 'block') {
this.pdfViewerBase.navigationPane.closeCommentPanelContainer();
}
this.showRedactionToolbar(this.primaryToolbar.redactionItem);
break;
}
}
};
/**
* @private
* @returns {void}
*/
RedactionToolbar.prototype.handleRedactions = function () {
if (!this.pdfViewer.redactionSettings.disableConfirmationPopup) {
this.createRedactDialog();
}
else {
this.pdfViewer.annotationModule.handleRedact();
}
};
/**
* @param {boolean} isEnable - isEnable
* @private
* @returns {void}
*/
RedactionToolbar.prototype.showHideDeleteIcon = function (isEnable) {
if (this.toolbar) {
this.toolbar.enableItems(this.deleteItem.parentElement, isEnable);
this.deleteItem.setAttribute('tabindex', isEnable ? '0' : '-1');
this.deleteItem.setAttribute('data-tabindex', isEnable ? '0' : '-1');
}
};
/**
* @param {boolean} isEnable - isEnable
* @private
* @returns {void}
*/
RedactionToolbar.prototype.showHideRedactIcon = function (isEnable) {
if (this.toolbar) {
this.toolbar.enableItems(this.redactItem.parentElement, isEnable);
this.redactItem.setAttribute('tabindex', isEnable ? '0' : '-1');
this.redactItem.setAttribute('data-tabindex', isEnable ? '0' : '-1');
}
};
RedactionToolbar.prototype.createRedactDialog = function () {
var _this = this;
var elementID = this.pdfViewer.element.id;
var dialogDiv = createElement('div', { id: elementID + '_dialog', className: 'e-pv-redaction-confirmation-popup' });
this.pdfViewerBase.pageContainer.appendChild(dialogDiv);
this.redactDialogObj = new Dialog({
header: this.pdfViewer.localeObj.getConstant('Apply Redaction'),
showCloseIcon: true,
content: '<span class="e-pv-redaction-confirmation-text">' + this.pdfViewer.localeObj.getConstant('Redact Content') + '</span>',
target: this.pdfViewer.element,
isModal: true,
animationSettings: { effect: 'None' },
buttons: [
{ buttonModel: { content: this.pdfViewer.localeObj.getConstant('Apply'), isPrimary: true }, click: this.pdfViewer.annotationModule.handleRedact.bind(this) }
],
close: function () {
_this.destroyRedactWindow();
}
});
this.redactDialogObj.appendTo(dialogDiv);
};
RedactionToolbar.prototype.createRedactPagesWindow = function () {
var _this = this;
var elementID = this.pdfViewer.element.id;
if (!Browser.isDevice || this.pdfViewer.enableDesktopMode) {
var dialogDiv = createElement('div', { id: elementID + '_dialog', className: 'e-dialog e-lib e-pv-redaction-page-mark-dialog e-dlg-modal e-popup e-control e-popup-open' });
var pageTab = this.createPageTab();
this.pdfViewerBase.pageContainer.appendChild(dialogDiv);
this.pageDialog = new Dialog({
showCloseIcon: true, closeOnEscape: true, isModal: true, header: this.pdfViewer.localeObj.getConstant('Mark Page Range'),
width: '400px', target: this.pdfViewer.element, content: pageTab, beforeOpen: function () {
_this.isPageDialogOpen = true;
}, allowDragging: true, close: function () {
_this.destroyPageWindow();
_this.isPageDialogOpen = false;
}
});
this.pageDialog.buttons = [
{ buttonModel: { content: this.pdfViewer.localeObj.getConstant('Cancel') }, click: this.onPageMarkCancelClicked.bind(this) },
{ buttonModel: { content: this.pdfViewer.localeObj.getConstant('Save'), isPrimary: true }, click: this.OnsavePageMarkSettings.bind(this) }
];
if (this.pdfViewer.enableRtl) {
this.pageDialog.enableRtl = true;
}
this.pageDialog.appendTo(dialogDiv);
}
else {
this.redactionPagePanelContainer = createElement('div', { id: this.pdfViewer.element.id + '_pagePanel', className: 'e-pv-redaction-page-mark-panel' });
this.pdfViewerBase.mainContainer.appendChild(this.redactionPagePanelContainer);
if (this.pdfViewer.enableRtl) {
this.redactionPagePanelContainer.style.left = 0 + 'px';
}
else {
this.redactionPagePanelContainer.style.right = 0 + 'px';
}
this.redactionPagePanelContainer.style.bottom = 0 + 'px';
this.redactionPagePanelContainer.style.zIndex = '1001';
this.createPagePanelTitleContainer();
this.redactionPagePanelContainer.style.display = 'block';
this.redactionContentContainer = createElement('div', { id: this.pdfViewer.element.id + '_commentscontentcontainer', className: 'e-pv-redaction-content-container' });
this.redactionPagePanelContainer.appendChild(this.redactionContentContainer);
this.redactionContentContainer.appendChild(this.createPageTab());
var viewer = document.getElementById(this.pdfViewer.element.id + '_viewerMainContainer');
viewer.insertBefore(this.redactionPagePanelContainer, this.pdfViewer.toolbarModule.toolbarElement);
}
};
/**
* @private
* @returns {void}
*/
RedactionToolbar.prototype.createPropertiesWindow = function () {
var _this = this;
var elementID = this.pdfViewer.element.id;
this.updatedProperties = this.redactionSettingsInitialValues();
if (!Browser.isDevice || this.pdfViewer.enableDesktopMode) {
var height = '520px';
var dialogDiv = createElement('div', { id: elementID + '_dialog', className: 'e-dialog e-lib e-pv-redaction-properties-dialog e-dlg-modal e-popup e-control e-popup-open' });
var appearanceTab = this.createAppearanceTab();
this.pdfViewerBase.pageContainer.appendChild(dialogDiv);
this.propertiesDialog = new Dialog({
showCloseIcon: true, closeOnEscape: true, isModal: true, header: this.getPropertyPanelHeaderContent() + ' ' + this.pdfViewer.localeObj.getConstant('Properties'),
minHeight: height, width: '370px', target: this.pdfViewer.element, content: appearanceTab, beforeOpen: function () {
_this.isPropertyDialogOpen = true;
}, allowDragging: true, close: function () {
_this.destroyPropertiesWindow();
_this.isPropertyDialogOpen = false;
}
});
this.propertiesDialog.buttons = [
{ buttonModel: { content: this.pdfViewer.localeObj.getConstant('Cancel') }, click: this.onCancelClicked.bind(this) },
{ buttonModel: { content: this.pdfViewer.localeObj.getConstant('Save'), isPrimary: true }, click: this.onSaveClicked.bind(this) }
];
if (this.pdfViewer.enableRtl) {
this.propertiesDialog.enableRtl = true;
}
this.propertiesDialog.appendTo(dialogDiv);
}
else {
this.redactionPropertiesContainer = createElement('div', { id: this.pdfViewer.element.id + '_redactPanel', className: 'e-pv-redaction-property-panel e-pv-blazor-redaction-property-panel-mobile e-pv-block' });
this.pdfViewerBase.mainContainer.appendChild(this.redactionPropertiesContainer);
if (this.pdfViewer.enableRtl) {
this.redactionPropertiesContainer.style.left = 0 + 'px';
}
else {
this.redactionPropertiesContainer.style.right = 0 + 'px';
}
this.redactionPropertiesContainer.style.bottom = 0 + 'px';
this.redactionPropertiesContainer.style.zIndex = '1001';
this.createRedactionPanelTitleContainer();
this.redactionPropertiesContainer.style.display = 'block';
this.redactionContentContainer = createElement('div', { id: this.pdfViewer.element.id + '_commentscontentcontainer', className: 'e-pv-redaction-content-container' });
this.redactionPropertiesContainer.appendChild(this.redactionContentContainer);
this.redactionContentContainer.appendChild(this.createAppearanceTabForMobile());
var viewer = document.getElementById(this.pdfViewer.element.id + '_viewerMainContainer');
viewer.insertBefore(this.redactionPropertiesContainer, this.pdfViewer.toolbarModule.toolbarElement);
}
};
RedactionToolbar.prototype.createRedactionPanelTitleContainer = function () {
var commentPanelTitleContainer = createElement('div', { id: this.pdfViewer.element.id + '_commentPanelTitleContainer', className: 'e-pv-redaction-panel-title-container' });
var commentpanelTilte = createElement('div', { id: this.pdfViewer.element.id + '_commentPanelTitle', className: 'e-pv-comment-panel-title', attrs: { 'tabindex': '-1' } });
commentpanelTilte.innerText = this.pdfViewer.localeObj.getConstant('Redaction') + ' ' + this.pdfViewer.localeObj.getConstant('Properties');
var saveButton = createElement('button', { className: 'e-pv-save-button e-pv-blazor-save-button e-primary' });
saveButton.setAttribute('type', 'button');
saveButton.textContent = 'Save';
saveButton.addEventListener('click', this.onSaveClicked.bind(this));
var button = new Button({ isPrimary: true });
button.appendTo(saveButton);
if (Browser.isDevice && !this.pdfViewer.enableDesktopMode && !isBlazor()) {
var commentCloseIconDiv = createElement('button');
commentCloseIconDiv.setAttribute('aria-label', 'annotation button');
commentCloseIconDiv.setAttribute('type', 'button');
commentCloseIconDiv.style.borderColor = 'transparent';
commentCloseIconDiv.style.paddingTop = '11px';
commentCloseIconDiv.style.paddingBottom = '11px';
commentCloseIconDiv.style.backgroundColor = 'transparent';
commentCloseIconDiv.addEventListener('click', this.closeRedactionPanelContainer.bind(this));
commentpanelTilte.style.left = '37px';
var commentCloseIcon = createElement('span', { className: 'e-pv-annotation-tools-close-icon e-pv-icon' });
commentCloseIconDiv.appendChild(commentCloseIcon);
commentPanelTitleContainer.appendChild(commentCloseIconDiv);
}
commentPanelTitleContainer.appendChild(commentpanelTilte);
commentPanelTitleContainer.appendChild(saveButton);
this.redactionPropertiesContainer.appendChild(commentPanelTitleContainer);
};
RedactionToolbar.prototype.createPagePanelTitleContainer = function () {
var commentPanelTitleContainer = createElement('div', { id: this.pdfViewer.element.id + '_pageMarkPanelTitleContainer', className: 'e-pv-redaction-panel-title-container' });
var commentpanelTilte = createElement('div', { id: this.pdfViewer.element.id + '_commentPanelTitle', className: 'e-pv-comment-panel-title', attrs: { 'tabindex': '-1' } });
commentpanelTilte.innerText = this.pdfViewer.localeObj.getConstant('Mark Page Range');
var saveButton = createElement('button', { className: 'e-pv-save-button e-pv-blazor-save-button e-primary' });
saveButton.setAttribute('type', 'button');
saveButton.textContent = 'Save';
saveButton.addEventListener('click', this.OnsavePageMarkSettings.bind(this));
var button = new Button({ isPrimary: true });
button.appendTo(saveButton);
if (Browser.isDevice && !this.pdfViewer.enableDesktopMode && !isBlazor()) {
var commentCloseIconDiv = createElement('button');
commentCloseIconDiv.setAttribute('aria-label', 'annotation button');
commentCloseIconDiv.setAttribute('type', 'button');
commentCloseIconDiv.style.borderColor = 'transparent';
commentCloseIconDiv.style.paddingTop = '11px';
commentCloseIconDiv.style.paddingBottom = '11px';
commentCloseIconDiv.style.backgroundColor = 'transparent';
commentCloseIconDiv.addEventListener('click', this.closePagePanelContainer.bind(this));
commentpanelTilte.style.left = '37px';
var commentCloseIcon = createElement('span', { className: 'e-pv-annotation-tools-close-icon e-pv-icon' });
commentCloseIconDiv.appendChild(commentCloseIcon);
commentPanelTitleContainer.appendChild(commentCloseIconDiv);
}
commentPanelTitleContainer.appendChild(commentpanelTilte);
commentPanelTitleContainer.appendChild(saveButton);
this.redactionPagePanelContainer.appendChild(commentPanelTitleContainer);
};
/**
* @private
* @returns {void}
*/
RedactionToolbar.prototype.closeRedactionPanelContainer = function () {
var proxy = null;
// eslint-disable-next-line
proxy = this;
var commentPanel = document.getElementById(this.pdfViewer.element.id + '_redactPanel');
if (commentPanel) {
commentPanel.style.display = 'none';
commentPanel.remove();
if (proxy.pdfViewerBase) {
proxy.pdfViewerBase.updateZoomValue();
}
if (this.pdfViewer.annotation && this.pdfViewer.annotation.textMarkupAnnotationModule) {
this.pdfViewer.annotation.textMarkupAnnotationModule.showHideDropletDiv(true);
}
if (Browser.isDevice && !isBlazor()) {
if (this.pdfViewer.toolbarModule.redactionToolbarModule.toolbar) {
this.pdfViewer.toolbarModule.redactionToolbarModule.toolbar.element.style.display = 'block';
}
}
}
};
/**
* @private
* @returns {void}
*/
RedactionToolbar.prototype.closePagePanelContainer = function () {
var proxy = null;
// eslint-disable-next-line
proxy = this;
var commentPanel = document.getElementById(this.pdfViewer.element.id + '_pagePanel');
if (commentPanel) {
commentPanel.style.display = 'none';
commentPanel.remove();
if (proxy.pdfViewerBase) {
proxy.pdfViewerBase.updateZoomValue();
}
if (this.pdfViewer.annotation && this.pdfViewer.annotation.textMarkupAnnotationModule) {
this.pdfViewer.annotation.textMarkupAnnotationModule.showHideDropletDiv(true);
}
if (Browser.isDevice && !isBlazor()) {
if (this.pdfViewer.toolbarModule.redactionToolbarModule.toolbar) {
this.pdfViewer.toolbarModule.redactionToolbarModule.toolbar.element.style.display = 'block';
}
}
}
};
RedactionToolbar.prototype.getPropertyPanelHeaderContent = function () {
return this.pdfViewer.localeObj.getConstant('Redaction');
};
RedactionToolbar.prototype.createPageTab = function () {
var _this = this;
var pageTabMainDiv = createElement('div', { className: 'e-pv-redaction-page-mark-content' });
// Create and append radio options
pageTabMainDiv.appendChild(this.createRadioOption('radioCurrentPage', 'CurrentPage', 'Current Page'));
pageTabMainDiv.appendChild(this.createRadioOption('radioOddPages', 'OddPages', 'Odd Pages Only'));
pageTabMainDiv.appendChild(this.createRadioOption('radioEvenPages', 'EvenPages', 'Even Pages Only'));
pageTabMainDiv.appendChild(this.createRadioOption('radioSpecificPages', 'SpecificPages', 'Specific Pages'));
// Create and append the page range div (initially hidden)
this.pageRangeDiv = createElement('div', {
className: 'e-pv-page-range-row',
styles: 'display: none;' // Hide initially
});
var labelDiv = createElement('div', { className: 'e-pv-page-range-label' });
labelDiv.textContent = this.pdfViewer.localeObj.getConstant('Page Range');
this.pageRangeDiv.appendChild(labelDiv);
this.isPageRangeValid = true;
var clsName = (!Browser.isDevice || this.pdfViewer.enableDesktopMode) ?
'e-pv-page-range-input' : 'e-pv-redaction-mobile-page-range-input';
var inputWrapper = createElement('div', { className: clsName });
var inputElement = createElement('input', { attrs: { type: 'text' } });
// Attach blur event for validation
inputElement.addEventListener('blur', function () {
var pageRangeValue = inputElement.value.trim();
var pageCount = _this.pdfViewer.pageCount; // Assuming this is available
var result = _this.checkValidation(pageRangeValue, pageCount);
inputElement.className = result.textBoxCssClass;
// Optional: show error message if needed
if (!_this.isPageRangeValid) {
if (!document.getElementById('pageRangeError')) {
var errorLabel = createElement('label', {
className: 'e-error',
id: 'pageRangeError'
});
errorLabel.textContent = _this.pdfViewer.localeObj.getConstant('Invalid page range');
inputWrapper.appendChild(errorLabel);
}
}
else {
var errorLabel = document.getElementById('pageRangeError');
if (errorLabel) {
errorLabel.remove();
}
}
});
inputWrapper.appendChild(inputElement);
this.pageRangeTextBox = new TextBox({
placeholder: this.getEnterPageRangeContent()
});
this.pageRangeTextBox.appendTo(inputElement);
this.pageRangeDiv.appendChild(inputWrapper);
pageTabMainDiv.appendChild(this.pageRangeDiv);
return pageTabMainDiv;
};
RedactionToolbar.prototype.checkValidation = function (pageRangeValue, pageCount) {
var isValid = this.isValidPageRangeFormat(pageRangeValue, pageCount);
this.isPageRangeValid = isValid;
return {
textBoxCssClass: isValid ? '' : 'e-control e-textbox e-lib e-input'
};
};
RedactionToolbar.prototype.isValidPageRangeFormat = function (value, pageCount) {
if (!value || value.trim() === '') {
return false;
}
// eslint-disable-next-line
var regex = /^(\d+(-\d+)?)(,\s*\d+(-\d+)?)*$/;
if (!regex.test(value)) {
return false;
}
var ranges = value.split(',').map(function (r) { return r.trim(); });
for (var _i = 0, ranges_1 = ranges; _i < ranges_1.length; _i++) {
var range = ranges_1[_i];
var parts = range.split('-').map(function (p) { return parseInt(p.trim(), 10); });
if (parts.length === 1) {
var page = parts[0];
if (isNaN(page) || page < 1 || page > pageCount) {
return false;
}
}
else if (parts.length === 2) {
var start = parts[0];
var end = parts[1];
if (isNaN(start) || isNaN(end) ||
start < 1 || end < 1 ||
start > end || end > pageCount) {
return false;
}
}
else {
return false;
}
}
return true;
};
RedactionToolbar.prototype.createRadioOption = function (id, value, labelText) {
var _this = this;
var mainDiv = createElement('div', { className: 'e-pv-redaction-radio-option' });
var radioWrapper = createElement('div', { className: 'e-radio-wrapper e-wrapper' });
var input = document.createElement('input');
input.id = id;
radioWrapper.appendChild(input);
var radioButton = new RadioButton({
label: labelText,
name: 'pageSelection',
value: value,
checked: false,
change: function (args) { return _this.pageOptionChanged(args); }
});
if (value === 'CurrentPage') {
radioButton.checked = true;
}
radioButton.appendTo(input);
mainDiv.appendChild(radioWrapper);
return mainDiv;
};
RedactionToolbar.prototype.getEnterPageRangeContent = function () {
var pageCount = this.pdfViewer.pageCount;
if (pageCount > 0) {
if (pageCount > 3) {
return "1, 2, 1-" + pageCount;
}
else {
return "1-" + pageCount;
}
}
return '1-60'; // Default fallback value
};
RedactionToolbar.prototype.createAppearanceTab = function () {
var elementID = this.pdfViewer.element.id;
var appearanceDiv = createElement('div', { className: 'e-control e-tab e-lib e-pv-default-tab e-keyboard' });
this.tabControl = new Tab({
items: [
{
header: { 'text': this.pdfViewer.localeObj.getConstant('General') }, content: this.createGeneralProperties()
},
{
header: { 'text': this.pdfViewer.localeObj.getConstant('Appearance') }, content: this.createAppearanceProperties()
}
],
selecting: this.select,
selected: this.onOpacityChange.bind(this)
}, appearanceDiv);
appearanceDiv.children[1].style.height = '100%';
return appearanceDiv;
};
RedactionToolbar.prototype.createAppearanceTabForMobile = function () {
var elementID = this.pdfViewer.element.id;
var appearanceDiv = createElement('div', { className: 'e-control e-tab e-lib e-pv-default-tab e-keyboard' });
this.tabControl = new Tab({
items: [
{
header: { 'text': this.pdfViewer.localeObj.getConstant('General') }, content: this.createGeneralPropertiesForMobile()
},
{
header: { 'text': this.pdfViewer.localeObj.getConstant('Appearance') }, content: this.createAppearancePropertiesForMobile()
}
],
selecting: this.select,
selected: this.onOpacityChange.bind(this)
}, appearanceDiv);
appearanceDiv.children[1].style.height = '100%';
return appearanceDiv;
};
RedactionToolbar.prototype.createGeneralProperties = function () {
var _this = this;
var elementID = this.pdfViewer.element.id;
// Create the main container div
var generalPropertiesMainDiv = createElement('div');
// Create child elements and append them
var table = createElement('table', { className: 'e-pv-redaction-table' });
var tr1 = document.createElement('tr');
tr1.className = 'e-pv-tr';
var td1 = document.createElement('td');
td1.className = 'e-pv-redaction-table-tr';
var fillColorLabel = createElement('span', {
className: 'e-pv-redaction-property-panel-text e-pv-redaction-fill-text',
id: elementID + '_properties_formfield_fillcolor_label'
});
fillColorLabel.textContent = 'Fill Color';
td1.appendChild(fillColorLabel);
// Create color picker container
var colorPickerContainer = createElement('div', {
className: 'e-colorpicker-container e-hide-opacity e-pv-redaction-fill-color'
});
var inputElement = createElement('input');
colorPickerContainer.appendChild(inputElement);
var colorPicker = new ColorPicker({
mode: 'Picker', enableOpacity: false, value: this.rgbaToHex(this.getRgbCode(this.updatedProperties.fillColor)), showButtons: false, modeSwitcher: false, change: this.fillColorChanged.bind(this)
});
colorPicker.appendTo(inputElement);
td1.appendChild(colorPickerContainer);
// Create useOverlayText div
var overlayTextCheckboxWrapper = createElement('div', {
className: 'e-checkbox-wrapper e-wrapper e-pv-properties-form-field-use-overlay-text e-pv-redaction-overlay-text e-pv-overlaytext'
});
this.useOverlayTextCheck = new CheckBox({ label: this.pdfViewer.localeObj.getConstant('Use Overlay Text'), cssClass: 'e-pv-properties-form-field-use-overlay-text e-pv-redaction-overlay-text e-pv-overlaytext', checked: this.updatedProperties.useOverlayText, change: this.onUseOverlayTextClick.bind(this) });
td1.appendChild(overlayTextCheckboxWrapper);
// Append the checkbox to the wrapper
this.useOverlayTextCheck.appendTo(overlayTextCheckboxWrapper);
tr1.appendChild(td1);
table.appendChild(tr1);
generalPropertiesMainDiv.appendChild(table);
// overlay main div element
this.overlayMainDiv = createElement('div', {
className: 'e-pv-redaction-can-overlay e-item e-overlay'
});
// Create child elements and append them
var fontTable = createElement('table', { className: 'e-pv-redaction-font-table' });
var fontTr1 = document.createElement('tr');
var fontTd1 = document.createElement('td');
fontTd1.textContent = 'Font Style';
fontTd1.setAttribute('colspan', '2');
fontTr1.appendChild(fontTd1);
fontTable.appendChild(fontTr1);
//tr2
var fontTr2 = document.createElement('tr');
fontTr2.className = 'e-pv-tr';
var fontTd2 = document.createElement('td');
//tr2 div1
var fontFamilyMainDiv = createElement('div', {
className: 'e-pv-redaction-font-family'
});
var fontStyle = [{ FontName: 'Helvetica' },
{ FontName: 'Courier' }, { FontName: 'Symbol' }, { FontName: 'Times New Roman' }];
// Create the select element dynamically
var selectElement = document.createElement('input');
selectElement.id = 'fontFamilyDropdown';
fontFamilyMainDiv.appendChild(selectElement);
// Initialize the DropDownList
var fontFamilyDropDown = new DropDownList({
dataSource: fontStyle,
query: new Query().select(['FontName']),
fields: { text: 'FontName', value: 'FontName' },
value: this.updatedProperties.fontFamily,
placeholder: 'Select a font family',
change: this.onFontFamilyChange.bind(this),
cssClass: 'e-pv-properties-formfield-font-family' // Equivalent to @inputName
});
// Append to the DOM
fontFamilyDropDown.appendTo(selectElement);
fontTd2.appendChild(fontFamilyMainDiv);
//tr2 div2
var fontSizeMainDiv = createElement('div', {
className: 'e-pv-redaction-font-size'
});
// font size input
var fontSizeInputElement = document.createElement('input');
fontSizeInputElement.id = 'fontSizeDropdown';
fontSizeMainDiv.appendChild(fontSizeInputElement);
// Define the font size list
var fontSizes = [
'6px', '8px', '10px', '12px', '14px', '16px',
'18px', '20px', '24px', '28px', '32px', '36px', '40px'
];
// Initialize the ComboBox
var fontSizeDropDown = new ComboBox({
dataSource: fontSizes,
value: this.updatedProperties.fontSize + 'px',
showClearButton: false,
change: this.onFontSizeChange.bind(this),
cssClass: 'e-pv-properties-formfield-font-size' // Replace with your @inputName if needed
});
// Append ComboBox to the input element
fontSizeDropDown.appendTo(fontSizeInputElement);
fontTd2.appendChild(fontSizeMainDiv);
fontTr2.appendChild(fontTd2);
fontTable.appendChild(fontTr2);
//tr3
var fontTr3 = document.createElement('tr');
fontTr3.className = 'e-pv-tr';
var fontTd3 = document.createElement('td');
var fontColorSpan = createElement('span', { className: 'e-pv-redaction-property-panel-text e-pv-redaction-font-color-text' });
fontColorSpan.id = elementID + '_properties_formfield_fontcolor_label';
fontColorSpan.textContent = 'Font Color';
fontTd3.appendChild(fontColorSpan);
var fontColrPickerMainDiv = createElement('div', {
className: 'e-colorpicker-container e-hide-opacity e-pv-properties-form-field-font-color e-pv-redaction-font-color'
});
var inputElement1 = createElement('input');
fontColrPickerMainDiv.appendChild(inputElement1);
var fontColorPicker = new ColorPicker({
mode: 'Picker', enableOpacity: false, value: this.rgbaToHex(this.getRgbCode(this.updatedProperties.fontColor)), showButtons: false, modeSwitcher: false, change: this.fontColorChanged.bind(this)
});
fontColorPicker.appendTo(inputElement1);
fontTd3.appendChild(fontColrPickerMainDiv);
var fontAlignMainDiv = createElement('div', {
className: 'e-pv-properties-form-field-font-align e-pv-redaction-text-align'
});
// Enum for text alignment
var TextAlignment;
(function (TextAlignment) {
TextAlignment["Left"] = "Left";
TextAlignment["Center"] = "Center";
TextAlignment["Right"] = "Right";
})(TextAlignment || (TextAlignment = {}));
// Create alignment buttons
var alignments = [
{ type: TextAlignment.Left, iconClass: 'e-pv-left-align-icon', divClass: 'e-pv-left-align-icon-div', tooltip: 'Align Left' },
{ type: TextAlignment.Center, iconClass: 'e-pv-center-align-icon', divClass: 'e-pv-center-align-icon-div', tooltip: 'Align Center' },
{ type: TextAlignment.Right, iconClass: 'e-pv-right-align-icon', divClass: 'e-pv-right-align-icon-div', tooltip: 'Align Right' }
];
alignments.forEach(function (alignment) {
var div = createElement('div', {
id: "redaction_" + alignment.type.toLowerCase() + "_align_div",
className: alignment.divClass + " e-pv-form-field-tooltip",
attrs: { title: alignment.tooltip }
});
var span = createElement('span', {
id: "redaction_" + alignment.type.toLowerCase() + "_align_span",
className: alignment.iconClass + " e-pv-icon"
});
if (alignment.type === _this.updatedProperties.textAlignment ||
alignment.type.toLowerCase() === _this.updatedProperties.textAlignment) {
div.classList.add('e-pv-li-select');
}
div.appendChild(span);
div.onclick = function () { return _this.toggleAlignment(alignment.type); };
fontAlignMainDiv.appendChild(div);
});
fontTd3.appendChild(fontAlignMainDiv);
fontTr3.appendChild(fontTd3);
fontTable.appendChild(fontTr3);
//tr4
var fontTr4 = document.createElement('tr');
fontTr4.className = 'e-pv-tr';
var fontTd4 = document.createElement('td');
var repeatTextMainDiv = createElement('div', {
className: 'e-checkbox-wrapper e-wrapper e-pv-properties-form-field-repeat-text'
});
this.repeatOverlayTextCheck = new CheckBox({ label: this.pdfViewer.localeObj.getConstant('Repeat Overlay Text'), cssClass: 'e-pv-properties-form-field-repeat-text', checked: this.updatedProperties.isRepeat, change: this.onRepeatOverlayTextClick.bind(this) });
fontTd4.appendChild(repeatTextMainDiv);
this.repeatOverlayTextCheck.appendTo(repeatTextMainDiv);
fontTr4.appendChild(fontTd4);
fontTable.appendChild(fontTr4);
//tr5
var fontTr5 = document.createElement('tr');
fontTr5.className = 'e-pv-tr';
var fontTd5 = document.createElement('td');
var overlayTextSpan1 = createElement('span', { className: 'e-pv-redaction-property-panel-text e-pv-redaction-overlay-text' });
overlayTextSpan1.id = elementID + '_properties_formfield_overlaytext_label';
overlayTextSpan1.textContent = 'Overlay Text';
fontTd5.appendChild(overlayTextSpan1);
var overlayTextMainDiv = createElement('div', {
className: 'e-pv-redaction-overlat-input'
});
fontTd5.appendChild(overlayTextMainDiv);
// Create a input container for the TextBox
var overlayTextBoxContainer = createElement('input');
overlayTextMainDiv.appendChild(overlayTextBoxContainer);
// overlay textbox
this.overlayTextBox = new TextBox({ type: 'text', floatLabelType: 'Never', placeholder: this.pdfViewer.localeObj.getConstant('REDACTED'), cssClass: 'e-pv-properties-formfield-overlay-text',
change: this.overlayTextValueChanged.bind(this) });
if (this.updatedProperties.overlayText !== '') {
this.overlayTextBox.value = this.updatedProperties.overlayText;
}
this.overlayTextBox.appendTo(overlayTextBoxContainer);
fontTr5.appendChild(fontTd5);
fontTable.appendChild(fontTr5);
this.overlayMainDiv.appendChild(fontTable);
generalPropertiesMainDiv.appendChild(this.overlayMainDiv);
if (this.useOverlayTextCheck.checked) {
this.overlayMainDiv.className = 'e-pv-redaction-can-overlay';
}
return generalPropertiesMainDiv;
};
RedactionToolbar.prototype.createGeneralPropertiesForMobile = function () {
var _this = this;
var elementID = this.pdfViewer.element.id;
// Create the main container div
var generalPropertiesMainDiv = createElement('div', { className: 'e-pv-general-tab-content-mobile' });
var fillColorMainDiv = createElement('div', { className: 'e-pv-fill-prop-group-mobile' });
var fillColorLabel = createElement('div', {
className: 'e-pv-fill-prop-lable-mobile'
});
fillColorLabel.textContent = 'Fill Color';
fillColorMainDiv.appendChild(fillColorLabel);
var colorPickerContainer = createElement('div', {
className: 'e-pv-fill-prop-mobile'
});
var inputElement = createElement('input');
colorPickerContainer.appendChild(inputElement);
var colorPicker = new ColorPicker({
mode: 'Picker',
enableOpacity: false,
value: this.rgbaToHex(this.getRgbCode(this.updatedProperties.fillColor)),
showButtons: false,
modeSwitcher: false,
change: this.fillColorChanged.bind(this)
});
colorPicker.appendTo(inputElement);
fillColorMainDiv.appendChild(colorPickerContainer);
generalPropertiesMainDiv.appendChild(fillColorMainDiv);
var useOverlayTextMainDiv = createElement('div', { className: 'e-pv-use-overlay-text-prop-mobile' });
var overlayTextCheckboxWrapper = createElement('div', {
className: 'e-checkbox-wrapper e-wrapper e-pv-properties-form-field-use-overlay-text'
});
this.useOverlayTextCheck = new CheckBox({
label: this.pdfViewer.localeObj.getConstant('Use Overlay Text'),
cssClass: 'e-pv-properties-form-field-use-overlay-text e-pv-redaction-overlay-mobile-text e-pv-mobile-overlaytext',
checked: this.updatedProperties.useOverlayText,
change: this.onUseOverlayTextClickForMobile.bind(this)
});
useOverlayTextMainDiv.appendChild(overlayTextCheckboxWrapper);
this.useOverlayTextCheck.appendTo(overlayTextCheckboxWrapper);
generalPropertiesMainDiv.appendChild(useOverlayTextMainDiv);
this.overlayMainDiv = createElement('div', {
className: 'e-pv-redaction-can-overlay e-item e-overlay'
});
this.fontFamilyMainDiv = createElement('div', { className: 'e-pv-font-family-prop-group-mobile e-item e-overlay' });
var fontFamilyLabel = createElement('div', {
className: 'e-pv-font-family-prop-lable-mobile'
});
fontFamilyLabel.textContent = 'Font Family';
this.fontFamilyMainDiv.appendChild(fontFamilyLabel);
//Font Family
var fontFamilyDiv = createElement('div', {
className: 'e-pv-font-family-prop-mobile e-pv-blazor-font-family-prop-mobile'
});
var fontStyle = [{ FontName: 'Helvetica' },
{ FontName: 'Courier' }, { FontName: 'Symbol' }, { FontName: 'Times New Roman' }];
// Create the select element dynamically
var selectElement = document.createElement('input');
selectElement.id = 'fontFamilyDropdown';
fontFamilyDiv.appendChild(selectElement);
// Initialize the DropDownList
var fontFamilyDropDown = new DropDownList({
dataSource: fontStyle,
query: new Query().select(['FontName']),
fields: { text: 'FontName', value: 'FontName' },
value: this.updatedProperties.fontFamily,
placeholder: 'Select a font family',
change: this.onFontFamilyChange.bind(this),
cssClass: 'e-pv-properties-formfield-font-family' // Equivalent to @inputName
});
// Append to the DOM
fontFamilyDropDown.appendTo(selectElement);
this.fontFamilyMainDiv.appendChild(fontFamilyDiv);
// tr3.appendChild(td33);
generalPropertiesMainDiv.appendChild(this.fontFamilyMainDiv);
this.fontSizeMainDiv = createElement('div', { className: 'e-pv-font-size-prop-group-mobile e-item e-overlay' });
var fontSizeLabel = createElement('div', {
className: 'e-pv-font-size-prop-group-mobile e-item'
// id: elementID + '_properties_formfield_fillcolor_label'
});
fontSizeLabel.textContent = 'Font Size';
this.fontSizeMainDiv.appendChild(fontSizeLabel);
// font size input
var fontSizeDiv = createElement('div', {
className: 'e-pv-font-size-prop-mobile e-pv-blazor-font-size-prop-mobile'
});
var fontSizeInputElement = document.createElement('input');
fontSizeInputElement.id = 'fontSizeDropdown';
fontSizeDiv.appendChild(fontSizeInputElement);
// Define the font size list
var fontSizes = [
'6px', '8px', '10px', '12px', '14px', '16px',
'18px', '20px', '24px', '28px', '32px', '36px', '40px'
];
// Initialize the ComboBox
var fontSizeDropDown = new ComboBox({
dataSource: fontSizes,
value: this.updatedProperties.fontSize + 'px',
showClearButton: false,
change: this.onFontSizeChange.bind(this),
cssClass: 'e-pv-properties-formfield-font-size' // Replace with your @inputName if needed
});
// Append ComboBox to the input element
fontSizeDropDown.appendTo(fontSizeInputElement);
this.fontSizeMainDiv.appendChild(fontSizeDiv);
// tr4.appendChild(td44);
generalPropertiesMainDiv.appendChild(this.fontSizeMainDiv);
this.fontColorMainDiv = createElement('div', { className: 'e-pv-font-color-prop-group-mobile e-item e-overlay' });
var fontColorLabel = createElement('div', {
className: 'e-pv-font-color-prop-group-mobile e-item'
});
fontColorLabel.textContent = 'Font Color';
this.fontColorMainDiv.appendChild(fontColorLabel);
var colorPickerContainer1 = createElement('div', {
className: 'e-pv-font-color-prop-mobile'
});
var inputElement1 = createElement('input');
colorPickerContainer1.appendChild(inputElement1);
var colorPicker1 = new ColorPicker({
mode: 'Picker',
enableOpacity: false,
value: this.rgbaToHex(this.getRgbCode(this.updatedProperties.fontColor)),
showButtons: false,
modeSwitcher: false,
change: this.fillColorChanged.bind(this)
});
colorPicker1.appendTo(inputElement1);
this.fontColorMainDiv.appendChild(colorPickerContainer1);
generalPropertiesMainDiv.appendChild(this.fontC