@progress/kendo-pdfviewer-common 0.1.0

package/dist/npm/search.js

@@ -0,0 +1,259 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const unwrapElement = (element) => {
+    const parentElement = element.parentElement;
+    if (!element || !parentElement) {
+        return;
+    }
+    parentElement.replaceWith(...Array.from(parentElement.childNodes));
+};
+const unwrapElements = (elements) => {
+    if (!elements || !elements.length || elements.length <= 0) {
+        return;
+    }
+    for (let i = 0; i < elements.length; i++) {
+        unwrapElement(elements[i]);
+    }
+};
+const wrapElement = (element, wrapper) => {
+    if (element.parentNode) {
+        element.parentNode.insertBefore(wrapper, element);
+        wrapper.appendChild(element);
+    }
+};
+const wrapInnerElement = (element, wrapper) => {
+    if (!element || !element.parentNode || !wrapper) {
+        return;
+    }
+    element.appendChild(wrapper);
+    while (element.firstChild && element.firstChild !== wrapper) {
+        wrapper.appendChild(element.firstChild);
+    }
+};
+const addClass = (className, element) => {
+    element.classList.add(className);
+};
+const removeClass = (className, element) => {
+    element.classList.remove(className);
+};
+const toClassSelector = (className) => `.${className}`;
+const CHAR_INDEX_DATA_ATTR = 'data-char-index';
+const MATCH_INDEX_DATA_ATTR = 'data-match-index';
+/**
+ * @hidden
+ */
+class SearchService {
+    constructor(options) {
+        this.options = {
+            highlightClass: 'k-search-highlight',
+            highlightMarkClass: 'k-search-highlight-mark',
+            charClass: 'k-text-char',
+            textContainers: []
+        };
+        this.extendOptions(options);
+        this.resetState();
+    }
+    destroy() {
+        this.clearSearch();
+    }
+    extendOptions(options) {
+        this.options = Object.assign({}, this.options, options);
+    }
+    setState(newState) {
+        this.state = Object.assign({}, this.state || {}, newState);
+    }
+    resetState() {
+        this.setState({
+            text: '',
+            textNodes: [],
+            charIndex: 0,
+            activeMatchIndex: 0,
+            matches: []
+        });
+    }
+    search({ text, matchCase }) {
+        let searchRegex = new RegExp(text, matchCase ? 'g' : 'ig');
+        let match;
+        if (this.shouldTransformText()) {
+            this.transformTextForSearch();
+        }
+        this.state.matches = [];
+        this.state.activeMatchIndex = 0;
+        this.removeIndicators();
+        if (text === '') {
+            return [];
+        }
+        match = searchRegex.exec(this.state.text);
+        while (match) {
+            this.state.matches.push({
+                startOffset: match.index,
+                endOffset: match.index + match[0].length
+            });
+            match = searchRegex.exec(this.state.text);
+        }
+        this.highlightAllMatches();
+        this.addActiveMatchMark();
+        return this.state.matches;
+    }
+    clearSearch() {
+        this.removeIndicators();
+        this.restoreOriginalText();
+    }
+    restoreOriginalText() {
+        this.forEachTextContainer((textContainer) => {
+            const nodes = Array.from(textContainer.querySelectorAll('span:not(.' + this.options.charClass + ')'));
+            nodes.forEach((node) => {
+                node.innerHTML = node.textContent;
+            });
+        });
+    }
+    shouldTransformText() {
+        return !this.state.text;
+    }
+    transformTextForSearch() {
+        this.state.textNodes = [];
+        this.state.charIndex = 0;
+        this.state.text = '';
+        this.forEachTextContainer((textContainer) => {
+            this.extractTextNodes(textContainer);
+        });
+        this.transformTextNodesForSearch(this.state.textNodes);
+    }
+    extractTextNodes(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            this.state.textNodes.push(node);
+        }
+        else {
+            for (let i = 0; i < node.childNodes.length; i++) {
+                this.extractTextNodes(node.childNodes[i]);
+            }
+        }
+    }
+    transformTextNodesForSearch(textNodes) {
+        for (let i = 0; i < textNodes.length; i++) {
+            this.transformTextNodeForSearch(textNodes[i]);
+        }
+    }
+    transformTextNodeForSearch(node) {
+        const text = node.textContent;
+        if (text.length <= 0) {
+            return;
+        }
+        this.state.text = this.state.text + text;
+        const span = document.createElement('span');
+        wrapElement(node, span);
+        const splittedHtml = this.splitTextByChars(text);
+        span.innerHTML = splittedHtml;
+        unwrapElement(span.childNodes[0]);
+    }
+    splitTextByChars(text) {
+        let splittedTextHtml = '';
+        for (let i = 0; i < text.length; i++) {
+            splittedTextHtml += `<span class='${this.options.charClass}' ${CHAR_INDEX_DATA_ATTR}=${this.state.charIndex}>${text[i]}</span>`;
+            this.state.charIndex++;
+        }
+        return splittedTextHtml;
+    }
+    forEachTextContainer(callback) {
+        for (let i = 0; i < this.options.textContainers.length; i++) {
+            const textContainer = this.options.textContainers[i];
+            callback(textContainer, i);
+        }
+    }
+    highlightAllMatches() {
+        this.state.matches.forEach((match, matchIndex) => {
+            this.addMatchHighlight(match.startOffset, match.endOffset, matchIndex);
+        });
+    }
+    addMatchHighlight(matchStartOffset, matchEndOffset, matchIndex) {
+        for (let i = matchStartOffset; i < matchEndOffset; i++) {
+            this.forEachTextContainer((textContainer) => {
+                const highlights = Array.from(textContainer.querySelectorAll(toClassSelector(`${this.options.charClass}[${CHAR_INDEX_DATA_ATTR}='${i}']`)));
+                highlights.forEach((highlight) => {
+                    addClass(this.options.highlightClass, highlight);
+                    highlight.setAttribute(MATCH_INDEX_DATA_ATTR, matchIndex);
+                });
+            });
+        }
+    }
+    removeMatchHighlights() {
+        this.forEachTextContainer((textContainer) => {
+            const highlights = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.highlightClass)));
+            highlights.forEach((highlight) => {
+                removeClass(this.options.highlightClass, highlight);
+                highlight.removeAttribute(MATCH_INDEX_DATA_ATTR);
+            });
+        });
+    }
+    addActiveMatchMark() {
+        if (!this.state.activeMatchIndex && this.state.activeMatchIndex !== 0) {
+            this.state.activeMatchIndex = 0;
+        }
+        else if (this.state.activeMatchIndex > this.state.matches.length) {
+            this.state.activeMatchIndex = this.state.matches.length;
+        }
+        else {
+            this.removeActiveMatchMark();
+        }
+        const mark = document.createElement('span');
+        mark.classList.add(this.options.highlightMarkClass);
+        this.forEachTextContainer((textContainer) => {
+            const matches = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.charClass +
+                '[' +
+                MATCH_INDEX_DATA_ATTR +
+                "='" +
+                this.state.activeMatchIndex +
+                "']")));
+            matches.forEach((match) => {
+                wrapInnerElement(match, mark.cloneNode(true));
+            });
+        });
+    }
+    removeActiveMatchMark() {
+        this.forEachTextContainer((textContainer) => {
+            const marks = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.highlightMarkClass)));
+            const childNodes = marks.flatMap((x) => Array.from(x.childNodes));
+            unwrapElements(childNodes);
+        });
+    }
+    removeIndicators() {
+        this.removeActiveMatchMark();
+        this.removeMatchHighlights();
+    }
+    markNextMatch() {
+        this.markNextMatchIndex();
+        this.addActiveMatchMark();
+    }
+    markPreviousMatch() {
+        this.markPreviousMatchIndex();
+        this.addActiveMatchMark();
+    }
+    markNextMatchIndex() {
+        this.moveActiveMatchIndex(1);
+    }
+    markPreviousMatchIndex() {
+        this.moveActiveMatchIndex(-1);
+    }
+    moveActiveMatchIndex(delta) {
+        this.state.activeMatchIndex += delta;
+        if (this.state.activeMatchIndex < 0) {
+            this.state.activeMatchIndex = Math.max(this.state.matches.length - 1, 0);
+        }
+        else if (this.state.activeMatchIndex >
+            this.state.matches.length - 1) {
+            this.state.activeMatchIndex = 0;
+        }
+    }
+    getActiveMatchElement() {
+        let markedMatch;
+        this.forEachTextContainer((textContainer) => {
+            const mark = textContainer.querySelector(toClassSelector(this.options.highlightMarkClass));
+            if (mark) {
+                markedMatch = mark;
+                return;
+            }
+        });
+        return markedMatch;
+    }
+}
+exports.SearchService = SearchService;

package/dist/npm/utils.d.ts

@@ -0,0 +1,96 @@
+import { SaveOptions } from '@progress/kendo-file-saver';
+import { PDFPageProxy, PDFDocumentProxy } from 'pdfjs-dist';
+import { TypedArray } from 'pdfjs-dist/types/src/display/api';
+/**
+ * @hidden
+ */
+export declare type DoneFn = (result: {
+    pdfPages: PDFPageProxy[];
+    pdfDoc: PDFDocumentProxy;
+    zoom: number;
+}) => void;
+/**
+ * @hidden
+ */
+export declare type ErrorFn = (e?: any) => void;
+/**
+ * @hidden
+ */
+export interface PDFReadParameters {
+    url?: string;
+    data?: string;
+    arrayBuffer?: ArrayBuffer;
+    typedArray?: TypedArray;
+    error: ErrorFn;
+}
+/**
+ * @hidden
+ */
+export interface PDFReadOptions extends PDFReadParameters {
+    dom: HTMLDivElement;
+    zoom: number;
+    done: DoneFn;
+}
+/**
+ * @hidden
+ */
+export interface PDFReloadParameters {
+    pdfDoc: PDFDocumentProxy;
+    zoom: number;
+    dom: HTMLElement;
+    done: (pdfPages: PDFPageProxy[]) => void;
+    error: ErrorFn;
+}
+/**
+ * @hidden
+ */
+export declare const DEFAULT_ZOOM_LEVEL = 1.25;
+/**
+ * @hidden
+ */
+export declare const removeChildren: (dom: HTMLElement) => void;
+/**
+ * @hidden
+ */
+export declare const download: (options: {
+    pdf: import("pdfjs-dist/types/src/display/api").PDFDocumentProxy;
+    error: ErrorFn;
+}, fileName: string, saveOptions: SaveOptions, onDownload: (blob: Blob, fileName: string, saveOptions: SaveOptions) => boolean) => void;
+/**
+ * @hidden
+ */
+export declare const loadPDF: (options: PDFReadOptions) => void;
+/**
+ * @hidden
+ */
+export declare const reloadDocument: (params: PDFReloadParameters) => void;
+/**
+ * @hidden
+ */
+export declare const print: (pages: import("pdfjs-dist/types/src/display/api").PDFPageProxy[], done: () => void, error: ErrorFn) => void;
+/**
+ * @hidden
+ */
+export declare const goToNextSearchMatch: (ref: any) => void;
+/**
+ * @hidden
+ */
+export declare const goToPreviousSearchMatch: (ref: any) => void;
+/**
+ * @hidden
+ */
+export declare const calculateZoomLevel: (zoomLevel: number, zoomLevelType: string, currentZoom: number, dom: HTMLDivElement) => number;
+/**
+ * Scrolls the PDFViewer document to the passed page number.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @param pageNumber The page number.
+ */
+export declare const scrollToPage: (rootElement: HTMLElement, pageNumber: number) => void;
+/**
+ * A function which gives you the page number of the document according to the scroll position.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @returns The page number.
+ */
+export declare const currentPage: (rootElement: HTMLElement) => number;

package/dist/npm/utils.js

@@ -0,0 +1,317 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const kendo_file_saver_1 = require("@progress/kendo-file-saver");
+const pdfjs_dist_1 = require("pdfjs-dist");
+/**
+ * @hidden
+ */
+exports.DEFAULT_ZOOM_LEVEL = 1.25;
+const parsePdfFromBase64String = (base64String) => {
+    return atob(base64String.replace(/^(data:application\/pdf;base64,)/gi, ''));
+};
+const getDocumentParameters = (options) => {
+    let params = {
+        verbosity: 0
+    };
+    if (typeof options.data === 'string') {
+        params.data = parsePdfFromBase64String(options.data);
+    }
+    else if (typeof options.url === 'string') {
+        params.url = options.url;
+    }
+    else if (options.arrayBuffer instanceof ArrayBuffer) {
+        params = options.arrayBuffer;
+    }
+    else if (options.typedArray) {
+        params = options.typedArray;
+    }
+    return params;
+};
+/**
+ * @hidden
+ */
+exports.removeChildren = (dom) => {
+    while (dom.firstChild) {
+        dom.removeChild(dom.firstChild);
+    }
+};
+const appendPage = (dom, page, index) => {
+    if (index === 0) {
+        exports.removeChildren(dom);
+    }
+    dom.appendChild(page);
+};
+/**
+ * @hidden
+ */
+exports.download = (options, fileName = 'Document', saveOptions = {}, onDownload) => {
+    if (options.pdf) {
+        options.pdf
+            .getData()
+            .then((data) => new Blob([data], { type: 'application/pdf' }))
+            .then((blob) => {
+            if (!onDownload(blob, fileName, saveOptions)) {
+                kendo_file_saver_1.saveAs(blob, fileName, saveOptions);
+            }
+        })
+            .catch((reason) => {
+            options.error.call(undefined, reason);
+        });
+    }
+};
+/**
+ * @hidden
+ */
+exports.loadPDF = (options) => {
+    const params = getDocumentParameters(options);
+    const { dom, zoom, done, error } = options;
+    pdfjs_dist_1.getDocument(params)
+        .promise.then((pdfDoc) => {
+        const pages = [];
+        for (let i = 1; i <= pdfDoc.numPages; i++) {
+            pages.push(pdfDoc.getPage(i));
+        }
+        return { pages, pdfDoc };
+    })
+        .then(({ pages, pdfDoc }) => {
+        Promise.all(pages)
+            .then((all) => all.map((page, i) => {
+            appendPage(dom, renderPage(page, zoom, error), i);
+            return page;
+        }))
+            .then((pdfPages) => {
+            done({ pdfPages, pdfDoc, zoom });
+        })
+            .catch((reason) => {
+            options.error(reason);
+        });
+    })
+        .catch((reason) => {
+        options.error(reason);
+    });
+};
+/**
+ * @hidden
+ */
+exports.reloadDocument = (params) => {
+    const { pdfDoc, zoom, dom, done, error } = params;
+    const pages = [];
+    for (let i = 1; i <= pdfDoc.numPages; i++) {
+        pages.push(pdfDoc.getPage(i));
+    }
+    Promise.all(pages)
+        .then((all) => all.map((page, i) => {
+        appendPage(dom, renderPage(page, zoom, error), i);
+        return page;
+    }))
+        .then(done)
+        .catch(error);
+};
+/**
+ * @hidden
+ */
+exports.print = (pages, done, error) => {
+    const dom = document.createElement('div');
+    let dones = pages.map(() => false);
+    pages.forEach((page, index) => {
+        const viewport = renderCanvas(page, (el) => {
+            dom.appendChild(el);
+            dones[index] = true;
+            if (dones.every(Boolean)) {
+                openPrintDialog(dom, viewport.width, viewport.height, done, error);
+            }
+        }, error);
+    });
+};
+const openPrintDialog = (dom, width, height, done, onError) => {
+    const printDialog = window.open('', '', 'innerWidth=' +
+        width +
+        ',innerHeight=' +
+        height +
+        'location=no,titlebar=no,toolbar=no');
+    if (!printDialog || !printDialog.document) {
+        onError();
+        return;
+    }
+    if (printDialog) {
+        printDialog.document.body.appendChild(dom);
+        printDialog.focus();
+        setTimeout(() => {
+            printDialog.print();
+            done();
+        });
+        const onAfterPrint = () => {
+            printDialog.removeEventListener('afterprint', onAfterPrint);
+            printDialog.close();
+        };
+        printDialog.addEventListener('afterprint', onAfterPrint);
+    }
+};
+const renderCanvas = (page, done, error) => {
+    const viewport = page.getViewport({ scale: exports.DEFAULT_ZOOM_LEVEL });
+    const styles = {};
+    const pageElement = createElement('div', '', styles);
+    const canvas = createElement('canvas', '', {
+        width: '100%',
+        height: '100%'
+    });
+    const canvasContext = canvas.getContext('2d');
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    pageElement.appendChild(canvas);
+    page.render({ canvasContext, viewport })
+        .promise.then(() => {
+        const printContent = new Image();
+        printContent.src = canvas.toDataURL();
+        pageElement.removeChild(canvas);
+        pageElement.appendChild(printContent);
+        printContent.width = canvas.width;
+        printContent.height = canvas.height;
+        const onload = () => {
+            printContent.removeEventListener('load', onload);
+            done(pageElement);
+        };
+        printContent.addEventListener('load', onload);
+    })
+        .catch(error);
+    return viewport;
+};
+const createElement = function (name, className, styles) {
+    const element = document.createElement(name);
+    if (className) {
+        element.className = className;
+    }
+    Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
+    return element;
+};
+const renderPage = (page, zoom, error) => {
+    const viewport = page.getViewport({ scale: zoom });
+    const styles = {
+        width: viewport.width + 'px',
+        height: viewport.height + 'px'
+    };
+    const pageElement = createElement('div', 'k-page', styles);
+    const canvas = createElement('canvas', '', {
+        width: '100%',
+        height: '100%'
+    });
+    const canvasContext = canvas.getContext('2d');
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    pageElement.appendChild(canvas);
+    page.render({ canvasContext, viewport })
+        .promise.then(() => {
+        page.getTextContent().then((textContent) => {
+            const textLayer = createElement('div', 'k-text-layer', styles);
+            pdfjs_dist_1.renderTextLayer({
+                textContentSource: textContent,
+                container: textLayer,
+                viewport: viewport,
+                textDivs: []
+            })
+                .promise.then(() => {
+                pageElement.appendChild(textLayer);
+            })
+                .catch(error);
+        });
+    })
+        .catch(error);
+    return pageElement;
+};
+const searchMatchScrollLeftOffset = 0;
+const searchMatchScrollTopOffset = -64;
+const scrollToSearchMatch = (matchElement, ref) => {
+    if (!matchElement) {
+        return;
+    }
+    const closestCharElement = matchElement.closest('.k-text-char');
+    const closestTextElement = closestCharElement
+        ? closestCharElement.closest('span[role="presentation"]')
+        : null;
+    if (!closestTextElement) {
+        return;
+    }
+    const closestPageElement = closestTextElement.closest('.k-page');
+    if (!closestPageElement) {
+        return;
+    }
+    const scrollLeft = closestPageElement.offsetLeft +
+        -1 * ref.scroller.element.offsetLeft +
+        closestTextElement.offsetLeft +
+        searchMatchScrollLeftOffset;
+    const scrollTop = closestPageElement.offsetTop +
+        -1 * ref.scroller.element.offsetTop +
+        closestTextElement.offsetTop +
+        searchMatchScrollTopOffset;
+    ref.scroller.scrollTo(scrollLeft, scrollTop, { trackScrollEvent: false });
+};
+/**
+ * @hidden
+ */
+exports.goToNextSearchMatch = (ref) => {
+    ref.search.markNextMatch();
+    const matchElement = ref.search.getActiveMatchElement();
+    scrollToSearchMatch(matchElement, ref);
+};
+/**
+ * @hidden
+ */
+exports.goToPreviousSearchMatch = (ref) => {
+    ref.search.markPreviousMatch();
+    const matchElement = ref.search.getActiveMatchElement();
+    scrollToSearchMatch(matchElement, ref);
+};
+/**
+ * @hidden
+ */
+exports.calculateZoomLevel = (zoomLevel, zoomLevelType, currentZoom, dom) => {
+    const documentContainer = dom.closest('.k-pdf-viewer-canvas');
+    const page = dom.querySelector('.k-page');
+    const pageSize = { width: page.offsetWidth, height: page.offsetHeight };
+    let calculatedZoomLevel = zoomLevel;
+    if (zoomLevelType === 'ActualWidth') {
+        calculatedZoomLevel = 1;
+    }
+    else if (zoomLevelType === 'FitToWidth') {
+        calculatedZoomLevel =
+            documentContainer.offsetWidth / (pageSize.width / currentZoom);
+    }
+    else if (zoomLevelType === 'FitToPage') {
+        calculatedZoomLevel =
+            documentContainer.offsetHeight / (pageSize.height / currentZoom);
+    }
+    return calculatedZoomLevel;
+};
+/**
+ * Scrolls the PDFViewer document to the passed page number.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @param pageNumber The page number.
+ */
+exports.scrollToPage = (rootElement, pageNumber) => {
+    const pages = rootElement.querySelectorAll('.k-page');
+    const page = pages[0];
+    if (page instanceof HTMLDivElement) {
+        const top = (page.offsetHeight + page.offsetTop) *
+            Math.max(0, Math.min(pageNumber, pages.length - 1));
+        const scrollElement = page.closest('.k-pdf-viewer-canvas');
+        if (scrollElement) {
+            scrollElement.scrollTo({ top, behavior: 'auto' });
+        }
+    }
+};
+/**
+ * A function which gives you the page number of the document according to the scroll position.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @returns The page number.
+ */
+exports.currentPage = (rootElement) => {
+    const scrollElement = rootElement.querySelector('.k-pdf-viewer-canvas');
+    const page = rootElement.querySelector('.k-page');
+    return scrollElement && page
+        ? Math.floor(Math.round(scrollElement.scrollTop) /
+            (page.offsetHeight + page.offsetTop) +
+            0.01)
+        : 0;
+};