@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
97 lines (88 loc) • 4.47 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>Toggling drawer from custom event</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">
demo-snippet {
position: relative;
}
main {
height: 70vh;
overflow: auto;
display: flex;
justify-content: center;
position: relative;
}
pb-view::part(footnotes) {
border-top: 1px solid #d0d0d0;
margin-top: 20px;
}
pb-drawer {
background-color: #f0f0f0;
--pb-drawer-width: 33vw;
}
pb-drawer::part(content) {
padding: 0 20px;
}
.tei-persName3, .tei-placeName3 {
font-weight: bold;
}
.tei-persName3::after, .tei-placeName3::after {
content: ': ';
}
</style>
<pb-page endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0" url-path="query">
<pb-document id="document1" path="test//orlik_to_serafin.xml" odd="serafin"></pb-document>
<pb-progress></pb-progress>
<p>Disable popovers for names and places. Show the information in the drawer instead if a name is clicked.
The content to be displayed is taken from the alternate and copied into the drawer.
</p>
<hr>
<pb-drawer id="info-drawer" emit="info" subscribe="info" position="right">
<div class="drawer-content">
<h3>Additional Information</h3>
<div id="info-content"></div>
</div>
</pb-drawer>
<main>
<pb-view id="view1" src="document1" append-footnotes
xpath="! (.//text[@xml:lang = 'la']/body | .//text/body)[1]" emit="transcription" subscribe="transcription"></pb-view>
</main>
</pb-page>
<script>
window.addEventListener('DOMContentLoaded', () => {
// wait for the transcription to be loaded, then search the loaded HTML for
// names
pbEvents.subscribe('pb-update', 'transcription', (ev) => {
// the HTML content to be displayed is passed in ev.detail.root
const root = ev.detail.root;
root.querySelectorAll('.tei-persName5, .tei-placeName5').forEach((name) => {
// disable the popover behaviour
name.command('disable', true);
// register click listener on each name
name.addEventListener('click', (ev) => {
ev.preventDefault();
ev.stopPropagation();
// get the alternate content of each name ...
const tmpl = name.querySelector('template');
// ... and copy it into the drawer
const div = document.getElementById('info-content');
div.innerHTML = '';
div.appendChild(tmpl.content.cloneNode(true));
// finally display the drawer
document.getElementById('info-drawer').opened = true;
});
});
});
});
</script>
</template>
</pb-demo-snippet>
</body>
</html>