Commit 20366d94 authored by Magdalena Turska's avatar Magdalena Turska
parents 1c0ac1a0 44cce210
......@@ -20,12 +20,16 @@
display: flex;
justify-content: space-between;
}
pb-toggle-feature {
display: block;
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #E0E0E0;
}
pb-toggle-feature {
display: block;
}
</style>
</custom-style>
</head>
......@@ -38,7 +42,13 @@
<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="mode" on="diplomatic" off="norm">Diplomatic View</pb-toggle-feature>
<div class="toolbar">
<pb-toggle-feature name="mode" on="diplomatic" off="norm">Diplomatic View</pb-toggle-feature>
<pb-select-feature name="xpath" label="Select View">
<pb-item value="//text[@type='source']">Transcription</pb-item>
<pb-item value="//text[@type='translation']">Translation</pb-item>
</pb-select-feature>
</div>
<main>
<pb-view id="view1" src="document1" view="single" xpath="//text[@type='source']"></pb-view>
</main>
......
......@@ -20,6 +20,21 @@
display: flex;
justify-content: space-between;
}
pb-navigation {
position: fixed;
bottom: 45%;
--paper-fab-background: #35424b;
color: white;
}
pb-navigation[direction=backward] {
left: 20px;
}
pb-navigation[direction=forward] {
right: 20px;
}
</style>
</custom-style>
</head>
......
......@@ -96,9 +96,10 @@
this.selected = this._items[0].value;
}
this.waitForChannel(() => {
const props = {};
props[this.name] = this.selected;
const params = {
name: this.name,
value: this.selected,
properties: props,
action: 'init'
};
this.emitTo('pb-toggle', params);
......@@ -107,17 +108,18 @@
}
_changed(newVal, oldVal) {
if (newVal !== oldVal) {
if (typeof oldVal !== 'undefined' && newVal !== oldVal) {
if (!this.name) {
return;
}
this.setParameter(this.name, this.selected);
this.pushHistory('toggle feature ' + this.name);
const props = {};
props[this.name] = this.selected;
const params = {
action: 'refresh',
name: this.name,
value: this.selected
properties: props
};
this.emitTo('pb-toggle', params);
}
......
......@@ -14,9 +14,24 @@
<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
* Enable or disable a particular display feature by setting a predefined or custom parameter.
*
* Predefined view parameters known are
*
* | Parameter | Description |
* | ----------------|-------------|
* | odd | the ODD to use |
* | view | the view type: 'page', 'div' or 'single' |
* | columnSeparator | CSS selector to find elements to use as column separator |
*
* For example, one may switch between page-by-page and by-division view using
*
* ```
* <pb-toggle-feature emit="transcription" name="view" on="page" off="div">Page View</pb-toggle-feature>
* ```
*
* It is also possible to set custom parameters, which will be passed to the ODD as user-defined parameters.
* This can be used e.g. 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.
*
......@@ -28,11 +43,13 @@
* <pb-toggle-feature name="mode" on="diplomatic" off="norm">Diplomatic View</pb-toggle-feature>
* ```
*
* You may also set additional properties on the target `pb-view` via the `properties-on` and `properties-off`
* attributes. For example, in 'on' state, you may want to use a different ODD:
* Besides setting a single parameter, you may also set multiple
* properties on the target `pb-view` via the `properties-on` and `properties-off`
* attributes (as an alternative to `on` and `off`). For example, in 'on' state, you may
* want to use a different ODD and switch the view to 'page' at the same time:
*
* ```
* <pb-toggle-feature name="mode" on="diplomatic" off="norm" properties-on='{"odd": "myodd"}' properties-off='{"odd": "myodd-diplomatic"}'>
* <pb-toggle-feature properties-on='{"odd": "myodd", "view": "page"}' properties-off='{"odd": "myodd-diplomatic", "view": "div"}'>
* Diplomatic View
* </pb-toggle-feature>
* ```
......@@ -62,13 +79,15 @@
* Value to set the parameter to when the feature is enabled.
*/
on: {
type: String
type: String,
observer: '_valueOnChanged'
},
/**
* Value to set the parameter to when the feature is disabled.
*/
off: {
type: String
type: String,
observer: '_valueOffChanged'
},
/**
* The default setting: either 'on' or 'off'
......@@ -82,14 +101,16 @@
* Possible properties are 'view', 'odd' and 'columnSeparator'.
*/
propertiesOn: {
type: Object
type: Object,
value: {}
},
/**
* Additional properties to set on the pb-view if toggle is in 'off' state.
* Possible properties are 'view', 'odd' and 'columnSeparator'.
*/
propertiesOff: {
type: Object
type: Object,
value: {}
},
checked: {
type: Boolean,
......@@ -101,10 +122,8 @@
connectedCallback() {
super.connectedCallback();
if (!this.name) {
console.log('<pb-toggle-feature> missing name: %o', this);
return;
}
this.initializing = true;
let param = this.getParameter(this.name);
if (typeof param !== 'undefined') {
this.checked = param === this.on;
......@@ -113,32 +132,35 @@
}
this.waitForChannel(() => {
const params = {
name: this.name,
value: this.checked ? this.on : this.off,
properties: this.checked ? this.propertiesOn : this.propertiesOff,
action: 'init'
};
this.emitTo('pb-toggle', params);
this.initializing = false;
});
this.signalReady();
}
_changed(newVal, oldVal) {
if (typeof oldVal !== 'undefined' && newVal !== oldVal) {
if (!this.name) {
return;
}
this.setParameter(this.name, this.checked ? this.on : this.off);
this.pushHistory('toggle feature ' + this.name);
const params = {
name: this.name,
value: this.checked ? this.on : this.off,
properties: this.checked ? this.propertiesOn : this.propertiesOff,
action: 'refresh'
};
this.emitTo('pb-toggle', params);
_changed() {
if (this.initializing) {
return;
}
this.setParameter(this.name, this.checked ? this.on : this.off);
this.pushHistory('toggle feature ' + this.name);
const params = {
properties: this.checked ? this.propertiesOn : this.propertiesOff,
action: 'refresh'
};
this.emitTo('pb-toggle', params);
}
_valueOnChanged(newVal, oldVal) {
this.propertiesOn[this.name] = newVal;
}
_valueOffChanged(newVal, oldVal) {
this.propertiesOff[this.name] = newVal;
}
}
......
......@@ -12,6 +12,7 @@
* Needs to be subscribed to a particular view. Listen to its `update` event
* to determine current view type and reading position.
*
* @deprecated use pb-toggle-feature instead
* @customElement
* @polymer
* @appliesMixin PbMixin
......
......@@ -277,9 +277,7 @@
_features: {
type: Object,
readOnly: true,
value: function() {
return {};
}
value: {}
}
};
}
......@@ -331,7 +329,7 @@
this.zoom(ev.detail.direction);
});
this.signalReady();
if (this.onUpdate) {
this.subscribeTo('pb-update', this._refresh.bind(this));
} else {
......@@ -471,6 +469,7 @@
this.next = resp.next;
this.previous = resp.previous;
this.nodeId = resp.root;
this.switchView = resp.switchView;
if (this.xmlId && !this.map) {
this.setParameter('root', this.nodeId);
this.pushHistory('Navigate to xml:id');
......@@ -557,9 +556,9 @@
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
);
for (const [key, value] of Object.entries(this._features)) {
params['user.' + key] = value;
}
return params;
}
......@@ -618,7 +617,6 @@
* @param {string} direction either `backward` or `forward`
*/
navigate(direction) {
console.log('navigate ', direction);
this.lastDirection = direction;
if (direction === 'backward') {
......@@ -659,15 +657,30 @@
}
toggleFeature(ev) {
this._features[ev.detail.name] = ev.detail;
const properties = ev.detail.properties;
console.log('<pb-view> toggle feature %o', properties);
for (const [key, value] of Object.entries(properties)) {
switch (key) {
case 'odd':
case 'view':
case 'columnSeparator':
case 'xpath':
break;
default:
this._features[key] = value;
break;
}
}
if (properties) {
if (properties.odd) {
this.odd = properties.odd;
}
if (properties.view) {
this.view = properties.view;
this.root = this.switchView;
}
if (properties.xpath) {
this.xpath = properties.xpath;
}
if (properties.hasOwnProperty('columnSeparator')) {
this.columnSeparator = properties.columnSeparator;
......
......@@ -96,7 +96,7 @@
</pb-media-query>
<div class="settings">
<h3>Settings</h3>
<pb-view-type subscribe="transcription" emit="transcription">Page View</pb-view-type>
<pb-toggle-feature emit="transcription" name="view" on="page" off="div">Page View</pb-toggle-feature>
<pb-select-odd label="Use ODD:" emit="transcription" subscribe="transcription" src="document1"></pb-select-odd>
<pb-select-template label="Template"></pb-select-template>
<pb-edit-xml src="document1">
......
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