diff --git a/.gitignore b/.gitignore
index 471ce0b..8c9ce65 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@ config.js
dev.config.js
src/\.DS_Store
+
+\.DS_Store
diff --git a/example.config.js b/example.config.js
index 8a790d9..176e5e2 100644
--- a/example.config.js
+++ b/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: {}
+ }
}
}
diff --git a/src/actions/index.js b/src/actions/index.js
index 5f10662..8ee00c0 100644
--- a/src/actions/index.js
+++ b/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'
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 4dbba51..778d1a4 100644
--- a/src/components/Dashboard.jsx
+++ b/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 && (
+
+ {/* 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 */}
+
+ )}
{
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/js/utilities.js b/src/js/utilities.js
index 42bc3b9..b739bae 100644
--- a/src/js/utilities.js
+++ b/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]
+ }
+ })
+}
diff --git a/src/reducers/app.js b/src/reducers/app.js
index e4d7811..83f2187 100644
--- a/src/reducers/app.js
+++ b/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:
diff --git a/src/scss/cover.scss b/src/scss/cover.scss
new file mode 100644
index 0000000..ab1d94a
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/scss/main.scss b/src/scss/main.scss
index e2d7a82..21656c9 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -16,3 +16,4 @@
@import 'notification';
@import 'scene';
@import 'mediaplayer';
+@import 'cover';
diff --git a/src/store/initial.js b/src/store/initial.js
index e1871d4..598ebf8 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -84,7 +84,7 @@ const initial = {
flags: {
isFetchingDomain: false,
isFetchingSources: false,
-
+ isCover: true,
isCardstack: true,
isInfopopup: true,
isShowingSites: true