Merge pull request #36 from mathieudutour/master

remove fid from Appear

Author: kenwheeler

README.markdown

@@ -216,7 +216,7 @@ The element tags are the bread and butter of your slide content. Most of these t
 
 ####\<Appear />
 
-This tag does not extend from Base. It's special. Wrapping elements in the appear tag makes them appear/disappear in order in response to navigation. The Appear tag requires adding `fid` tags that are unique within a given slide. This requirement will go away in React 0.14.
+This tag does not extend from Base. It's special. Wrapping elements in the appear tag makes them appear/disappear in order in response to navigation.
 
 ####\<BlockQuote />, \<Quote/> and \<Cite /> (Base)
 

src/appear.jsx

@@ -21,15 +21,15 @@ const Appear = React.createClass({
   },
   componentDidMount() {
     this.context.flux.stores.SlideStore.listen(this._storeChange);
-    const slide = this.context.slide;
   },
   componentWillUnmount() {
     this.context.flux.stores.SlideStore.unlisten(this._storeChange);
   },
   _storeChange(state) {
     const slide = this.context.slide;
+    const fragment = React.findDOMNode(this.refs.fragment);
     const key = _.findKey(state.fragments[slide], {
-      "id": this.props.fid
+      "id": parseInt(fragment.dataset.fid)
     });
     if (slide in state.fragments && state.fragments[slide].hasOwnProperty(key)) {
       this.setState({
@@ -52,7 +52,7 @@ const Appear = React.createClass({
       opacity: this.getTweeningValue("opacity")
     };
     return (
-      <div style={styles} className="fragment" data-fid={this.props.fid}>
+      <div style={styles} className="fragment" ref="fragment">
         {this.props.children}
       </div>
     );

src/slide.jsx

@@ -20,7 +20,8 @@ const Slide = React.createClass({
     align: React.PropTypes.string,
     presenterStyle: React.PropTypes.object,
     children: React.PropTypes.node,
-    notes: React.PropTypes.string
+    notes: React.PropTypes.string,
+    slideIndex: React.PropTypes.number
   },
   contextTypes: {
     styles: React.PropTypes.object,
@@ -51,13 +52,14 @@ const Slide = React.createClass({
     const slide = React.findDOMNode(this.refs.slide);
     const frags = slide.querySelectorAll(".fragment");
     if (frags && frags.length) {
-      Array.prototype.slice.call(frags, 0).forEach((frag) => {
+      Array.prototype.slice.call(frags, 0).forEach((frag, i) => {
+        frag.dataset.fid = i;
         this.context.flux.actions.SlideActions.addFragment({
           slide: this.props.slideIndex,
-          id: frag.dataset.fid,
+          id: i,
           visible: false
         });
-      })
+      });
     }
     window.addEventListener("load", this.setZoom);
     window.addEventListener("resize", this.setZoom);