@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
94 lines (88 loc) • 4.31 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
<title>pb-document Demo</title>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
</head>
<body>
<pb-demo-snippet>
<template>
<style type="text/css">
pb-facsimile {
flex: 1 0;
min-width: 400px;
--pb-facsimile-border: 4px solid rgba(0, 128, 90, 0.5);
margin-right: 20px;
}
main > div {
display: flex;
height: 70vh;
flex-direction: row;
justify-content: flex-start;
}
[slot="after"] {
margin-top: 5px;
padding-top: 10px;
border-top: 1px solid #606060;
}
[slot="before"] {
padding-bottom: 10px;
margin-bottom: 5px;
border-bottom: 1px solid #606060;
}
</style>
<pb-page endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0" url-path="query">
<!-- Display facsimile -->
<main>
<div>
<pb-facsimile base-uri="https://apps.existsolutions.com/cantaloupe/iiif/2/"
facsimiles='["15929_000_IDL5772_BOss12034_IIIp79.jpg", "15929_000_IDL5772_BOss12034_IIIp80.jpg", "15929_000_IDL5772_BOss12034_IIIp81.jpg", "15929_000_IDL5772_BOss12034_IIIp82.jpg",
"does-not-exist.jpg"]'
default-zoom-level="0" show-navigator show-sequence-control reference-strip
show-navigation-control show-home-control show-rotation-control show-full-page-control>
<h3 slot="before">Facsimile Viewer Test</h3>
<div slot="after">Status: <span id="status"></span></div>
</pb-facsimile>
<ul>
<li>
<pb-facs-link facs="15929_000_IDL5772_BOss12034_IIIp79.jpg">Page 79</pb-facs-link>, first page
</li>
<li>
<pb-facs-link facs="15929_000_IDL5772_BOss12034_IIIp80.jpg">Page 80</pb-facs-link>
</li>
<li>
<pb-facs-link facs="15929_000_IDL5772_BOss12034_IIIp81.jpg">Page 81</pb-facs-link>
</li>
<li>
<pb-facs-link facs="15929_000_IDL5772_BOss12034_IIIp82.jpg">Page 82</pb-facs-link>
</li>
<li>
<pb-facs-link facs="15929_000_IDL5772_BOss12034_IIIp82.jpg"
coordinates="[59,1796,429,1027]">Fragment on page 82</pb-facs-link>
</li>
<li>
<pb-facs-link facs="does-not-exist.jpg">Missing image: hide viewer</pb-facs-link>
</li>
</ul>
</div>
</main>
<script>
window.addEventListener('load', () => {
const viewer = document.querySelector('pb-facsimile');
const status = document.getElementById('status');
window.pbEvents.subscribe('pb-facsimile-status', null, (ev) => {
if (ev.detail.status === 'fail') {
viewer.style.visibility = 'hidden';
} else {
viewer.style.visibility = 'visible';
status.innerHTML = ev.detail.status;
}
});
});
</script>
</pb-page>
</template>
</pb-demo-snippet>
</body>
</html>