caniuse-embed.html

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

<dom-module id="caniuse-embed">

  <template>
    <style>
      :host {
        display: block;
        width: 100%;
      }
    </style>

    <!-- HTML added in ready() -->

  </template>

  <script>
  Polymer({
    is: 'caniuse-embed',
    properties: {
      /* The feature slug from caniuse.com */
      feature: String,

      /* The number of future browser versions to display (optional) */
      futureVersions: String,

      /* The number of previous browser versions to display (optional) */
      pastVersions: String
    },
    ready: function() {

      if ( !this.feature ) this.textContent = `A feature was not included. Go to <a href='http://caniuse.bitsofco.de/#how-to-use'>http://caniuse.bitsofco.de/#how-to-use</a> to generate an embed.`;

      const periods = calculatePeriods(this.futureVersions, this.pastVersions);

      this.innerHTML = `
      <iframe src="//caniuse.bitsofco.de/embed/index.html?feat=${this.feature}&periods=${periods}"
              frameborder="0"
              width="100%"
              height="400px"></iframe>
      `;

    }
  });


  function calculatePeriods(futureVersions, pastVersions) {

    let future = '';
    if ( futureVersions ) {
      futureVersions = parseInt(futureVersions) > 3 ? 3 : parseInt(futureVersions);
      for (let i = 1; i < futureVersions + 1; i++) {
        future += `future_${i},`
      }
    }

    let past = '';
    if ( pastVersions ) {
      pastVersions = parseInt(pastVersions) > 5 ? 5 : parseInt(pastVersions);
      for (let i = 1; i < pastVersions + 1; i++) {
        past += `,past_${i}`
      }
    }

    return future + 'current' + past;
  }


  // Handle Sizing of iFrame
  const eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
	const eventer = window[eventMethod];
	const messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
	eventer(messageEvent, function(e) {
		const data = e.data;
		if (  (typeof data === 'string') && (data.indexOf('ciu_embed') > -1) ) {
		 	const featureID = data.split(':')[1];
		 	const height = parseInt( data.split(':')[2] ) + 30;
      const iframe = document.querySelector('iframe');
      iframe.height = height + 'px';
		}
	},false);

  </script>

</dom-module>