@syncfusion/ej2-pdfviewer
Version:
Essential JS 2 PDF viewer Component
385 lines (384 loc) • 20.1 kB
JavaScript
import { createElement, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
import { Toolbar } from '@syncfusion/ej2-navigations';
import { CheckBox } from '@syncfusion/ej2-buttons';
import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
import { importDocUnWireEvent, importDocWireEvent, onSelectAllClick } from './organize-event-handler';
import { createPageZoomSlider, pageZoomSliderWireEvents, pageZoomWireEvents } from './slider-zoomaction';
import { getCopiedItems, getImportedItems, openContextMenu } from './organize-contextmenu';
import { renderThumbnailImage } from './organize-thumbnail';
import { updateTileButtons } from './tile-interaction';
import { bindImportDocEvent } from './organize-importaction';
import { onToolbarCopyButtonClick, onToolbarDeleteButtonClick, onToolbarLeftButtonClick, onToolbarRightButtonClick } from './organizepages-editor';
import { createTooltip } from './organize-initialization';
import { addExtractionIcon, onToolbarExtractButtonClick } from './organize-extract';
/**
* @private
* @returns {any} - It's describe about organize window container.
*/
export function createContentArea() {
var _this = this;
var elementID = this.pdfViewer.element.id;
var contentDiv = createElement('div', { id: elementID + '_content_appearance', className: 'e-pv-organize-content-apperance' });
var toolbarDiv = createElement('div', { id: elementID + '_toolbar_appearance', className: 'e-pv-organize-toolbar-apperance' });
this.tileAreaWrapper = createElement('div', { id: this.pdfViewer.element.id + '_organize_tile_view_wrapper', className: 'e-pv-organize-tile-view-wrapper' });
this.tileAreaDiv = createElement('div', { id: this.pdfViewer.element.id + '_organize_tile_view', className: 'e-pv-organize-tile-view e-pv-thumbnail-row' });
this.tileAreaWrapper.style.width = '100%';
this.tileAreaWrapper.style.height = 'calc(100% - 48px)';
this.tileAreaWrapper.style.position = 'relative';
contentDiv.style.width = '100%';
contentDiv.style.height = '100%';
toolbarDiv.style.height = '48px';
this.tileAreaDiv.style.height = '100%';
this.selectAllCheckBox = new CheckBox({ label: Browser.isDevice && !this.pdfViewer.enableDesktopMode ? '' : this.pdfViewer.localeObj.getConstant('Select All'), cssClass: 'e-pv-organize-select-all', checked: false, change: onSelectAllClick.bind(this) });
var toolbarItems = [];
var toolbarItemsForDesktop = [
{ type: 'Input', template: this.selectAllCheckBox, id: 'selectAllCheckbox', align: 'Left' },
{ type: 'Separator', align: 'Left' },
{
prefixIcon: 'e-pv-undo-icon e-pv-icon', visible: true, cssClass: 'e-pv-undo-container', id: this.pdfViewer.element.id + '_undo_organize_Pages', align: 'Left', click: function (args) {
_this.undo();
}
},
{
prefixIcon: 'e-pv-redo-icon e-pv-icon', visible: true, cssClass: 'e-pv-redo-container', id: this.pdfViewer.element.id + '_redo_organize_Pages', align: 'Left', click: function (args) {
_this.redo();
}
},
{
prefixIcon: 'e-pv-rotate-left-icon e-pv-icon', visible: true, cssClass: 'e-pv-toolbar-rotate-left', id: this.pdfViewer.element.id + '_rotate_page_left', align: 'Center', click: function (args) {
onToolbarLeftButtonClick.call(_this);
}
},
{
prefixIcon: 'e-pv-rotate-right-icon e-pv-icon', visible: true, cssClass: 'e-pv-toolbar-rotate-right', id: this.pdfViewer.element.id + '_rotate_page_right', align: 'Center', click: function (args) {
onToolbarRightButtonClick.call(_this);
}
},
{ type: 'Separator', align: 'Center' },
{
prefixIcon: 'e-pv-copy-icon e-pv-icon', visible: true, cssClass: 'e-pv-toolbar-rotate-right', id: this.pdfViewer.element.id + '_copy_page', align: 'Center', click: function (args) {
onToolbarCopyButtonClick.call(_this);
}
},
{ type: 'Separator', align: 'Center' },
{
prefixIcon: 'e-pv-delete-icon e-pv-icon', visible: true, cssClass: 'e-pv-delete-selected', id: this.pdfViewer.element.id + '_delete_selected', align: 'Center', click: function (args) {
onToolbarDeleteButtonClick.call(_this);
}
},
{ type: 'Separator', align: 'Center', visible: this.pdfViewerBase.clientSideRendering },
{
prefixIcon: 'e-pv-extract-page-icon e-pv-icon', visible: this.pdfViewerBase.clientSideRendering, cssClass: 'e-pv-extract-pages', id: this.pdfViewer.element.id + '_extract_pages', align: 'Center', click: function (args) {
onToolbarExtractButtonClick.call(_this);
}
},
{
prefixIcon: 'e-pv-import-icon e-pv-icon', text: this.pdfViewer.localeObj.getConstant('Import Document'), visible: true, cssClass: 'e-pv-import-pages', id: this.pdfViewer.element.id + '_import_pages', align: 'Right', click: function (args) {
bindImportDocEvent.call(_this);
}
}
];
if (this.pdfViewer.pageOrganizerSettings.showImageZoomingSlider) {
addPageZoomDropDown.call(this, true, toolbarItemsForDesktop);
}
if (!this.pdfViewer.pageOrganizerSettings.showExtractPagesOption) {
addExtractionIcon.call(this, true, toolbarItemsForDesktop);
}
var toolbarItemsForMobile = [
{ type: 'Input', template: this.selectAllCheckBox, id: 'selectAllCheckbox', align: 'Left' },
{ type: 'Separator', align: 'Left' },
{
prefixIcon: 'e-pv-undo-icon e-pv-icon', visible: true, cssClass: 'e-pv-undo-container', id: this.pdfViewer.element.id + '_undo_organize_Pages', align: 'Left', click: function (args) {
_this.undo();
}
},
{
prefixIcon: 'e-pv-redo-icon e-pv-icon', visible: true, cssClass: 'e-pv-redo-container', id: this.pdfViewer.element.id + '_redo_organize_Pages', align: 'Left', click: function (args) {
_this.redo();
}
},
{
prefixIcon: 'e-pv-rotate-left-icon e-pv-icon', visible: true, cssClass: 'e-pv-toolbar-rotate-left', id: this.pdfViewer.element.id + '_rotate_page_left', align: 'Right', click: function (args) {
onToolbarLeftButtonClick.call(_this);
}
},
{
prefixIcon: 'e-pv-rotate-right-icon e-pv-icon', visible: true, cssClass: 'e-pv-toolbar-rotate-right', id: this.pdfViewer.element.id + '_rotate_page_right', align: 'Right', click: function (args) {
onToolbarRightButtonClick.call(_this);
}
},
{
prefixIcon: 'e-pv-delete-icon e-pv-icon', visible: true, cssClass: 'e-pv-delete-selected', id: this.pdfViewer.element.id + '_delete_selected', align: 'Right', click: function (args) {
onToolbarDeleteButtonClick.call(_this);
}
},
{
prefixIcon: 'e-pv-extract-page-icon e-pv-icon', visible: this.pdfViewerBase.clientSideRendering, cssClass: 'e-pv-extract-pages', id: this.pdfViewer.element.id + '_extract_pages', align: 'Right', click: function (args) {
onToolbarExtractButtonClick.call(_this);
}
},
{ type: 'Separator', align: 'Right' },
{
prefixIcon: 'e-pv-more-icon e-pv-icon', visible: true, cssClass: 'e-pv-toolbar-rotate-right', id: this.pdfViewer.element.id + '_organize_more_button', align: 'Right',
click: openContextMenu.bind(this)
}
];
addPageZoomDropDown.call(this, true, toolbarItemsForMobile);
if (Browser.isDevice && !this.pdfViewer.enableDesktopMode) {
toolbarItems.push.apply(toolbarItems, toolbarItemsForMobile);
}
else {
toolbarItems.push.apply(toolbarItems, toolbarItemsForDesktop);
}
this.toolbar = new Toolbar({
items: toolbarItems
});
this.toolbar.cssClass = 'e-pv-organize-toolbar';
this.toolbar.height = '48px';
this.toolbar.width = 'auto';
if (Browser.isDevice && !this.pdfViewer.enableDesktopMode) {
this.toolbar.overflowMode = 'Popup';
}
this.toolbar.appendTo(toolbarDiv);
contentDiv.appendChild(toolbarDiv);
renderThumbnailImage.call(this);
this.tileAreaWrapper.appendChild(this.tileAreaDiv);
contentDiv.appendChild(this.tileAreaWrapper);
createImportDocElement.call(this, toolbarDiv);
importDocWireEvent.call(this);
var rotateRightToolbarButton = toolbarDiv.querySelector('#' + this.pdfViewer.element.id + '_rotate_page_right');
if (!isNullOrUndefined(rotateRightToolbarButton)) {
createTooltip.call(this, rotateRightToolbarButton, this.pdfViewer.localeObj.getConstant('Rotate Right'));
}
var rotateLeftToolbarButton = toolbarDiv.querySelector('#' + this.pdfViewer.element.id + '_rotate_page_left');
if (!isNullOrUndefined(rotateLeftToolbarButton)) {
createTooltip.call(this, rotateLeftToolbarButton, this.pdfViewer.localeObj.getConstant('Rotate Left'));
}
var copyToolbarButton = toolbarDiv.querySelector('#' + this.pdfViewer.element.id + '_copy_page');
if (!isNullOrUndefined(copyToolbarButton)) {
createTooltip.call(this, copyToolbarButton, this.pdfViewer.localeObj.getConstant('Copy Pages'));
}
var deleteToolbarButton = toolbarDiv.querySelector('#' + this.pdfViewer.element.id + '_delete_selected');
if (!isNullOrUndefined(deleteToolbarButton)) {
createTooltip.call(this, deleteToolbarButton, this.pdfViewer.localeObj.getConstant('Delete Pages'));
}
var undoToolbarButton = toolbarDiv.querySelector('#' + this.pdfViewer.element.id + '_undo_organize_Pages');
if (!isNullOrUndefined(undoToolbarButton)) {
createTooltip.call(this, undoToolbarButton, this.pdfViewer.localeObj.getConstant('Undo'));
}
var redoToolbarButton = toolbarDiv.querySelector('#' + this.pdfViewer.element.id + '_redo_organize_Pages');
if (!isNullOrUndefined(redoToolbarButton)) {
createTooltip.call(this, redoToolbarButton, this.pdfViewer.localeObj.getConstant('Redo'));
}
var ExtractPagesButton = toolbarDiv.querySelector('#' + this.pdfViewer.element.id + '_extract_pages');
if (!isNullOrUndefined(ExtractPagesButton)) {
createTooltip.call(this, ExtractPagesButton, this.pdfViewer.localeObj.getConstant('Extract Pages'));
}
return contentDiv;
}
/**
* @private
* @param {boolean} isInitialCreation - It's describe about is initial creation or not.
* @param {ItemModel[]} toolbarItems - It's describe about toolbar items.
* @returns {void}
*/
export function addPageZoomDropDown(isInitialCreation, toolbarItems) {
var _this = this;
if (isInitialCreation) {
if (Browser.isDevice && !this.pdfViewer.enableDesktopMode) {
var insertIndex = toolbarItems.findIndex(function (item) { return item.id === _this.pdfViewer.element.id + '_organize_more_button'; });
toolbarItems.splice(insertIndex - 1, 0,
// eslint-disable-next-line @typescript-eslint/indent
{ visible: this.pdfViewer.pageOrganizerSettings.showImageZoomingSlider, cssClass: 'e-pv-page-zoom', id: this.pdfViewer.element.id + '_page_zoom', align: 'Right' });
}
else {
var insertIndex = toolbarItems.findIndex(function (item) { return item.cssClass === 'e-pv-import-pages'; });
toolbarItems.splice(insertIndex, 0, { type: 'Separator', align: 'Center' },
// eslint-disable-next-line @typescript-eslint/indent
{ visible: true, cssClass: 'e-pv-page-zoom', id: this.pdfViewer.element.id + '_page_zoom', align: 'Center' });
}
}
else {
if (Browser.isDevice && !this.pdfViewer.enableDesktopMode) {
var insertIndex = this.toolbar.items.findIndex(function (item) { return item.id === _this.pdfViewer.element.id + '_page_zoom'; });
if (insertIndex !== -1) {
this.toolbar.hideItem(this.pdfViewerBase.getElement('_page_zoom').parentElement, false);
}
}
else {
var insertIndex = this.toolbar.items.findIndex(function (item) { return item.cssClass === 'e-pv-import-pages'; });
if (this.toolbar.items[insertIndex - 1].type !== 'Separator') {
this.toolbar.addItems([{ type: 'Separator', align: 'Center' },
{ visible: true, cssClass: 'e-pv-page-zoom', id: this.pdfViewer.element.id + '_page_zoom', align: 'Center' }], insertIndex);
}
else {
this.toolbar
.addItems([{ visible: true, cssClass: 'e-pv-page-zoom', id: this.pdfViewer.element.id + '_page_zoom', align: 'Center' }], insertIndex);
}
}
// Removes the margin left or margin right property of center group in page organizer toolbar
this.toolbar.element.children[0].children[1].removeAttribute('style');
}
}
/**
* @private
* @returns {void}
*/
export function createPageZoomDropDown() {
this.pageZoomElement = this.pdfViewerBase.getElement('_page_zoom');
this.pageZoomContainer = createPageZoomSlider.call(this, this.pageZoomElement.id);
var dropDownButton = new DropDownButton({ iconCss: 'e-pv-page-zoom-icon' + ' e-pv-icon e-icons', target: this.pageZoomContainer });
if (this.pdfViewer.enableRtl) {
dropDownButton.enableRtl = true;
}
dropDownButton.appendTo(this.pageZoomElement);
createTooltip.call(this, this.pageZoomElement, this.pdfViewer.localeObj.getConstant('Change Page Zoom'));
this.pageZoomElement.setAttribute('aria-label', this.pdfViewer.localeObj.getConstant('Change Page Zoom'));
this.pageZoomDropDown = dropDownButton;
pageZoomWireEvents.call(this);
pageZoomSliderWireEvents.call(this);
}
/**
* @private
* @param {HTMLElement} element - It's describe about element
* @returns {void}
*/
export function shrinkElement(element) {
var pdfViewerRect = this.pdfViewer.element.getBoundingClientRect();
var actualWidth = element.clientWidth;
var decreasePercent = (actualWidth - pdfViewerRect.width) / actualWidth;
var newHeight = element.clientHeight * (1 - decreasePercent);
var newWidth = actualWidth * (1 - decreasePercent);
element.style.width = newWidth + 'px';
element.style.height = newHeight + 'px';
}
/**
* @private
* @param {HTMLElement} toolbarElement - It's describe about toolbar element
* @returns {void}
*/
export function createImportDocElement(toolbarElement) {
if (this.pdfViewer.pageOrganizerSettings.canImport) {
if (toolbarElement) {
this.importDocInputElement = createElement('input', { id: this.pdfViewer.element.id + '_importDocElement', styles: 'position:fixed; left:-100em', attrs: { 'type': 'file' } });
this.importDocInputElement.setAttribute('accept', '.pdf');
this.importDocInputElement.setAttribute('aria-label', 'import document element');
this.importDocInputElement.setAttribute('tabindex', '-1');
toolbarElement.appendChild(this.importDocInputElement);
}
}
else {
if (!isNullOrUndefined(this.importDocInputElement)) {
if (this.importDocInputElement.parentElement && this.importDocInputElement.parentElement === toolbarElement) {
toolbarElement.removeChild(this.importDocInputElement);
}
this.importDocInputElement = null;
}
}
}
/**
* @private
* @returns {void}
*/
export function enableDisableToolbarItems() {
var _this = this;
var isCopyDisabled = false;
var isCopyRotateDisabled = false;
if (!isNullOrUndefined(this.toolbar)) {
this.toolbar.items.forEach(function (item) {
if (item.id === _this.pdfViewer.element.id + '_rotate_page_left') {
enableToolbarItem.call(_this, item.id, ((_this.selectAllCheckBox.checked || _this.selectAllCheckBox.indeterminate) &&
_this.pdfViewer.pageOrganizerSettings.canRotate) && !getImportedItems.call(_this, isCopyRotateDisabled));
}
else if (item.id === _this.pdfViewer.element.id + '_rotate_page_right') {
enableToolbarItem.call(_this, item.id, ((_this.selectAllCheckBox.checked || _this.selectAllCheckBox.indeterminate) &&
_this.pdfViewer.pageOrganizerSettings.canRotate) && !getImportedItems.call(_this, isCopyRotateDisabled));
}
else if (item.id === _this.pdfViewer.element.id + '_copy_page') {
enableToolbarItem.call(_this, item.id, ((_this.selectAllCheckBox.checked || _this.selectAllCheckBox.indeterminate)
&& _this.pdfViewer.pageOrganizerSettings.canCopy && !getCopiedItems.call(_this, isCopyDisabled) &&
!getImportedItems.call(_this, isCopyRotateDisabled)));
}
else if (item.id === _this.pdfViewer.element.id + '_delete_selected') {
enableToolbarItem.call(_this, item.id, _this.selectAllCheckBox.indeterminate &&
_this.pdfViewer.pageOrganizerSettings.canDelete);
}
else if (item.id === _this.pdfViewer.element.id + '_import_pages') {
enableToolbarItem.call(_this, item.id, _this.pdfViewer.pageOrganizerSettings.canImport);
}
else if (item.id === _this.pdfViewer.element.id + '_extract_pages') {
enableToolbarItem.call(_this, item.id, _this.pdfViewer.pageOrganizerSettings.canExtractPages &&
_this.pdfViewerBase.clientSideRendering);
}
});
}
}
/**
* @private
* @param {string} elementID - It's describe about toolbar element id.
* @param {boolean} isEnable - It's describe about enable or disable the toolbar item.
* @returns {void}
*/
export function enableToolbarItem(elementID, isEnable) {
var element = document.getElementById(elementID);
if (!isNullOrUndefined(element) && !isNullOrUndefined(element.parentElement)) {
this.toolbar.enableItems(element.parentElement, isEnable);
element.setAttribute('tabindex', isEnable ? '0' : '-1');
element.setAttribute('data-tabindex', isEnable ? '0' : '-1');
}
}
/**
* @private
* @returns {void}
*/
export function updateSelectAllCheckbox() {
var totalCheckboxCount = this.tileAreaDiv.childElementCount;
this.totalCheckedCount = this.tileAreaDiv.querySelectorAll('.e-pv-organize-node-selection-ring').length;
if (this.selectAllCheckBox) {
if (this.totalCheckedCount === 0) {
this.selectAllCheckBox.indeterminate = false;
this.selectAllCheckBox.checked = false;
}
else if (totalCheckboxCount === this.totalCheckedCount) {
this.selectAllCheckBox.indeterminate = false;
this.selectAllCheckBox.checked = true;
}
else {
this.selectAllCheckBox.indeterminate = true;
}
}
}
/**
* @private
* @param {TooltipEventArgs} args - It's describe about event.
* @returns {void}
*/
export function onTooltipBeforeOpen(args) {
if (!this.pdfViewer.toolbarSettings.showTooltip || args.target.disabled) {
args.cancel = true;
}
}
/**
* @private
* @param {string} property - It's describe about toolbar item.
* @returns {void}
*/
export function updateToolbarItemState(property) {
if (!isNullOrUndefined(property)) {
if (property === 'canImport') {
if (this.pdfViewer.pageOrganizerSettings.canImport) {
createImportDocElement.call(this, this.pdfViewerBase.getElement('_toolbar_appearance'));
importDocWireEvent.call(this);
}
else {
importDocUnWireEvent.call(this);
createImportDocElement.call(this, this.pdfViewerBase.getElement('_toolbar_appearance'));
}
}
enableDisableToolbarItems.call(this);
}
else {
enableDisableToolbarItems.call(this);
}
updateTileButtons.call(this);
}