| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123 | 2×
2×
2×
2×
2×
2×
2×
288×
1311×
1311×
1311×
1311×
1311×
1311×
1311×
1030×
2×
11×
11×
43×
54×
54×
54×
54×
54×
54×
54×
54×
54×
54×
54×
54×
54×
54×
54×
281×
| var ChapterSectionMixin, React, ReferenceBookActions, ReferenceBookStore, Router, Section, _, ref;
React = require('react');
Router = require('react-router');
_ = require('underscore');
ref = require('../../flux/reference-book'), ReferenceBookActions = ref.ReferenceBookActions, ReferenceBookStore = ref.ReferenceBookStore;
ChapterSectionMixin = require('openstax-react-components').ChapterSectionMixin;
Section = React.createClass({
displayName: 'ReferenceBookTocSection',
mixins: [ChapterSectionMixin],
propTypes: {
ecosystemId: React.PropTypes.string.isRequired,
section: React.PropTypes.object.isRequired,
activeSection: React.PropTypes.string.isRequired,
onMenuSelection: React.PropTypes.func.isRequired,
menuRouterLinkTarget: React.PropTypes.string.isRequired
},
contextTypes: {
router: React.PropTypes.func
},
componentWillMount: function() {
return this.setState({
skipZeros: false
});
},
render: function() {
var activeSection, className, params, section;
activeSection = this.props.activeSection;
section = this.sectionFormat(this.props.section.chapter_section);
className = section === activeSection ? 'active' : '';
params = _.extend({
ecosystemId: this.props.ecosystemId
}, this.context.router.getCurrentParams(), {
section: section
});
return React.createElement("ul", {
"className": "section",
"data-depth": this.props.section.chapter_section.length
}, React.createElement("li", {
"data-section": section
}, React.createElement(Router.Link, {
"params": params,
"className": className,
"onClick": _.partial(this.props.onMenuSelection, section),
"to": this.props.menuRouterLinkTarget,
"query": this.context.router.getCurrentQuery()
}, React.createElement("span", {
"className": "section-number"
}, section), this.props.section.title)), _.map(this.props.section.children, (function(_this) {
return function(child) {
return React.createElement("li", {
"key": child.id,
"data-section": _this.sectionFormat(child.chapter_section)
}, React.createElement(Section, React.__spread({}, _this.props, {
"activeSection": activeSection,
"section": child
})));
};
})(this)));
}
});
module.exports = React.createClass({
displayName: 'ReferenceBookTOC',
mixins: [ChapterSectionMixin],
propTypes: {
onMenuSelection: React.PropTypes.func.isRequired,
activeSection: React.PropTypes.string.isRequired
},
componentWillMount: function() {
return this.setState({
skipZeros: false
});
},
componentDidMount: function() {
return this.scrollSelectionIntoView();
},
componentDidUpdate: function() {
return this.scrollSelectionIntoView();
},
scrollSelectionIntoView: function() {
var beforeTop, li, pastBottom, root, section;
section = this.props.section;
Iif (!section) {
return;
}
section = this.sectionFormat(section);
root = React.findDOMNode(this);
li = root.querySelector("[data-section='" + section + "']");
Iif (!li) {
return;
}
beforeTop = li.offsetTop - root.offsetTop < root.scrollTop;
pastBottom = (li.offsetTop - root.offsetTop + li.clientHeight) > (root.scrollTop + root.clientHeight);
Iif (beforeTop || pastBottom) {
return li.scrollIntoView();
}
},
render: function() {
var activeSection, ecosystemId, query, ref1, toc;
ref1 = this.props, activeSection = ref1.activeSection, ecosystemId = ref1.ecosystemId, query = ref1.query;
toc = ReferenceBookStore.getToc(ecosystemId);
return React.createElement("div", {
"className": "menu"
}, _.map(toc.children, (function(_this) {
return function(child) {
return React.createElement(Section, React.__spread({}, _this.props, {
"query": query,
"activeSection": activeSection,
"key": child.id,
"section": child
}));
};
})(this)));
}
});
|