Skip to content

Commit 300a242

Browse files
jdaltonjdalton
committed
Remove real time transpile requirement.
1 parent 935c276 commit 300a242

File tree

3 files changed

+182
-160
lines changed

3 files changed

+182
-160
lines changed

‎_layouts/base.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<link rel="stylesheet" href="/assets/css/main.css">
99
<link rel="feed alternate" type="application/atom+xml" href="https://github.com/lodash/lodash/commits/master.atom">
1010
<!--[if lt IE 9]><script src="/assets/js/html5.js"></script><![endif]-->
11+
<script src="/assets/js/lodash.js"></script>
1112
</head>
1213
<body class="layout-{{ page.layout }}">
1314
{{ content }}
14-
<script src="/assets/js/lodash.js"></script>
1515
<script>_gaq=[['_setAccount','UA-6065217-64'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='https://www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
1616
</body>
1717
</html>

‎_layouts/docs.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,7 @@ <h1>lodash
3232

3333
<script src="https://fb.me/react-15.1.0.min.js"></script>
3434
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>
35-
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
36-
<script type="text/babel" src="/assets/js/docs.js"></script>
35+
<script src="/assets/js/docs.js"></script>
3736

3837
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
3938
<script src="https://embed.tonicdev.com"></script>

‎assets/js/docs.js

+180-157
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,203 @@
1-
const menuElem = document.querySelector('.toc-container'),
1+
;(function() {
2+
var menuElem = document.querySelector('.toc-container'),
23
mobileMenu = document.querySelector('.mobile-menu a'),
34
replElems = document.querySelectorAll('.highlight.js'),
45
versionElem = document.getElementById('version');
56

6-
const requireLodash = "const _ = require('lodash');";
7+
var requireLodash = "const _ = require('lodash');";
78

8-
const Menu = React.createClass({
9-
getInitialState: () => ({
10-
content: [],
11-
searchVal: ''
12-
}),
9+
var Menu = React.createClass({
10+
'displayName': 'Menu',
1311

14-
componentWillMount: function() {
15-
// Before component mounts, use the initial html for initial state
16-
let content = menuElem.children;
17-
content = _.map(content, elem => {
12+
'getInitialState': function() {
1813
return {
19-
title: elem.querySelector('h2 code').innerText,
20-
expanded: true,
21-
functions: _.map(elem.querySelectorAll('ul li a'), value => ({
22-
name: value.innerText,
23-
href: value.getAttribute('href')
24-
}))
25-
}
26-
});
27-
28-
this.setState({
29-
content: content,
30-
});
31-
},
32-
33-
onChangeExpanded: function(title) {
34-
const content = this.state.content.map(value => {
35-
if (value.title === title) {
36-
value.expanded = !value.expanded;
37-
}
38-
return value;
39-
});
40-
41-
this.setState({
42-
content: content
43-
});
44-
},
14+
'content': [],
15+
'searchVal': ''
16+
};
17+
},
18+
19+
'componentWillMount': function() {
20+
// Before component mounts, use the initial html for initial state.
21+
var content = _.map(menuElem.children, function(node) {
22+
return {
23+
'title': node.querySelector('h2 code').innerText,
24+
'expanded': true,
25+
'functions': _.map(node.querySelectorAll('ul li a'), function(anchor) {
26+
return {
27+
'name': anchor.innerText,
28+
'href': anchor.getAttribute('href')
29+
};
30+
})
31+
};
32+
});
4533

46-
onChangeSearch: function(e) {
47-
this.setState({
48-
searchVal: e.target.value,
49-
});
50-
},
34+
this.setState({
35+
'content': content
36+
});
37+
},
38+
39+
'onChangeExpanded': function(title) {
40+
var content = _.map(this.state.content, function(value) {
41+
if (value.title === title) {
42+
value.expanded = !value.expanded;
43+
}
44+
return value;
45+
});
5146

52-
onClickFuncName: function() {
53-
// Close mobile menu
54-
menuElem.classList.remove('open');
47+
this.setState({
48+
'content': content
49+
});
50+
},
5551

56-
// Empty search box
57-
_.defer(() => {
52+
'onChangeSearch': function(e) {
5853
this.setState({
59-
searchVal: ''
54+
'searchVal': e.target.value
6055
});
61-
});
62-
},
56+
},
6357

64-
render: function() {
65-
const { content, searchVal } = this.state;
58+
'onClickFuncName': function() {
59+
var _this = this;
6660

67-
const filtered =
68-
content
69-
.map(collection => {
70-
// If search is for collection title, return collection
71-
if (collection.title.toLowerCase().includes(searchVal.toLowerCase())) {
61+
// Close mobile menu.
62+
menuElem.classList.remove('open');
63+
64+
// Empty search box.
65+
_.defer(function() {
66+
_this.setState({
67+
'searchVal': ''
68+
});
69+
});
70+
},
71+
72+
'render': function() {
73+
var _this = this,
74+
content = this.state.content,
75+
searchVal = this.state.searchVal,
76+
lowerSearchVal = searchVal.toLowerCase();
77+
78+
var filtered = _(content)
79+
.map(function(collection) {
80+
// If search is for collection title, return collection.
81+
if (_.includes(collection.title.toLowerCase(), lowerSearchVal)) {
7282
return collection;
7383
}
74-
// Else if search is for func, return matching functions
84+
// Else if search is for func, return matching functions.
7585
return {
76-
title: collection.title,
77-
expanded: collection.expanded,
78-
functions: collection.functions.filter(
79-
func => func.name.toLowerCase().includes(searchVal.toLowerCase())
80-
)
86+
'title': collection.title,
87+
'expanded': collection.expanded,
88+
'functions': _.filter(collection.functions, function(func) {
89+
return _.includes(func.name.toLowerCase(), lowerSearchVal);
90+
})
8191
};
8292
})
83-
.filter(collection => collection.functions.length > 0);
84-
85-
const collections = filtered.map(collection => {
86-
return (
87-
<div>
88-
<h2>
89-
<span
90-
className={ collection.expanded ? 'fa fa-minus-square-o' : 'fa fa-plus-square-o' }
91-
style={{ marginRight: 10, fontSize: 14, cursor: 'pointer' }}
92-
onClick={this.onChangeExpanded.bind(this, collection.title)}>
93-
</span>
94-
{collection.title}
95-
</h2>
96-
{
97-
!collection.expanded
98-
? ''
99-
: <ul>
100-
{
101-
collection.functions.map(func => {
102-
return (
103-
<li>
104-
<a
105-
href={ func.href }
106-
onClick={ this.onClickFuncName }>
107-
<code>{ func.name }</code>
108-
</a>
109-
</li>
110-
);
111-
})
112-
}
113-
</ul>
93+
.filter('functions.length')
94+
.value();
95+
96+
var collections = _.map(filtered, function(collection) {
97+
return React.createElement(
98+
'div',
99+
null,
100+
React.createElement(
101+
'h2',
102+
null,
103+
React.createElement('span', {
104+
'className': collection.expanded ? 'fa fa-minus-square-o' : 'fa fa-plus-square-o',
105+
'style': { 'marginRight': 10, 'fontSize': 14, 'cursor': 'pointer' },
106+
'onClick': _.bind(_this.onChangeExpanded, _this, collection.title)
107+
}),
108+
collection.title
109+
),
110+
!collection.expanded ? '' : React.createElement(
111+
'ul',
112+
null,
113+
_.map(collection.functions, function(func) {
114+
return React.createElement(
115+
'li',
116+
null,
117+
React.createElement(
118+
'a',
119+
{
120+
'href': func.href,
121+
'onClick': _this.onClickFuncName
122+
},
123+
React.createElement(
124+
'code',
125+
null,
126+
func.name
127+
)
128+
)
129+
);
130+
})
131+
)
132+
);
133+
});
134+
135+
return React.createElement(
136+
'div',
137+
null,
138+
React.createElement(
139+
'div',
140+
{ 'className': 'search' },
141+
React.createElement('span', { 'className': 'fa fa-search' }),
142+
React.createElement('input', {
143+
'type': 'search',
144+
'placeholder': 'Search',
145+
'value': this.state.searchVal,
146+
'onChange': _.bind(this.onChangeSearch, this)
147+
})
148+
),
149+
collections
150+
);
151+
}
152+
});
153+
154+
ReactDOM.render(
155+
React.createElement(Menu, null),
156+
menuElem
157+
);
158+
159+
_.forEach(replElems, function(pre) {
160+
var button = document.createElement('a'),
161+
parent = pre.parentElement;
162+
163+
button.classList.add('btn-repl');
164+
button.innerText = 'Try in REPL';
165+
parent.appendChild(button);
166+
parent.style.position = 'relative';
167+
168+
button.addEventListener('click', function() {
169+
var source = [requireLodash, pre.innerText].join('\n\n');
170+
171+
pre.style.minHeight = pre.scrollHeight + 'px';
172+
pre.innerHTML = '';
173+
pre.classList.add('repl');
174+
175+
_.delay(function() {
176+
parent.removeChild(button);
177+
178+
var notebook = Tonic.createNotebook({
179+
// The parent element for the new notebook.
180+
'element': pre,
181+
182+
// Specify the source of the notebook.
183+
'source': source,
184+
185+
'onLoad': function(notebook) {
186+
notebook.evaluate(null);
114187
}
115-
</div>
116-
)
188+
});
189+
}, 500);
117190
});
191+
});
118192

119-
return (
120-
<div>
121-
<div className="search">
122-
<span className="fa fa-search"></span>
123-
<input
124-
type="search"
125-
placeholder="Search"
126-
value={ this.state.searchVal }
127-
onChange={ this.onChangeSearch.bind(this) } />
128-
</div>
129-
{collections}
130-
</div>
131-
);
132-
}
133-
});
134-
135-
ReactDOM.render(
136-
<Menu />,
137-
menuElem
138-
);
139-
140-
_.forEach(replElems, pre => {
141-
const button = document.createElement('a');
142-
const parent = pre.parentElement;
143-
144-
button.classList.add('btn-repl');
145-
button.innerText = 'Try in REPL';
146-
parent.appendChild(button);
147-
parent.style.position = 'relative';
148-
149-
button.addEventListener('click', () => {
150-
const source = [requireLodash, pre.innerText].join('\n\n');
151-
152-
pre.style.minHeight = pre.scrollHeight + 'px';
153-
pre.innerHTML = '';
154-
pre.classList.add('repl');
155-
156-
_.delay(() => {
157-
parent.removeChild(button);
158-
const notebook = Tonic.createNotebook({
159-
// the parent element for the new notebook
160-
element: pre,
161-
162-
// specify the source of the notebook
163-
source: source,
164-
165-
onLoad: notebook => notebook.evaluate(null),
166-
});
167-
}, 500);
193+
mobileMenu.addEventListener('click', function() {
194+
menuElem.classList.toggle('open');
195+
});
196+
197+
versionElem.addEventListener('change', function(e) {
198+
var value = e.target.value;
199+
if (value) {
200+
location.href = '/docs/' + value;
201+
}
168202
});
169-
});
170-
171-
mobileMenu.addEventListener('click', () => {
172-
menuElem.classList.toggle('open');
173-
});
174-
175-
versionElem.addEventListener('change', e => {
176-
const { value } = e.target;
177-
if (value) {
178-
location.href = `/docs/${ value }`;
179-
}
180-
});
203+
}());

0 commit comments

Comments
 (0)