@pdftools/four-heights-pdf-web-viewer 4.3.6

package/es6/pdf-web-viewer/views/modal/LoadFile.d.ts

@@ -0,0 +1,3 @@
+import { Component } from '../../../lib/hyperapp';
+/** internal */
+export declare const LoadFile: Component<{}>;

package/es6/pdf-web-viewer/views/modal/LoadFile.js

@@ -0,0 +1,10 @@
+import { h } from '../../../lib/hyperapp';
+import { translationManager } from '../../../common/TranslationManager';
+import { Loader } from '../../../common/Loader';
+/** internal */
+export const LoadFile = ({}) => (h("div", { class: "pwv-modal pwv-modal--loadFile" },
+    h("div", { class: "pwv-modal-dialog" },
+        h("div", { class: "pwv-modal-body" },
+            h("div", { class: "pwv-modal-message" },
+                h("h2", null, translationManager.getText('loadFile.title')),
+                h(Loader, null))))));

package/es6/pdf-web-viewer/views/modal/Modal.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const Modal: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/modal/Modal.js

@@ -0,0 +1,39 @@
+import { h } from '../../../lib/hyperapp';
+import { OpenFile } from './OpenFile';
+import { OpenFileError } from './OpenFileError';
+import { UnsavedChanges } from './UnsavedChanges';
+import { PasswordForm } from './PasswordForm';
+import { LoadApplication } from './LoadApplication';
+import { ApplicationError } from './ApplicationError';
+import { LoadFile } from './LoadFile';
+import { SaveFile } from './SaveFile';
+/** internal */
+export const Modal = ({}) => (state, actions) => {
+    if (state.hasError) {
+        return h(ApplicationError, null);
+    }
+    else if (!state.scriptsLoaded && !state.appInitialized) {
+        return h(LoadApplication, null);
+    }
+    else if (state.showOpenFileErrorDialog) {
+        return h(OpenFileError, null);
+    }
+    else if (state.showPasswordForm) {
+        return h(PasswordForm, null);
+    }
+    else if (state.showUnsavedChangesDialog) {
+        return h(UnsavedChanges, null);
+    }
+    else if (state.showLoadingIndicator) {
+        return h(LoadFile, null);
+    }
+    else if (state.showSaveIndicator) {
+        return h(SaveFile, null);
+    }
+    else if (!state.hasDocument) {
+        return h(OpenFile, null);
+    }
+    else {
+        return null;
+    }
+};

package/es6/pdf-web-viewer/views/modal/OpenFile.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const OpenFile: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/modal/OpenFile.js

@@ -0,0 +1,30 @@
+import { h } from '../../../lib/hyperapp';
+import { Icon, icons } from '../../../common/Icon';
+import { translationManager } from '../../../common/TranslationManager';
+import { DeviceType } from '../../state/layout';
+/** internal */
+export const OpenFile = ({}) => (state, actions) => {
+    const handleFileSelected = (e) => {
+        if (e.currentTarget.files &&
+            e.currentTarget.files.length &&
+            e.currentTarget.files.length > 0) {
+            const file = e.currentTarget.files[0];
+            if (file.type === 'application/pdf') {
+                actions.api.open({ pdfFile: { data: file, sourceTag: file.name } });
+            }
+        }
+    };
+    const { permissions, callbacks } = state.options.viewer;
+    const { deviceType } = state.layout;
+    return (h("div", { class: "pwv-modal pwv-openfile  pwv-modal--openFile" },
+        h("div", { class: "pwv-modal-dialog" },
+            h("div", { class: "pwv-modal-header" },
+                h(Icon, { icon: icons.pdfFile })),
+            h("div", { class: "pwv-modal-body" },
+                h("div", { class: "pwv-modal-message" }, deviceType === DeviceType.Desktop &&
+                    permissions.allowFileDrop &&
+                    permissions.allowOpenFile ? (h("h2", null, translationManager.getText('openFile.dropFileHere'))) : permissions.allowOpenFile ? (h("h2", null, translationManager.getText('openFile.openDocument'))) : (h("h2", null, translationManager.getText('openFile.openFileDisabled')))),
+                h("div", { class: "pwv-btn-row" }, permissions.allowOpenFile ? (callbacks.onOpenFileButtonClicked ? (h("button", { class: "pwv-btn", onclick: callbacks.onOpenFileButtonClicked }, translationManager.getText('openFile.selectFile'))) : (h("label", { class: "pwv-btn" },
+                    translationManager.getText('openFile.selectFile'),
+                    h("input", { type: "file", onchange: handleFileSelected, style: { display: 'none' } })))) : (h("div", null)))))));
+};

package/es6/pdf-web-viewer/views/modal/OpenFileError.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const OpenFileError: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/modal/OpenFileError.js

@@ -0,0 +1,13 @@
+import { h } from '../../../lib/hyperapp';
+import { Icon, icons } from '../../../common/Icon';
+import { translationManager } from '../../../common/TranslationManager';
+/** internal */
+export const OpenFileError = ({}) => (state, actions) => (h("div", { class: "pwv-modal pwv-modal--openFileError" },
+    h("div", { class: "pwv-modal-dialog" },
+        h("div", { class: "pwv-modal-header" },
+            h(Icon, { icon: icons.fileError })),
+        h("div", { class: "pwv-modal-body" },
+            h("div", { class: "pwv-modal-message" },
+                h("p", null, translationManager.getText('openFileError.description'))),
+            h("div", { class: "pwv-btn-row" },
+                h("button", { class: "pwv-btn", onclick: actions.loadDocumentConfirmRejected }, translationManager.getText('openFileError.ok')))))));

package/es6/pdf-web-viewer/views/modal/PasswordForm.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const PasswordForm: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/modal/PasswordForm.js

@@ -0,0 +1,54 @@
+import { h } from '../../../lib/hyperapp';
+import { Icon, icons } from '../../../common/Icon';
+import { classNames } from '../../../common/classNames';
+import { translationManager } from '../../../common/TranslationManager';
+/** internal */
+export const PasswordForm = ({}) => (state, actions) => {
+    const formIsValid = !state.passwordForm.passwordRequiredError &&
+        !state.passwordForm.invalidPasswordError &&
+        state.passwordForm.password !== '';
+    const shouldShowCancelButton = !state.options.viewer.general.hidePasswordFormCancelButton;
+    return (h("div", { class: "pwv-modal pwv-modal--passwordForm" },
+        h("div", { class: "pwv-modal-dialog" },
+            h("div", { class: "pwv-modal-header" },
+                h(Icon, { icon: icons.unlock })),
+            h("div", { class: "pwv-modal-body" },
+                h("form", { onsubmit: (e) => {
+                        e.preventDefault();
+                        const data = new FormData(e.currentTarget);
+                        const password = data.get('password');
+                        if (password) {
+                            if (!state.fileOpenArgs) {
+                                actions.loadDocumentRejected('error');
+                                return;
+                            }
+                            if (state.fileOpenArgs) {
+                                actions.api.open(Object.assign(Object.assign({}, state.fileOpenArgs), { password }));
+                            }
+                        }
+                    } },
+                    h("div", { class: "pwv-modal-message" },
+                        h("p", null, translationManager.getText('passwordForm.description'))),
+                    h("div", { class: "pwv-form-row" },
+                        h("div", { class: "pwv-form-field pwv-form-has-error-x" },
+                            h("input", { type: "password", class: "pwv-input", name: "password", onkeyup: (e) => {
+                                    const inputValue = e.currentTarget.value;
+                                    if (inputValue === state.passwordForm.password)
+                                        return;
+                                    actions.passwordForm.updatePassword(inputValue);
+                                    actions.passwordForm.validateForm();
+                                }, oncreate: (element) => {
+                                    element.focus();
+                                } }),
+                            state.passwordForm.invalidPasswordError && (h("div", { class: "pwv-form-error" },
+                                h(Icon, { icon: icons.warning }),
+                                h("span", null, translationManager.getText('passwordForm.invalidPasswordError')))),
+                            state.passwordForm.passwordRequiredError && (h("div", { class: "pwv-form-error" },
+                                h(Icon, { icon: icons.warning }),
+                                h("span", null, translationManager.getText('passwordForm.passwordRequiredError')))))),
+                    h("div", { class: "pwv-btn-row" },
+                        h("button", { class: classNames('pwv-btn', {
+                                'pwv-disabled': !formIsValid,
+                            }), type: "submit", disabled: !formIsValid }, translationManager.getText('passwordForm.ok')),
+                        shouldShowCancelButton && (h("button", { class: "pwv-btn", type: "button", onclick: actions.loadDocumentCancel }, translationManager.getText('passwordForm.cancel')))))))));
+};

package/es6/pdf-web-viewer/views/modal/SaveFile.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const SaveFile: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/modal/SaveFile.js

@@ -0,0 +1,10 @@
+import { h } from '../../../lib/hyperapp';
+import { translationManager } from '../../../common/TranslationManager';
+import { Loader } from '../../../common/Loader';
+/** internal */
+export const SaveFile = ({}) => (state, actions) => (h("div", { class: "pwv-modal pwv-modal--saveFile" },
+    h("div", { class: "pwv-modal-dialog" },
+        h("div", { class: "pwv-modal-body" },
+            h("div", { class: "pwv-modal-message" },
+                h("h2", null, translationManager.getText('saveFile.title')),
+                h(Loader, null))))));

package/es6/pdf-web-viewer/views/modal/UnsavedChanges.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const UnsavedChanges: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/modal/UnsavedChanges.js

@@ -0,0 +1,32 @@
+import { h } from '../../../lib/hyperapp';
+import { Icon, icons } from '../../../common/Icon';
+import { translationManager } from '../../../common/TranslationManager';
+/** internal */
+export const UnsavedChanges = ({}) => ($state, $actions) => (h("div", { class: "pwv-modal pwv-modal--unsavedChanges" },
+    h("div", { class: "pwv-modal-dialog" },
+        h("div", { class: "pwv-modal-header" },
+            h(Icon, { icon: icons.warning })),
+        h("div", { class: "pwv-modal-body" },
+            h("div", { class: "pwv-modal-message" },
+                h("p", null, translationManager.getText('unsavedChanges.description'))),
+            h("div", { class: "pwv-btn-row" },
+                h("button", { class: "pwv-btn", onclick: () => {
+                        $actions.api.downloadFile().then(() => {
+                            if ($state.closeCallback) {
+                                $state.closeCallback();
+                            }
+                            else {
+                                $actions.unsavedChangesDialogFileSaved();
+                            }
+                            if ($state.fileOpenArgs) {
+                                $actions.api.open($state.fileOpenArgs);
+                            }
+                        });
+                    } }, translationManager.getText('unsavedChanges.save')),
+                h("button", { class: "pwv-btn", onclick: () => {
+                        $actions.unsavedChangesDialogDontSave();
+                        if ($state.fileOpenArgs) {
+                            $actions.api.open($state.fileOpenArgs);
+                        }
+                    } }, translationManager.getText('unsavedChanges.dontSave')),
+                h("button", { class: "pwv-btn", onclick: $actions.unsavedChangesDialogCancel }, translationManager.getText('unsavedChanges.cancel')))))));

package/es6/pdf-web-viewer/views/navigation/AnnotationList.d.ts

@@ -0,0 +1,8 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+interface AnnotationListProps {
+    pageNumber: number;
+}
+/** internal */
+export declare const AnnotationList: ViewComponent<AnnotationListProps, PdfWebViewerState, PdfWebViewerActions>;
+export {};

package/es6/pdf-web-viewer/views/navigation/AnnotationList.js

@@ -0,0 +1,26 @@
+import { PdfItemType } from '../../../pdf-viewer-api/enums';
+import { h } from '../../../lib/hyperapp';
+import { AnnotationListItem } from './AnnotationListItem';
+import { translationManager } from '../../../common/TranslationManager';
+/** internal */
+export const AnnotationList = (props) => (state, actions) => {
+    const { pageNumber } = props;
+    const annotationsObj = state.navigationPanel.annotations[pageNumber];
+    const selectedAnnotation = state.navigationPanel.selectedAnnotation;
+    const annotations = Object.keys(annotationsObj).map((k) => annotationsObj[k]);
+    const showHiddenAnnotations = state.options.annotation.hideOnDelete && state.options.annotation.trackHistory;
+    const sortedAnnotations = annotations
+        .filter((a) => a.itemType !== PdfItemType.WIDGET && (showHiddenAnnotations || a.isHidden() === false))
+        .sort((f, s) => s.pdfRect.pdfY - f.pdfRect.pdfY);
+    if (sortedAnnotations.length < 1) {
+        return null;
+    }
+    return (h("div", null,
+        h("h4", null,
+            translationManager.getText('sideNavigation.annotation.page'),
+            " ",
+            pageNumber),
+        h("ul", null, sortedAnnotations.map((annotation) => (h(AnnotationListItem, { annotation: annotation, selected: selectedAnnotation !== undefined &&
+                selectedAnnotation.page === annotation.pdfRect.page &&
+                selectedAnnotation.annotationId === annotation.id }))))));
+};

package/es6/pdf-web-viewer/views/navigation/AnnotationListItem.d.ts

@@ -0,0 +1,8 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+import { Annotation } from '../../../pdf-viewer-api/types';
+/** internal */
+export declare const AnnotationListItem: ViewComponent<{
+    annotation: Annotation;
+    selected: boolean;
+}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/navigation/AnnotationListItem.js

@@ -0,0 +1,158 @@
+import { h } from '../../../lib/hyperapp';
+import { translationManager } from '../../../common/TranslationManager';
+import { PdfItemType } from '../../../pdf-viewer-api/enums';
+import { Icon, icons } from '../../../common/Icon';
+import { classNames } from '../../../common/classNames';
+import { formatDate } from '../../../common/Tools';
+const AnnotationIcon = ({ annotaion }) => (state, actions) => {
+    const { itemType, color } = annotaion;
+    const bg = color ? color : undefined;
+    switch (itemType) {
+        case PdfItemType.HIGHLIGHT:
+        case PdfItemType.SQUIGGLY:
+        case PdfItemType.UNDERLINE:
+        case PdfItemType.STRIKE_OUT:
+            return h(Icon, { icon: icons.highlighter, bg: bg });
+        case PdfItemType.STAMP:
+            return h(Icon, { icon: icons.stamp, bg: bg });
+        case PdfItemType.FREE_TEXT:
+            return h(Icon, { icon: icons.freeText, bg: bg });
+        case PdfItemType.POPUP:
+        case PdfItemType.TEXT:
+            return h(Icon, { icon: icons.stickyNote, bg: bg });
+        case PdfItemType.INK:
+            return h(Icon, { icon: icons.pencil, bg: bg });
+        case PdfItemType.SQUARE: {
+            const fill = annotaion.fillColor;
+            return h(Icon, { icon: icons.rectangle, bg: fill });
+        }
+        case PdfItemType.CIRCLE: {
+            const fill = annotaion.fillColor;
+            return h(Icon, { icon: icons.circle, bg: fill });
+        }
+        default:
+            return h(Icon, { icon: icons.annotation, bg: bg });
+    }
+};
+const HistoryItem = ({ item }) => (state, actions) => {
+    switch (item.Type) {
+        case '/Create':
+            return (h("li", null,
+                h("div", null,
+                    h(Icon, { icon: icons.addLayer }),
+                    item.T && h("span", { class: "pwv-author" }, item.T),
+                    h("time", null, formatDate(item.D)))));
+        case '/Edit':
+            const params = {};
+            if (item.Parms) {
+                for (let i = 0; i < item.Parms.length; i += 2) {
+                    const key = item.Parms[i];
+                    let value = item.Parms[i + 1];
+                    value = removeParentheses(value);
+                    params[key] = value ? value : '';
+                }
+            }
+            return (h("li", null,
+                h("div", null,
+                    h(Icon, { icon: icons.pen }),
+                    item.T && h("span", { class: "pwv-author" }, item.T),
+                    h("time", null, formatDate(item.D))),
+                h("div", { class: "pwv-ms-custom-history-content" },
+                    params['/Subj'] && h("h5", null, params['/Subj']),
+                    params['/Contents'] && h("p", null, params['/Contents']))));
+        case '/Lock':
+            return (h("li", null,
+                h("div", null,
+                    h(Icon, { icon: icons.lock }),
+                    item.T && h("span", { class: "pwv-author" }, item.T),
+                    h("time", null, formatDate(item.D)))));
+        case '/Unlock':
+            return (h("li", null,
+                h("div", null,
+                    h(Icon, { icon: icons.unlock }),
+                    item.T && h("span", { class: "pwv-author" }, item.T),
+                    h("time", null, formatDate(item.D)))));
+        case '/Delete':
+            return (h("li", null,
+                h("div", null,
+                    h(Icon, { icon: icons.delete }),
+                    item.T && h("span", { class: "pwv-author" }, item.T),
+                    h("time", null, formatDate(item.D)))));
+        default:
+            return h("li", null, "...");
+    }
+};
+const TextMarkupPreview = ({ annotaion }) => (state, actions) => {
+    const { markedText, itemType, color } = annotaion;
+    switch (itemType) {
+        case PdfItemType.HIGHLIGHT:
+            return h("span", { style: { backgroundColor: color } }, markedText);
+        case PdfItemType.SQUIGGLY:
+            return (h("span", { style: {
+                    textDecoration: 'underline',
+                    textDecorationStyle: 'wavy',
+                    textDecorationColor: color,
+                } }, markedText));
+        case PdfItemType.UNDERLINE:
+            return (h("span", { style: {
+                    textDecoration: 'underline',
+                    textDecorationColor: color,
+                } }, markedText));
+        case PdfItemType.STRIKE_OUT:
+            return (h("span", { style: { textDecoration: 'line-through', textDecorationColor: color } }, markedText));
+        default:
+            return null;
+    }
+};
+let dblClickTimer;
+/** internal */
+export const AnnotationListItem = ({ annotation, selected }) => (state, actions) => {
+    var _a, _b, _c, _d, _e;
+    const isTextMarkupAnnotation = annotation.itemType === PdfItemType.HIGHLIGHT ||
+        annotation.itemType === PdfItemType.SQUIGGLY ||
+        annotation.itemType === PdfItemType.UNDERLINE ||
+        annotation.itemType === PdfItemType.STRIKE_OUT;
+    const { annotationNavigation } = state.options.viewer.sidebar;
+    const textMarkupPreview = typeof annotationNavigation === 'object' && ((_a = annotationNavigation.textMarkup) === null || _a === void 0 ? void 0 : _a.preview)
+        ? annotationNavigation.textMarkup.preview
+        : 'none';
+    return (h("li", { class: classNames('pwv-annotation-navigation-item', {
+            'pwv-selected': selected,
+            'pwv-deleted': annotation.isHidden(),
+        }), id: `pwv-annotation-navigation-item-${annotation.id}`, onclick: () => {
+            if (dblClickTimer) {
+                window.clearTimeout(dblClickTimer);
+                dblClickTimer = undefined;
+            }
+            else {
+                dblClickTimer = window.setTimeout(() => {
+                    // if (!annotation.isHidden()) {
+                    // }
+                    actions.api.goToAnnotation({ annotation, action: 'select' });
+                    dblClickTimer = undefined;
+                }, 250);
+            }
+        }, ondblclick: () => {
+            actions.api.goToAnnotation({ annotation, action: 'edit' });
+            dblClickTimer = undefined;
+        } },
+        h("div", null,
+            h(AnnotationIcon, { annotaion: annotation }),
+            annotation.author && h("span", { class: "pwv-author" }, annotation.author),
+            h("time", null, (_b = annotation.modificationDate) === null || _b === void 0 ? void 0 : _b.toLocaleString())),
+        isTextMarkupAnnotation && textMarkupPreview === 'short' && (h("div", { class: "pwv-overflow-ellipsis" },
+            h(TextMarkupPreview, { annotaion: annotation }))),
+        h("div", null,
+            !state.options.annotation.hideAnnotationSubject && h("h5", null, annotation.subject),
+            annotation.content && h("p", null, annotation.content),
+            !!annotation.isLocked() && h(Icon, { icon: icons.lock, className: "pwv-locked-icon" })),
+        selected && annotation.privateData && annotation.privateData.length > 0 && (h("div", { class: "pwv-ms-custom-history-list" },
+            h("h5", null, translationManager.getText('sideNavigation.annotation.history')),
+            h("ul", null, (_e = (_d = (_c = JSON.parse(annotation.privateData)['PDF Tools AG']) === null || _c === void 0 ? void 0 : _c.Private) === null || _d === void 0 ? void 0 : _d.History) === null || _e === void 0 ? void 0 : _e.map((history) => (h(HistoryItem, { item: history }))))))));
+};
+function removeParentheses(value) {
+    if (value === null) {
+        return value;
+    }
+    return value.slice(1, value.length - 1);
+}

package/es6/pdf-web-viewer/views/navigation/AnnotationNavigation.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const AnnotationNavigation: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/navigation/AnnotationNavigation.js

@@ -0,0 +1,11 @@
+import { h } from '../../../lib/hyperapp';
+import { AnnotationList } from './AnnotationList';
+import { translationManager } from '../../../common/TranslationManager';
+/** internal */
+export const AnnotationNavigation = ({}) => (state, actions) => {
+    const { annotations, annotationsLoaded } = state.navigationPanel;
+    const pageNumbers = Object.keys(annotations).filter((pageNumber) => Object.keys(annotations[pageNumber]).length > 0);
+    return (h("div", { class: "pwv-annotation-navigation" },
+        pageNumbers.length > 0 ? (pageNumbers.map((pageNumber) => h(AnnotationList, { pageNumber: pageNumber }))) : annotationsLoaded ? (h("div", { class: "pwv-NavigationPanel__NoItems" }, translationManager.getText('sideNavigation.noAnnotations'))) : (''),
+        !annotationsLoaded && h("div", { class: "pwv-ItemLoader" })));
+};

package/es6/pdf-web-viewer/views/navigation/NavigationPanel.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const NavigationPanel: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/navigation/NavigationPanel.js

@@ -0,0 +1,50 @@
+import { h } from '../../../lib/hyperapp';
+import { ScreenSize } from '../../state/layout';
+import { translationManager } from '../../../common/TranslationManager';
+import { classNames } from '../../../common/classNames';
+import { icons } from '../../../common/Icon';
+import { Toolbar } from '../../../common/Toolbar';
+import { ToolbarItemGroup } from '../../../common/ToolbarItemGroup';
+import { ToolbarButton } from '../../../common/ToolbarButton';
+import { ThumbnailNavigation } from './ThumbnailNavigation';
+import { OutlineNavigation } from './OutlineNavigation';
+import { AnnotationNavigation } from './AnnotationNavigation';
+let scrollTimer = null;
+/** internal */
+export const NavigationPanel = ({}) => (state, actions) => {
+    const { thumbnailNavigation, outlineNavigation, annotationNavigation } = state.options.viewer.sidebar;
+    const tabCount = (thumbnailNavigation ? 1 : 0) + (outlineNavigation ? 1 : 0) + (annotationNavigation ? 1 : 0);
+    const allowRotatePages = state.options.viewer.permissions.allowRotatePages && state.licenseFeatures.pageRotation;
+    const { selectedNavigation, showNavigation } = state.navigationPanel;
+    const useMobileLayout = state.layout.screenSize === ScreenSize.Small;
+    return (h("div", { class: classNames('pwv-NavigationPanel', { 'pwv-NavigationPanel--open': showNavigation }) },
+        h("div", { class: "pwv-NavigationPanel__Box" },
+            tabCount > 1 && (h(Toolbar, null,
+                !useMobileLayout && (h(ToolbarItemGroup, null,
+                    thumbnailNavigation && (h(ToolbarButton, { icon: icons.sidePaneThumbnails, tooltip: translationManager.getText('sideNavigation.thumbnails'), active: selectedNavigation === 'thumbnail', disabled: !showNavigation, onClick: () => actions.navigationPanel.selectNavigation('thumbnail') })),
+                    outlineNavigation && (h(ToolbarButton, { icon: icons.sidePaneOutline, tooltip: translationManager.getText('sideNavigation.outline'), active: selectedNavigation === 'outline', disabled: !showNavigation, onClick: () => actions.navigationPanel.selectNavigation('outline') })),
+                    annotationNavigation && (h(ToolbarButton, { icon: icons.sidePaneAnnotation, tooltip: translationManager.getText('sideNavigation.annotation'), active: selectedNavigation === 'annotation', disabled: !showNavigation, onClick: () => actions.navigationPanel.selectNavigation('annotation') })))),
+                h(ToolbarItemGroup, { pushRight: true },
+                    h(ToolbarButton, { icon: icons.close, disabled: !showNavigation, onClick: actions.navigationPanel.toggleNavigationPanel })))),
+            h("div", { class: "pwv-NavigationPanel__Content", oncreate: (elm) => {
+                    elm.addEventListener('scroll', () => {
+                        if (scrollTimer) {
+                            window.clearTimeout(scrollTimer);
+                        }
+                        scrollTimer = window.setTimeout(() => {
+                            const fromPage = Math.floor(elm.scrollTop / 225) - 4;
+                            const toPage = fromPage + Math.floor(elm.clientHeight / 225) + 8;
+                            actions.api.addPageRangeToThumbnailsQueue({
+                                from: fromPage,
+                                to: toPage,
+                            });
+                        }, 100);
+                    });
+                } },
+                selectedNavigation === 'thumbnail' && thumbnailNavigation && (h("div", null,
+                    h(ThumbnailNavigation, { pages: state.navigationPanel.pages, selectedPage: state.pdfDocument.pageNumber, currentPage: state.pdfDocument.pageNumber, allowRotatePages: allowRotatePages, onPageSelected: actions.api.setPageNumber, onRotatePage: actions.api.rotatePage }))),
+                outlineNavigation && selectedNavigation === 'outline' && (h("div", null,
+                    h(OutlineNavigation, null))),
+                annotationNavigation && selectedNavigation === 'annotation' && (h("div", null,
+                    h(AnnotationNavigation, null)))))));
+};

package/es6/pdf-web-viewer/views/navigation/OutlineList.d.ts

@@ -0,0 +1,12 @@
+import { Component } from '../../../lib/hyperapp';
+import { OutlineNavigationItem } from '../../state/navigationPanel';
+import { PdfDestination } from '../../../pdf-viewer-api';
+/** internal */
+export interface OutlineListProps {
+    items: OutlineNavigationItem[];
+    path: string[];
+    onToggleItem(path: string[]): void;
+    onOutlineItemSelected(target: PdfDestination): void;
+}
+/** internal */
+export declare const OutlineList: Component<OutlineListProps>;

package/es6/pdf-web-viewer/views/navigation/OutlineList.js

@@ -0,0 +1,19 @@
+import { h } from '../../../lib/hyperapp';
+import { classNames } from '../../../common/classNames';
+import { Icon, icons } from '../../../common/Icon';
+/** internal */
+export const OutlineList = ({ items, path, onToggleItem, onOutlineItemSelected, }) => (h("ul", null, items.map((item) => (h(OutlineListItem, { item: item, path: path, onToggleItem: onToggleItem, onOutlineItemSelected: onOutlineItemSelected })))));
+const OutlineListItem = ({ item, path, onToggleItem, onOutlineItemSelected, }) => {
+    const childPath = path.filter((c) => true);
+    childPath.push(item.id.toString());
+    return (h("li", null,
+        h("div", null,
+            item.hasDescendants ? (h("span", { class: classNames({ 'pwv-outline-tree-btn-expand': !item.open }, { 'pwv-outline-tree-btn-collapse': item.open }), onclick: () => {
+                    onToggleItem(childPath);
+                } },
+                h(Icon, { icon: item.open ? icons.outlineOpen : icons.outlineClosed }))) : (h("span", { class: "pwv-outline-tree-indent" })),
+            h("span", { onclick: () => {
+                    onOutlineItemSelected(item.destination);
+                }, class: "pwv-outline-tree-lnk" }, item.title)),
+        item.open && item.descendants && (h(OutlineList, { items: item.descendants, path: childPath, onToggleItem: onToggleItem, onOutlineItemSelected: onOutlineItemSelected }))));
+};

package/es6/pdf-web-viewer/views/navigation/OutlineNavigation.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const OutlineNavigation: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/navigation/OutlineNavigation.js

@@ -0,0 +1,10 @@
+import { h } from '../../../lib/hyperapp';
+import { OutlineList } from './OutlineList';
+import { translationManager } from '../../../common/TranslationManager';
+/** internal */
+export const OutlineNavigation = ({}) => (state, actions) => {
+    const { outlines, outlineItemsLoaded } = state.navigationPanel;
+    return (h("div", { class: "pwv-outline-navigation" },
+        outlines.length > 0 ? (h(OutlineList, { items: outlines, path: [], onToggleItem: actions.navigationPanel.toggleOutlineItem, onOutlineItemSelected: actions.api.goTo })) : outlineItemsLoaded ? (h("div", { class: "pwv-NavigationPanel__NoItems" }, translationManager.getText('sideNavigation.noOutline'))) : (''),
+        !outlineItemsLoaded && h("div", { class: "pwv-ItemLoader" })));
+};

package/es6/pdf-web-viewer/views/navigation/ThumbnailNavigation.d.ts

@@ -0,0 +1,16 @@
+import { Component } from '../../../lib/hyperapp';
+import { RotationDirection } from '../../../pdf-viewer-api/enums';
+/** internal */
+export interface ThumbnailNavigationProps {
+    pages: any[];
+    selectedPage: number;
+    currentPage: number;
+    allowRotatePages: boolean;
+    onPageSelected(pageNr: number): void;
+    onRotatePage(pageRotation: {
+        page: number;
+        direction: RotationDirection;
+    }): void;
+}
+/** internal */
+export declare const ThumbnailNavigation: Component<ThumbnailNavigationProps>;

package/es6/pdf-web-viewer/views/navigation/ThumbnailNavigation.js

@@ -0,0 +1,32 @@
+import { h } from '../../../lib/hyperapp';
+import { classNames } from '../../../common/classNames';
+import { icons } from '../../../common/Icon';
+import { RotationDirection } from '../../../pdf-viewer-api/enums';
+import { ToolbarButton } from '../../../common/ToolbarButton';
+import { translationManager } from '../../../common/TranslationManager';
+/** internal */
+/* tslint:disable-next-line:max-line-length */
+export const ThumbnailNavigation = ({ pages, currentPage, allowRotatePages, onPageSelected, onRotatePage }, children) => (h("div", { class: "pwv-thumbnail-navigation" },
+    h("ul", null, pages.map((page) => (h("li", { id: `pwv-thumbnail-navigation-page_${page.pageNumber}`, key: page.pageNumber, class: classNames('pwv-thumbnail-navigation-page', {
+            'pwv-selected': page.pageNumber === currentPage,
+        }) },
+        h("div", { class: "pwv-thumbnail-navigation-img-container" }, page.thumbnail !== null ? (h("img", { src: page.thumbnail, onclick: () => {
+                onPageSelected(page.pageNumber);
+            } })) : (h("div", { class: "pwv-page-placeholder", onclick: () => {
+                onPageSelected(page.pageNumber);
+            } }, page.loading === true && h("div", { class: "pwv-ItemLoader" })))),
+        h("div", { class: "pwv-page-nr" },
+            allowRotatePages && page.pageNumber === currentPage && (h("div", { class: "pwv-page-rotation pwv-ToolbarItemGroup" },
+                h(ToolbarButton, { icon: icons.rotateLeft, tooltip: translationManager.getText('rotatePage.counterclockwise'), onClick: () => {
+                        onRotatePage({
+                            page: page.pageNumber,
+                            direction: RotationDirection.COUNTERCLOCKWISE,
+                        });
+                    } }),
+                h(ToolbarButton, { icon: icons.rotateRight, tooltip: translationManager.getText('rotatePage.clockwise'), onClick: () => {
+                        onRotatePage({
+                            page: page.pageNumber,
+                            direction: RotationDirection.CLOCKWISE,
+                        });
+                    } }))),
+            h("span", null, page.pageNumber))))))));