payne8/docbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Toggle improvements (#17)

Browse Source 
* Toggle improvements

* Fix tests
This commit is contained in:
Tom MacWright
2016-05-20 14:08:29 -04:00
parent 847124a40d
commit ffdf4a6123
12 changed files with 87 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/app.js
View File

@ -5,14 +5,37 @@ import RoundedToggle from './rounded_toggle';
import PureRenderMixin from 'react-pure-render/mixin';
import GithubSlugger from 'github-slugger';
import debounce from 'lodash.debounce';
import { brandNames, brandClasses } from '../../custom';
import { brandNames, brandClasses } from '../custom';
import qs from 'querystring';
let slugger = new GithubSlugger();
let slug = title => { slugger.reset(); return slugger.slug(title); };
let languageOptions = ['cURL', 'CLI', 'Python', 'JavaScript'];
let defaultLanguage = 'cURL';
let languageOptions = [
{ title: 'cURL',
short: 'cURL',
value: 'curl' },
{ title: 'CLI',
short: 'cli',
value: 'cli' },
{ title: 'Python',
short: 'Python',
value: 'python' },
{ title: 'JavaScript',
short: 'JS',
value: 'javascript' },
{ title: 'Java',
short: 'Java',
value: 'java' },
{ title: 'Objective-C',
short: 'ObjC',
value: 'objc' },
{ title: 'Swift',
short: 'Swift',
value: 'swift' }
];
let defaultLanguage = languageOptions[0];
let debouncedReplaceState = debounce(hash => {
window.history.replaceState('', '', hash);
@ -30,16 +53,15 @@ var App = React.createClass({
if (process.browser) {
let hash = window.location.hash.split('#').pop();
let languageFromURL = qs.parse(window.location.search.substring(1)).language;
let language = languageOptions.includes(languageFromURL) ?
languageFromURL : defaultLanguage;
let mqls = {
desktop: window.matchMedia('(min-width: 961px)'),
tablet: window.matchMedia('(max-width: 960px)'),
mobile: window.matchMedia('(max-width: 640px)')
};
Object.keys(mqls).forEach(key => {
mqls[key].addListener(this.mediaQueryChanged);
});
let language = languageOptions.find(option => option.title === languageFromURL) ||
defaultLanguage;
let mqls = [
{ name: 'widescreen', query: window.matchMedia('(min-width: 1200px)') },
{ name: 'desktop', query: window.matchMedia('(min-width: 961px)') },
{ name: 'tablet', query: window.matchMedia('(max-width: 960px)') },
{ name: 'mobile', query: window.matchMedia('(max-width: 640px)') }
];
mqls.forEach(q => q.query.addListener(this.mediaQueryChanged));
if (hash) {
let headingForHash = this.props.ast.children
.filter(child => child.type === 'heading')
@ -61,9 +83,7 @@ var App = React.createClass({
};
} else {
return {
mqls: {
desktop: true
},
mqls: { },
queryMatches: {
desktop: true
},
@ -78,11 +98,11 @@ var App = React.createClass({
},
componentDidMount() {
this.mediaQueryChanged();
this.onScroll = debounce(this._onScroll, 100);
this.onScroll = debounce(this.onScrollImmediate, 100);
document.addEventListener('scroll', this.onScroll);
this._onScroll();
this.onScrollImmediate();
},
_onScroll() {
onScrollImmediate() {
var sections = document.querySelectorAll('div.section');
if (!sections.length) return;
for (var i = 0; i < sections.length; i++) {
@ -97,23 +117,21 @@ var App = React.createClass({
},
mediaQueryChanged() {
this.setState({
queryMatches: {
mobile: this.state.mqls.mobile.matches,
tablet: this.state.mqls.tablet.matches,
desktop: this.state.mqls.desktop.matches
}
queryMatches: this.state.mqls.reduce((memo, q) => {
memo[q.name] = q.query.matches;
return memo;
}, {})
});
},
componentWillUnmount() {
Object.keys(this.state.mqls).forEach(key =>
this.state.mqls[key].removeListener(this.mediaQueryChanged));
this.state.mqls.forEach(q => q.removeListener(this.mediaQueryChanged));
document.body.removeEventListener('scroll', this.onScroll);
},
onChangeLanguage(language) {
this.setState({ language }, () => {
if (window.history) {
window.history.pushState(null, null,
`?${qs.stringify({ language })}${window.location.hash}`);
`?${qs.stringify({ language: language.title })}${window.location.hash}`);
}
});
},
@ -121,7 +139,7 @@ var App = React.createClass({
if (prevState.activeSection !== this.state.activeSection) {
// when the section changes, replace the hash
debouncedReplaceState(`#${slug(this.state.activeSection)}`);
} else if (prevState.language !== this.state.language ||
} else if (prevState.language.title !== this.state.language.title ||
prevState.columnMode !== this.state.columnMode) {
// when the language changes, use the hash to set scroll
window.location.hash = window.location.hash;
@ -141,7 +159,7 @@ var App = React.createClass({
});
},
render() {
let { ast } = this.props;
let ast = JSON.parse(JSON.stringify(this.props.ast));
let { activeSection, queryMatches, showNav, columnMode } = this.state;
let col1 = columnMode === 1 && queryMatches.desktop;
return (<div className='container unlimiter'>
@ -152,7 +170,7 @@ var App = React.createClass({
</div>}
{/* Desktop nav */ }
{queryMatches.desktop && <div className='space-top5 scroll-styled pad1 width16 sidebar fixed-left fill-dark dark'>
{queryMatches.desktop && <div className='space-top5 scroll-styled overflow-auto pad1 width16 sidebar fixed-left fill-dark dark'>
<Navigation
navigationItemClicked={this.navigationItemClicked}
activeSection={activeSection}
@ -166,7 +184,7 @@ var App = React.createClass({
leftClassname={col1 ? 'space-bottom4 pad2x prose clip' : 'space-bottom8 col6 pad2x prose clip'}
rightClassname={col1 ? 'space-bottom2 pad2 prose clip fill-light space-top5' : 'space-bottom4 col6 pad2 prose clip fill-light space-top5'}
ast={ast}
language={this.state.language.toLowerCase()}/>
language={this.state.language}/>
</div>
</div>
@ -177,6 +195,7 @@ var App = React.createClass({
Show examples in:
</div>
<RoundedToggle
short={!queryMatches.widescreen}
options={languageOptions}
onChange={this.onChangeLanguage}
active={this.state.language} />

11
src/components/content.js
View File

@ -2,10 +2,15 @@ import React from 'react';
import Section from './section';
import PureRenderMixin from 'react-pure-render/mixin';
import GithubSlugger from 'github-slugger';
import { transformURL } from '../../custom';
import { transformURL } from '../custom';
let slugger = new GithubSlugger();
let slug = title => { slugger.reset(); return slugger.slug(title); };
var roundedToggleOptionType = React.PropTypes.shape({
title: React.PropTypes.string,
value: React.PropTypes.string
});
function chunkifyAST(ast, language) {
var preview = false;
return ast.children.reduce((chunks, node) => {
@ -70,14 +75,14 @@ var Content = React.createClass({
mixins: [PureRenderMixin],
propTypes: {
ast: React.PropTypes.object.isRequired,
language: React.PropTypes.string.isRequired,
language: roundedToggleOptionType,
leftClassname: React.PropTypes.string.isRequired,
rightClassname: React.PropTypes.string.isRequired
},
render() {
let { ast, language, leftClassname, rightClassname } = this.props;
return (<div className='clearfix'>
{chunkifyAST(ast, language).map((chunk, i) => <Section
{chunkifyAST(ast, language.value).map((chunk, i) => <Section
leftClassname={leftClassname}
rightClassname={rightClassname}
chunk={chunk}

4
src/components/navigation.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PureRenderMixin from 'react-pure-render/mixin';
import NavigationItem from './navigation_item';
import { backLink } from '../../custom';
import { footerContent } from '../custom';
function getAllInSectionFromChild(headings, idx) {
for (var i = idx; i > 0; i--) {
@ -88,7 +88,7 @@ var Navigation = React.createClass({
}
}
})}
<a href='/' className='space-top2 pad1y dark keyline-top block small quiet'>{backLink}</a>
{footerContent}
</div>);
}
});

20
src/components/rounded_toggle.js
View File

@ -1,11 +1,17 @@
import React from 'react';
import PureRenderMixin from 'react-pure-render/mixin';
var roundedToggleOptionType = React.PropTypes.shape({
title: React.PropTypes.string,
value: React.PropTypes.string
});
var RoundedToggle = React.createClass({
mixins: [PureRenderMixin],
propTypes: {
options: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
active: React.PropTypes.string.isRequired,
options: React.PropTypes.arrayOf(roundedToggleOptionType).isRequired,
active: roundedToggleOptionType,
short: React.PropTypes.bool,
onChange: React.PropTypes.func.isRequired
},
render() {
@ -13,10 +19,11 @@ var RoundedToggle = React.createClass({
return (<div className='rounded-toggle inline short'>
{options.map(option =>
<RoundedToggleOption
key={option}
key={option.value}
option={option}
short={this.props.short}
onClick={this.props.onChange}
className={`strong ${option === active ? 'active': ''}`} />)}
className={`strong ${option.value === active.value ? 'active': ''}`} />)}
</div>);
}
});
@ -24,8 +31,9 @@ var RoundedToggle = React.createClass({
var RoundedToggleOption = React.createClass({
mixins: [PureRenderMixin],
propTypes: {
option: React.PropTypes.string.isRequired,
option: roundedToggleOptionType,
className: React.PropTypes.string.isRequired,
short: React.PropTypes.bool,
onClick: React.PropTypes.func.isRequired
},
onClick() {
@ -35,7 +43,7 @@ var RoundedToggleOption = React.createClass({
let { className, option } = this.props;
return (<a
onClick={this.onClick}
className={className}>{option}</a>);
className={className}>{this.props.short ? option.short : option.title}</a>);
}
});

13
src/components/section.js
View File

@ -3,16 +3,19 @@ import remark from 'remark';
import remarkHTML from 'remark-html';
import remarkHighlight from '../highlight';
import PureRenderMixin from 'react-pure-render/mixin';
import { postHighlight } from '../../custom';
import { postHighlight, remarkPlugins } from '../custom';
function renderHighlighted(nodes) {
return {
__html: postHighlight(remark()
.use(remarkHTML)
.stringify(remark().use(remarkHighlight).run({
type: 'root',
children: nodes
})))
.stringify(remark()
.use(remarkHighlight)
.use(remarkPlugins)
.run({
type: 'root',
children: nodes
})))
};
}