UNPKG

@syncfusion/ej2-pdfviewer

Version:
859 lines 338 kB
import { createElement, Browser, isBlazor, isNullOrUndefined, closest, initializeCSPTemplate } from '@syncfusion/ej2-base'; import { Toolbar as Tool, Menu } from '@syncfusion/ej2-navigations'; import { DropDownButton } from '@syncfusion/ej2-splitbuttons'; import { ColorPicker, Slider } from '@syncfusion/ej2-inputs'; import { cloneObject } from '../drawing/drawing-util'; import { ComboBox } from '@syncfusion/ej2-dropdowns'; import { Query } from '@syncfusion/ej2-data'; import { DynamicStampItem, SignStampItem, StandardBusinessStampItem } from '../base/types'; /* eslint-disable valid-jsdoc */ /** * @param {string} args - args * @param {any} buttonElement - button element * @param {any} colorElement - color element * @returns {void} * @hidden */ var AnnotationToolbar = /** @class */ (function () { function AnnotationToolbar(viewer, viewerBase, toolbar) { var _this = this; this.toolbarBorderHeight = 1; /** * @private */ this.isToolbarHidden = false; /** * @private */ this.isMobileAnnotEnabled = false; this.isHighlightEnabled = false; this.isMobileHighlightEnabled = false; this.isUnderlineEnabled = false; this.isMobileUnderlineEnabled = false; this.isStrikethroughEnabled = false; this.isMobileStrikethroughEnabled = false; this.isSquigglyEnabled = false; this.isMobileSquigglyEnabled = false; this.isHighlightBtnVisible = true; this.isCommentBtnVisible = true; this.isUnderlineBtnVisible = true; this.isStrikethroughBtnVisible = true; this.isSquigglyBtnVisible = true; this.isColorToolVisible = true; this.isOpacityToolVisible = true; this.isDeleteAnnotationToolVisible = true; this.isCurrentAnnotationOpacitySet = false; this.isStampBtnVisible = false; this.isShapeBtnVisible = false; this.isSignatureBtnVisible = false; this.isInkBtnVisible = false; this.isFontFamilyToolVisible = false; this.isFontSizeToolVisible = false; this.isFontAlignToolVisible = false; this.isFontColorToolVisible = false; this.isFontStylesToolVisible = false; this.isCommentPanelBtnVisible = false; this.isFreeTextBtnVisible = false; this.isCalibrateBtnVisible = false; this.isStrokeColorToolVisible = false; this.isThicknessToolVisible = false; this.stampMenu = []; this.stampParentID = ''; /** * @private */ this.inkAnnotationSelected = false; /** * @private */ this.openSignaturePopup = false; this.isSavedSignatureClicked = false; this.saveSignatureCount = 0; this.saveInitialCount = 0; /** * @private */ this.isToolbarCreated = false; /** * @private */ this.isFreetextClicked = false; /** * @private */ this.isPolygonClicked = false; this.addStampImage = function (args) { // eslint-disable-next-line var proxy = _this; var upoadedFiles = args.target.files; if (args.target.files[0] !== null) { var uploadedFile = upoadedFiles[0]; _this.pdfViewer.annotationModule.stampAnnotationModule.customStampName = uploadedFile.name.split('.')[0]; if (uploadedFile.type.split('/')[0] === 'image') { var reader = new FileReader(); reader.onload = function (e) { var uploadedFileUrl = e.currentTarget.result; proxy.pdfViewer.annotation.stampAnnotationModule.isStampAddMode = true; proxy.pdfViewer.annotationModule.stampAnnotationModule.isStampAnnotSelected = true; proxy.pdfViewerBase.stampAdded = true; _this.pdfViewer.annotationModule.stampAnnotationModule.createCustomStampAnnotation(uploadedFileUrl); proxy.pdfViewerBase.stampAdded = false; }; reader.readAsDataURL(uploadedFile); } } args.target.value = ''; args.currentTarget.value = ''; }; this.popupPosition = function (colorElement, buttonElement) { if (colorElement && colorElement.element) { var buttonBounds = buttonElement.getBoundingClientRect(); var elements = colorElement.element.getElementsByClassName('e-container e-color-palette')[0].getElementsByClassName('e-palette')[0].getBoundingClientRect(); var mainContainerBounds = this.pdfViewerBase.mainContainer.getBoundingClientRect(); if (elements.left + elements.width > mainContainerBounds.width) { colorElement.element.parentElement.style.left = (elements.left - elements.width) + buttonBounds.width + 'px'; } if (((elements.left - elements.width) + buttonBounds.width) < 0) { colorElement.element.parentElement.style.left = mainContainerBounds.left + buttonBounds.width + 'px'; } } }; this.onShapeToolbarClicked = function (args) { var elementId = _this.pdfViewer.element.id; var shapeAnnotationModule = _this.pdfViewer.annotation.shapeAnnotationModule; if (Browser.isDevice && !_this.pdfViewer.enableDesktopMode) { if (_this.pdfViewerBase.action === 'Polygon') { _this.pdfViewerBase.tool.mouseUp(args, true, true); } } if (!Browser.isDevice) { _this.deselectAllItems(); _this.resetFreeTextAnnot(); } else { var element = args.originalEvent.target; _this.pdfViewer.toolbarModule.selectItem(element.parentElement); _this.deselectAllItemsForMobile(); } switch (args.originalEvent.target.id) { case elementId + '_shape_line': case elementId + '_shape_lineIcon': shapeAnnotationModule.setAnnotationType('Line'); _this.onShapeDrawSelection(true); if (_this.pdfViewer.enableShapeLabel) { _this.showPropertiesTools('shapeLabel'); } else { _this.showPropertiesTools('shapeLine'); } _this.updateColorInIcon(_this.colorDropDownElement, shapeAnnotationModule.lineFillColor); _this.updateColorInIcon(_this.strokeDropDownElement, shapeAnnotationModule.lineStrokeColor); _this.handleShapeTool(elementId + '_shape_line'); break; case elementId + '_shape_arrow': case elementId + '_shape_arrowIcon': shapeAnnotationModule.setAnnotationType('Arrow'); _this.onShapeDrawSelection(true); if (_this.pdfViewer.enableShapeLabel) { _this.showPropertiesTools('shapeLabel'); } else { _this.showPropertiesTools('shape'); } _this.updateColorInIcon(_this.colorDropDownElement, shapeAnnotationModule.arrowFillColor); _this.updateColorInIcon(_this.strokeDropDownElement, shapeAnnotationModule.arrowStrokeColor); _this.handleShapeTool(elementId + '_shape_arrow'); break; case elementId + '_shape_rectangle': case elementId + '_shape_rectangleIcon': shapeAnnotationModule.setAnnotationType('Rectangle'); _this.onShapeDrawSelection(true); if (_this.pdfViewer.enableShapeLabel) { _this.showPropertiesTools('shapeLabel'); } else { _this.showPropertiesTools('shape'); } _this.updateColorInIcon(_this.colorDropDownElement, shapeAnnotationModule.rectangleFillColor); _this.updateColorInIcon(_this.strokeDropDownElement, shapeAnnotationModule.rectangleStrokeColor); _this.handleShapeTool(elementId + '_shape_rectangle'); break; case elementId + '_shape_circle': case elementId + '_shape_circleIcon': shapeAnnotationModule.setAnnotationType('Circle'); _this.onShapeDrawSelection(true); if (_this.pdfViewer.enableShapeLabel) { _this.showPropertiesTools('shapeLabel'); } else { _this.showPropertiesTools('shape'); } _this.updateColorInIcon(_this.colorDropDownElement, shapeAnnotationModule.circleFillColor); _this.updateColorInIcon(_this.strokeDropDownElement, shapeAnnotationModule.circleStrokeColor); _this.handleShapeTool(elementId + '_shape_circle'); break; case elementId + '_shape_pentagon': case elementId + '_shape_pentagonIcon': shapeAnnotationModule.setAnnotationType('Polygon'); _this.onShapeDrawSelection(true); if (_this.pdfViewer.enableShapeLabel) { _this.showPropertiesTools('shapeLabel'); } else { _this.showPropertiesTools('shape'); } _this.isPolygonClicked = true; _this.updateColorInIcon(_this.colorDropDownElement, shapeAnnotationModule.polygonFillColor); _this.updateColorInIcon(_this.strokeDropDownElement, shapeAnnotationModule.polygonStrokeColor); _this.handleShapeTool(elementId + '_shape_pentagon'); break; } // this.pdfViewer.clearSelection(); }; this.pdfViewer = viewer; this.pdfViewerBase = viewerBase; this.primaryToolbar = toolbar; } /** * @private * @returns {void} */ AnnotationToolbar.prototype.initializeAnnotationToolbar = function () { var _this = this; this.toolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_annotation_toolbar', className: 'e-pv-annotation-toolbar' }); 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), created: function () { _this.createDropDowns(); } }); this.toolbar.isStringTemplate = true; if (this.pdfViewer.enableRtl) { this.toolbar.enableRtl = true; } this.toolbar.appendTo(this.toolbarElement); this.afterToolbarCreation(); this.createStampContainer(); this.createSignContainer(); this.applyAnnotationToolbarSettings(); this.updateToolbarItems(); this.showAnnotationToolbar(null, true); this.toolbarElement.setAttribute('aria-label', 'Annotation Toolbar'); }; AnnotationToolbar.prototype.createMobileAnnotationToolbar = function (isEnable, isPath) { var _this = this; if (Browser.isDevice && !this.pdfViewer.enableDesktopMode) { if (this.toolbarElement == null && isEnable) { this.isMobileAnnotEnabled = true; this.toolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_annotation_toolbar', className: 'e-pv-annotation-toolbar' }); this.pdfViewerBase.viewerMainContainer.insertBefore(this.toolbarElement, this.pdfViewerBase.viewerContainer); this.toolbar = new Tool({ width: '', height: '', overflowMode: 'Popup', items: this.createMobileToolbarItems(isPath), clicked: this.onToolbarClicked.bind(this), created: function () { _this.createDropDowns(isPath); } }); this.toolbar.isStringTemplate = true; if (this.pdfViewer.enableRtl) { this.toolbar.enableRtl = true; } this.pdfViewerBase.navigationPane.goBackToToolbar(); this.pdfViewer.toolbarModule.showToolbar(false); this.toolbar.appendTo(this.toolbarElement); this.deleteItem = this.pdfViewerBase.getElement('_annotation_delete'); this.deleteItem.firstElementChild.id = this.pdfViewer.element.id + '_annotation_delete'; } else if (this.toolbarElement != null) { if (isEnable) { this.isMobileAnnotEnabled = true; this.pdfViewerBase.navigationPane.goBackToToolbar(); this.pdfViewer.toolbarModule.showToolbar(false); this.toolbarElement.style.display = 'block'; } else if (!isEnable) { this.isMobileAnnotEnabled = false; this.pdfViewer.toolbarModule.showToolbar(true); this.hideMobileAnnotationToolbar(); } } } else { this.isMobileAnnotEnabled = true; } }; AnnotationToolbar.prototype.hideMobileAnnotationToolbar = function () { if (this.toolbarElement != null) { if (this.pdfViewer.selectedItems.annotations.length > 0 || (!isNullOrUndefined(this.pdfViewer.annotationModule.textMarkupAnnotationModule) && this.pdfViewer.annotationModule.textMarkupAnnotationModule.currentTextMarkupAnnotation)) { if (this.propertyToolbar && this.propertyToolbar.element.children.length > 0) { this.propertyToolbar.element.style.display = 'block'; this.toolbarCreated = true; } } else { if (this.toolbar.element.children.length > 0) { this.toolbarCreated = true; } else { this.toolbarCreated = false; } if (this.propertyToolbar && this.propertyToolbar.element.style.display !== 'none') { this.propertyToolbar.element.style.display = 'none'; if (!this.toolbarCreated) { var editIcon = document.getElementById(this.pdfViewer.element.id + '_annotationIcon'); if (editIcon && editIcon.parentElement.classList.contains('e-pv-select')) { this.createAnnotationToolbarForMobile(); } } } } if (this.toolbarElement.children.length > 0) { this.toolbarElement.style.display = 'block'; } this.adjustMobileViewer(); } else if (this.toolbarCreated && this.propertyToolbar && this.propertyToolbar.element.children.length > 0) { this.propertyToolbar.element.style.display = 'none'; this.adjustMobileViewer(); this.toolbarCreated = false; } }; AnnotationToolbar.prototype.FreeTextForMobile = function () { var _this = this; this.hideExistingTool(); this.freetextToolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_freeTextToolbar', className: 'e-pv-mobile-annotation-toolbar', styles: 'bottom: 0px; position: absolute; width: 100%; float: left' }); this.pdfViewerBase.viewerMainContainer.appendChild(this.freetextToolbarElement); var colorTemplate = this.pdfViewer.toolbarModule.annotationToolbarModule.getTemplate('span', '_annotation_color', 'e-pv-annotation-color-container'); var strokeTemplate = this.pdfViewer.toolbarModule.annotationToolbarModule.getTemplate('span', '_annotation_stroke', 'e-pv-annotation-stroke-container'); var thicknessTemplate = this.getTemplate('span', '_annotation_thickness', 'e-pv-annotation-thickness-container'); var opacityTemplate = this.getTemplate('span', '_annotation_opacity', 'e-pv-annotation-opacity-container'); var fontFamilyTemplate = this.getTemplate('input', '_annotation_fontname', 'e-pv-annotation-fontname-container'); var fontSizeTemplate = this.getTemplate('input', '_annotation_fontsize', 'e-pv-annotation-fontsize-container'); var textColorTemplate = this.getTemplate('span', '_annotation_textcolor', 'e-pv-annotation-textcolor-container'); var alignmentTemplate = this.getTemplate('span', '_annotation_textalign', 'e-pv-annotation-textalign-container'); var textPropertiesTemplate = this.getTemplate('span', '_annotation_textproperties', 'e-pv-annotation-textprop-container'); var items = [ { prefixIcon: 'e-pv-backward-icon e-pv-icon', tooltipText: this.pdfViewer.localeObj.getConstant('Go Back'), id: this.pdfViewer.element.id + '_backward', click: this.goBackToToolbar.bind(this) }, { type: 'Separator', align: 'Left', cssClass: 'e-pv-hightlight-separator-container' }, { template: fontFamilyTemplate }, { template: fontSizeTemplate }, { template: textColorTemplate }, { template: alignmentTemplate }, { template: textPropertiesTemplate }, { template: colorTemplate }, { template: strokeTemplate }, { template: thicknessTemplate }, { template: opacityTemplate } ]; this.toolbar = new Tool({ items: items, width: '', height: '', overflowMode: 'Scrollable', created: function () { _this.pdfViewer.toolbarModule.annotationToolbarModule.mobileColorpicker(_this.pdfViewer.element.id + '_annotation_freeTextEdit'); } }); this.toolbar.appendTo(this.freetextToolbarElement); this.showFreeTextPropertiesTool(); }; /** * @param {string} shapeType - It describes about the shape type * @private * @returns {void} */ AnnotationToolbar.prototype.createPropertyTools = function (shapeType) { var _this = this; if (shapeType !== '') { if (this.propertyToolbar) { this.propertyToolbar.destroy(); } if (this.toolbar) { this.toolbar.destroy(); } var shapeToolbarElement = void 0; shapeToolbarElement = document.getElementById(this.pdfViewer.element.id + '_propertyToolbar'); if (shapeToolbarElement) { shapeToolbarElement.parentElement.removeChild(shapeToolbarElement); } shapeToolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_propertyToolbar', className: 'e-pv-mobile-annotation-toolbar', styles: 'bottom: 0px; position: absolute; width: 100%; float: left' }); this.pdfViewerBase.viewerMainContainer.appendChild(shapeToolbarElement); var id_1; var propertyToolbar = new Tool({ items: this.createPropertyToolbarForMobile(shapeType), width: '', height: '', overflowMode: 'Scrollable', created: function () { if (!isNullOrUndefined(_this.pdfViewer.annotationModule.textMarkupAnnotationModule) && _this.pdfViewer.annotationModule.textMarkupAnnotationModule.currentTextMarkupAnnotation) { id_1 = _this.pdfViewer.element.id + '_underlineIcon'; } else if (!isNullOrUndefined(_this.pdfViewer.selectedItems.annotations[0])) { if (_this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'FreeText') { id_1 = _this.pdfViewer.element.id + '_annotation_freeTextEdit'; } else if (_this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'Stamp' || _this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'StickyNotes' || _this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'Image') { id_1 = _this.pdfViewer.element.id + '_annotation_stamp'; } else if (_this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'HandWrittenSignature' || _this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'SignatureText') { id_1 = _this.pdfViewer.element.id + '_annotation_handwrittenSign'; } else if (_this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'SignatureImage') { id_1 = _this.pdfViewer.element.id + '_annotation_handwrittenImage'; } else if (_this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'Ink' || _this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'Path') { id_1 = _this.pdfViewer.element.id + '_annotation_inkIcon'; } else if (shapeType === 'Highlight' || shapeType === 'Underline' || shapeType === 'Strikethrough' || shapeType === 'Squiggly') { id_1 = _this.pdfViewer.element.id + '_highlightIcon'; } else { id_1 = _this.pdfViewer.element.id + '_annotation_shapesIcon'; } } else if (shapeType === 'Highlight' || shapeType === 'Underline' || shapeType === 'Strikethrough' || shapeType === 'Squiggly') { id_1 = _this.pdfViewer.element.id + '_highlightIcon'; } else { id_1 = _this.pdfViewer.element.id + '_annotation_shapesIcon'; } _this.pdfViewer.toolbarModule.annotationToolbarModule.mobileColorpicker(id_1); } }); propertyToolbar.isStringTemplate = true; propertyToolbar.appendTo(shapeToolbarElement); if (!isNullOrUndefined(this.pdfViewer.annotationModule.textMarkupAnnotationModule) && !this.pdfViewer.annotationModule.textMarkupAnnotationModule.currentTextMarkupAnnotation) { if (this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'Line' && (this.pdfViewer.lineSettings.lineHeadStartStyle === 'None' || this.pdfViewer.lineSettings.lineHeadEndStyle === 'None')) { this.enableItems(this.colorDropDownElement.parentElement, false); } if (this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'HandWrittenSignature') { var commentIcon = document.getElementById(this.pdfViewer.element.id + '_annotation_commentPanel'); this.enableItems(commentIcon.parentElement, false); } } this.showPropertyTool(propertyToolbar, id_1); } }; AnnotationToolbar.prototype.showPropertyTool = function (existingTool, id) { if (this.toolbar) { this.toolbar.destroy(); } this.propertyToolbar = existingTool; this.applyProperiesToolSettings(id); //this.propertyToolbar.element.style.display = 'block'; if (this.pdfViewer.selectedItems.annotations[0]) { var selectedAnnotation = this.pdfViewer.selectedItems.annotations[0]; if (selectedAnnotation.shapeAnnotationType !== 'SignatureText' && selectedAnnotation.shapeAnnotationType !== 'HandWrittenSignature' && selectedAnnotation.shapeAnnotationType !== 'Stamp' && selectedAnnotation.shapeAnnotationType !== 'Image' && selectedAnnotation.shapeAnnotationType !== 'Ink' && selectedAnnotation.shapeAnnotationType !== 'Path' && selectedAnnotation.shapeAnnotationType !== 'StickyNotes') { this.updateColorInIcon(this.colorDropDownElement, this.pdfViewer.selectedItems.annotations[0].fillColor); this.updateColorInIcon(this.strokeDropDownElement, this.pdfViewer.selectedItems.annotations[0].strokeColor); if (this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'FreeText') { var fontFamily = this.fontFamilyElement; fontFamily.ej2_instances[0].value = this.pdfViewer.selectedItems.annotations[0].fontFamily; var fontColor = this.fontColorElement; fontColor.children[0].style.borderBottomColor = this.pdfViewer.selectedItems.annotations[0].fontColor; this.pdfViewer.annotation.modifyTextAlignment(this.pdfViewer.selectedItems.annotations[0].textAlign); this.updateTextAlignInIcon(this.pdfViewer.selectedItems.annotations[0].textAlign); } } else { if (this.strokeDropDownElement) { this.updateColorInIcon(this.strokeDropDownElement, this.pdfViewer.selectedItems.annotations[0].strokeColor); } } } this.toolbarCreated = true; this.adjustMobileViewer(); }; AnnotationToolbar.prototype.stampToolMobileForMobile = function (args) { var _this = this; this.hideExistingTool(); if (this.stampToolbarElement) { this.stampToolbarElement.parentElement.removeChild(this.stampToolbarElement); } this.stampToolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_stampToolbar', className: 'e-pv-mobile-annotation-toolbar', styles: 'bottom: 0px; position: absolute; width: 100%; float: left' }); this.pdfViewerBase.viewerMainContainer.appendChild(this.stampToolbarElement); this.toolbar = new Tool({ items: this.createStampToolbarItemsForMobile(), width: '', height: '', overflowMode: 'Scrollable', clicked: this.onShapeToolbarClicked.bind(this), created: function () { _this.pdfViewer.toolbarModule.annotationToolbarModule.mobileColorpicker(args); } }); this.toolbar.isStringTemplate = true; this.toolbar.appendTo(this.stampToolbarElement); this.showStampPropertiesTool(); //this.afterShapeToolbarCreationForMobile(); }; AnnotationToolbar.prototype.shapeToolMobile = function (args) { var _this = this; this.hideExistingTool(); if (this.shapeToolbarElement) { this.shapeToolbarElement.parentElement.removeChild(this.shapeToolbarElement); } this.shapeToolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_shapeToolbar', className: 'e-pv-mobile-annotation-toolbar', styles: 'bottom: 0px; position: absolute; width: 100%; float: left' }); this.pdfViewerBase.viewerMainContainer.appendChild(this.shapeToolbarElement); this.toolbar = new Tool({ items: this.createShapeToolbarItemsForMobile(), width: '', height: '', overflowMode: 'Scrollable', clicked: this.onShapeToolbarClicked.bind(this), created: function () { _this.pdfViewer.toolbarModule.annotationToolbarModule.mobileColorpicker(args.originalEvent.target.id); } }); this.toolbar.isStringTemplate = true; this.toolbar.appendTo(this.shapeToolbarElement); this.afterShapeToolbarCreationForMobile(); this.showShapeTool(); }; AnnotationToolbar.prototype.calibrateToolMobile = function (args) { var _this = this; this.hideExistingTool(); if (this.calibrateToolbarElement) { this.calibrateToolbarElement.parentElement.removeChild(this.calibrateToolbarElement); } this.calibrateToolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_calibrateToolbar', className: 'e-pv-mobile-annotation-toolbar', styles: 'bottom: 0px; position: absolute; width: 100%; float: left' }); this.pdfViewerBase.viewerMainContainer.appendChild(this.calibrateToolbarElement); this.toolbar = new Tool({ items: this.createCalibrateToolbarItemsForMobile(), width: '', height: '', overflowMode: 'Scrollable', clicked: this.onCalibrateToolbarClicked.bind(this), created: function () { _this.pdfViewer.toolbarModule.annotationToolbarModule.mobileColorpicker(args.originalEvent.target.id); } }); this.toolbar.isStringTemplate = true; this.toolbar.appendTo(this.calibrateToolbarElement); this.afterCalibrateToolbarCreationForMobile(); this.showShapeTool(); }; AnnotationToolbar.prototype.textMarkupForMobile = function (args) { var _this = this; this.hideExistingTool(); if (this.textMarkupToolbarElement) { this.textMarkupToolbarElement.parentElement.removeChild(this.textMarkupToolbarElement); } this.textMarkupToolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_mobileAnnotationToolbar', className: 'e-pv-mobile-annotation-toolbar', styles: 'bottom: 0px; position: absolute; width: 100%; float: left' }); this.pdfViewerBase.viewerMainContainer.appendChild(this.textMarkupToolbarElement); var colorTemplate = this.pdfViewer.toolbarModule.annotationToolbarModule.getTemplate('span', '_annotation_color', 'e-pv-annotation-color-container'); var opacityTemplate = this.getTemplate('span', '_annotation_opacity', 'e-pv-annotation-opacity-container'); var items = [ { prefixIcon: 'e-pv-backward-icon e-pv-icon', tooltipText: this.pdfViewer.localeObj.getConstant('Go Back'), id: this.pdfViewer.element.id + '_backward', click: this.goBackToToolbar.bind(this) }, { type: 'Separator', align: 'Left', cssClass: 'e-pv-hightlight-separator-container' }, { template: colorTemplate, align: 'left' }, { template: opacityTemplate, align: 'left' } ]; this.propertyToolbar = new Tool({ items: items, width: '', height: '', overflowMode: 'Scrollable', created: function () { _this.pdfViewer.toolbarModule.annotationToolbarModule.mobileColorpicker(args.originalEvent.target.id); } }); this.propertyToolbar.isStringTemplate = true; this.propertyToolbar.appendTo(this.textMarkupToolbarElement); this.showTextMarkupPropertiesTool(); }; AnnotationToolbar.prototype.showShapeTool = function () { var annotationToolbarItems = this.pdfViewer.toolbarSettings.annotationToolbarItems; if (annotationToolbarItems) { if (annotationToolbarItems.indexOf('ColorEditTool') !== -1) { var colorIndex = this.findToolbarItemByClass('e-pv-annotation-color-container'); this.showColorEditTool(true, colorIndex, colorIndex); } else { var colorIndex = this.findToolbarItemByClass('e-pv-annotation-color-container'); this.showColorEditTool(false, colorIndex, colorIndex); } if (annotationToolbarItems.indexOf('StrokeColorEditTool') !== -1) { var strokeIndex = this.findToolbarItemByClass('e-pv-annotation-stroke-container'); this.showStrokeColorEditTool(true, strokeIndex, strokeIndex); } else { var strokeIndex = this.findToolbarItemByClass('e-pv-annotation-stroke-container'); this.showStrokeColorEditTool(false, strokeIndex, strokeIndex); } if (annotationToolbarItems.indexOf('ThicknessEditTool') !== -1) { var thicknessIndex = this.findToolbarItemByClass('e-pv-annotation-thickness-container'); this.showThicknessEditTool(true, thicknessIndex, thicknessIndex); } else { var thicknessIndex = this.findToolbarItemByClass('e-pv-annotation-thickness-container'); this.showThicknessEditTool(false, thicknessIndex, thicknessIndex); } if (annotationToolbarItems.indexOf('OpacityEditTool') !== -1) { var opacityIndex = this.findToolbarItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(true, opacityIndex, opacityIndex); } else { var opacityIndex = this.findToolbarItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(false, opacityIndex, opacityIndex); } } }; AnnotationToolbar.prototype.signatureInkForMobile = function () { var _this = this; this.hideExistingTool(); if (this.signatureInkToolbarElement) { this.signatureInkToolbarElement.parentElement.removeChild(this.signatureInkToolbarElement); } this.signatureInkToolbarElement = createElement('div', { id: this.pdfViewer.element.id + '_mobileAnnotationToolbar', className: 'e-pv-mobile-annotation-toolbar', styles: 'bottom: 0px; position: absolute; width: 100%; float: left' }); this.pdfViewerBase.viewerMainContainer.appendChild(this.signatureInkToolbarElement); var opacityTemplate = this.getTemplate('span', '_annotation_opacity', 'e-pv-annotation-opacity-container'); var strokeTemplate = this.pdfViewer.toolbarModule.annotationToolbarModule.getTemplate('span', '_annotation_stroke', 'e-pv-annotation-stroke-container'); var thicknessTemplate = this.getTemplate('span', '_annotation_thickness', 'e-pv-annotation-thickness-container'); var items = [ { prefixIcon: 'e-pv-backward-icon e-pv-icon', tooltipText: this.pdfViewer.localeObj.getConstant('Go Back'), id: this.pdfViewer.element.id + '_backward', click: this.goBackToToolbar.bind(this) }, { template: opacityTemplate, align: 'left' }, { template: strokeTemplate, aign: 'left' }, { template: thicknessTemplate, align: 'left' } ]; this.toolbar = new Tool({ items: items, width: '', height: '', overflowMode: 'Scrollable', created: function () { _this.pdfViewer.toolbarModule.annotationToolbarModule.mobileColorpicker(_this.pdfViewer.element.id + '_annotation_inkIcon'); } }); this.toolbar.isStringTemplate = true; this.toolbar.appendTo(this.signatureInkToolbarElement); }; AnnotationToolbar.prototype.hideExistingTool = function () { if (this.toolbar && !this.pdfViewer.enableDesktopMode) { this.toolbar.destroy(); } if (this.propertyToolbar && !this.pdfViewer.enableDesktopMode) { this.propertyToolbar.destroy(); } var mobileAnnotationToolbar = document.getElementById(this.pdfViewer.element.id + '_mobileAnnotationToolbar'); if (mobileAnnotationToolbar) { mobileAnnotationToolbar.style.display = 'none'; } }; AnnotationToolbar.prototype.applyProperiesToolSettings = function (type) { switch (type) { case this.pdfViewer.element.id + '_underlineIcon': case this.pdfViewer.element.id + '_highlightIcon': this.showTextMarkupPropertiesTool(); break; case this.pdfViewer.element.id + '_annotation_freeTextEdit': this.showFreeTextPropertiesTool(); break; case this.pdfViewer.element.id + '_annotation_shapesIcon': this.shapePropertiesTool(); break; case 'stampTool': case this.pdfViewer.element.id + '_annotation_stamp': this.showStampPropertiesTool(); break; case this.pdfViewer.element.id + '_annotation_handwrittenSign': case this.pdfViewer.element.id + '_annotation_inkIcon': this.showInkPropertiesTool(); break; case this.pdfViewer.element.id + '_annotation_handwrittenImage': this.showImagePropertyTool(); break; } }; AnnotationToolbar.prototype.showImagePropertyTool = function () { var annotationToolbarItems = this.pdfViewer.toolbarSettings.annotationToolbarItems; if (annotationToolbarItems) { if (annotationToolbarItems.indexOf('OpacityEditTool') !== -1) { var opacityIndex = this.findPropertyItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(true, opacityIndex, opacityIndex); } else { var opacityIndex = this.findPropertyItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(false, opacityIndex, opacityIndex); } if (annotationToolbarItems.indexOf('CommentPanelTool') !== -1) { var commentPanelIndex = this.getPropertyIndexByClassName('e-pv-comment-panel-icon-container'); this.showCommentPanelTool(true, commentPanelIndex, commentPanelIndex); } else { var commentPanelIndex = this.getPropertyIndexByClassName('e-pv-comment-panel-icon-container'); this.showCommentPanelTool(false, commentPanelIndex, commentPanelIndex); } if (annotationToolbarItems.indexOf('AnnotationDeleteTool') !== -1) { var annotationDeleteIndex = this.getPropertyIndexByClassName('e-pv-annotation-delete-container'); this.showAnnotationDeleteTool(true, annotationDeleteIndex, annotationDeleteIndex); } else { var annotationDeleteIndex = this.getPropertyIndexByClassName('e-pv-annotation-delete-container'); this.showAnnotationDeleteTool(false, annotationDeleteIndex, annotationDeleteIndex); } } }; AnnotationToolbar.prototype.showFreeTextPropertiesTool = function () { var annotationToolbarItems = this.pdfViewer.toolbarSettings.annotationToolbarItems; if (annotationToolbarItems) { if (annotationToolbarItems.indexOf('FontFamilyAnnotationTool') !== -1) { var fontFamilyIndex = this.findToolbarItemByClass('e-pv-annotation-fontname-container'); this.showFontFamilyAnnotationTool(true, fontFamilyIndex, fontFamilyIndex); } else { var fontFamilyIndex = this.findToolbarItemByClass('e-pv-annotation-fontname-container'); this.showFontFamilyAnnotationTool(false, fontFamilyIndex, fontFamilyIndex); } if (annotationToolbarItems.indexOf('FontSizeAnnotationTool') !== -1) { var fontSizeIndex = this.findToolbarItemByClass('e-pv-annotation-fontsize-container'); this.showFontSizeAnnotationTool(true, fontSizeIndex, fontSizeIndex); } else { var fontSizeIndex = this.findToolbarItemByClass('e-pv-annotation-fontsize-container'); this.showFontSizeAnnotationTool(false, fontSizeIndex, fontSizeIndex); } if (annotationToolbarItems.indexOf('FontColorAnnotationTool') !== -1) { var fontColorIndex = this.findToolbarItemByClass('e-pv-annotation-textcolor-container'); this.showFontColorAnnotationTool(true, fontColorIndex, fontColorIndex); } else { var fontColorIndex = this.findToolbarItemByClass('e-pv-annotation-textcolor-container'); this.showFontColorAnnotationTool(false, fontColorIndex, fontColorIndex); } if (annotationToolbarItems.indexOf('FontAlignAnnotationTool') !== -1) { var fontAlignIndex = this.findToolbarItemByClass('e-pv-annotation-textalign-container'); this.showFontAlignAnnotationTool(true, fontAlignIndex, fontAlignIndex); } else { var fontAlignIndex = this.findToolbarItemByClass('e-pv-annotation-textalign-container'); this.showFontAlignAnnotationTool(false, fontAlignIndex, fontAlignIndex); } if (annotationToolbarItems.indexOf('FontStylesAnnotationTool') !== -1) { var fontStylesIndex = this.findToolbarItemByClass('e-pv-annotation-textprop-container'); this.showFontStylesAnnotationTool(true, fontStylesIndex, fontStylesIndex); } else { var fontStylesIndex = this.findToolbarItemByClass('e-pv-annotation-textprop-container'); this.showFontStylesAnnotationTool(false, fontStylesIndex, fontStylesIndex); } if (annotationToolbarItems.indexOf('ColorEditTool') !== -1) { var colorIndex = this.findToolbarItemByClass('e-pv-annotation-color-container'); this.showColorEditTool(true, colorIndex, colorIndex); } else { var colorIndex = this.findToolbarItemByClass('e-pv-annotation-color-container'); this.showColorEditTool(false, colorIndex, colorIndex); } if (annotationToolbarItems.indexOf('StrokeColorEditTool') !== -1) { var strokeIndex = this.findToolbarItemByClass('e-pv-annotation-stroke-container'); this.showStrokeColorEditTool(true, strokeIndex, strokeIndex); } else { var strokeIndex = this.findToolbarItemByClass('e-pv-annotation-stroke-container'); this.showStrokeColorEditTool(false, strokeIndex, strokeIndex); } if (annotationToolbarItems.indexOf('ThicknessEditTool') !== -1) { var thicknessIndex = this.findToolbarItemByClass('e-pv-annotation-thickness-container'); this.showThicknessEditTool(true, thicknessIndex, thicknessIndex); } else { var thicknessIndex = this.findToolbarItemByClass('e-pv-annotation-thickness-container'); this.showThicknessEditTool(false, thicknessIndex, thicknessIndex); } if (annotationToolbarItems.indexOf('OpacityEditTool') !== -1) { var opacityIndex = this.findToolbarItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(true, opacityIndex, opacityIndex); } else { var opacityIndex = this.findToolbarItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(false, opacityIndex, opacityIndex); } if (annotationToolbarItems.indexOf('CommentPanelTool') !== -1) { var commentPanelIndex = this.getIndexByClassName('e-pv-comment-panel-icon-container'); this.showCommentPanelTool(true, commentPanelIndex, commentPanelIndex); } else { var commentPanelIndex = this.getIndexByClassName('e-pv-comment-panel-icon-container'); this.showCommentPanelTool(false, commentPanelIndex, commentPanelIndex); } if (annotationToolbarItems.indexOf('AnnotationDeleteTool') !== -1) { var annotationDeleteIndex = this.getIndexByClassName('e-pv-annotation-delete-container'); this.showAnnotationDeleteTool(true, annotationDeleteIndex, annotationDeleteIndex); } else { var annotationDeleteIndex = this.getIndexByClassName('e-pv-annotation-delete-container'); this.showAnnotationDeleteTool(false, annotationDeleteIndex, annotationDeleteIndex); } if (annotationToolbarItems.indexOf('FreeTextAnnotationTool') !== -1) { var freeTextIndex = this.getIndexByClassName('e-pv-annotation-freetextedit-container'); this.showFreeTextAnnotationTool(true, freeTextIndex, freeTextIndex); } else { var freeTextIndex = this.getIndexByClassName('e-pv-annotation-freetextedit-container'); this.showFreeTextAnnotationTool(false, freeTextIndex, freeTextIndex); this.applyHideToToolbar(false, freeTextIndex + 1, freeTextIndex + 1); } } }; AnnotationToolbar.prototype.shapePropertiesTool = function () { var annotationToolbarItems = this.pdfViewer.toolbarSettings.annotationToolbarItems; if (annotationToolbarItems) { if (annotationToolbarItems.indexOf('ColorEditTool') !== -1) { if (!(this.pdfViewer.selectedItems.annotations[0].shapeAnnotationType === 'Line' && (this.pdfViewer.lineSettings.lineHeadStartStyle === 'None' || this.pdfViewer.lineSettings.lineHeadEndStyle === 'None'))) { var colorIndex = this.findPropertyItemByClass('e-pv-annotation-color-container'); this.showColorEditTool(true, colorIndex, colorIndex); } else { var colorIndex = this.findPropertyItemByClass('e-pv-annotation-color-container'); this.showColorEditTool(false, colorIndex, colorIndex); } } else { var colorIndex = this.findPropertyItemByClass('e-pv-annotation-color-container'); this.showColorEditTool(false, colorIndex, colorIndex); } if (annotationToolbarItems.indexOf('StrokeColorEditTool') !== -1) { var strokeIndex = this.findPropertyItemByClass('e-pv-annotation-stroke-container'); this.showStrokeColorEditTool(true, strokeIndex, strokeIndex); } else { var strokeIndex = this.findPropertyItemByClass('e-pv-annotation-stroke-container'); this.showStrokeColorEditTool(false, strokeIndex, strokeIndex); } if (annotationToolbarItems.indexOf('ThicknessEditTool') !== -1) { var thicknessIndex = this.findPropertyItemByClass('e-pv-annotation-thickness-container'); this.showThicknessEditTool(true, thicknessIndex, thicknessIndex); } else { var thicknessIndex = this.findPropertyItemByClass('e-pv-annotation-thickness-container'); this.showThicknessEditTool(false, thicknessIndex, thicknessIndex); } if (annotationToolbarItems.indexOf('OpacityEditTool') !== -1) { var opacityIndex = this.findPropertyItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(true, opacityIndex, opacityIndex); } else { var opacityIndex = this.findPropertyItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(false, opacityIndex, opacityIndex); } if (annotationToolbarItems.indexOf('CommentPanelTool') !== -1) { var commentPanelIndex = this.getPropertyIndexByClassName('e-pv-comment-panel-icon-container'); this.showCommentPanelTool(true, commentPanelIndex, commentPanelIndex); } else { var commentPanelIndex = this.getPropertyIndexByClassName('e-pv-comment-panel-icon-container'); this.showCommentPanelTool(false, commentPanelIndex, commentPanelIndex); } if (annotationToolbarItems.indexOf('AnnotationDeleteTool') !== -1) { var annotationDeleteIndex = this.getPropertyIndexByClassName('e-pv-annotation-delete-container'); this.showAnnotationDeleteTool(true, annotationDeleteIndex, annotationDeleteIndex); } else { var annotationDeleteIndex = this.getPropertyIndexByClassName('e-pv-annotation-delete-container'); this.showAnnotationDeleteTool(false, annotationDeleteIndex, annotationDeleteIndex); } if (annotationToolbarItems.indexOf('ShapeTool') !== -1) { var shapeIndex = this.getPropertyIndexByPrefixIcon('e-pv-shape-line-icon e-pv-icon'); this.showShapeAnnotationTool(true, shapeIndex, shapeIndex); } else { var shapeIndex = this.getPropertyIndexByPrefixIcon('e-pv-shape-line-icon e-pv-icon'); this.showShapeAnnotationTool(false, shapeIndex, shapeIndex); this.applyHideToToolbar(false, shapeIndex + 1, shapeIndex + 1); } } }; AnnotationToolbar.prototype.showStampPropertiesTool = function () { var annotationToolbarItems = this.pdfViewer.toolbarSettings.annotationToolbarItems; if (annotationToolbarItems) { if (annotationToolbarItems.indexOf('OpacityEditTool') !== -1) { var opacityIndex = this.findToolbarItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(true, opacityIndex, opacityIndex); } else { var opacityIndex = this.findToolbarItemByClass('e-pv-annotation-opacity-container'); this.showOpacityEditTool(false, opacityIndex, opacityIndex); } if (annotationToolba