Skip to content

remove fid from Appear #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 9, 2015
Merged

remove fid from Appear #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d60b019
lint
mathieudutour Jul 9, 2015
7c73d4b
remove fid from Appear
mathieudutour Jul 9, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.markdown
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
6 changes: 3 additions & 3 deletions src/appear.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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>
);
Expand Down
10 changes: 6 additions & 4 deletions src/slide.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down