@syncfusion/ej2-pdfviewer
Version:
Essential JS 2 PDF viewer Component
294 lines (293 loc) • 12 kB
JavaScript
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { clearSelection, deselectTile, selectAllTiles, selectRange } from './tile-interaction';
import { enableDisableToolbarItems, updateSelectAllCheckbox } from './organize-toolbar';
import { importDocument } from './organize-importaction';
/**
* @private
* @returns { void }
*/
export function initEventListeners() {
this.boundOnTileAreaMouseDown = onTileAreaMouseDown.bind(this);
this.boundOnTileAreaKeyDown = onTileAreaKeyDown.bind(this);
this.boundOnTileAreaKeyUp = onTileAreaKeyUp.bind(this);
this.boundPageOrganizerOnScroll = pageOrganizerOnScroll.bind(this);
this.dialogDivElement.addEventListener('wheel', this.boundPageOrganizerOnScroll);
this.tileAreaDiv.addEventListener('mousedown', this.boundOnTileAreaMouseDown);
document.addEventListener('keydown', this.boundOnTileAreaKeyDown);
document.addEventListener('keyup', this.boundOnTileAreaKeyUp);
}
/**
* @private
* @returns { void }
*/
export function removeEventListeners() {
if (!isNullOrUndefined(this.dialogDivElement)) {
this.dialogDivElement.removeEventListener('wheel', this.boundPageOrganizerOnScroll);
}
if (!isNullOrUndefined(this.tileAreaDiv)) {
this.tileAreaDiv.removeEventListener('mousedown', this.boundOnTileAreaMouseDown);
}
document.removeEventListener('keydown', this.boundOnTileAreaKeyDown);
document.removeEventListener('keyup', this.boundOnTileAreaKeyUp);
}
/**
* @private
* @param { WheelEvent } event - It's describe about the page organizer scroll data.
* @returns { void }
*/
export function pageOrganizerOnScroll(event) {
if (this.ctrlKey) {
event.preventDefault();
var imageZoom = this.getImageZoomValue();
var imageZoomMin = this.getImageZoomMin();
var imageZoomMax = this.getImageZoomMax();
if (event.deltaY < 0 && (imageZoom < imageZoomMax)) {
if (imageZoom + this.pageZoomSliderStep < imageZoomMax) {
this.handlePageZoomChange(imageZoom + this.pageZoomSliderStep, imageZoom);
}
else if (imageZoom + this.pageZoomSliderStep > imageZoomMax && imageZoom !== imageZoomMax) {
this.handlePageZoomChange(imageZoomMax, imageZoom);
}
}
else if (event.deltaY > 0 && (imageZoom > imageZoomMin)) {
if (imageZoom - this.pageZoomSliderStep > imageZoomMin) {
this.handlePageZoomChange(imageZoom - this.pageZoomSliderStep, imageZoom);
}
else if (imageZoom - this.pageZoomSliderStep < imageZoomMin && imageZoom !== imageZoomMin) {
this.handlePageZoomChange(imageZoomMin, imageZoom);
}
}
}
}
/**
* @private
* @param { MouseEvent } event - It's describe about the page organizer tile data on mouse down action.
* @returns { void }
*/
export function onTileAreaMouseDown(event) {
var _this = this;
if (event.target && event.target.parentElement && event.target.parentElement.firstElementChild &&
event.target.parentElement.firstElementChild.classList.contains('e-pv-organize-tile-checkbox')) {
this.isClickedOnCheckBox = true;
}
else {
this.isClickedOnCheckBox = false;
}
if (event.target.closest('.e-pv-organize-anchor-node')) {
var targetTile = event.target;
var tiles = Array.from(this.tileAreaDiv.children);
if (this.shiftKey && this.startTile) {
// Shift key selection logic
var currentIndex_1 = Array.from(this.tileAreaDiv.children).indexOf(targetTile.closest('.e-pv-organize-anchor-node'));
if (this.startTile) {
var startIndex_1 = Array.from(this.tileAreaDiv.children).indexOf(this.startTile.closest('.e-pv-organize-anchor-node'));
selectRange.call(this, startIndex_1, currentIndex_1);
tiles.forEach(function (tile, index) {
if (index < Math.min(startIndex_1, currentIndex_1) || index > Math.max(startIndex_1, currentIndex_1)) {
deselectTile.call(_this, tile);
}
});
}
}
else if (!this.ctrlKey) {
this.startTile = targetTile;
}
}
else {
if (!this.ctrlKey && !this.shiftKey) {
clearSelection.call(this);
this.startTile = null;
}
}
updateSelectAllCheckbox.call(this);
enableDisableToolbarItems.call(this);
}
/**
* @private
* @param { KeyboardEvent } event - It's describe about the page organizer tile data on key down action.
* @returns { void }
*/
export function onTileAreaKeyDown(event) {
if ((event.ctrlKey || event.metaKey) && !event.shiftKey) {
this.ctrlKey = true;
var keyCode = this.pdfViewerBase.getLegacyKeyCode(event);
if (this.isOrganizeWindowOpen) {
if (keyCode === 65) {
event.preventDefault();
selectAllTiles.call(this);
}
if (keyCode === 90) {
event.preventDefault();
this.undo();
}
else if (keyCode === 89) {
event.preventDefault();
this.redo();
}
}
}
if (event.shiftKey) {
this.shiftKey = true;
}
}
/**
* @private
* @param { KeyboardEvent } event - It's describe about the page organizer tile data on key up action.
* @returns { void }
*/
export function onTileAreaKeyUp(event) {
if (!(event.ctrlKey || event.metaKey)) {
this.ctrlKey = false;
}
if (!event.shiftKey) {
this.shiftKey = false;
}
}
/**
* @private
* @param { any } event - It's describe about the page organizer select all checkbox data.
* @returns { void }
*/
export function onSelectAllClick(event) {
if (event.checked) {
selectAllTiles.call(this);
}
else {
clearSelection.call(this);
}
}
/**
* @private
* @param { DragEventArgs } e - It's describe about auto scroll data.
* @returns { void }
*/
export function autoScroll(e) {
// eslint-disable-next-line
var proxy = this;
var viewportY = e.event.type === 'touchmove' ? e.event.touches[0].clientY : e.event.clientY;
var edgeSize = 10;
this.autoScrollInterval = null;
var viewportHeight = window.innerHeight;
var edgeTop = edgeSize;
var edgeBottom = (viewportHeight - edgeSize);
var toolbarBottom = document.getElementById(this.pdfViewer.element.id + '_toolbar_appearance').getBoundingClientRect().bottom + edgeSize;
var footer = this.organizeDialog.element.getElementsByClassName('e-footer-content');
var footerBounds;
if (!isNullOrUndefined(footer) && footer.length > 0) {
footerBounds = footer[0].getBoundingClientRect();
}
var footerTop = !isNullOrUndefined(footerBounds) ? (footerBounds.top - edgeSize) :
(this.tileAreaDiv.getBoundingClientRect().bottom - edgeSize);
edgeTop = parseFloat(Math.max(edgeTop, toolbarBottom).toFixed(2));
edgeBottom = Math.min(edgeBottom, footerTop);
if (this.virtualEle.getBoundingClientRect().height >= this.tileAreaDiv.getBoundingClientRect().height) {
clearTimeout(this.autoScrollInterval);
proxy.autoScrollInterval = null;
return;
}
var isInTopEdge = (parseFloat(this.virtualEle.getBoundingClientRect().top.toFixed(2)) <= edgeTop);
var isInBottomEdge = (this.virtualEle.getBoundingClientRect().bottom >= edgeBottom);
// If the mouse is not in the viewport edge, there's no need to calculate anything else.
if (!(isInTopEdge || isInBottomEdge)) {
clearTimeout(this.autoScrollInterval);
proxy.autoScrollInterval = null;
return;
}
var maxScrollY = (this.tileAreaDiv.scrollHeight - this.tileAreaDiv.clientHeight);
(function checkForWindowScroll() {
clearTimeout(proxy.autoScrollInterval);
proxy.autoScrollInterval = null;
if (adjustWindowScroll()) {
proxy.autoScrollInterval = window.setTimeout(checkForWindowScroll, 30);
}
// eslint-disable-next-line
})();
function adjustWindowScroll() {
proxy.tileAreaDiv.onscroll = function () {
var outerBorder = document.querySelector('.e-pv-organize-outer-border');
if (!isNullOrUndefined(outerBorder)) {
outerBorder.style.display = 'none';
}
};
var elementBounds = proxy.virtualEle.getBoundingClientRect();
var dragDownDiffrence = elementBounds.bottom - (proxy.previousClientY + elementBounds.height);
var dragUpDiffrence = elementBounds.top - proxy.previousClientY;
proxy.previousClientY = elementBounds.top;
var currentScrollY = proxy.tileAreaDiv.scrollTop;
var canScrollUp = (currentScrollY > 0 && dragUpDiffrence <= 0);
var canScrollDown = (currentScrollY < maxScrollY && dragDownDiffrence >= 0);
var nextScrollY = currentScrollY;
var maxStep = 10;
// Should we scroll up?
if (isInTopEdge && canScrollUp) {
var intensity = ((edgeTop - proxy.virtualEle.getBoundingClientRect().top) / edgeSize);
nextScrollY = (nextScrollY - (maxStep * intensity));
// Should we scroll down?
}
else if (isInBottomEdge && canScrollDown) {
var intensity = ((proxy.virtualEle.getBoundingClientRect().bottom - edgeBottom) / edgeSize);
nextScrollY = (nextScrollY + (maxStep * intensity));
}
nextScrollY = Math.max(0, Math.min(maxScrollY, nextScrollY));
if (nextScrollY !== currentScrollY) {
proxy.tileAreaDiv.scrollTop = nextScrollY;
return (true);
}
else {
return (false);
}
}
}
/**
* @private
* @param { DropEventArgs } e - It's describe about drop event data.
* @param { DOMRect } tileRect - It's describe about tile rect bounds.
* @param { number } gapBetweenDivs - It's describe about gap between divs
* @param { HTMLElement } outerBorder - It's describe about border html element
* @returns { void }
*/
export function handlePageMove(e, tileRect, gapBetweenDivs, outerBorder) {
var isRightInsertion = isTileRightInsertion(e);
if (!isNullOrUndefined(isTileRightInsertion)) {
var offset = isRightInsertion ? (tileRect['width'] + gapBetweenDivs / 2) : (-gapBetweenDivs / 2);
var parentBound = outerBorder.parentElement.getBoundingClientRect();
outerBorder.style.left = (tileRect['x'] + offset - parentBound.x) + 'px';
outerBorder.style.top = (tileRect['top'] - parentBound.y) + 'px';
outerBorder.style.height = tileRect['height'] + 'px';
this.isRightInsertion = isRightInsertion;
}
}
/**
* @private
* @param { DropEventArgs } e - It's describe about drop event data.
* @returns { boolean } - It's describe about right tile insert or not.
*/
export function isTileRightInsertion(e) {
var mainTileElement = !isNullOrUndefined(e.target) ? e.target.closest('.e-pv-organize-anchor-node') : null;
if (!isNullOrUndefined(mainTileElement)) {
var tileRect = mainTileElement.getBoundingClientRect();
var virtualElementClientX = e.event.type === 'mousemove' ? e.event.clientX : e.event.touches[0].clientX;
return virtualElementClientX > tileRect['x'] + (tileRect['width'] / 2);
}
return null;
}
/**
* @private
* @returns { void }
*/
export function importDocWireEvent() {
if (this.importDocInputElement) {
this.boundImportDocument = importDocument.bind(this);
this.importDocInputElement.addEventListener('change', this.boundImportDocument);
}
}
/**
* @private
* @returns { void }
*/
export function importDocUnWireEvent() {
if (this.importDocInputElement) {
this.boundImportDocument = null;
this.importDocInputElement.removeEventListener('change', this.boundImportDocument);
}
}