rest-api-header.html

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

<!--
`rest-api-header` declares a header for an endpoint.

Example:

      <rest-api-page baseUrl="https://httpbin.org">
        <rest-api-doc title="Post request" endpoint="/post" method="POST">
          <rest-api-header key="Content-Type" values='["application/json"]'>Explanation for the header</rest-api-header>
        </rest-api-doc>
      </rest-api-page>

@group REST Elements
@element rest-api-header
@hero hero.svg
-->
<dom-module id="rest-api-header">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <content></content>
  </template>
  <script>
    (function () {
      'use strict';

      Polymer({
        is: 'rest-api-header',

        hostAttributes: {
          hidden: true
        },

        properties: {
          /**
           * The key of the header
           */
          key: String,
          /**
           * The type of the header value
           */
          type: {
            type: String,
            value: 'string',
            readOnly: true
          },
          /**
           * Possible/Example values
           * Set it for a default response
           */
          values: Array,
          /**
           * If this header is optional
           */
          optional: Boolean,
          /**
           * Explanation for the header
           */
          explanation: String,
          /**
           * The DOM observer
           */
          _observer: Object
        },

        ready: function () {
          console.log("Called");
          // Observer mutations for the DOM
          this._observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
              // Reset the explanation
              this.explanation = this.innerText.trim();
            }.bind(this));
          }.bind(this));

          var config = {characterData: true, subtree: true};
          this._observer.observe(this, config);
          // Set initial explanation
          this.explanation = this.innerText.trim();
        },

        detached: function () {
          // Remove observer
          this._observer.disconnect();
        }

      });
    })();
  </script>
</dom-module>