react-impress

impress.jsx

/** @jsx React.DOM */

var RenderedDeck = React.createClass({
  render: function() {
    return <div id={this.props.id} className="deck" dangerouslySetInnerHTML={{__html:this.props.contents}}></div>;
  }
});

var Deck = React.createClass({
  render: function() {
    var classes = this.props.className + ' Deck';
    return <iframe className={classes} />;
  },
  componentDidMount: function() {
    this.update();
  },
  componentDidUpdate: function(prevProps) {
    if (this.props.contents != prevProps.contents) {
      this.update();
    } else {
      this.impress.goto(this.props.slide);
    }
  },
  update: function(cb) {
    this.props.id = "deck";
    React.renderComponent(
      RenderedDeck(this.props),
      this.getDOMNode().contentDocument.body,
      function() {
        var cd = this.getDOMNode().contentDocument;

        var tag = cd.createElement("script");
        tag.onload = function() {
          this.impress = this.getDOMNode().contentWindow.impress("deck");
          this.impress.init();
          this.impress.goto(this.props.slide, 0);
        }.bind(this);
        tag.src = '/static/js/impress.js';
        cd.body.appendChild(tag);

        tag = cd.createElement("link");
        tag.rel = "stylesheet";
        tag.type = "text/css";
        tag.href = '/static/css/impress-demo.css';
        cd.getElementsByTagName('head')[0].appendChild(tag);
      }.bind(this)
    );
  },
  //componentDidUpdate: function() {
  //  this.impress.goto(this.props.slide);
  //},
  handleKeyUp: function(event) {
    if (this.props.preventKeys) {
      event.preventDefault();
    }
  }
});

module.exports = Deck;

+1