mirror of
https://github.com/fabe/gatsby-starter-deck.git
synced 2024-09-11 03:55:26 +03:00
Add touch events.
This commit is contained in:
parent
3018bc9d11
commit
554ff23336
14
package-lock.json
generated
14
package-lock.json
generated
@ -2988,6 +2988,11 @@
|
||||
"repeating": "2.0.1"
|
||||
}
|
||||
},
|
||||
"detect-passive-events": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-1.0.4.tgz",
|
||||
"integrity": "sha1-btR35uW863kHlzXc01d4nTf5qRo="
|
||||
},
|
||||
"detect-port": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.2.2.tgz",
|
||||
@ -10407,6 +10412,15 @@
|
||||
"shallowequal": "1.0.2"
|
||||
}
|
||||
},
|
||||
"react-swipeable": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-4.2.0.tgz",
|
||||
"integrity": "sha1-VT1iyP5i6skwj1WQacAmk8x4Zlw=",
|
||||
"requires": {
|
||||
"detect-passive-events": "1.0.4",
|
||||
"prop-types": "15.6.0"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz",
|
||||
|
@ -15,6 +15,7 @@
|
||||
"gatsby-source-filesystem": "^1.5.18",
|
||||
"gatsby-transformer-remark": "^1.7.31",
|
||||
"history": "^4.7.2",
|
||||
"react-swipeable": "^4.2.0",
|
||||
"react-transition-group": "^2.2.1"
|
||||
},
|
||||
"keywords": [
|
||||
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Link, { navigateTo } from 'gatsby-link';
|
||||
import Helmet from 'react-helmet';
|
||||
import Swipeable from 'react-swipeable';
|
||||
|
||||
import './index.css';
|
||||
|
||||
@ -15,10 +16,19 @@ const Header = ({ name, title, date }) => (
|
||||
);
|
||||
|
||||
class TemplateWrapper extends Component {
|
||||
NEXT = 39;
|
||||
PREV = 37;
|
||||
|
||||
swipeLeft = () => {
|
||||
this.navigate({ keyCode: this.NEXT });
|
||||
};
|
||||
|
||||
swipeRight = () => {
|
||||
this.navigate({ keyCode: this.PREV });
|
||||
};
|
||||
|
||||
navigate = ({ keyCode }) => {
|
||||
const now = parseInt(location.pathname.substr(1));
|
||||
const NEXT = 39;
|
||||
const PREV = 37;
|
||||
|
||||
const slides = this.props.data.allMarkdownRemark.edges.filter(
|
||||
({ node }) => {
|
||||
@ -31,13 +41,13 @@ class TemplateWrapper extends Component {
|
||||
);
|
||||
|
||||
if (now) {
|
||||
if (keyCode === PREV && now === 1) {
|
||||
if (keyCode === this.PREV && now === 1) {
|
||||
return false;
|
||||
} else if (keyCode === NEXT && now === slides.length) {
|
||||
} else if (keyCode === this.NEXT && now === slides.length) {
|
||||
return false;
|
||||
} else if (keyCode === NEXT) {
|
||||
} else if (keyCode === this.NEXT) {
|
||||
navigateTo(`/${now + 1}`);
|
||||
} else if (keyCode === PREV) {
|
||||
} else if (keyCode === this.PREV) {
|
||||
navigateTo(`/${now - 1}`);
|
||||
}
|
||||
}
|
||||
@ -56,16 +66,20 @@ class TemplateWrapper extends Component {
|
||||
return (
|
||||
<div>
|
||||
<Helmet
|
||||
title={`${data.site.siteMetadata.title} — ${
|
||||
data.site.siteMetadata.name
|
||||
}`}
|
||||
title={`${data.site.siteMetadata.title} — ${data.site.siteMetadata
|
||||
.name}`}
|
||||
/>
|
||||
<Header
|
||||
name={data.site.siteMetadata.name}
|
||||
title={data.site.siteMetadata.title}
|
||||
date={data.site.siteMetadata.date}
|
||||
/>
|
||||
<div id="slide">{children()}</div>
|
||||
<Swipeable
|
||||
onSwipingLeft={this.swipeLeft}
|
||||
onSwipingRight={this.swipeRight}
|
||||
>
|
||||
<div id="slide">{children()}</div>
|
||||
</Swipeable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -73,7 +87,7 @@ class TemplateWrapper extends Component {
|
||||
|
||||
TemplateWrapper.propTypes = {
|
||||
children: PropTypes.func,
|
||||
data: PropTypes.object
|
||||
data: PropTypes.object,
|
||||
};
|
||||
|
||||
export default TemplateWrapper;
|
||||
|
Loading…
Reference in New Issue
Block a user