foaas-element.html

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/shadycss/apply-shim.html">

<dom-module id="foaas-element">
  <template>
    <style>
      :host {
        display: inline;
      }

      #foaas {
        @apply --foaas-element-theme;
      }

      #foaas_content {
        @apply --foaas-element-quote-theme;
      }

      #foaas_signature {
        @apply --foaas-element-signature-theme;
      }
    </style>
    <iron-ajax id="foaas_load" handle-as="json" headers='{"Accept": "application/json"}'>
    </iron-ajax>
    <div id="foaas">
      <div id="foaas_content"></div>
      <div id="foaas_signature"></div>
    </div>
  </template>

  <script>
    /**
     * `foaas-element`
     * This component will help you add the contents provided by www.foaas.com
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class FoaasElement extends Polymer.Element {
      static get is() { return 'foaas-element'; }
      static get properties() {
        return {
          loading: {
            type: Boolean,
            value: false,
            notify: true,
            ReadOnly: true,
            reflectToAttribute: true
          },
          type: {
            type: String,
            observer: '_typeChanged'
          },
          from: { type: String, value: 'Arsène Lupin' },
          company: { type: String, value: 'Acme' },
          name: { type: String, value: 'My friend' },
          tool: { type: String, value: 'computer' },
          something: { type: String, value: 'lava lamp' },
          reference: { type: String, value: 'W3C' },
          noun: { type: String, value: 'ben' },
          reaction: { type: String, value: 'code' },
          behavior: { type: String, value: 'behavior' },
          thing: { type: String, value: 'the thing' },
          do: { type: String, value: 'throw' },
          language: { type: String, value: 'javascript' }
        };
      }

      static get URL() { return "http://www.foaas.com/"; }

      connectedCallback() {
        super.connectedCallback();
        this._loadFoaas();
      }

      _typeChanged(newValue, oldValue) {
        if (oldValue !== undefined) {
          this._loadFoaas();
        }
      }

      async _loadFoaas() {
        this.loading = true;
        try {
          if (this._type_descriptions === undefined) {
            let description = await this._loadTypeDescriptions();
            this._processDescriptions(description);
          }
          let quote = await this._loadQuote();
          this._processResponseQuote(quote);
        }
        catch (e) {
          this._processError(e);
        }
      }

      async _loadQuote() {
        let ajax = this.$.foaas_load;
        ajax.url = this._generateUrl();
        return ajax.generateRequest().completes;
      }

      _processResponseQuote(response) {
        let foaas_response = response.__data.response;
        this.$.foaas_content.textContent = foaas_response.message;
        this.$.foaas_signature.textContent = foaas_response.subtitle;
        this.loading = false;
      }

      _processError(error) {
        this.$.foaas_content.textContent = "oups, there was a problem with you giving a fuck";
        this.loading = false;
      }

      _generateUrl() {
        let url = FoaasElement.URL;
        // First we add the type
        url += this.type + "/";
        // Then the parameters
        // We are using the fact that the properties of the component have 
        // the same name than the parameters in the description
        url += this._type_descriptions[this.type].map(elem => this[elem]).join("/");
        return url;
      }

      async _loadTypeDescriptions() {
        let ajax = this.$.foaas_load;
        ajax.url = FoaasElement.URL + "operations";
        return ajax.generateRequest().completes;
      }

      _processDescriptions(response) {
        this._type_descriptions = {};
        let foaas_response = response.__data.response;
        for (let elem of foaas_response) { // forEach doesn't work here. wtf ?
          let tab_api = elem.url.split('/');
          // The second item of the url is the type (because the url begins with "/")
          // Then comes the list of parameters. Every parameter begins with a ':'
          tab_api.shift();
          let type = tab_api.shift();
          this._type_descriptions[type] = tab_api.map(elem => elem.substring(1));
        }
        return Promise.resolve();
      }
    }

    window.customElements.define(FoaasElement.is, FoaasElement);
  </script>
</dom-module>