Skip to main content

Text-centric viewer

Simple version​

The simple version of a text centric viewer is just the simplest viewer but with the ability to select text:

Simple viewer
<html><head>    <title>Text Viewer - simple</title>    <style>        #manifest { width: 50vw; }        #th { width:12vw; border-right: 1px solid #999; margin: 5px; float:left; height:90%; overflow-y:scroll; }                #main { width:78vw; margin-top:30px; margin-left:10px; float:left; height:90%;}         .tc { display: inline-block; padding:5px; cursor: pointer; }        #cp { height:100% }    </style>    <script src="https://cdn.jsdelivr.net/npm/@digirati/canvas-panel-web-components@latest"></script>    <script src="https://cdn.jsdelivr.net/npm/@iiif/vault-helpers@latest/dist/index.umd.js"></script></head><body>    <h1>A simple viewer using Canvas Panel</h1>    <h2 id="manifestLabel"></h2>    <div>            <input id="manifest" type="text" value="https://iiif.wellcomecollection.org/presentation/b18035723" />        <input id="go" type="button" value="Go" />                <br/>        <input id="toggleText" type="button" value="Enable text selection" data-mode="off">    </div>        <div>            <div id="th"></div>        <div id="main">            <canvas-panel id="cp" height="600" text-enabled="true"></canvas-panel>            <p id="cvLabel"></p>        </div>    </div>    <script>            function $(id) { return document.getElementById(id); }        const cp = $("cp");         const thumbHelper = VaultHelpers.createThumbnailHelper(cp.vault);        async function loadManifest(){            const manifestUri = $("manifest").value;            if(manifestUri){                const manifest = await cp.vault.loadManifest(manifestUri);                       $("manifestLabel").innerText = VaultHelpers.getValue(manifest.label);                      let thumbsHtml = "";                // A real viewer could use <sequence-panel> for thumbnails, too.                // To keep this minimal we''' make thumbnail links by hand.                for(const canvasRef of cp.vault.get(manifest.items)){                         const canvas = cp.vault.get(canvasRef);                             const label = VaultHelpers.getValue(canvas.label);                    thumbsHtml += `<div class="tc">${label}<br/>`;                    thumbsHtml += `<img data-uri="${canvas.id}" data-label="${label}" src="${canvas.thumbnail[0].id}" />`;                    thumbsHtml += '</div>';                   }                $('th').innerHTML = thumbsHtml;                    const thumbs = document.querySelectorAll('#th img');                      for(const thumb of thumbs){                    thumb.addEventListener('click', selectCanvas);                }                  thumbs[0].click();            }        }        $("go").addEventListener('click', loadManifest);        loadManifest();        function selectCanvas(){            const cvId = this.getAttribute("data-uri");            cp.setCanvas(cvId);            $("cvLabel").innerText = this.getAttribute("data-label");        }                $("toggleText").addEventListener("click", () => {            if(cp.getAttribute("text-selection-enabled") == "false"){                cp.disableTextSelection();                $("toggleText").value = "Enable text selection";            } else {                                cp.enableTextSelection();                $("toggleText").value = "Disable text selection";            }        });     </script></body></html>

More complex text-enabled viewer​

danger

This example requires the features described in text examples.

This viewer extends Simple Viewer to add support for:

  • Text selection on the Canvas
  • Text display alongside the Canvas

...building on the text examples.

It also demonstrates how Canvas Panel can be used to make any text in IIIF resources accessible to assistive technologies.

Discuss on GitHub