embedly-embed.html

<link rel="import" href="/bower_components/polymer/polymer.html">
<!--
A Polymer custom element that utilizes the Embedly API to embed content.

@element embedly-embed
@homepage https://github.com/miztroh/embedly-embed
-->
<link rel="import" href="/bower_components/core-ajax/core-ajax.html">
<link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">
<polymer-element name="embedly-embed">
  <template>
    <style>
      :host {
        display: inline-block;
      }

      :host #embed {
        display: block;
      }

      :host #embed img {
        display: block;
      }
    </style>
    <core-ajax id="ajax" url="//api.embed.ly/1/oembed" handleAs="json" params='{"key":"{{key}}","url":"{{url}}"}' auto on-core-response="{{ajaxResponse}}"></core-ajax>
    <template if="{{$.ajax.loading}}">
      <paper-spinner active></paper-spinner>
    </template>
    <a id="embed" href="{{embed.url}}" target="_blank" title="{{embed.title || embed.description || embed.url}}">
      <template if="{{embed.type === 'video' || embed.type === 'rich'}}">
        <embedly-html html="{{embed.html}}"></embedly-html>
      </template>
      <template if="{{embed.type === 'photo'}}">
        <img src="{{embed.url}}"></img>
      </template>
      <template if="{{embed.type === 'link'}}">
        <template if="{{embed.thumbnail_url}}">
          <img src="{{embed.thumbnail_url}}"></img>
        </template>
        <template if="{{!embed.thumbnail_url}}">
          <span>{{embed.title || embed.description || embed.url}}</span>
        </template>
      </template>
    </a>
  </template>
  <script>
    Polymer(
      {
        ajaxResponse: function (event, detail, sender) {
          this.embed = detail.response;
          if (this.embed.type === 'error') console.error('embedly-embed', {url: this.embed.url, error_message: this.embed.error_message, error_code: this.embed.error_code});
        },
        publish: {
  				/**
          * Embedly embed response.
          *
          * @property embed
          * @type Object
          * @default {}
          */
          embed: {},
  				/**
          * Embedly API key.
          *
          * @property key
          * @type String
          * @default ''
          */
          key: {
            value: '',
            reflect: true
          },
  				/**
          * URL of content to embed.
          *
          * @property url
          * @type String
          * @default ''
          */
          url: {
            value: '',
            reflect: true
          }
        }
      }
    );
  </script>
</polymer-element>
<polymer-element name="embedly-html">
  <template>
  	<style>
  	  :host {
      	display: block;
      }

      :host ::content iframe {
        display: block;
        max-width: 100%;
      }
    </style>
  	<content></content>
  </template>
	<script>
    Polymer(
      {
        htmlChanged: function () {
          this.innerHTML = this.html;
        },
        publish: {
          html: ''
        }
      }
    );
	</script>
</polymer-element>