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

Port scroll improvements

Browse Source
This commit is contained in:
Tom MacWright
2016-03-03 11:49:57 -08:00
parent 8fcfc1152b
commit 50e96d261f
4 changed files with 38 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=11' />
<title>Mapbox</title>
<title>Docbox</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='css/base.css' rel='stylesheet' />
<link href='css/style.css' rel='stylesheet' />

34
src/components/app.js
View File

@ -68,25 +68,40 @@ var App = React.createClass({
},
componentDidMount() {
this.mediaQueryChanged();
this.onScroll = debounce(this._onScroll, 100);
document.addEventListener('scroll', this.onScroll);
this._onScroll();
},
_onScroll() {
var sections = document.querySelectorAll('div.section');
if (!sections.length) return;
for (var i = 0; i < sections.length; i++) {
var rect = sections[i].getBoundingClientRect();
if (rect.bottom > 0) {
this.setState({
activeSection: sections[i].title
});
return;
}
}
},
mediaQueryChanged() {
var queries = {
this.setState({
queries: {
mobile: this.state.mqls.mobile.matches,
tablet: this.state.mqls.tablet.matches,
desktop: this.state.mqls.desktop.matches
};
this.setState({ queries });
}
});
},
componentWillUnmount() {
Object.keys(this.state.mqls).forEach(key =>
this.state.mqls[key].removeListener(this.mediaQueryChanged));
document.body.removeEventListener('scroll', this.onScroll);
},
onChangeLanguage(language) {
this.setState({ language });
},
onSpy(activeSection) {
this.setState({ activeSection });
},
componentDidUpdate(_, prevState) {
if (prevState.activeSection !== this.state.activeSection) {
// when the section changes, replace the hash
@ -127,7 +142,6 @@ var App = React.createClass({
<Content
ast={ast}
queries={queries}
onSpy={this.onSpy}
language={this.state.language}/>
</div>
@ -143,10 +157,10 @@ var App = React.createClass({
{/* Header */ }
<div className={`fill-gray fixed-top ${queries.tablet ? 'pad1y pad2x col6' : 'pad0 width16'}`}>
<a href='/' className='active space-top1 space-left1 pin-topleft icon round fill-red dark pad0'></a>
<a href='/' className='active space-top1 space-left1 pin-topleft icon round fill-blue dark pad0 mapbox'></a>
<div className={`strong small pad0 ${queries.mobile && 'space-left3'} ${queries.tablet ? 'space-left2' : 'space-left4 line-height15' }`}>
{queries.desktop ? 'Example API Documentation' :
queries.mobile ? 'API Docs' : 'Example API Docs'}
{queries.desktop ? 'API Documentation' :
queries.mobile ? 'API Docs' : 'API Docs'}
</div>
{queries.tablet && <div>
<button

9
src/components/content.js
View File

@ -1,6 +1,9 @@
import React from 'react';
import Section from './section';
import PureRenderMixin from 'react-pure-render/mixin';
import GithubSlugger from 'github-slugger';
let slugger = new GithubSlugger();
let slug = title => { slugger.reset(); return slugger.slug(title); };
function highlightTokens(str) {
return str.replace(/{[\w_]+}/g,
@ -92,7 +95,7 @@ function chunkifyAST(ast, language) {
left.push(node);
}
});
return { left, right, title, preview };
return { left, right, title, preview, slug: slug(title) };
});
}
@ -100,13 +103,11 @@ var Content = React.createClass({
mixins: [PureRenderMixin],
propTypes: {
ast: React.PropTypes.object.isRequired,
language: React.PropTypes.string.isRequired,
onSpy: React.PropTypes.func.isRequired
language: React.PropTypes.string.isRequired
},
render() {
return (<div className='clearfix'>
{chunkifyAST(this.props.ast, this.props.language).map((chunk, i) => <Section
onSpy={this.props.onSpy}
chunk={chunk}
key={i} />)}
</div>);

24
src/components/section.js
View File

@ -2,7 +2,6 @@ import React from 'react';
import remark from 'remark';
import remarkHTML from 'remark-html';
import remarkHighlight from 'remark-highlight.js';
import Waypoint from 'react-waypoint';
import PureRenderMixin from 'react-pure-render/mixin';
function renderHighlighted(nodes) {
@ -22,33 +21,20 @@ function renderHighlighted(nodes) {
var Section = React.createClass({
mixins: [PureRenderMixin],
propTypes: {
chunk: React.PropTypes.object.isRequired,
onSpy: React.PropTypes.func.isRequired
},
waypointEnterFromAbove(e, direction) {
if (direction === 'above') {
this.props.onSpy(this.props.chunk.title);
}
},
waypointEnterFromBelow(e, direction) {
if (direction === 'below') {
this.props.onSpy(this.props.chunk.title);
}
chunk: React.PropTypes.object.isRequired
},
render() {
let { chunk } = this.props;
let { left, right, preview } = chunk;
return (<div className={`contain clearfix ${preview ? 'preview' : ''}`}>
<Waypoint onEnter={this.waypointEnterFromBelow} />
return (<div
title={chunk.title}
className={`section pad2y contain clearfix ${preview ? 'preview' : ''}`}>
<div
className='col6 pad2x prose clip'
dangerouslySetInnerHTML={renderHighlighted(left)} />
{(right.length > 0) && <div
{right.length > 0 && <div
className='col6 pad2 prose dark space-top5 clip keyline-top fill-dark'
dangerouslySetInnerHTML={renderHighlighted(right)} />}
<div className='pin-bottom'>
<Waypoint onEnter={this.waypointEnterFromAbove} />
</div>
</div>);
}
});