ldx-widgets/dist/components/iframe_embedder.js

widgets

(function() {
  var IframeEmbedder, React, ReactDOM, iframe, object, ref;

  React = require('react');

  ReactDOM = require('react-dom');

  ref = React.DOM, iframe = ref.iframe, object = ref.object;


  /*
    @type - OPTIONAL - String
      file type to be set as an attribute on the iframe
  
    @src - REQUIRED - String
      the source of the document to be loaded in the iframe
  
    @className - OPTIONAL - String
      the CSS class set to the iframe
  
    @height - OPTIONAL - String | Number
      a fixed height for the container
  
    @width - OPTIONAL - String | Number 
      a fixed width for the container
  
    @ieObject - OPTIONAL - Boolean
      whether or not an <object> element will be used to accommodate IE
  
    @resizeContentAfterLoad - OPTIONAL - Function
      fired when the iframe finishes loading. This can be used to set a fixed height on a parent container in order to match the height of the embedded content. This is useful because iframes will not take the height of their content by default
   */

  IframeEmbedder = React.createClass({
    displayName: 'IframeEmbedder',
    propTypes: {
      type: React.PropTypes.string,
      src: React.PropTypes.string.isRequired,
      className: React.PropTypes.string,
      height: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
      width: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
      ieObject: React.PropTypes.bool,
      resizeContentAfterLoad: React.PropTypes.func
    },
    getDefaultProps: function() {
      return {
        height: '100%',
        width: '100%',
        className: 'iframe-embedded',
        type: ''
      };
    },
    render: function() {
      var className, height, ref1, src, type, width;
      ref1 = this.props, src = ref1.src, width = ref1.width, height = ref1.height, className = ref1.className, type = ref1.type, this.ieObject = ref1.ieObject;
      if (this.ieObject) {
        return object({
          className: className,
          data: src,
          type: type,
          width: width,
          height: '100%'
        });
      } else {
        return iframe({
          className: className,
          src: src,
          width: width,
          height: height,
          ref: 'embeddedFrame'
        });
      }
    },
    componentDidMount: function() {
      if (!this.ieObject) {
        return ReactDOM.findDOMNode(this.refs.embeddedFrame).addEventListener('load', this.resizeContentAfterLoad);
      }
    },
    resizeContentAfterLoad: function() {
      return this.props.resizeContentAfterLoad(ReactDOM.findDOMNode(this.refs.embeddedFrame).contentDocument.getElementsByTagName('html')[0].scrollHeight + 40);
    }
  });

  module.exports = IframeEmbedder;

}).call(this);