@mescius/dspdfviewer/examples/navigation.js

Document Solutions PDF Viewer

const links = [{
    href: '/examples',
    title: 'More Examples'
}, {
    href: '/docs',
    title: 'Documentation'
}];

const navId = 'ds-examples-navigation';

function renderLinks() {
    const navElement = document.createElement('div');
    navElement.id = navId;
    
    for (const { href, title } of links) {
        const linkElement = document.createElement('a');
        linkElement.href = href;
        linkElement.innerText = title;
        navElement.appendChild(linkElement);
    }

    document.body.appendChild(navElement);
}

function renderServerStartWarning() {
    const navElement = document.createElement('div');
    navElement.id = navId;
    navElement.innerHTML = `<span>For advanced usage examples and documentation run local web server with <code>npx serve</code><span>`

    document.body.appendChild(navElement);
}

function addExamplesStylesheet() {
    const styleElement = document.createElement('style');
    styleElement.innerHTML = `
        #${navId} {
            position: absolute;
            display: flex;
            bottom: 16px;
            right: 16px;
            border-radius: 8px;
            overflow: hidden;
            font: 12px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            background: #205F78;
        }

        #${navId} > * {
            color: #ffffff;
            display: block;
            padding: 8px;
            max-width: 300px;
        }

        #${navId} code {
            background: black;
            padding: 4px;
            white-space: nowrap;
        }

        #${navId} > *:hover {
            background: #0b455c;
        }

        #${navId} > a, #${navId} > a:visited {
            text-decoration: none;
        }

        #${navId} > a:not(:last-child) {
            border-right: 1px solid #fff;
        }
    `
    document.head.appendChild(styleElement);
}

document.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector(`#${navId}`)) return;

    addExamplesStylesheet();

    if (location.protocol.startsWith('file')) {
        renderServerStartWarning();
    } else if (location.protocol.startsWith('http')) {
        renderLinks();
    }
});