add cover with toggle

.gitignore

@@ -5,3 +5,5 @@ config.js
 dev.config.js
 
 src/\.DS_Store
+
+\.DS_Store

example.config.js

@@ -11,6 +11,7 @@ module.exports = {
   INCOMING_DATETIME_FORMAT: '%m/%d/%YT%H:%M',
   MAPBOX_TOKEN: 'pk.EXAMPLE_MAPBOX_TOKEN',
   features: {
+    USE_COVER: true,
     USE_TAGS: false,
     USE_SEARCH: false,
     USE_SITES: true,
@@ -32,15 +33,15 @@ module.exports = {
           new Date(2014, 5, 9),
           new Date(2018, 1, 6, 23)
         ]
-      }      }
-    },
-    ui: {
-      style: {
-        categories: {},
-        shapes: {},
-        narratives: {},
-        selectedEvent: {},
       }
     }
+  },
+  ui: {
+    style: {
+      categories: {},
+      shapes: {},
+      narratives: {},
+      selectedEvent: {}
+    }
   }
 }

src/actions/index.js

@@ -291,6 +291,13 @@ export function markNotificationsRead () {
   }
 }
 
+export const TOGGLE_COVER = 'TOGGLE_COVER'
+export function toggleCover () {
+  return {
+    type: TOGGLE_COVER
+  }
+}
+
 // ERRORS
 
 export const FETCH_SOURCE_ERROR = 'FETCH_SOURCE_ERROR'

src/components/Dashboard.jsx

@@ -13,6 +13,7 @@ import NarrativeControls from './presentational/Narrative/Controls.js'
 import InfoPopUp from './InfoPopup.jsx'
 import Timeline from './Timeline.jsx'
 import Notification from './Notification.jsx'
+import StaticPage from './StaticPage'
 
 import { parseDate } from '../js/utilities'
 
@@ -157,6 +158,12 @@ class Dashboard extends React.Component {
             }
           />
         ) : null}
+        {process.env.features.USE_COVER && (
+          <StaticPage showing={app.flags.isCover}>
+            {/* enable USE_COVER in config.js features, and put content here if you want a header */}
+            {/* pass 'actions.toggleCover' as a prop to your custom header */}
+          </StaticPage>
+        )}
         <LoadingOverlay
           ui={app.flags.isFetchingDomain}
           language={app.language}

src/components/StaticPage.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default ({ showing, children }) => {
+  return (
+    <div className={`cover-container ${showing ? 'showing' : ''}`}>
+      {children}
+    </div>
+  )
+}

src/js/utilities.js

@@ -126,3 +126,13 @@ export function urlFromEnv (ext) {
     return null
   }
 }
+
+export function toggleFlagAC (flag) {
+  return (appState) => ({
+    ...appState,
+    flags: {
+      ...appState.flags,
+      isCover: !appState.flags[flag]
+    }
+  })
+}

src/reducers/app.js

@@ -1,6 +1,6 @@
 /* global d3 */
 import initial from '../store/initial.js'
-import { parseDate } from '../js/utilities'
+import { parseDate, toggleFlagAC } from '../js/utilities'
 
 import {
   UPDATE_HIGHLIGHTED,
@@ -19,6 +19,7 @@ import {
   TOGGLE_FETCHING_SOURCES,
   TOGGLE_INFOPOPUP,
   TOGGLE_NOTIFICATIONS,
+  TOGGLE_COVER,
   FETCH_ERROR,
   FETCH_SOURCE_ERROR
 } from '../actions'
@@ -189,16 +190,6 @@ function toggleLanguage (appState, action) {
   })
 }
 
-function toggleSites (appState, action) {
-  return {
-    ...appState,
-    flags: {
-      ...appState.flags,
-      isShowingSites: !appState.flags.isShowingSites
-    }
-  }
-}
-
 function updateSource (appState, action) {
   return {
     ...appState,
@@ -214,37 +205,12 @@ function fetchError (state, action) {
   }
 }
 
-function toggleFetchingDomain (appState, action) {
-  return Object.assign({}, appState, {
-    flags: Object.assign({}, appState.flags, {
-      isFetchingDomain: !appState.flags.isFetchingDomain
-    })
-  })
-}
-
-function toggleFetchingSources (appState, action) {
-  return Object.assign({}, appState, {
-    flags: Object.assign({}, appState.flags, {
-      isFetchingSources: !appState.flags.isFetchingSources
-    })
-  })
-}
-
-function toggleInfoPopup (appState, action) {
-  return Object.assign({}, appState, {
-    flags: Object.assign({}, appState.flags, {
-      isInfopopup: !appState.flags.isInfopopup
-    })
-  })
-}
-
-function toggleNotifications (appState, action) {
-  return Object.assign({}, appState, {
-    flags: Object.assign({}, appState.flags, {
-      isNotification: !appState.flags.isNotification
-    })
-  })
-}
+const toggleSites = toggleFlagAC('isShowingSites')
+const toggleFetchingDomain = toggleFlagAC('isFetchingDomain')
+const toggleFetchingSources = toggleFlagAC('isFetchingSources')
+const toggleInfoPopup = toggleFlagAC('isInfopopup')
+const toggleNotifications = toggleFlagAC('isNotification')
+const toggleCover = toggleFlagAC('isCover')
 
 function fetchSourceError (appState, action) {
   return {
@@ -278,20 +244,24 @@ function app (appState = initial.app, action) {
       return updateSource(appState, action)
     case RESET_ALLFILTERS:
       return resetAllFilters(appState, action)
+    /* toggles */
     case TOGGLE_LANGUAGE:
       return toggleLanguage(appState, action)
     case TOGGLE_SITES:
-      return toggleSites(appState, action)
+      return toggleSites(appState)
+    case TOGGLE_FETCHING_DOMAIN:
+      return toggleFetchingDomain(appState)
+    case TOGGLE_FETCHING_SOURCES:
+      return toggleFetchingSources(appState)
+    case TOGGLE_INFOPOPUP:
+      return toggleInfoPopup(appState)
+    case TOGGLE_NOTIFICATIONS:
+      return toggleNotifications(appState)
+    case TOGGLE_COVER:
+      return toggleCover(appState)
+    /* errors */
     case FETCH_ERROR:
       return fetchError(appState, action)
-    case TOGGLE_FETCHING_DOMAIN:
-      return toggleFetchingDomain(appState, action)
-    case TOGGLE_FETCHING_SOURCES:
-      return toggleFetchingSources(appState, action)
-    case TOGGLE_INFOPOPUP:
-      return toggleInfoPopup(appState, action)
-    case TOGGLE_NOTIFICATIONS:
-      return toggleNotifications(appState, action)
     case FETCH_SOURCE_ERROR:
       return fetchSourceError(appState, action)
     default:

src/scss/cover.scss

@@ -0,0 +1,18 @@
+.cover-container {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  background-color: black;
+  width: 100%;
+  height: 100%;
+  opacity: 0.95;
+  transition: top 0.4s ease;
+  z-index: $overheader + 1;
+
+  color: $offwhite;
+
+  &.showing {
+    top: 0;
+    left: 0;
+  }
+}

src/scss/main.scss

@@ -16,3 +16,4 @@
 @import 'notification';
 @import 'scene';
 @import 'mediaplayer';
+@import 'cover';

src/store/initial.js

@@ -84,7 +84,7 @@ const initial = {
     flags: {
       isFetchingDomain: false,
       isFetchingSources: false,
-
+      isCover: true,
       isCardstack: true,
       isInfopopup: true,
       isShowingSites: true