rest-api-doc.html

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

<!--
`rest-api-doc` defines an endpoint for a `rest-api-page`.

Example:

    <rest-api-page base-url="https://httpbin.org">
      <rest-api-doc title="I'm a title" endpoint="/post" method="POST">
        <rest-api-param key="param" type="number" values="[1, 2, 3]">Explanation for the param</rest-api-param>
        <rest-api-header key="Content-Type" values='["application/json"]'>Explanation for the header</rest-api-header>
        <rest-api-kv-body key="key" values='["application(json"]' optional>Explanation for the key-value body</rest-api-header>
        <rest-api-explanation>Explanation for the endpoint</rest-api-explanation>
      </rest-api-doc>
    </rest-api-page>

@group REST Elements
@element rest-api-doc
@hero hero.svg
-->
<dom-module id="rest-api-doc">

  <template>
    <style>
      :host {
        position: relative;
        display: block;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
      }
      paper-button {
        position: absolute;
        top: 8px;
        right: 8px;
        background: #F44336;
        color: #fff;
      }
    </style>
    <content></content>
  </template>
</dom-module>

<script>

  Polymer({

    is: 'rest-api-doc',

    hostAttributes: {
      hidden: true
    },

    properties: {

      /**
       * The `title` of the request
       */
      title: String,

      /**
       * The `endpoint` to send the request to
       */
      endpoint: String,

      /**
       * The HTTP `method` of the request, e.g. `GET`, `POST`, etc.
       */
      method: {
        type: String,
        value: 'GET'
      },

      /**
       * Values the HTTP `parameters` has to or optionally can contain
       * @type {Array<{key: string, type: string, optional: boolean, values: string}>}
       */
      params: Array,

      /**
       * Values the `headers` of the HTTP Request has to or optionally can contain
       * @type {Array<{key: string, type: string, optional: boolean, values: string}>}
       */
      headers: Array,

      /**
       * Values the `body` of the HTTP Request has to or optionally can contain
       * @type {Array<{key: string, type: string, optional: boolean, values: string}>}
       */
      body: Array,

      /**
       * The explanation of the endpoint
       */
      explanation: String,

      /**
       * The DOM observer
       */
      _observer: Object
    },

    ready: function () {
      this.set('params', []);
      this.set('headers', []);
      this.set('body', null);
      this.set('explanation', '');
      // Observe DOM mutations
      this._observer = Polymer.dom(this).observeNodes(function (info) {
        this._setRequestInfo();
      });
    },

    /**
     * Updates request information
     * @private
     */
    _setRequestInfo: function () {
      var params = this.queryAllEffectiveChildren('rest-api-param');
      var headers = this.queryAllEffectiveChildren('rest-api-header');
      var body = this.queryAllEffectiveChildren('rest-api-body');
      var kvBody = this.queryAllEffectiveChildren('rest-api-kv-body');
      var explanation = this.queryAllEffectiveChildren('rest-api-explanation');
      // Check for duplicate body declaration
      if (body.length > 0 && kvBody > 0) {
        console.warn('Only use either <rest-api-body> or <rest-api-kv-body>, ' +
            'but not both for one api. Now using: <rest-api-body>');
        this.set('body', body[0]);
      } else if (body.length > 0) {
        this.set('body', body[0]);
      } else if (kvBody.length > 0) {
        this.set('body', kvBody);
      } else {
        this.set('body', null);
      }

      this.set('params', params);
      this.set('headers', headers);
      if (explanation.length > 0)
        this.set('explanation', explanation[0].innerHTML);
    }
  });

</script>