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