@syncfusion/ej2-pdfviewer
Version:
Essential JS 2 PDF viewer Component
431 lines (430 loc) • 24.6 kB
JavaScript
import { OrganizeDetails } from '../organize-pdf';
import { createElement, Browser, isNullOrUndefined, Draggable, Droppable } from '@syncfusion/ej2-base';
import { enableDisableToolbarItems, updateSelectAllCheckbox } from './organize-toolbar';
import { disableTileCopyButton, disableTileDeleteButton } from './tile-interaction';
import { getNextSubIndex, getRotatedAngle, processRotation } from './organize-math-utils';
import { clonedCollection } from './organize-undoredoutils';
import { updatePageNumber, updateTotalPageCount } from './organize-initialization';
import { inputTextboxUpdate } from './organize-extract';
/**
* @private
* @param {PdfPageRotateAngle} pageRotateAngle - It's describe about page rotation.
* @returns { void }
*/
export function rotateAllPages(pageRotateAngle) {
if (this.pdfViewer.pageOrganizerSettings.canRotate) {
var rotateAngle = pageRotateAngle;
// Get the total page count
var totalPages = this.pdfViewer.pageCount;
// Generate an array of page indexes
var pageIndexes = Array.from({ length: totalPages }, function (_, index) { return index; });
processRotation.call(this, pageIndexes, rotateAngle);
}
}
/**
* @private
* @returns { void }
*/
export function movePages() {
var _this = this;
// eslint-disable-next-line
var proxy = this;
var draggableElement = this.imageContainer;
this.dragObj = new Draggable(draggableElement, {
dragArea: this.tileAreaDiv,
isDragScroll: true,
enableTapHold: true,
tapHoldThreshold: Browser.isDevice ? 50 : 750,
helper: function (e) {
if (_this.pdfViewer.pageOrganizerSettings.canRearrange) {
// Return a clone or another element as the drag avatar
var cloneTargetEle = e.element.querySelector('.e-pv-organize-image, .e-pv-organize-import-image-wrapper');
var clone = cloneTargetEle.cloneNode(true);
clone.style.width = cloneTargetEle.clientWidth + 'px';
clone.style.height = cloneTargetEle.clientHeight + 'px';
_this.virtualEle = createElement('div', { className: 'e-pv-virtual-image-container' });
_this.virtualEle.appendChild(clone);
_this.tileAreaWrapper.appendChild(_this.virtualEle);
return _this.virtualEle;
}
return null;
},
drag: function (e) {
e.event.preventDefault();
if (proxy.pdfViewer.pageOrganizerSettings.canRearrange) {
proxy.autoScroll(e);
proxy.addSelectionRingStyle();
var mainTileElement = !isNullOrUndefined(e.target) && e.target instanceof Element ? e.target.closest('.e-pv-organize-anchor-node') : null;
if (!isNullOrUndefined(mainTileElement)) {
var pageOrder = parseInt(mainTileElement.getAttribute('data-page-order'), 10);
proxy.dragHoveredIndex = pageOrder;
var tileRect = mainTileElement.getBoundingClientRect();
var outerBorder = document.querySelector('.e-pv-organize-outer-border');
// If the outerBorder does not exist's, creating it
if (isNullOrUndefined(outerBorder)) {
outerBorder = createElement('div', { className: 'e-pv-organize-outer-border' });
proxy.tileAreaWrapper.appendChild(outerBorder);
}
outerBorder.style.display = 'block';
var isHoveredOnSelected = proxy.isHoveredOnSelectedPages(proxy.selectedPageIndexes, proxy.dragHoveredIndex);
if (isHoveredOnSelected && !isNullOrUndefined(e.target) && (e.target.classList.contains('e-pv-organize-image') || e.target.classList.contains('e-pv-organize-import-image-wrapper') || e.target.classList.contains('e-pv-image-container'))) {
outerBorder.classList.add('e-pv-selected');
outerBorder.classList.remove('e-pv-not-selected');
}
else if (!isNullOrUndefined(e.target) && (e.target.classList.contains('e-pv-organize-image') || e.target.classList.contains('e-pv-organize-import-image-wrapper') || e.target.classList.contains('e-pv-image-container'))) {
outerBorder.classList.add('e-pv-not-selected');
outerBorder.classList.remove('e-pv-selected');
}
proxy.handlePageMove(e, tileRect, proxy.gapBetweenDivs, outerBorder);
}
}
},
dragStart: function (e) {
proxy.selectedPageIndexes = [];
if (proxy.pdfViewer.pageOrganizerSettings.canRearrange) {
if (e.element.parentElement.querySelector('.e-pv-organize-tile-checkbox').checked) {
var checkedElements = proxy.tileAreaDiv.querySelectorAll('.e-pv-organize-node-selection-ring');
for (var i = 0; i < checkedElements.length; i++) {
proxy.selectedPageIndexes.push(parseInt(checkedElements[parseInt(i.toString(), 10)].getAttribute('data-page-order'), 10));
checkedElements[parseInt(i.toString(), 10)].classList.add('e-pv-organize-tile-draggedEle');
var imageElement = checkedElements[parseInt(i.toString(), 10)].querySelector('.e-pv-organize-image, .e-pv-organize-import-image-wrapper');
if (imageElement) {
imageElement.classList.add('e-pv-organize-tile-draggedEle');
}
}
}
else {
var anchorElement = e.element.closest('.e-pv-organize-anchor-node');
if (anchorElement) {
proxy.selectedPageIndexes.push(parseInt(anchorElement.getAttribute('data-page-order'), 10));
anchorElement.classList.add('e-pv-organize-tile-draggedEle');
var imageElement = anchorElement.querySelector('.e-pv-organize-image, .e-pv-organize-import-image-wrapper');
if (imageElement) {
imageElement.classList.add('e-pv-organize-tile-draggedEle');
}
}
}
var notification = createElement('span', {
className: 'e-badge e-badge-primary e-badge-overlap e-badge-notification',
innerHTML: '' + _this.selectedPageIndexes.length
});
notification.classList.add('e-pv-notification');
proxy.virtualEle.append(notification);
proxy.addSelectionRingStyle();
}
},
dragStop: function (e) {
var clearDraggedElements = function () {
proxy.virtualEle.parentNode.removeChild(proxy.virtualEle);
var draggedElements = proxy.tileAreaDiv.querySelectorAll('.e-pv-organize-tile-draggedEle');
draggedElements.forEach(function (element) {
element.classList.remove('e-pv-organize-tile-draggedEle');
});
var outerBorder = document.querySelector('.e-pv-organize-outer-border');
if (!isNullOrUndefined(outerBorder)) {
outerBorder.classList.remove('e-pv-selected', 'e-pv-not-selected');
proxy.selectedPageIndexes = [];
}
};
if (proxy.autoScrollInterval !== null) {
clearInterval(proxy.autoScrollInterval);
proxy.autoScrollInterval = null;
}
proxy.removeSelectionRingStyle();
if (e.target instanceof Element && e.target.classList) {
if (e.target == null || !(e.target.classList.contains('e-pv-organize-image') || e.target.classList.contains('e-pv-organize-import-image-wrapper') || e.target.classList.contains('e-pv-image-container'))) {
clearDraggedElements();
}
}
else {
clearDraggedElements();
}
}
});
var droppableElement = this.thumbnail;
this.dropObj = new Droppable(droppableElement, {
drop: function (e) {
if (proxy.autoScrollInterval !== null) {
clearInterval(proxy.autoScrollInterval);
proxy.autoScrollInterval = null;
}
proxy.removeSelectionRingStyle();
var outerBorder = document.querySelector('.e-pv-organize-outer-border');
// Remove the element from the DOM
if (outerBorder) {
outerBorder.classList.remove('e-pv-selected', 'e-pv-not-selected');
outerBorder.parentNode.removeChild(outerBorder);
}
if (proxy.virtualEle && proxy.virtualEle.parentNode) {
proxy.virtualEle.parentNode.removeChild(proxy.virtualEle);
proxy.virtualEle = null;
}
proxy.pageDragDrop(e);
var draggedElements = proxy.tileAreaDiv.querySelectorAll('.e-pv-organize-tile-draggedEle');
draggedElements.forEach(function (element) {
element.classList.remove('e-pv-organize-tile-draggedEle');
});
proxy.selectedPageIndexes = [];
},
// eslint-disable-next-line @typescript-eslint/no-empty-function
over: function (e) {
},
out: function (e) {
var outerBorder = document.querySelector('.e-pv-organize-outer-border');
if (!isNullOrUndefined(outerBorder)) {
outerBorder.classList.remove('e-pv-selected', 'e-pv-not-selected');
}
}
});
}
/**
* @private
* @param {MouseEvent} event - It's describe about event.
* @returns { void }
*/
export function insertRightButtonClick(event) {
if (this.pdfViewer.pageOrganizerSettings.canInsert) {
var insertRightButton = event.currentTarget;
var buttonId = insertRightButton.id.split('_insert_page_')[insertRightButton.id.split('_insert_page_').length - 1];
var mainTileElement = insertRightButton.closest('.e-pv-organize-anchor-node');
var pageOrder_1 = parseInt(mainTileElement.getAttribute('data-page-order'), 10);
var buttonIdlist = buttonId.split('_');
var subIndex = 0;
var buttonIndex = parseInt(buttonIdlist[parseInt((buttonIdlist.length - 1).toString(), 10)], 10);
if (buttonIdlist.length > 1) {
buttonIndex = parseInt(buttonIdlist[parseInt((buttonIdlist.length - 2).toString(), 10)], 10);
}
subIndex = getNextSubIndex.call(this, mainTileElement.parentElement, buttonIndex);
insertTempPage.call(this, pageOrder_1, false, mainTileElement);
this.tileImageRender(buttonIndex, subIndex, pageOrder_1 + 1, mainTileElement, true, false, true);
updateTotalPageCount.call(this);
updatePageNumber.call(this);
disableTileDeleteButton.call(this);
disableTileCopyButton.call(this);
updateSelectAllCheckbox.call(this);
enableDisableToolbarItems.call(this);
var clonedCollections = [];
clonedCollections.push(clonedCollection.call(this, this.tempOrganizePagesCollection.
find(function (item) { return item.currentPageIndex === (pageOrder_1 + 1); })));
this.addOrganizeAction(clonedCollections, 'Insert Right', [], [], null, false);
}
}
/**
* @private
* @param {MouseEvent} event - It's describe about event.
* @returns { void }
*/
export function insertLeftButtonClick(event) {
if (this.pdfViewer.pageOrganizerSettings.canInsert) {
var insetLeftButton = event.currentTarget;
var buttonId = insetLeftButton.id.split('_insert_page_')[insetLeftButton.id.split('_insert_page_').length - 1];
var mainTileElement = insetLeftButton.closest('.e-pv-organize-anchor-node');
var pageOrder_2 = parseInt(mainTileElement.getAttribute('data-page-order'), 10);
var buttonIdlist = buttonId.split('_');
var subIndex = 0;
var buttonIndex = parseInt(buttonIdlist[parseInt((buttonIdlist.length - 1).toString(), 10)], 10);
if (buttonIdlist.length > 1) {
buttonIndex = parseInt(buttonIdlist[parseInt((buttonIdlist.length - 2).toString(), 10)], 10);
}
subIndex = getNextSubIndex.call(this, mainTileElement.parentElement, buttonIndex);
insertTempPage.call(this, pageOrder_2, true, mainTileElement);
this.tileImageRender(buttonIndex, subIndex, pageOrder_2, mainTileElement, true, true, true);
updateTotalPageCount.call(this);
updatePageNumber.call(this);
disableTileDeleteButton.call(this);
disableTileCopyButton.call(this);
updateSelectAllCheckbox.call(this);
enableDisableToolbarItems.call(this);
var clonedCollections = [];
clonedCollections.push(clonedCollection.call(this, this.tempOrganizePagesCollection.
find(function (item) { return item.currentPageIndex === pageOrder_2; })));
this.addOrganizeAction(clonedCollections, 'Insert Left', [], [], null, false);
}
}
/**
* @private
* @param {MouseEvent} event - It's describe about event.
* @returns { void }
*/
export function copyButtonClick(event) {
if (this.pdfViewer.pageOrganizerSettings.canCopy) {
var copyButton = event.currentTarget;
var buttonId = copyButton.id.split('_copy_page_')[copyButton.id.split('_copy_page_').length - 1];
var mainTileElement = copyButton.closest('.e-pv-organize-anchor-node');
var pageOrder_3 = parseInt(mainTileElement.getAttribute('data-page-order'), 10);
var buttonIdlist = buttonId.split('_');
var subIndex = 0;
var buttonIndex = parseInt(buttonIdlist[parseInt((buttonIdlist.length - 1).toString(), 10)], 10);
if (buttonIdlist.length > 1) {
buttonIndex = parseInt(buttonIdlist[parseInt((buttonIdlist.length - 2).toString(), 10)], 10);
}
subIndex = getNextSubIndex.call(this, mainTileElement.parentElement, buttonIndex);
copyPage.call(this, pageOrder_3, mainTileElement);
this.tileImageRender(buttonIndex, subIndex, pageOrder_3 + 1, mainTileElement, true, false, false);
updateTotalPageCount.call(this);
updatePageNumber.call(this);
disableTileDeleteButton.call(this);
var clonedCollections = [];
clonedCollections.push(clonedCollection.call(this, this.tempOrganizePagesCollection.
find(function (item) { return item.currentPageIndex === (pageOrder_3 + 1); })));
this.addOrganizeAction(clonedCollections, 'Copy', [], [], null, false);
}
}
/**
* @private
* @param {MouseEvent} event - It's describe about event.
* @returns { void }
*/
export function deleteButtonClick(event) {
if (this.pdfViewer.pageOrganizerSettings.canDelete) {
var deleteButton = event.currentTarget;
var mainTileElement = deleteButton.closest('.e-pv-organize-anchor-node');
var pageOrder_4 = parseInt(mainTileElement.getAttribute('data-page-order'), 10);
var clonedCollections = [];
clonedCollections.push(clonedCollection(this.tempOrganizePagesCollection.
find(function (item) { return item.currentPageIndex === pageOrder_4; })));
this.addOrganizeAction(clonedCollections, 'Delete', [], [], null, false);
this.deletePageElement(mainTileElement);
if (this.isExtractToolbarVisible) {
inputTextboxUpdate.call(this);
}
}
updateSelectAllCheckbox.call(this);
enableDisableToolbarItems.call(this);
}
/**
* @private
* @param {number} currentPageIndex - It's describe about current page index.
* @param {HTMLElement} tileDiv - It's describe about tile div.
* @returns { void }
*/
export function copyPage(currentPageIndex, tileDiv) {
if (this.pdfViewer.pageOrganizerSettings.canCopy) {
var index_1 = this.tempOrganizePagesCollection.findIndex(function (item) {
return item.currentPageIndex === currentPageIndex;
});
var pageIndex = void 0;
var pageSize = void 0;
if (index_1 !== -1) {
pageIndex = this.tempOrganizePagesCollection[parseInt(index_1.toString(), 10)].pageIndex;
pageSize = JSON.parse(JSON.stringify(this.tempOrganizePagesCollection[parseInt(index_1.toString(), 10)].pageSize));
if (pageIndex !== -1) {
// eslint-disable-next-line
if (!isNullOrUndefined(pageSize.rotation) && (getRotatedAngle.call(this, pageSize.rotation.toString()) == 90 ||
getRotatedAngle.call(this, pageSize.rotation.toString()) === 270)) {
var swapWidth = pageSize.width;
pageSize.width = pageSize.height;
pageSize.height = swapWidth;
}
}
if (pageIndex === -1 && this.tempOrganizePagesCollection[parseInt(index_1.toString(), 10)].isCopied) {
this.tempOrganizePagesCollection = this.tempOrganizePagesCollection.slice(0, index_1 + 1).
concat([new OrganizeDetails(currentPageIndex + 1, -1, this.tempOrganizePagesCollection[parseInt(index_1.toString(), 10)].copiedPageIndex, false, false, true, false, false, false, this.tempOrganizePagesCollection[parseInt(index_1.toString(), 10)].
rotateAngle, pageSize, false, null, null, null)], this.tempOrganizePagesCollection.slice(index_1 + 1));
}
else {
this.tempOrganizePagesCollection = this.tempOrganizePagesCollection.slice(0, index_1 + 1).
concat([new OrganizeDetails(currentPageIndex + 1, -1, pageIndex, false, false, true, false, false, false, this.tempOrganizePagesCollection[parseInt(index_1.toString(), 10)].
rotateAngle, pageSize, false, null, null, null)], this.tempOrganizePagesCollection.slice(index_1 + 1));
}
this.tempOrganizePagesCollection[parseInt(index_1.toString(), 10)].istargetCopied = true;
this.tempOrganizePagesCollection = this.tempOrganizePagesCollection.map(function (item, mapIndex) {
if (mapIndex > index_1 + 1 && item.currentPageIndex != null) {
item.currentPageIndex = item.currentPageIndex + 1;
}
return item;
});
while (!isNullOrUndefined(tileDiv.nextElementSibling)) {
var nextTileDiv = tileDiv.nextElementSibling;
var nextTileIndex = parseInt(nextTileDiv.getAttribute('data-page-order'), 10);
nextTileIndex = nextTileIndex + 1;
nextTileDiv.setAttribute('data-page-order', nextTileIndex.toString());
tileDiv = nextTileDiv;
}
}
}
}
/**
* @private
* @param {number} currentPageIndex - It's describe about current page index.
* @param {boolean} isBefore - It's describe about temp page insert position.
* @param {HTMLElement} tileDiv - It's describe about tile div.
* @returns { void }
*/
export function insertTempPage(currentPageIndex, isBefore, tileDiv) {
if (this.pdfViewer.pageOrganizerSettings.canInsert) {
var index_2 = this.tempOrganizePagesCollection.findIndex(function (item) { return item.currentPageIndex === currentPageIndex; });
var beforeIndex = void 0;
if (currentPageIndex !== 0) {
beforeIndex =
this.tempOrganizePagesCollection.findIndex(function (item) { return item.currentPageIndex === currentPageIndex - 1; });
}
else {
beforeIndex = index_2;
}
var pageIndex = void 0;
var pageSize = void 0;
if (isBefore) {
pageIndex = this.tempOrganizePagesCollection[parseInt(beforeIndex.toString(), 10)].pageIndex;
if (index_2 - 1 >= 0 && !this.tempOrganizePagesCollection[parseInt((index_2 - 1).toString(), 10)].isInserted) {
this.tempOrganizePagesCollection[parseInt((index_2 - 1).toString(), 10)].hasEmptyPageAfter = true;
}
if (index_2 <= this.tempOrganizePagesCollection.length - 1 &&
!this.tempOrganizePagesCollection[parseInt(index_2.toString(), 10)].isInserted) {
this.tempOrganizePagesCollection[parseInt(index_2.toString(), 10)].hasEmptyPageBefore = true;
}
pageSize = JSON.parse(JSON.stringify(this.tempOrganizePagesCollection[parseInt(beforeIndex.toString(), 10)].pageSize));
if (pageIndex !== -1) {
if (!isNullOrUndefined(pageSize.rotation) &&
(getRotatedAngle.call(this, pageSize.rotation.toString()) === 90 ||
getRotatedAngle.call(this, pageSize.rotation.toString()) === 270)) {
var swapWidth = pageSize.width;
pageSize.width = pageSize.height;
pageSize.height = swapWidth;
}
}
this.tempOrganizePagesCollection = this.tempOrganizePagesCollection.slice(0, index_2).concat([new OrganizeDetails(currentPageIndex, -1, this.tempOrganizePagesCollection[parseInt(index_2.toString(), 10)].pageIndex, true, false, false, false, false, false, this.tempOrganizePagesCollection[parseInt(beforeIndex.toString(), 10)].rotateAngle, pageSize, false, null, null, null)], this.tempOrganizePagesCollection.slice(index_2));
this.tempOrganizePagesCollection = this.tempOrganizePagesCollection.map(function (item, mapIndex) {
if ((mapIndex !== index_2 && item.currentPageIndex >= currentPageIndex) && item.currentPageIndex != null) {
item.currentPageIndex = item.currentPageIndex + 1;
}
return item;
});
tileDiv.setAttribute('data-page-order', (currentPageIndex + 1).toString());
}
else {
pageIndex = this.tempOrganizePagesCollection[parseInt(index_2.toString(), 10)].pageIndex;
if (index_2 >= 0 && !this.tempOrganizePagesCollection[parseInt(index_2.toString(), 10)].isInserted) {
this.tempOrganizePagesCollection[parseInt(index_2.toString(), 10)].hasEmptyPageAfter = true;
}
if (index_2 + 1 <= this.tempOrganizePagesCollection.length - 1 &&
!this.tempOrganizePagesCollection[parseInt((index_2 + 1).toString(), 10)].isInserted) {
this.tempOrganizePagesCollection[parseInt((index_2 + 1).toString(), 10)].hasEmptyPageBefore = true;
}
pageSize = JSON.parse(JSON.stringify(this.tempOrganizePagesCollection[parseInt(index_2.toString(), 10)].pageSize));
if (pageIndex !== -1) {
if (!isNullOrUndefined(pageSize.rotation) &&
(getRotatedAngle.call(this, pageSize.rotation.toString()) === 90 ||
getRotatedAngle.call(this, pageSize.rotation.toString()) === 270)) {
var swapWidth = pageSize.width;
pageSize.width = pageSize.height;
pageSize.height = swapWidth;
}
}
this.tempOrganizePagesCollection = this.tempOrganizePagesCollection.slice(0, index_2 + 1).concat([new OrganizeDetails(currentPageIndex + 1, -1, this.tempOrganizePagesCollection[parseInt(index_2.toString(), 10)].pageIndex, true, false, false, false, false, false, this.tempOrganizePagesCollection[parseInt(index_2.toString(), 10)].rotateAngle, pageSize, false, null, null, null)], this.tempOrganizePagesCollection.slice(index_2 + 1));
this.tempOrganizePagesCollection = this.tempOrganizePagesCollection.map(function (item, mapIndex) {
if ((mapIndex !== index_2 + 1 && item.currentPageIndex >= currentPageIndex + 1) && item.currentPageIndex != null) {
item.currentPageIndex = item.currentPageIndex + 1;
}
return item;
});
}
while (!isNullOrUndefined(tileDiv.nextElementSibling)) {
var nextTileDiv = tileDiv.nextElementSibling;
var nextTileIndex = parseInt(nextTileDiv.getAttribute('data-page-order'), 10);
nextTileIndex = nextTileIndex + 1;
nextTileDiv.setAttribute('data-page-order', nextTileIndex.toString());
tileDiv = nextTileDiv;
}
}
}