Commit 655d7d88 authored by Wolfgang's avatar Wolfgang

Add new component to enable/disable display features, which are passed to the...

Add new component to enable/disable display features, which are passed to the ODD as custom parameters. See docs and Cortez letter for examples.
parent e298215a
This diff is collapsed.
<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>
<script src="../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="../dependencies-dev.html"/>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
body {
--paper-fab-background: #35424b;
}
demo-snippet {
position: relative;
}
main {
display: flex;
justify-content: space-between;
}
pb-toggle-feature {
display: block;
padding: 10px;
background-color: #E0E0E0;
}
</style>
</custom-style>
</head>
<body>
<demo-snippet>
<template>
<pb-document id="document1" path="test/cortes_to_dantiscus.xml" odd="dantiscus"></pb-document>
<p>Switch between a diplomatic and normalized view of the text by passing a parameter to the ODD, which can be
used in processing model rules to distinguish view modes. In the example below, the normalized view omits the original
line endings and expands abbreviations.</p>
<pb-toggle-feature name="dipl" parameter="mode" on="diplomatic" off="norm">Diplomatic View</pb-toggle-feature>
<main>
<pb-view id="view1" src="document1" view="single" xpath="//text[@type='source']"></pb-view>
</main>
</template>
</demo-snippet>
</body>
</html>
......@@ -73,6 +73,7 @@
<link rel="import" href="pb-paginate.html">
<link rel="import" href="pb-document.html">
<link rel="import" href="pb-view.html">
<link rel="import" href="pb-toggle-feature.html"/>
<link rel="import" href="pb-navigation.html">
<link rel="import" href="pb-zoom.html">
<link rel="import" href="pb-view-type.html">
......
<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="pb-mixin.html">
<dom-module id="pb-toggle-feature">
<template>
<style>
:host {
display: block;
}
</style>
<paper-checkbox checked="{{checked}}"><slot></slot></paper-checkbox>
</template>
<script>
/**
* Enable or disable a particular display feature by setting a custom parameter
* which will be passed to the ODD by `pb-view`. This can be used to implement
* different views on the text, e.g. a 'diplomatic' and a 'normalized' mode. Both
* views would be backed by the same ODD and processing model, while the passed in parameter
* can be used to distinguish the modes.
*
* For example, the following snippet would result in a custom parameter called `mode` with
* either a value of `dipl` or `norm`. Within processing model predicates it could be queried as
* `$parameters?mode='norm'` to check if the normalized version should be output.
*
* ```
* <pb-toggle-feature name="mode" on="diplomatic" off="norm">Diplomatic View</pb-toggle-feature>
* ```
*
* @customElement
* @polymer
* @demo demo/pb-toggle-feature.html
* @appliesMixin PbMixin
*/
class PbToggleFeature extends PbMixin(Polymer.Element) {
static get is() {
return 'pb-toggle-feature';
}
static get properties() {
return {
/**
* The name of the feature (required). This will correspond to the name of the custom parameter
* passed to the ODD.
*/
name: {
type: String
},
/**
* Value to set the parameter to when the feature is enabled.
*/
on: {
type: String
},
/**
* Value to set the parameter to when the feature is disabled.
*/
off: {
type: String
},
checked: {
type: Boolean,
observer: '_changed',
value: true
}
};
}
connectedCallback() {
super.connectedCallback();
if (!this.name) {
console.log('<pb-toggle-feature> missing name: %o', this);
return;
}
let param = this.getParameter(this.name);
if (typeof param !== 'undefined' && param === 'false') {
this.checked = false;
}
}
_changed(newVal, oldVal) {
if (typeof oldVal !== 'undefined' && newVal !== oldVal) {
if (!this.name) {
return;
}
this.setParameter(this.name, this.checked);
this.pushHistory('toggle feature ' + this.name);
const params = {
name: this.name,
state: this.checked,
value: this.checked ? this.on : this.off
};
this.emitTo('pb-toggle', params);
}
}
}
window.customElements.define(PbToggleFeature.is, PbToggleFeature);
</script>
</dom-module>
......@@ -254,13 +254,6 @@
type: String,
value: 'ltr'
},
toggleStates: {
type: Object,
readOnly: true,
value: function() {
return {};
}
},
/**
* wether to animate the view when new page is loaded. Defaults to 'false' meaning that no
* animation takes place. If 'true' will apply a translateX transistion in forward/backward direction.
......@@ -268,6 +261,13 @@
animation: {
type:Boolean,
value:false
},
_features: {
type: Object,
readOnly: true,
value: function() {
return {};
}
}
};
}
......@@ -314,7 +314,7 @@
});
this.subscribeTo('pb-refresh', this._refresh.bind(this));
this.subscribeTo('pb-toggle', ev => {
this.toggle(ev.detail.selector, ev.detail.state);
this.toggleFeature(ev.detail);
});
this.subscribeTo('pb-zoom', ev => {
this.zoom(ev.detail.direction);
......@@ -493,8 +493,6 @@
this._initFootnotes(this.$.content);
this._applyToggles();
return elem;
}
......@@ -540,6 +538,10 @@
this.querySelectorAll('pb-param').forEach(function(param) {
params['user.' + param.getAttribute('name')] = param.getAttribute('value');
});
// add parameters for features set with pb-toggle-feature
Object.values(this._features).forEach((feature) =>
params['user.' + feature.name] = feature.value
);
return params;
}
......@@ -638,15 +640,9 @@
}
}
toggle(selector, state) {
this.toggleStates[selector] = state;
this._applyToggles();
}
_applyToggles() {
Object.keys(this.toggleStates).forEach((selector) =>
this.$.view.querySelectorAll(selector).forEach((elem) => elem.toggle(this.toggleStates[selector]))
);
toggleFeature(feature) {
this._features[feature.name] = feature;
this._load();
}
_getFragmentBefore(node, ms) {
......
This diff is collapsed.
......@@ -74,7 +74,22 @@
<app-header-layout>
<app-header slot="header" reveals="reveals" fixed="fixed" effects="waterfall" data-template="browse:fix-links">
<app-toolbar data-template="templates:include" data-template-path="templates/menu.html"/>
<app-toolbar data-template="templates:include" data-template-path="templates/toolbar.html"/>
<app-toolbar class="toolbar" sticky="sticky">
<paper-icon-button id="tocToggle" class="toc-toggle" icon="icons:view-list"/>
<pb-toggle-feature name="mode" on="diplomatic" off="norm" emit="transcription">Diplomatic View</pb-toggle-feature>
<pb-zoom emit="transcription" direction="in" icon="icons:zoom-in"/>
<pb-zoom emit="transcription" direction="out" icon="icons:zoom-out"/>
<pb-navigation emit="transcription" keyboard="left"
subscribe="transcription" direction="backward" unit="page">
<paper-icon-button icon="icons:chevron-left"/>
</pb-navigation>
<pb-navigation emit="transcription" keyboard="right"
subscribe="transcription" direction="forward" unit="page">
<paper-icon-button icon="icons:chevron-right"/>
</pb-navigation>
<paper-icon-button icon="icons:menu" drawer-toggle="drawer-toggle"/>
<pb-progress subscribe="transcription" indeterminate="indeterminate" bottom-item="bottom-item"/>
</app-toolbar>
</app-header>
<section class="breadcrumbs">
......@@ -90,4 +105,4 @@
</app-drawer-layout>
</pb-page>
</body>
</html>
\ No newline at end of file
</html>
......@@ -119,13 +119,16 @@ declare function model:apply($config as map(*), $input as node()*) {
if (sic and corr) then
epub:alternate($config, ., ("tei-choice4", "choice"), ., corr[1], sic[1])
else
if (abbr and expan) then
if ($parameters?mode='norm' and abbr and expan) then
epub:alternate($config, ., ("tei-choice5", "choice"), ., expan[1], abbr[1])
else
if (orig and reg) then
epub:alternate($config, ., ("tei-choice6", "choice"), ., reg[1], orig[1])
if (abbr and expan) then
epub:alternate($config, ., ("tei-choice6", "choice"), ., abbr[1], expan[1])
else
$config?apply($config, ./node())
if (orig and reg) then
epub:alternate($config, ., ("tei-choice7", "choice"), ., reg[1], orig[1])
else
$config?apply($config, ./node())
case element(hi) return
if (@rendition) then
html:inline($config, ., css:get-rendition(., ("tei-hi1")), .)
......@@ -289,7 +292,10 @@ declare function model:apply($config as map(*), $input as node()*) {
case element(docTitle) return
epub:block($config, ., css:get-rendition(., ("tei-docTitle")), .)
case element(lb) return
epub:break($config, ., css:get-rendition(., ("tei-lb")), ., 'line', @n)
if ($parameters?mode='norm') then
html:omit($config, ., ("tei-lb1"), .)
else
epub:break($config, ., css:get-rendition(., ("tei-lb2")), ., 'line', @n)
case element(w) return
html:inline($config, ., ("tei-w"), .)
case element(stage) return
......@@ -344,7 +350,7 @@ declare function model:apply($config as map(*), $input as node()*) {
if (not(@target)) then
html:inline($config, ., ("tei-ref1"), .)
else
if (not(text())) then
if (not(node())) then
html:link($config, ., ("tei-ref2"), @target, @target, (), map {})
else
html:link($config, ., ("tei-ref3"), ., @target, (), map {})
......
......@@ -124,13 +124,16 @@ declare function model:apply($config as map(*), $input as node()*) {
if (sic and corr) then
latex:alternate($config, ., ("tei-choice4", "choice"), ., corr[1], sic[1])
else
if (abbr and expan) then
if ($parameters?mode='norm' and abbr and expan) then
latex:alternate($config, ., ("tei-choice5", "choice"), ., expan[1], abbr[1])
else
if (orig and reg) then
latex:alternate($config, ., ("tei-choice6", "choice"), ., reg[1], orig[1])
if (abbr and expan) then
latex:alternate($config, ., ("tei-choice6", "choice"), ., abbr[1], expan[1])
else
$config?apply($config, ./node())
if (orig and reg) then
latex:alternate($config, ., ("tei-choice7", "choice"), ., reg[1], orig[1])
else
$config?apply($config, ./node())
case element(hi) return
if (@rendition) then
latex:inline($config, ., css:get-rendition(., ("tei-hi1")), .)
......@@ -291,7 +294,10 @@ declare function model:apply($config as map(*), $input as node()*) {
case element(docTitle) return
latex:block($config, ., css:get-rendition(., ("tei-docTitle")), .)
case element(lb) return
latex:break($config, ., css:get-rendition(., ("tei-lb")), ., 'line', @n)
if ($parameters?mode='norm') then
latex:omit($config, ., ("tei-lb1"), .)
else
latex:break($config, ., css:get-rendition(., ("tei-lb2")), ., 'line', @n)
case element(w) return
latex:inline($config, ., ("tei-w"), .)
case element(stage) return
......@@ -346,7 +352,7 @@ declare function model:apply($config as map(*), $input as node()*) {
if (not(@target)) then
latex:inline($config, ., ("tei-ref1"), .)
else
if (not(text())) then
if (not(node())) then
latex:link($config, ., ("tei-ref2"), @target, @target, map {})
else
latex:link($config, ., ("tei-ref3"), ., @target, map {})
......
......@@ -112,13 +112,16 @@ declare function model:apply($config as map(*), $input as node()*) {
if (sic and corr) then
fo:alternate($config, ., ("tei-choice4", "choice"), ., corr[1], sic[1])
else
if (abbr and expan) then
if ($parameters?mode='norm' and abbr and expan) then
fo:alternate($config, ., ("tei-choice5", "choice"), ., expan[1], abbr[1])
else
if (orig and reg) then
fo:alternate($config, ., ("tei-choice6", "choice"), ., reg[1], orig[1])
if (abbr and expan) then
fo:alternate($config, ., ("tei-choice6", "choice"), ., abbr[1], expan[1])
else
$config?apply($config, ./node())
if (orig and reg) then
fo:alternate($config, ., ("tei-choice7", "choice"), ., reg[1], orig[1])
else
$config?apply($config, ./node())
case element(hi) return
if (@rendition) then
fo:inline($config, ., css:get-rendition(., ("tei-hi1")), .)
......@@ -279,7 +282,10 @@ declare function model:apply($config as map(*), $input as node()*) {
case element(docTitle) return
fo:block($config, ., css:get-rendition(., ("tei-docTitle")), .)
case element(lb) return
fo:break($config, ., css:get-rendition(., ("tei-lb")), ., 'line', @n)
if ($parameters?mode='norm') then
fo:omit($config, ., ("tei-lb1"), .)
else
fo:break($config, ., css:get-rendition(., ("tei-lb2")), ., 'line', @n)
case element(w) return
fo:inline($config, ., ("tei-w"), .)
case element(stage) return
......@@ -334,7 +340,7 @@ declare function model:apply($config as map(*), $input as node()*) {
if (not(@target)) then
fo:inline($config, ., ("tei-ref1"), .)
else
if (not(text())) then
if (not(node())) then
fo:link($config, ., ("tei-ref2"), @target, @target, map {})
else
fo:link($config, ., ("tei-ref3"), ., @target, map {})
......
......@@ -117,13 +117,16 @@ declare function model:apply($config as map(*), $input as node()*) {
if (sic and corr) then
html:alternate($config, ., ("tei-choice4", "choice"), ., corr[1], sic[1])
else
if (abbr and expan) then
if ($parameters?mode='norm' and abbr and expan) then
html:alternate($config, ., ("tei-choice5", "choice"), ., expan[1], abbr[1])
else
if (orig and reg) then
html:alternate($config, ., ("tei-choice6", "choice"), ., reg[1], orig[1])
if (abbr and expan) then
html:alternate($config, ., ("tei-choice6", "choice"), ., abbr[1], expan[1])
else
$config?apply($config, ./node())
if (orig and reg) then
html:alternate($config, ., ("tei-choice7", "choice"), ., reg[1], orig[1])
else
$config?apply($config, ./node())
case element(hi) return
if (@rendition) then
html:inline($config, ., css:get-rendition(., ("tei-hi1")), .)
......@@ -287,7 +290,10 @@ declare function model:apply($config as map(*), $input as node()*) {
case element(docTitle) return
html:block($config, ., css:get-rendition(., ("tei-docTitle")), .)
case element(lb) return
html:break($config, ., css:get-rendition(., ("tei-lb")), ., 'line', @n)
if ($parameters?mode='norm') then
html:omit($config, ., ("tei-lb1"), .)
else
html:break($config, ., css:get-rendition(., ("tei-lb2")), ., 'line', @n)
case element(w) return
html:inline($config, ., ("tei-w"), .)
case element(stage) return
......@@ -342,7 +348,7 @@ declare function model:apply($config as map(*), $input as node()*) {
if (not(@target)) then
html:inline($config, ., ("tei-ref1"), .)
else
if (not(text())) then
if (not(node())) then
html:link($config, ., ("tei-ref2"), @target, @target, (), map {})
else
html:link($config, ., ("tei-ref3"), ., @target, (), map {})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment