@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
67 lines (61 loc) • 3.29 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-grid Demo</title>
<style>
svg {
width: 1rem;
height: 1rem;
}
pb-grid-action {
margin-bottom: 1rem;
}
</style>
<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>
<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" view="single"></pb-document>
<pb-grid-action action="add" class="grid-add" grid="#grid" initial="1">
<button>Add Column</button>
</pb-grid-action>
<!-- Define the grid with one initial column -->
<pb-grid id="grid" panels="[0,1]" subscribe="transcription" animation="true">
<!-- For every grid column, the following template will be stamped into the page -->
<template>
<pb-panel emit="transcription">
<!-- Added to the toolbar -->
<li slot="toolbar">
<pb-grid-action grid="#grid" action="remove">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
d="M368 368L144 144M368 144L144 368" />
</svg>
</pb-grid-action>
</li>
<template title="Transcription">
<pb-view class="animated" src="document1"
xpath="! (.//text[@xml:lang = 'la']/body | .//text/body)[1]" emit="transcription">
</pb-view>
</template>
<template title="Translation">
<pb-view class="animated" src="document1" xpath="//text[@xml:lang='pl']/body"
subscribe="transcription"></pb-view>
</template>
<template title="Facsimile">
<pb-facsimile base-uri="https://apps.existsolutions.com/cantaloupe/iiif/2/"
facsimiles='["15929_000_IDL5772_BOss12034_IIIp79.jpg"]' default-zoom-level="0"
show-navigator="show-navigator" show-navigation-control="show-navigation-control">
</pb-facsimile>
</template>
</pb-panel>
</template>
</pb-grid>
</pb-page>
</template>
</pb-demo-snippet>
</body>
</html>