Add Desktop Splash, Mobile Inset template

nypublicradio · Oct 11, 2018 · 199bc1f · 199bc1f
1 parent 14cc588
commit 199bc1f
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 11 deletions.
diff --git a/src/components/CloseButton/CloseButton.scss b/src/components/CloseButton/CloseButton.scss
@@ -1,12 +1,12 @@
 .closeButton {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 4px;
+  right: 4px;
   opacity: 0.6;
   height: 42px;
   width: 42px;
   animation: ease 0.2s;
-  padding: 10px;
+  padding: 12px;
   cursor: pointer;
 }
 

diff --git a/src/components/InsetWithImage/InsetWithImage.scss b/src/components/InsetWithImage/InsetWithImage.scss
@@ -0,0 +1,20 @@
+.insetContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+  *, *:after, *:before {
+    box-sizing: border-box;
+  }
+}
+
+.img {
+  max-height: 240px;
+}
+
+.heightConstraints {
+  max-height: 240px;
+}
+
diff --git a/src/components/InsetWithImage/index.js b/src/components/InsetWithImage/index.js
@@ -0,0 +1,47 @@
+import {h, render, Component} from 'preact';
+import styles from './InsetWithImage.scss';
+import CloseButton from '../CloseButton';
+import Cookies from 'js-cookie';
+
+class InsetWithImage extends Component {
+  _dismissSplash = () => {
+    this.setState({showSplash: false});
+    Cookies.set('hasSeenSplash', 'true', {expires: 1, path: '/'});
+    document.removeEventListener('keydown', this._handleKeyDown);
+  };
+
+  _shouldShowSplash = () => {
+    if (!Cookies.get('hasSeenSplash')) {
+      document.addEventListener('keydown', this._handleKeyDown);
+      return true;
+    }
+  };
+
+  state = {
+    showSplash: this._shouldShowSplash(),
+  };
+
+  render() {
+    return this.state.showSplash ? (
+      <div
+        class={[styles.insetContainer, styles.heightConstraints].join(' ')}
+        style={`background-color: ${this.props.backgroundColor}`}
+        onClick={this._dismissSplash}
+        data-cy="inset">
+        <CloseButton buttonColor="#000" clickAction={this._dismissSplash} />
+        <a
+          href={this.props.clickthroughUrl}
+          target="_blank"
+          data-cy="inset-link">
+          <img
+            src={this.props.imageUrl}
+            class={[styles.img, styles.heightConstraints].join(' ')}
+            data-cy="inset-img"
+          />
+        </a>
+      </div>
+    ) : null;
+  }
+}
+
+export default InsetWithImage;
diff --git a/src/desktop-and-mobile-splash.html b/src/desktop-and-mobile-splash.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title></title>
+</head>
+<body>
+  <script type="text/javascript">
+    window.DFP = window.DFP || {};
+    window.DFP.imageUrlDesktop = window.DFP.imageUrlDesktop || "https://picsum.photos/800/600";
+    window.DFP.imageUrlMobile  = window.DFP.imageUrlMobile  || "https://picsum.photos/240/400";
+    window.DFP.clickthroughUrl = window.DFP.clickthroughUrl || "http://www.wnyc.org";
+    window.DFP.templateName    = window.DFP.templateName    || "desktop-and-mobile-splash";
+    window.DFP.backgroundColor = window.DFP.backgroundColor || "#0000FF";
+  </script>
+  <div id="dfp_splash_app"></div>
+</body>
+</html>
diff --git a/src/desktop-splash-mobile-inset.html b/src/desktop-splash-mobile-inset.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title></title>
+</head>
+<body>
+  <script type="text/javascript">
+    window.DFP = window.DFP || {};
+    window.DFP.imageUrlDesktop = window.DFP.imageUrlDesktop || "https://picsum.photos/800/600";
+    window.DFP.imageUrlMobile  = window.DFP.imageUrlMobile  || "https://picsum.photos/400/240";
+    window.DFP.clickthroughUrl = window.DFP.clickthroughUrl || "http://www.wnyc.org";
+    window.DFP.templateName    = window.DFP.templateName    || "desktop-splash-mobile-inset";
+    window.DFP.backgroundColor = window.DFP.backgroundColor || "#0000FF";
+  </script>
+  <div id="dfp_splash_app"></div>
+</body>
+</html>
diff --git a/src/index.html b/src/index.html
@@ -2,15 +2,24 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title></title>
-  <script type="text/javascript">
-    window.DFP = {};
-    window.DFP.imageUrlDesktop = "https://picsum.photos/800/600";
-    window.DFP.imageUrlMobile  = "https://picsum.photos/240/400";
-    window.DFP.clickthroughUrl = "http://www.wnyc.org";
-  </script>
+<style>
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+</style>
 </head>
 <body>
-  <div id="dfp_splash_app"></div>
+  <h1>DFP Templates</h1>
+  <ul>
+    <li><a href="/desktop-and-mobile-splash.html">Desktop &amp; Mobile Splash</a></li>
+    <li><a href="/desktop-splash-mobile-inset.html">Desktop Splash, Mobile Inset</a></li>
+  </ul>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,20 @@
 import {h, render, Component} from 'preact';
 import SplashOverlay from './components/SplashOverlay';
+import DesktopAndMobileSplash from './templates/DesktopAndMobileSplash';
+import DesktopSplashMobileInset from './templates/DesktopSplashMobileInset';
 
 class Index extends Component {
   render() {
-    return <SplashOverlay />;
+    switch(window.DFP.templateName) {
+      case 'desktop-and-mobile-splash':
+        return <DesktopAndMobileSplash />;
+        break;
+      case 'desktop-splash-mobile-inset':
+        return <DesktopSplashMobileInset />;
+        break;
+      default:
+        return <DesktopAndMobileSplash />;
+    }
   }
 }
 

diff --git a/src/templates/DesktopAndMobileSplash/index.jsx b/src/templates/DesktopAndMobileSplash/index.jsx
@@ -0,0 +1,4 @@
+import {h, render, Component} from 'preact';
+import SplashOverlay from '../../components/SplashOverlay';
+
+export default () => <SplashOverlay />;
diff --git a/src/templates/DesktopSplashMobileInset/index.js b/src/templates/DesktopSplashMobileInset/index.js
@@ -0,0 +1,25 @@
+import {h, render, Component} from 'preact';
+import SplashOverlay from '../../components/SplashOverlay';
+import InsetWithImage from '../../components/InsetWithImage';
+
+class DesktopSplashMobileInset extends Component {
+  state = {
+    windowSize: window.innerWidth,
+  };
+
+  render() {
+    if (this.state.windowSize > 840) {
+      return <SplashOverlay />;
+    } else {
+      return (
+        <InsetWithImage
+          imageUrl={window.DFP.imageUrlMobile}
+          backgroundColor={window.DFP.backgroundColor}
+          clickthroughUrl={window.DFP.clickthroughUrl}
+        />
+      );
+    }
+  }
+}
+
+export default DesktopSplashMobileInset;
diff --git a/webpack.config.js b/webpack.config.js
@@ -42,6 +42,14 @@ module.exports = {
       template: './src/index.html',
       filename: './index.html',
     }),
+    new HtmlWebpackPlugin({
+      template: './src/desktop-and-mobile-splash.html',
+      filename: './desktop-and-mobile-splash.html',
+    }),
+    new HtmlWebpackPlugin({
+      template: './src/desktop-splash-mobile-inset.html',
+      filename: './desktop-splash-mobile-inset.html',
+    }),
     new CompressionPlugin(),
 
     // // Uncomment this plugin to analyze the bundle size; our goal is to keep