@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
86 lines (81 loc) • 4.72 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-toggle-feature Demo</title>
<link rel="stylesheet" href="demo.css">
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
</head>
<body>
<h1>Using pb-toggle-feature with pb-view</h1>
<p><i>Plain Reading View</i> toggles off various forms of highlights in the text for undisturbed reading
experience.
Foreign language passages ("<i>amor est doctor amoris</i>) will not be italicized, current passage will not be
highlighted as cursor moves into its area, and popups on persons ("<i>Johanes Dantiscus</i>"), places
("<i>Polonia</i>"") and choice elements ("<i>V.S./Vuestra Señoria</i>") will be disabled. This toggle operates
client-side, see <code>pb-toggle-feature name="highlight1"</code> for configuration.
</p>
<p>
<i>Diplomatic View</i> toggles between two values for the <code>mode</code> parameter ("norm" and "diplomatic").
This parameter is passed on to the server and available in the ODD to inform PM transformations - as a result
treatment of choice elements changes, e.g. abbreviations are presented in their original form ("<i>V.S./Vuestra
Señoria</i>") and line breaks shown.
Similarly, <i>Page View</i> switches between whole document ("single") or paged view. <i>Translation</i>
switches between the transcription and translation parts of the text (note that translation view makes no sense
with the "Page" switch on for our example as the pages were not encoded in the translation).
Three last toggles all influence server-side processing thus require making a request to the server when
the setting is changed. Client-side toggles ("Plain Reading View" in this case) are applied afterwards to the
results returned from the server.
</p>
<pb-demo-snippet>
<template>
<style>
body {
--paper-fab-background: #35424b;
}
main {
display: flex;
justify-content: space-between;
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #E0E0E0;
}
pb-toggle-feature {
display: block;
}
</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/cortes_to_dantiscus.xml" odd="dantiscus"></pb-document>
<div class="toolbar">
<pb-toggle-feature name="plain" selector=".tei-foreign,pb-highlight,pb-popover"
action="disable" default="off">Plain Reading View</pb-toggle-feature>
<!-- pass a parameter 'mode'. pb-view will forward this to the ODD as a user-defined parameter-->
<pb-toggle-feature name="mode" on="diplomatic" off="norm">Diplomatic View</pb-toggle-feature>
<!-- directly change properties of the pb-view -->
<pb-toggle-feature name="view" on="page" off="single" default="off">Page View</pb-toggle-feature>
<pb-toggle-feature name="translation" default="off"
properties-on='{"xpath": "//text[@type='translation']", "odd": "teipublisher", "nodeId": null, "view": "single"}'
properties-off='{"xpath": "//text[@type='source']", "odd": "dantiscus"}'>
Translation
</pb-toggle-feature>
<!-- Navigate to previous page -->
<pb-navigation direction="backward" keyboard="left">
<paper-icon-button icon="icons:chevron-left"></paper-icon-button>
</pb-navigation>
<!-- Navigate to next page -->
<pb-navigation direction="forward" keyboard="right">
<paper-icon-button icon="icons:chevron-right"></paper-icon-button>
</pb-navigation>
</div>
<main>
<pb-view id="view1" src="document1" xpath="//text[@type='source']"></pb-view>
</main>
</pb-page>
</template>
</pb-demo-snippet>
</body>
</html>