ldx-widgets/dist/components/iframe_embedder.js

widgets

(function() {
  var IframeEmbedder, React, iframe;

  React = require('react');

  iframe = React.DOM.iframe;


  /*
    @type - OPTIONAL - String
      file type contained within the iframe
  
    @src - REQUIRED - String
      the source of the document to be loaded in the iframe
  
    @id - OPTIONAL - String
      the id attribute used on the iframe
  
    @name - OPTIONAL - String
      the name attribute used on the string. Also used when accessing frames[]
  
    @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
  
    @queryParams - OPTIONAL - Object
      query params passed with iframe request
  
    @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
  
    @requestClass - REQUIRED - Function
      required function that contains the server request class used for making service calls
   */

  IframeEmbedder = React.createClass({
    displayName: 'IframeEmbedder',
    propTypes: {
      type: React.PropTypes.string,
      src: React.PropTypes.string.isRequired,
      id: React.PropTypes.string,
      name: React.PropTypes.string,
      className: React.PropTypes.string,
      height: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
      width: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
      resizeContentAfterLoad: React.PropTypes.func,
      queryParams: React.PropTypes.object,
      requestClass: React.PropTypes.func.isRequired
    },
    getDefaultProps: function() {
      return {
        height: '100%',
        width: '100%',
        className: 'iframe-embedded',
        type: '',
        id: '',
        name: ''
      };
    },
    render: function() {
      var className, height, id, name, ref, width;
      ref = this.props, width = ref.width, height = ref.height, className = ref.className, id = ref.id, name = ref.name;
      return iframe({
        className: className,
        src: 'about:blank',
        width: width,
        height: height,
        id: id,
        name: name,
        ref: 'embeddedFrame'
      });
    },
    componentWillReceiveProps: function(nextProps) {
      if (this.props.src !== nextProps.src) {
        return this.getDocument(nextProps);
      }
    },
    getDocument: function(props) {
      var queryParams, requestClass, src, type;
      src = props.src, queryParams = props.queryParams, type = props.type, requestClass = props.requestClass;
      return new requestClass({
        url: src,
        data: queryParams
      }).done((function(_this) {
        return function(res) {
          if (src && (res != null)) {
            if ((type != null ? type.search('text/') : void 0) > -1) {
              res = "<pre style='white-space: pre-wrap;'>" + res + "</pre>";
            }
            if (_this.refs.embeddedFrame.contentDocument != null) {
              _this.refs.embeddedFrame.contentDocument.open();
              _this.refs.embeddedFrame.contentDocument.writeln(res);
              _this.refs.embeddedFrame.contentDocument.close();
              return _this.resizeContentAfterLoad();
            }
          }
        };
      })(this));
    },
    componentDidMount: function() {
      return this.getDocument(this.props);
    },
    resizeContentAfterLoad: function() {
      var base, docHeight;
      docHeight = this.refs.embeddedFrame.contentDocument.getElementsByTagName('html')[0].scrollHeight;
      return typeof (base = this.props).resizeContentAfterLoad === "function" ? base.resizeContentAfterLoad(docHeight + 40) : void 0;
    },
    shouldComponentUpdate: function(nextProps) {
      return this.props.src !== nextProps.src || this.props.height !== nextProps.height || this.props.width !== nextProps.width;
    }
  });

  module.exports = IframeEmbedder;

}).call(this);