Commit d00f5b16 authored by Wolfgang Test's avatar Wolfgang Test

Extend pb-toggle-feature to support setting additional properties on the...

Extend pb-toggle-feature to support setting additional properties on the target. Allow components to wait until a pb-ready event is received on the channel they listen to.
parent d29cc1aa
......@@ -111,12 +111,28 @@
}
}
/**
* Wait until a `pb-ready` event is received from one of the channels
* this component subscribes to. Used internally by components which depend
* on a particular `pb-view` to be ready and listening to events.
*
* @param callback function to be called when `pb-ready` is received
*/
waitForChannel(callback) {
const listener = function() {
document.removeEventListener('pb-ready', listener);
callback();
};
this.subscribeTo('pb-ready', listener);
}
/**
* Signal that the component is ready to respond to events.
*/
signalReady() {
this._isReady = true;
this.dispatchEvent(new CustomEvent('pb-ready'));
this.emitTo('pb-ready');
}
/**
......
......@@ -20,20 +20,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
* views would be backed by the same ODD and processing model, while the passed in parameter
* can be used to distinguish the modes.
* Choose a particular display feature by setting a custom parameter
* which will be passed to the ODD by `pb-view`. This is similar to `pb-toggle-feature`,
* except that it allows the value to be selected from a drop down list.
*
* 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.
* For example, the following snippet would result in a custom parameter called `lang` with
* either a value of `en` or `fr`. Within processing model predicates it could be queried as
* `$parameters?lang='fr'`.
*
* ```
* <pb-toggle-feature name="mode" on="diplomatic" off="norm">Diplomatic View</pb-toggle-feature>
* <pb-select-feature name="tlang" label="Language" emit="translation" subscribe="translation">
* <pb-item value="en">English</pb-item>
* <pb-item value="fr">French</pb-item>
* </pb-select-feature>
* ```
*
* Unlike `pb-toggle-feature`, this component does not allow changing additional properties (e.g. the ODD) on the
* `pb-view`.
*
* @customElement
* @polymer
* @demo demo/pb-toggle-feature.html
......@@ -53,6 +57,9 @@
name: {
type: String
},
/**
* The label to display on top of the drop down
*/
label: {
type: String
},
......@@ -88,6 +95,15 @@
} else {
this.selected = this._items[0].value;
}
this.waitForChannel(() => {
const params = {
name: this.name,
value: this.selected,
action: 'init'
};
this.emitTo('pb-toggle', params);
});
this.signalReady();
}
_changed(newVal, oldVal) {
......@@ -99,6 +115,7 @@
this.pushHistory('toggle feature ' + this.name);
const params = {
action: 'refresh',
name: this.name,
value: this.selected
};
......
......@@ -28,6 +28,17 @@
* <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:
*
* ```
* <pb-toggle-feature name="mode" on="diplomatic" off="norm" properties-on='{"odd": "myodd"}' properties-off='{"odd": "myodd-diplomatic"}'>
* Diplomatic View
* </pb-toggle-feature>
* ```
*
* It is important that `pb-toggle-feature` emits and subscribes to the same channel as the target `pb-view`.
*
* @customElement
* @polymer
* @demo demo/pb-toggle-feature.html
......@@ -59,10 +70,30 @@
off: {
type: String
},
/**
* The default setting: either 'on' or 'off'
*/
default: {
type: String,
value: 'on'
},
/**
* Additional properties to set on the pb-view if toggle is in 'on' state.
* Possible properties are 'view', 'odd' and 'columnSeparator'.
*/
propertiesOn: {
type: Object
},
/**
* Additional properties to set on the pb-view if toggle is in 'off' state.
* Possible properties are 'view', 'odd' and 'columnSeparator'.
*/
propertiesOff: {
type: Object
},
checked: {
type: Boolean,
observer: '_changed',
value: true
observer: '_changed'
}
};
}
......@@ -75,9 +106,21 @@
return;
}
let param = this.getParameter(this.name);
if (typeof param !== 'undefined' && param === 'false') {
this.checked = false;
if (typeof param !== 'undefined') {
this.checked = param === this.on;
} else {
this.checked = this.default === 'on';
}
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.signalReady();
}
_changed(newVal, oldVal) {
......@@ -85,13 +128,14 @@
if (!this.name) {
return;
}
this.setParameter(this.name, this.checked);
this.setParameter(this.name, this.checked ? this.on : this.off);
this.pushHistory('toggle feature ' + this.name);
const params = {
name: this.name,
state: this.checked,
value: this.checked ? this.on : this.off
value: this.checked ? this.on : this.off,
properties: this.checked ? this.propertiesOn : this.propertiesOff,
action: 'refresh'
};
this.emitTo('pb-toggle', params);
}
......
......@@ -315,8 +315,7 @@
} else if (nodeId && !this.nodeId) {
this.nodeId = nodeId;
}
this.waitFor = 'pb-toggle-feature ' + this.waitFor;
}
ready() {
......@@ -326,11 +325,13 @@
});
this.subscribeTo('pb-refresh', this._refresh.bind(this));
this.subscribeTo('pb-toggle', ev => {
this.toggleFeature(ev.detail);
this.toggleFeature(ev);
});
this.subscribeTo('pb-zoom', ev => {
this.zoom(ev.detail.direction);
});
this.signalReady();
if (this.onUpdate) {
this.subscribeTo('pb-update', this._refresh.bind(this));
} else {
......@@ -657,9 +658,24 @@
}
}
toggleFeature(feature) {
this._features[feature.name] = feature;
this._load();
toggleFeature(ev) {
this._features[ev.detail.name] = ev.detail;
const properties = ev.detail.properties;
console.log('<pb-view> toggle feature %o', properties);
if (properties) {
if (properties.odd) {
this.odd = properties.odd;
}
if (properties.view) {
this.view = properties.view;
}
if (properties.hasOwnProperty('columnSeparator')) {
this.columnSeparator = properties.columnSeparator;
}
}
if (ev.detail.action === 'refresh') {
this._load();
}
}
_getFragmentBefore(node, ms) {
......
......@@ -76,7 +76,7 @@
<app-toolbar data-template="templates:include" data-template-path="templates/menu.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-toggle-feature name="mode" on="diplomatic" off="norm" emit="transcription" subscribe="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"
......
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