Commit e724e9d0 authored by Wolfgang's avatar Wolfgang

Add component pb-select-feature: similar to pb-toggle-feature, but shows a...

Add component pb-select-feature: similar to pb-toggle-feature, but shows a list of values to select from
parent bd56f720
......@@ -74,6 +74,7 @@
<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-select-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-select-feature">
:host {
display: block;
<paper-dropdown-menu label="[[label]]">
<paper-listbox id="list" slot="dropdown-content" selected="{{selected}}" attr-for-selected="value">
<template id="repeat" is="dom-repeat" items="[[_items]]">
<paper-item value$="[[item.value]]">[[item.label]]</paper-item>
* 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 PbSelectFeature extends PbMixin(Polymer.Element) {
static get is() {
return 'pb-select-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
label: {
type: String
selected: {
type: String,
observer: '_changed'
_items: {
type: Array
connectedCallback() {
if (! {
console.log('<pb-select-feature> missing name: %o', this);
this._items = [];
this.querySelectorAll('pb-item').forEach(function(item) {
value: item.getAttribute('value'),
label: item.innerHTML
let param = this.getParameter(;
if (typeof param !== 'undefined') {
this.selected = param;
} else {
this.selected = this._items[0].value;
_changed(newVal, oldVal) {
if (newVal !== oldVal) {
if (! {
this.setParameter(, this.selected);
this.pushHistory('toggle feature ' +;
const params = {
value: this.selected
this.emitTo('pb-toggle', params);
window.customElements.define(, PbSelectFeature);
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