basic-text-extractor.html

<!--
Exposes the text of its own content as an attribute which can be bound to.

Elements often need to convert the content of distributed nodes into a value
which can be passed to an *attribute* on another element via binding. This
element makes that possible in a declarative fashion. For example, suppose an
element wants to pass its own distributed content to a sub-element called
interesting-element:

<polymer-element name="sample-element" noscript>
<template>
  <basic-text-extractor value="{{foo}}">
    <content></content>
  </basic-text-extractor>
  <interesting-element value="{{foo}}"></interesting-element>
</template>
</polymer-element>

This element effectively lets one bind to the text of a content element. If the
distributed content itself contains content elements, these will be recursively
traversed in document order.

@element basic-text-extractor
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../basic-shared/basic-shared.html">

<dom-module id="basic-text-extractor">
  <template>

    <style>
    /* Hide this element unless the .show class is applied. */
    :host(:not(.show)) {
      display: none;
    }
    </style>

    <content id="content"></content>

  </template>
</dom-module>

<script>
Polymer({

  behaviors: [Basic.ContentChanged],

  contentChanged: function() {
    this.value = this.flattenTextContent.trim();
  },

  is: 'basic-text-extractor',

  properties: {
    /**
     * The flattened text, including text in distributed content.
     * White space will be trimmed from the result.
     *
     * @attribute value
     */
    value: {
      notify: true,
      type: String,
      value: undefined
    }
  }

});
</script>