@syncfusion/ej2-pdfviewer/src/pdfviewer/organize-pdf/organize-core/organize-thumbnail.js

Essential JS 2 PDF viewer Component

import { createElement, isNullOrUndefined, initializeCSPTemplate } from '@syncfusion/ej2-base';
import { OrganizeDetails } from '../organize-pdf';
import { CheckBox } from '@syncfusion/ej2-buttons';
import { Tooltip } from '@syncfusion/ej2-popups';
import { handleImageContainerClick } from './organize-initialization';
import { copyButtonClick, deleteButtonClick, insertLeftButtonClick, insertRightButtonClick, movePages } from './organize-utils';
import { onSelectClick } from './tile-interaction';
import { onTooltipBeforeOpen } from './organize-toolbar';
import { rotateButtonClick, rotateLeftButtonClick } from './organizepages-editor';
import { getImageZoomFactor, getRotatedAngle } from './organize-math-utils';
/**
 * @private
 * @returns { void }
 */
export function renderThumbnailImage() {
    this.organizePagesCollection = [];
    for (var i = 0; i < this.pdfViewer.pageCount; i++) {
        this.tileImageRender(i);
        this.organizePagesCollection.
            push(new OrganizeDetails(i, i, null, false, false, false, false, false, false, getRotatedAngle.call(this, this.pdfViewerBase.pageSize[parseInt(i.toString(), 10)].rotation.toString()), this.pdfViewerBase.pageSize[parseInt(i.toString(), 10)], false, null, null, null));
    }
    this.tempOrganizePagesCollection = JSON.parse(JSON.stringify(this.organizePagesCollection));
}
/**
 * @param {number} pageIndex - It describes about the page index
 * @param {number} subIndex - It describes about the sub index
 * @param {number} pageOrder - It describes about the page order
 * @param {HTMLElement} targetElement - It describes about the target element
 * @param {boolean} isNewPage - It describes about the isNewPage
 * @param {boolean} isBefore - It describes about the isBefore
 * @param {boolean} isEmptyPage - It describes about the isEmptyPage
 * @param {boolean} isImportedPage - It describes about the isImportedPage
 * @param {string} documentName - It describes about the documentName
 * @private
 * @returns {void}
 */
export function tileImageRender(pageIndex, subIndex, pageOrder, targetElement, isNewPage, isBefore, isEmptyPage, isImportedPage, documentName) {
    var _this = this;
    var base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAAD5Ip3+AAAAC0lEQVQIHWP4DwQACfsD/Qy7W+cAAAAASUVORK5CYII=';
    this.pageLink = createElement('div', { id: 'anchor_page_' + pageIndex, className: 'e-pv-organize-anchor-node' });
    var imageZoomFactor = getImageZoomFactor.call(this, this.pageLink.cloneNode(true));
    if (isNewPage) {
        this.pageLink.id = this.pageLink.id + '_' + subIndex;
        this.pageLink.setAttribute('data-page-order', pageOrder.toString());
    }
    else {
        this.pageLink.setAttribute('data-page-order', pageIndex.toString());
    }
    this.pageLink.style.width = 140 * imageZoomFactor + 'px';
    this.pageLink.style.height = 140 * imageZoomFactor + 'px';
    this.thumbnail = createElement('div', { id: this.pdfViewer.element.id + '_organize_page_' + pageIndex, className: 'e-pv-organize-tile e-pv-thumbnail-column' });
    if (isNewPage) {
        this.thumbnail.id = this.thumbnail.id + '_' + subIndex;
    }
    this.imageContainer = createElement('div', { id: this.pdfViewer.element.id + '_container_image_' + pageIndex, className: 'e-pv-image-container' });
    if (isNewPage) {
        this.imageContainer.id = this.imageContainer.id + '_' + subIndex;
    }
    var pageSize;
    if (!isNewPage && !isEmptyPage) {
        pageSize = this.pdfViewerBase.pageSize[parseInt(pageIndex.toString(), 10)];
    }
    else {
        pageSize = this.tempOrganizePagesCollection.find(function (item) {
            return item.currentPageIndex === pageOrder;
        }).pageSize;
        if (isBefore && pageOrder - 1 >= 0) {
            pageSize = this.tempOrganizePagesCollection.find(function (item) {
                return item.currentPageIndex === pageOrder - 1;
            }).pageSize;
        }
    }
    this.thumbnailImage = createElement('img', { id: this.pdfViewer.element.id + '_organize_image_' + pageIndex,
        className: 'e-pv-organize-image' });
    if (isNewPage) {
        this.thumbnailImage.id = this.thumbnailImage.id + '_' + subIndex;
    }
    var width;
    var height;
    if (pageSize.height > pageSize.width) {
        width = 100 * pageSize.width / pageSize.height;
        height = 100;
    }
    else {
        width = 100;
        height = 100 * pageSize.height / pageSize.width;
    }
    this.thumbnailImage.style.width = width + '%';
    this.thumbnailImage.style.height = height + '%';
    if (isEmptyPage) {
        this.thumbnailImage.src = base64Image;
    }
    else if (pageOrder && pageOrder !== null) {
        var pageDetail = this.tempOrganizePagesCollection.find(function (item) {
            return item.currentPageIndex === pageOrder;
        });
        if (pageDetail && pageDetail.pageIndex !== -1) {
            this.thumbnailImage.src = this.dataDetails[parseInt(pageDetail.pageIndex.toString(), 10)].image;
        }
        else if (pageDetail && pageDetail.copiedPageIndex !== null && pageDetail.copiedPageIndex >= 0) {
            this.thumbnailImage.src = this.dataDetails[parseInt(pageDetail.copiedPageIndex.toString(), 10)].image;
        }
        else {
            this.thumbnailImage.src = base64Image;
        }
    }
    else {
        this.thumbnailImage.src = this.dataDetails[parseInt(pageIndex.toString(), 10)].image;
    }
    this.imageContainer.addEventListener('click', function (e) {
        handleImageContainerClick.call(_this, e);
    });
    this.thumbnailImage.alt = this.pdfViewer.element.id + '_organize_page_' + pageIndex;
    if (isNewPage) {
        this.thumbnailImage.alt = this.pdfViewer.element.id + '_organize_page_' + pageOrder;
    }
    if (isImportedPage) {
        var importDownloadIcon = createElement('span', { id: this.pdfViewer.element.id + '_organize_import_download_icon_' + pageIndex, className: 'e-pv-organize-import-download-icon e-pv-import-icon e-pv-icon' });
        this.importImageWrapper = createElement('div', { id: this.pdfViewer.element.id + '_organize_import_image_wrapper_' + pageIndex, className: 'e-pv-organize-import-image-wrapper' });
        this.importImageWrapper.appendChild(importDownloadIcon);
        this.imageContainer.appendChild(this.importImageWrapper);
    }
    else {
        this.imageContainer.appendChild(this.thumbnailImage);
    }
    var rotateAngle = 0;
    if (isNewPage && !isNullOrUndefined(this.tempOrganizePagesCollection.find(function (item) { return item.currentPageIndex === pageOrder; }))) {
        rotateAngle = this.tempOrganizePagesCollection.find(function (item) { return item.currentPageIndex === pageOrder; }).rotateAngle;
        this.imageContainer.style.transform = 'rotate(' + rotateAngle + 'deg)';
    }
    this.thumbnail.appendChild(this.imageContainer);
    var thumbnailPageNumber = createElement('div', { id: this.pdfViewer.element.id + '_tile_pagenumber_' + pageIndex, className: 'e-pv-tile-number' });
    if (isNewPage) {
        thumbnailPageNumber.id = thumbnailPageNumber.id + '_' + subIndex;
    }
    if (isImportedPage) {
        thumbnailPageNumber.textContent = documentName;
    }
    else if (isNewPage) {
        thumbnailPageNumber.textContent = (pageOrder + 1).toString();
    }
    else {
        thumbnailPageNumber.textContent = (pageIndex + 1).toString();
    }
    var input = document.createElement('input');
    input.type = 'checkbox';
    input.className = 'e-pv-organize-tile-checkbox';
    input.id = 'checkboxdiv_page_' + pageIndex;
    if (isNewPage) {
        input.id = input.id + '_' + subIndex;
    }
    this.thumbnail.appendChild(input);
    var checkBoxObj = new CheckBox({ disabled: false, checked: false, change: onSelectClick.bind(this) });
    checkBoxObj.appendTo(input);
    input.parentElement.style.height = '100%';
    input.parentElement.style.width = '100%';
    input.parentElement.style.display = 'none';
    var buttondiv = createElement('div', { id: this.pdfViewer.element.id + '_organize_buttondiv_' + pageIndex, className: 'e-pv-organize-buttondiv' });
    if (isNewPage) {
        buttondiv.id = buttondiv.id + '_' + subIndex;
    }
    this.deleteButton = createElement('button', { id: this.pdfViewer.element.id + '_delete_page_' + pageIndex, attrs: { 'aria-label': this.pdfViewer.localeObj.getConstant('Delete Page'), 'tabindex': '-1' } });
    if (isNewPage) {
        this.deleteButton.id = this.deleteButton.id + '_' + subIndex;
    }
    this.deleteButton.className = 'e-pv-tbar-btn e-pv-delete-button e-btn e-pv-organize-pdf-tile-btn';
    this.deleteButton.setAttribute('type', 'button');
    var deleteButtonSpan = createElement('span', { id: this.pdfViewer.element.id + '_delete' + '_icon', className: 'e-pv-delete-icon e-pv-icon' });
    this.deleteButton.appendChild(deleteButtonSpan);
    this.rotateRightButton = createElement('button', { id: this.pdfViewer.element.id + '_rotate_page_' + pageIndex, attrs: { 'aria-label': this.pdfViewer.localeObj.getConstant('Rotate Right'), 'tabindex': '-1' } });
    if (isNewPage) {
        this.rotateRightButton.id = this.rotateRightButton.id + '_' + subIndex;
    }
    this.rotateRightButton.className = 'e-pv-tbar-btn e-pv-rotate-right-button e-btn e-pv-organize-pdf-tile-btn';
    this.rotateRightButton.setAttribute('type', 'button');
    var rotateButtonSpan = createElement('span', { id: this.pdfViewer.element.id + '_rotate-right' + '_icon', className: 'e-pv-rotate-right-icon e-pv-icon' });
    this.rotateRightButton.appendChild(rotateButtonSpan);
    this.rotateLeftButton = createElement('button', { id: this.pdfViewer.element.id + '_rotate_page_' + pageIndex, attrs: { 'aria-label': this.pdfViewer.localeObj.getConstant('Rotate Left'), 'tabindex': '-1' } });
    if (isNewPage) {
        this.rotateLeftButton.id = this.rotateLeftButton.id + '_' + subIndex;
    }
    this.rotateLeftButton.className = 'e-pv-tbar-btn e-pv-rotate-left-button e-btn e-pv-organize-pdf-tile-btn';
    this.rotateLeftButton.setAttribute('type', 'button');
    var rotateLeftButtonSpan = createElement('span', { id: this.pdfViewer.element.id + '_rotate_left' + '_icon', className: 'e-pv-rotate-left-icon e-pv-icon' });
    this.rotateLeftButton.appendChild(rotateLeftButtonSpan);
    this.copyButton = createElement('button', { id: this.pdfViewer.element.id + '_copy_page_' + pageIndex, attrs: { 'aria-label': this.pdfViewer.localeObj.getConstant('Copy Page'), 'tabindex': '-1' } });
    if (isNewPage) {
        this.copyButton.id = this.copyButton.id + '_' + subIndex;
    }
    this.copyButton.className = 'e-pv-tbar-btn e-pv-copy-button e-btn e-pv-organize-pdf-tile-btn';
    this.copyButton.setAttribute('type', 'button');
    var copyButtonSpan = createElement('span', { id: this.pdfViewer.element.id + '_copy' + '_icon', className: 'e-pv-copy-icon e-pv-icon' });
    this.copyButton.appendChild(copyButtonSpan);
    this.insertRightButton = createElement('button', { id: this.pdfViewer.element.id + '_insert_page_' + pageIndex, attrs: { 'aria-label': this.pdfViewer.localeObj.getConstant('Insert Right'), 'tabindex': '-1' } });
    if (isNewPage) {
        this.insertRightButton.id = this.insertRightButton.id + '_' + subIndex;
    }
    this.insertRightButton.className = 'e-pv-tbar-btn e-pv-insert-right-button e-btn e-pv-organize-pdf-tile-btn';
    this.insertRightButton.setAttribute('type', 'button');
    var insertRightButtonSpan = createElement('span', { id: this.pdfViewer.element.id + '_insert_right' + '_icon', className: 'e-icons e-plus' });
    this.insertRightButton.appendChild(insertRightButtonSpan);
    this.insertLeftButton = createElement('button', { id: this.pdfViewer.element.id + '_insert_page_' + pageIndex, attrs: { 'aria-label': this.pdfViewer.localeObj.getConstant('Insert Left'), 'tabindex': '-1' } });
    if (isNewPage) {
        this.insertLeftButton.id = this.insertLeftButton.id + '_' + subIndex;
    }
    this.insertLeftButton.className = 'e-pv-tbar-btn e-pv-insert-left-button e-btn e-pv-organize-pdf-tile-btn';
    this.insertLeftButton.setAttribute('type', 'button');
    var insertLeftButtonSpan = createElement('span', { id: this.pdfViewer.element.id + '_insert_left' + '_icon', className: 'e-icons e-plus' });
    this.insertLeftButton.appendChild(insertLeftButtonSpan);
    if (!this.pdfViewer.pageOrganizerSettings.canInsert) {
        this.insertLeftButton.setAttribute('disabled', 'disabled');
        this.insertLeftButton.firstElementChild.classList.add('e-disabled');
        this.insertRightButton.setAttribute('disabled', 'disabled');
        this.insertRightButton.firstElementChild.classList.add('e-disabled');
    }
    if (!this.pdfViewer.pageOrganizerSettings.canRotate) {
        this.rotateLeftButton.setAttribute('disabled', 'disabled');
        this.rotateLeftButton.firstElementChild.classList.add('e-disabled');
        this.rotateRightButton.setAttribute('disabled', 'disabled');
        this.rotateRightButton.firstElementChild.classList.add('e-disabled');
    }
    if (!this.pdfViewer.pageOrganizerSettings.canDelete) {
        this.deleteButton.setAttribute('disabled', 'disabled');
        this.deleteButton.firstElementChild.classList.add('e-disabled');
    }
    if (!this.pdfViewer.pageOrganizerSettings.canCopy) {
        this.copyButton.setAttribute('disabled', 'disabled');
        this.copyButton.firstElementChild.classList.add('e-disabled');
    }
    buttondiv.appendChild(this.insertLeftButton);
    if (!isImportedPage) {
        buttondiv.appendChild(this.rotateLeftButton);
        buttondiv.appendChild(this.rotateRightButton);
        buttondiv.appendChild(this.copyButton);
    }
    buttondiv.appendChild(this.deleteButton);
    buttondiv.appendChild(this.insertRightButton);
    this.thumbnail.appendChild(buttondiv);
    buttondiv.style.display = 'none';
    this.pageLink.appendChild(this.thumbnail);
    this.tileAreaDiv.appendChild(this.pageLink);
    this.pageLink.appendChild(thumbnailPageNumber);
    this.rotateRightButton.addEventListener('click', rotateButtonClick.bind(this));
    this.rotateLeftButton.addEventListener('click', rotateLeftButtonClick.bind(this));
    this.insertRightButton.addEventListener('click', insertRightButtonClick.bind(this));
    this.insertLeftButton.addEventListener('click', insertLeftButtonClick.bind(this));
    this.deleteButton.addEventListener('click', deleteButtonClick.bind(this));
    this.copyButton.addEventListener('click', copyButtonClick.bind(this));
    this.pageLink.addEventListener('mouseover', thumbnailMouseOver.bind(this));
    this.pageLink.addEventListener('mouseleave', thumbnailMouseLeave.bind(this));
    movePages.call(this);
    if (isNewPage) {
        if (isBefore) {
            this.tileAreaDiv.insertBefore(this.pageLink, targetElement);
        }
        else {
            this.tileAreaDiv.insertBefore(this.pageLink, targetElement.nextSibling);
        }
    }
}
export function addTooltipToButtons(button) {
    if (!button || button.getAttribute('data-tooltip-attached') === 'true') {
        return;
    }
    var cls = button.classList;
    var classToTextKey = {
        'e-pv-delete-button': 'Delete Page',
        'e-pv-rotate-right-button': 'Rotate Right',
        'e-pv-rotate-left-button': 'Rotate Left',
        'e-pv-copy-button': 'Copy Page',
        'e-pv-insert-right-button': 'Insert Right',
        'e-pv-insert-left-button': 'Insert Left'
    };
    var tooltipName = null;
    var keys = Object.keys(classToTextKey);
    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
        var className = keys_1[_i];
        if (cls.contains(className)) {
            tooltipName = classToTextKey["" + className];
            break;
        }
    }
    if (!tooltipName) {
        return;
    }
    var tooltip = new Tooltip({
        content: initializeCSPTemplate(function () {
            return this.pdfViewer.localeObj.getConstant(tooltipName);
        }, this),
        opensOn: 'Hover',
        beforeOpen: onTooltipBeforeOpen.bind(this)
    });
    tooltip.appendTo(button);
    button.setAttribute('data-tooltip-attached', 'true');
}
/**
 * @param {MouseEvent} event - It describes about the event
 * @private
 * @returns {void}
 */
export function thumbnailMouseOver(event) {
    // eslint-disable-next-line
    var proxy = this;
    if (event.currentTarget instanceof HTMLElement) {
        // Convert HTMLCollection to an array
        var childrenArray = Array.from(event.currentTarget.children);
        // Iterate over the array
        for (var _i = 0, childrenArray_1 = childrenArray; _i < childrenArray_1.length; _i++) {
            var subchild = childrenArray_1[_i];
            var childArray = Array.from(subchild.children);
            for (var _a = 0, childArray_1 = childArray; _a < childArray_1.length; _a++) {
                var child = childArray_1[_a];
                // Exclude the image by checking its type
                if (!(child.classList.contains('e-pv-image-container'))) {
                    // Set the display style property to "none" for other children
                    child.style.display = 'flex';
                    if (child.classList.contains('e-checkbox-wrapper')) {
                        child.children[0].style.display = 'block';
                    }
                    else if (child.classList.contains('e-pv-organize-buttondiv') && child.childElementCount > 0) {
                        var childelementArray = Array.from(child.children);
                        for (var _b = 0, childelementArray_1 = childelementArray; _b < childelementArray_1.length; _b++) {
                            var childelement = childelementArray_1[_b];
                            if (proxy.totalCheckedCount > 1) {
                                if (childelement.id.split('_')[1] === 'insert') {
                                    childelement.style.display = 'flex';
                                }
                                else {
                                    childelement.style.display = 'none';
                                }
                            }
                            else {
                                childelement.style.display = 'flex';
                            }
                            var targetClassList = childelement.classList;
                            if (targetClassList.contains('e-pv-insert-left-button') || targetClassList.contains('e-pv-insert-right-button')) {
                                childelement.style.top = '-' + (parseFloat(this.pageLink.style.height.replace('px', '')) / 2) + 'px';
                            }
                            addTooltipToButtons.call(this, childelement);
                            setTileButtonEnableState.call(this, childelement);
                        }
                    }
                }
            }
        }
    }
}
/**
 * @param {HTMLElement} button - It describes about the button.
 * @private
 * @returns {void}
 */
export function setTileButtonEnableState(button) {
    if (isNullOrUndefined(button)) {
        return;
    }
    var buttonClassList = button.classList;
    var firstChildClassList = button.firstElementChild ? button.firstElementChild.classList : buttonClassList;
    if (buttonClassList.contains('e-pv-insert-left-button') || buttonClassList.contains('e-pv-insert-right-button')) {
        if (!this.pdfViewer.pageOrganizerSettings.canInsert) {
            firstChildClassList.add('e-disabled');
            button.setAttribute('disabled', 'disabled');
        }
        else {
            firstChildClassList.remove('e-disabled');
            button.removeAttribute('disabled');
        }
    }
    else if (buttonClassList.contains('e-pv-rotate-left-button') || buttonClassList.contains('e-pv-rotate-right-button')) {
        if (!this.pdfViewer.pageOrganizerSettings.canRotate) {
            firstChildClassList.add('e-disabled');
            button.setAttribute('disabled', 'disabled');
        }
        else {
            firstChildClassList.remove('e-disabled');
            button.removeAttribute('disabled');
        }
    }
    else if (buttonClassList.contains('e-pv-copy-button')) {
        var emptyImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAAD5Ip3+AAAAC0lEQVQIHWP4DwQACfsD/Qy7W+cAAAAASUVORK5CYII=';
        var splitArray = button.id.split('_copy_page_');
        var suffixID = '';
        var isEmptyPage = false;
        if (splitArray.length > 0) {
            suffixID = splitArray[1];
            var imageElement = document.getElementById(this.pdfViewer.element.id + '_organize_image_' + suffixID);
            if (imageElement && imageElement.currentSrc === emptyImage) {
                isEmptyPage = true;
            }
        }
        if (!this.pdfViewer.pageOrganizerSettings.canCopy || isEmptyPage) {
            firstChildClassList.add('e-disabled');
            button.setAttribute('disabled', 'disabled');
        }
        else {
            firstChildClassList.remove('e-disabled');
            button.removeAttribute('disabled');
        }
    }
    else if (buttonClassList.contains('e-pv-delete-button')) {
        if (!this.pdfViewer.pageOrganizerSettings.canDelete) {
            firstChildClassList.add('e-disabled');
            button.setAttribute('disabled', 'disabled');
        }
        else {
            firstChildClassList.remove('e-disabled');
            button.removeAttribute('disabled');
        }
    }
}
/**
 * @param {MouseEvent} event - It describes about the event
 * @private
 * @returns {void}
 */
export function thumbnailMouseLeave(event) {
    if (event.currentTarget instanceof HTMLElement) {
        // Convert HTMLCollection to an array
        var childrenArray = Array.from(event.currentTarget.children);
        // Iterate over the array
        for (var _i = 0, childrenArray_2 = childrenArray; _i < childrenArray_2.length; _i++) {
            var subchild = childrenArray_2[_i];
            var childArray = Array.from(subchild.children);
            for (var _a = 0, childArray_2 = childArray; _a < childArray_2.length; _a++) {
                var child = childArray_2[_a];
                // Exclude the image by checking its type
                if (!(child.classList.contains('e-pv-image-container'))) {
                    if (event.currentTarget.classList.contains('e-pv-organize-node-selection-ring')) {
                        if (child.classList.contains('e-checkbox-wrapper')) {
                            child.style.display = 'block';
                        }
                        else {
                            child.style.display = 'none';
                        }
                    }
                    else {
                        // Set the display style property to "none" for other children
                        child.style.display = 'none';
                    }
                }
            }
        }
    }
}