feat(#29): add back/forward-swipe-gestures for pwa

luhmann · Feb 15, 2019 · 77f47b0 · 77f47b0
1 parent 6431fb4
commit 77f47b0
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 35 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -39,6 +39,13 @@ module.exports = {
         lang: 'en',
       },
     },
+    {
+      resolve: 'gatsby-plugin-webpack-bundle-analyzer',
+      options: {
+        production: true,
+        disable: true,
+      },
+    },
     // enable pwa
     /* eslint-disable camelcase */
     {

diff --git a/package.json b/package.json
@@ -18,11 +18,13 @@
     "gatsby-source-filesystem": "^2.0.12",
     "gatsby-transformer-sharp": "^2.1.9",
     "gatsby-transformer-yaml": "^2.1.6",
+    "lodash": "^4.17.11",
     "rambda": "^2.2.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-helmet": "^5.2.0",
     "react-key-handler": "1.2.0-beta.2",
+    "react-with-gesture": "^4.0.4",
     "recompose": "^0.30.0",
     "styled-components": "^4.1.3",
     "styled-system": "^3.1.11"
@@ -55,6 +57,7 @@
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-hooks": "^0.0.0",
     "gatsby-plugin-manifest": "^2.0.12",
+    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.1.0",
     "jest-dom": "^3.0.1",

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 import { graphql, StaticQuery } from 'gatsby';
 import { Helmet } from 'react-helmet';
 import { ThemeProvider } from 'styled-components';
+import { useGesture } from 'react-with-gesture';
+import { F } from 'rambda';
+import debounce from 'lodash/debounce';
+import cond from 'lodash/cond';
 
 import { Background, Logo, Menu, StyledLink, RootPageStyle } from 'components/';
 import { mapAllGalleriesGraphQLResponse } from 'utils/mappings';
@@ -33,40 +37,68 @@ Header.propTypes = {
   ).isRequired,
 };
 
-export const LayoutComponent = ({ children, albums, location }) => (
-  <ThemeProvider theme={theme}>
-    {/* NOTE: Fragment is important here otherwise the context-provider complains about multiple children */}
-    <>
-      {/* TODO: convoluted helmet-syntax due to this bug https://github.com/nfl/react-helmet/issues/373 */}
-      <Helmet
-        title="J F Dietrich Photography"
-        meta={[
-          {
-            name: 'description',
-            content: 'Photography by Jan Florian Dietrich from Berlin, Germany',
-          },
-          {
-            name: 'viewport',
-            content:
-              'width=device-width, initial-scale=1, shrink-to-fit=no,maximum-scale=1',
-          },
-        ]}
-        link={[
-          {
-            rel: 'stylesheet',
-            href: 'https://fonts.googleapis.com/css?family=Lora:700|Patua+One',
-          },
-        ]}
-      />
-      <RootPageStyle />
-      <Background>
-        {location.pathname === '/' ? null : <Header albums={albums} />}
-        {children}
-      </Background>
-    </>
-  </ThemeProvider>
+const handleGesture = debounce(
+  cond([
+    [() => Boolean(window.navigator.standalone) === false, F],
+    [({ delta: [deltaX] }) => Math.abs(deltaX) < 100, F],
+    [
+      ({ initial: [initialX], delta: [deltaX] }) => initialX < 50 && deltaX > 0,
+      () => window.history.back(),
+    ],
+    [
+      ({ initial: [initialX], delta: [deltaX] }) =>
+        initialX > window.innerWidth - 50 && deltaX < 0,
+      () => window.history.forward(),
+    ],
+  ]),
+  50
 );
 
+export const LayoutComponent = ({ children, albums, location }) => {
+  const bind = useGesture({
+    touch: true,
+    mouse: false,
+    onAction: handleGesture,
+  });
+
+  // console.log({ delta, direction, distance, xy, initial, local });
+  return (
+    <ThemeProvider theme={theme}>
+      {/* NOTE: Fragment is important here otherwise the context-provider complains about multiple children */}
+      <>
+        {/* TODO: convoluted helmet-syntax due to this bug https://github.com/nfl/react-helmet/issues/373 */}
+        <Helmet
+          title="J F Dietrich Photography"
+          meta={[
+            {
+              name: 'description',
+              content:
+                'Photography by Jan Florian Dietrich from Berlin, Germany',
+            },
+            {
+              name: 'viewport',
+              content:
+                'width=device-width, initial-scale=1, shrink-to-fit=no,maximum-scale=1',
+            },
+          ]}
+          link={[
+            {
+              rel: 'stylesheet',
+              href:
+                'https://fonts.googleapis.com/css?family=Lora:700|Patua+One',
+            },
+          ]}
+        />
+        <RootPageStyle />
+        <Background {...bind()}>
+          {location.pathname === '/' ? null : <Header albums={albums} />}
+          {children}
+        </Background>
+      </>
+    </ThemeProvider>
+  );
+};
+
 LayoutComponent.propTypes = {
   children: PropTypes.node.isRequired,
   albums: PropTypes.arrayOf(albumInfoType).isRequired,

diff --git a/src/components/global-styles.js b/src/components/global-styles.js
@@ -15,6 +15,7 @@ export const RootPageStyle = createGlobalStyle`
     ${mediaScreen.md`
       height: auto;
       overflow: auto;
+      overflow-x: hidden;
     `}
   }
 

diff --git a/yarn.lock b/yarn.lock
@@ -1163,7 +1163,7 @@ acorn@^5.0.0, acorn@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
 
-acorn@^5.5.3, acorn@^5.6.2:
+acorn@^5.3.0, acorn@^5.5.3, acorn@^5.6.2:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
@@ -2092,6 +2092,15 @@ better-queue@^3.8.6, better-queue@^3.8.7:
     node-eta "^0.9.0"
     uuid "^3.0.0"
 
+bfj-node4@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/bfj-node4/-/bfj-node4-5.3.1.tgz#e23d8b27057f1d0214fc561142ad9db998f26830"
+  integrity sha512-SOmOsowQWfXc7ybFARsK3C4MCOWzERaOMV/Fl3Tgjs+5dJWyzo3oa127jL44eMbQiAN17J7SvAs2TRxEScTUmg==
+  dependencies:
+    bluebird "^3.5.1"
+    check-types "^7.3.0"
+    tryer "^1.0.0"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -2172,7 +2181,7 @@ bluebird@^3.5.0:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
-bluebird@^3.5.3:
+bluebird@^3.5.1, bluebird@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
   integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==
@@ -2621,7 +2630,7 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.2, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^2.4.2:
+chalk@^2.3.0, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -2647,6 +2656,11 @@ charenc@~0.0.1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
 
+check-types@^7.3.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.4.0.tgz#0378ec1b9616ec71f774931a3c6516fad8c152f4"
+  integrity sha512-YbulWHdfP99UfZ73NcUDlNJhEIDgm9Doq9GhpyXbF+7Aegi3CVV7qqMCKTTqJxlvEvnQBp9IA+dxsGN6xK/nSg==
+
 cheerio@^1.0.0-rc.2:
   version "1.0.0-rc.2"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
@@ -2901,6 +2915,11 @@ commander@^2.11.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.16.0.tgz#f16390593996ceb4f3eeb020b31d78528f7f8a50"
 
+commander@^2.13.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+
 commander@~2.17.1:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -4009,6 +4028,11 @@ [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
+ejs@^2.5.7:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0"
+  integrity sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==
+
 electron-to-chromium@^1.3.47:
   version "1.3.52"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz#d2d9f1270ba4a3b967b831c40ef71fb4d9ab5ce0"
@@ -4926,6 +4950,11 @@ [email protected]:
   version "3.5.11"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
 
+filesize@^3.5.11:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+  integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
+
 fill-range@^2.1.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
@@ -5332,6 +5361,13 @@ gatsby-plugin-svgr@^2.0.1:
   resolved "https://registry.yarnpkg.com/gatsby-plugin-svgr/-/gatsby-plugin-svgr-2.0.1.tgz#4ff2d4247b7ce5bdad3a3e81ea993968f993d42e"
   integrity sha512-iNhS3e8TrWkrPY5EgrWpKoxh13DEcP3f8DrVGQ0mz8qafCHxcxjLUKaCUO6WZlgxsANIhm3dMXiABvqAebApzw==
 
+gatsby-plugin-webpack-bundle-analyzer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-webpack-bundle-analyzer/-/gatsby-plugin-webpack-bundle-analyzer-1.0.4.tgz#0ebd026b2dd4a733878a44943175f526819a74a1"
+  integrity sha512-Iws6rEJgNs+C2Vhm1QwfDOJRT309RaTNuNzoOmONs13HbetsjPe5a0APbQAWWBR3Gf2iSGNYJIYu9rO2r0jXpg==
+  dependencies:
+    webpack-bundle-analyzer "^2.13.1"
+
 gatsby-react-router-scroll@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.0.2.tgz#d8046ce2f3bfa52ef6ec55804007d976b0bb6bef"
@@ -5861,6 +5897,14 @@ [email protected]:
   dependencies:
     duplexer "^0.1.1"
 
+gzip-size@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-4.1.0.tgz#8ae096257eabe7d69c45be2b67c448124ffb517c"
+  integrity sha1-iuCWJX6r59acRb4rZ8RIEk/7UXw=
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^3.0.0"
+
 h2x-core@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/h2x-core/-/h2x-core-1.1.1.tgz#7fb31ab28e30ebf11818e3c7d183487ecf489f9f"
@@ -8647,6 +8691,11 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+opener@^1.4.3:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
+  integrity sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==
+
 opentracing@^0.14.3:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/opentracing/-/opentracing-0.14.3.tgz#23e3ad029fa66a653926adbe57e834469f8550aa"
@@ -9948,6 +9997,11 @@ react-testing-library@^5.5.3:
     "@babel/runtime" "^7.3.1"
     dom-testing-library "^3.13.1"
 
+react-with-gesture@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/react-with-gesture/-/react-with-gesture-4.0.4.tgz#47e5f602f647c0cc66b1d1f167581a95b28d5ba3"
+  integrity sha512-tiSmwijVPXy8z8Kc+ffsUmv6mwxOZ4Ucky90cNtLzuC+VRMEJzvw6peVY8LqweikDXk2OjVYR2gTPdVXo6SMEw==
+
 react@^16.8.0:
   version "16.8.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.0.tgz#8533f0e4af818f448a276eae71681d09e8dd970a"
@@ -11722,6 +11776,11 @@ [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
 
+tryer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
+  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
+
 tslib@^1.6.0, tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
@@ -12105,6 +12164,24 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webpack-bundle-analyzer@^2.13.1:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz#07d2176c6e86c3cdce4c23e56fae2a7b6b4ad526"
+  integrity sha512-rwxyfecTAxoarCC9VlHlIpfQCmmJ/qWD5bpbjkof+7HrNhTNZIwZITxN6CdlYL2axGmwNUQ+tFgcSOiNXMf/sQ==
+  dependencies:
+    acorn "^5.3.0"
+    bfj-node4 "^5.2.0"
+    chalk "^2.3.0"
+    commander "^2.13.0"
+    ejs "^2.5.7"
+    express "^4.16.2"
+    filesize "^3.5.11"
+    gzip-size "^4.1.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    opener "^1.4.3"
+    ws "^4.0.0"
+
 [email protected], webpack-dev-middleware@^3.0.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.4.0.tgz#1132fecc9026fd90f0ecedac5cbff75d1fb45890"
@@ -12471,6 +12548,14 @@ write@^0.2.1:
   dependencies:
     mkdirp "^0.5.1"
 
+ws@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-4.1.0.tgz#a979b5d7d4da68bf54efe0408967c324869a7289"
+  integrity sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+
 ws@^5.2.0:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"