diff --git a/.gitignore b/.gitignore index 4ce2e5c..3b88e33 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ build/ node_modules/ config.js dev.config.js + +src/\.DS_Store diff --git a/src/components/.DS_Store b/src/components/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/src/components/.DS_Store differ diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 2e996e9..b77e31c 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -7,14 +7,14 @@ import { import React from 'react' import Spinner from './presentational/Spinner' -import CardTimestamp from './presentational/CardTimestamp' -import CardLocation from './presentational/CardLocation' -import CardCaret from './presentational/CardCaret' -import CardTags from './presentational/CardTags' -import CardSummary from './presentational/CardSummary' -import CardSource from './presentational/CardSource' -import CardCategory from './presentational/CardCategory' -import CardNarrative from './presentational/CardNarrative' +import CardTimestamp from './presentational/Card/Timestamp' +import CardLocation from './presentational/Card/Location' +import CardCaret from './presentational/Card/Caret' +import CardTags from './presentational/Card/Tags' +import CardSummary from './presentational/Card/Summary' +import CardSource from './presentational/Card/Source' +import CardCategory from './presentational/Card/Category' +import CardNarrative from './presentational/Card/Narrative' class Card extends React.Component { diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 5817f83..7465bb7 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -9,7 +9,7 @@ import LoadingOverlay from './presentational/LoadingOverlay' import Map from './Map.jsx' import Toolbar from './Toolbar.jsx' import CardStack from './CardStack.jsx' -import NarrativeControls from './presentational/NarrativeControls.js' +import NarrativeControls from './presentational/Narrative/Controls.js' import InfoPopUp from './InfoPopup.jsx' import Timeline from './Timeline.jsx' import Notification from './Notification.jsx' diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 44dd942..c1df193 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -9,17 +9,18 @@ import 'leaflet'; import { isNotNullNorUndefined } from '../js/utilities'; -import MapSites from './MapSites.jsx'; -import MapShapes from './MapShapes.jsx'; -import MapEvents from './MapEvents.jsx'; -import MapSelectedEvents from './MapSelectedEvents.jsx'; -import MapNarratives from './MapNarratives.jsx'; -import MapDefsMarkers from './MapDefsMarkers.jsx'; +import MapSites from './presentational/Map/Sites.jsx'; +import MapShapes from './presentational/Map/Shapes.jsx'; +import MapEvents from './presentational/Map/Events.jsx'; +import MapSelectedEvents from './presentational/Map/SelectedEvents.jsx'; +import MapNarratives from './presentational/Map/Narratives.jsx'; +import MapDefsMarkers from './presentational/Map/DefsMarkers.jsx'; class Map extends React.Component { constructor() { super(); + this.projectPoint = this.projectPoint.bind(this) this.svgRef = React.createRef(); this.map = null; this.state = { @@ -109,6 +110,14 @@ class Map extends React.Component { }) } + projectPoint(location) { + const latLng = new L.LatLng(location[0], location[1]) + return { + x: this.map.latLngToLayerPoint(latLng).x + this.state.mapTransformX, + y: this.map.latLngToLayerPoint(latLng).y + this.state.mapTransformY + } + } + getClientDims() { const boundingClient = document.querySelector(`#${this.props.ui.dom.map}`).getBoundingClientRect(); @@ -140,9 +149,7 @@ class Map extends React.Component { return ( ); @@ -153,9 +160,7 @@ class Map extends React.Component { ) } @@ -165,9 +170,7 @@ class Map extends React.Component { ); } diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index c950fb5..ac49152 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -5,14 +5,14 @@ import hash from 'object-hash'; import copy from '../js/data/copy.json'; import { formatterWithYear, parseDate } from '../js/utilities'; -import TimelineHeader from './presentational/TimelineHeader'; +import TimelineHeader from './presentational/Timeline/Header'; import TimelineAxis from './TimelineAxis.jsx'; -import TimelineClip from './presentational/TimelineClip'; -import TimelineHandles from './presentational/TimelineHandles.js'; -import TimelineZoomControls from './presentational/TimelineZoomControls.js'; -import TimelineLabels from './presentational/TimelineLabels.js'; -import TimelineMarkers from './presentational/TimelineMarkers.js' -import TimelineEvents from './presentational/TimelineEvents.js'; +import TimelineClip from './presentational/Timeline/Clip'; +import TimelineHandles from './presentational/Timeline/Handles.js'; +import TimelineZoomControls from './presentational/Timeline/ZoomControls.js'; +import TimelineLabels from './presentational/Timeline/Labels.js'; +import TimelineMarkers from './presentational/Timeline/Markers.js' +import TimelineEvents from './presentational/Timeline/Events.js'; import TimelineCategories from './TimelineCategories.jsx'; class Timeline extends React.Component { diff --git a/src/components/presentational/.DS_Store b/src/components/presentational/.DS_Store new file mode 100644 index 0000000..1e61c25 Binary files /dev/null and b/src/components/presentational/.DS_Store differ diff --git a/src/components/presentational/CardCaret.js b/src/components/presentational/Card/Caret.js similarity index 100% rename from src/components/presentational/CardCaret.js rename to src/components/presentational/Card/Caret.js diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/Card/Category.js similarity index 84% rename from src/components/presentational/CardCategory.js rename to src/components/presentational/Card/Category.js index 20b396d..ab6eb4c 100644 --- a/src/components/presentational/CardCategory.js +++ b/src/components/presentational/Card/Category.js @@ -1,6 +1,6 @@ import React from 'react'; -import { capitalizeFirstLetter } from '../../js/utilities.js'; +import { capitalizeFirstLetter } from '../../../js/utilities.js'; const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
diff --git a/src/components/presentational/CardLocation.js b/src/components/presentational/Card/Location.js similarity index 84% rename from src/components/presentational/CardLocation.js rename to src/components/presentational/Card/Location.js index e9598fa..5025c5b 100644 --- a/src/components/presentational/CardLocation.js +++ b/src/components/presentational/Card/Location.js @@ -1,7 +1,7 @@ import React from 'react'; -import copy from '../../js/data/copy.json'; -import { isNotNullNorUndefined } from '../../js/utilities'; +import copy from '../../../js/data/copy.json'; +import { isNotNullNorUndefined } from '../../../js/utilities'; const CardLocation = ({ language, location }) => { diff --git a/src/components/presentational/CardNarrative.js b/src/components/presentational/Card/Narrative.js similarity index 86% rename from src/components/presentational/CardNarrative.js rename to src/components/presentational/Card/Narrative.js index 49f590d..adc88f2 100644 --- a/src/components/presentational/CardNarrative.js +++ b/src/components/presentational/Card/Narrative.js @@ -1,6 +1,6 @@ import React from 'react'; -import CardNarrativeLink from './CardNarrativeLink'; +import CardNarrativeLink from './NarrativeLink'; const CardNarrative = (props) => (
diff --git a/src/components/presentational/CardNarrativeLink.js b/src/components/presentational/Card/NarrativeLink.js similarity index 100% rename from src/components/presentational/CardNarrativeLink.js rename to src/components/presentational/Card/NarrativeLink.js diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/Card/Source.js similarity index 96% rename from src/components/presentational/CardSource.js rename to src/components/presentational/Card/Source.js index 9b3da5b..7447ca6 100644 --- a/src/components/presentational/CardSource.js +++ b/src/components/presentational/Card/Source.js @@ -1,9 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' -import Spinner from './Spinner' import Img from 'react-image' -import copy from '../../js/data/copy.json' +import Spinner from '../Spinner' +import copy from '../../../js/data/copy.json' const CardSource = ({ source, isLoading, onClickHandler }) => { function renderIconText(type) { diff --git a/src/components/presentational/CardSummary.js b/src/components/presentational/Card/Summary.js similarity index 88% rename from src/components/presentational/CardSummary.js rename to src/components/presentational/Card/Summary.js index 3e0cdbf..ac5bbd2 100644 --- a/src/components/presentational/CardSummary.js +++ b/src/components/presentational/Card/Summary.js @@ -1,6 +1,6 @@ import React from 'react'; -import copy from '../../js/data/copy.json'; +import copy from '../../../js/data/copy.json'; const CardSummary = ({ language, description, isHighlighted }) => { diff --git a/src/components/presentational/CardTags.js b/src/components/presentational/Card/Tags.js similarity index 94% rename from src/components/presentational/CardTags.js rename to src/components/presentational/Card/Tags.js index 6841cd4..2bc4cc4 100644 --- a/src/components/presentational/CardTags.js +++ b/src/components/presentational/Card/Tags.js @@ -1,6 +1,6 @@ import React from 'react'; -import copy from '../../js/data/copy.json'; +import copy from '../../../js/data/copy.json'; const CardTags = ({ tags, language }) => { const tags_lang = copy[language].cardstack.tags; diff --git a/src/components/presentational/CardTimestamp.js b/src/components/presentational/Card/Timestamp.js similarity index 87% rename from src/components/presentational/CardTimestamp.js rename to src/components/presentational/Card/Timestamp.js index 0317896..6ac69e6 100644 --- a/src/components/presentational/CardTimestamp.js +++ b/src/components/presentational/Card/Timestamp.js @@ -1,7 +1,7 @@ import React from 'react'; -import copy from '../../js/data/copy.json'; -import { isNotNullNorUndefined } from '../../js/utilities'; +import copy from '../../../js/data/copy.json'; +import { isNotNullNorUndefined } from '../../../js/utilities'; const CardTimestamp = ({ makeTimelabel, language, timestamp }) => { diff --git a/src/components/MapDefsMarkers.jsx b/src/components/presentational/Map/DefsMarkers.jsx similarity index 100% rename from src/components/MapDefsMarkers.jsx rename to src/components/presentational/Map/DefsMarkers.jsx diff --git a/src/components/MapEvents.jsx b/src/components/presentational/Map/Events.jsx similarity index 55% rename from src/components/MapEvents.jsx rename to src/components/presentational/Map/Events.jsx index 68c4fe4..39a7901 100644 --- a/src/components/MapEvents.jsx +++ b/src/components/presentational/Map/Events.jsx @@ -1,19 +1,10 @@ import React from 'react'; import { Portal } from 'react-portal'; -class MapEvents extends React.Component { - - projectPoint(location) { - const latLng = new L.LatLng(location[0], location[1]); - return { - x: this.props.map.latLngToLayerPoint(latLng).x + this.props.mapTransformX, - y: this.props.map.latLngToLayerPoint(latLng).y + this.props.mapTransformY - }; - } - - getLocationEventsDistribution(location) { +function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, narrative, onSelect, svg, locations }){ + function getLocationEventsDistribution(location) { const eventCount = {}; - const categories = this.props.categories; + const categories = categories; categories.forEach(cat => { eventCount[cat.category] = []; @@ -26,7 +17,7 @@ class MapEvents extends React.Component { return eventCount; } - renderLocation(location) { + function renderLocation(location) { /** { events: [...], @@ -35,23 +26,23 @@ class MapEvents extends React.Component { longitude: '32.2' } */ - const { x, y } = this.projectPoint([location.latitude, location.longitude]); - // const eventsByCategory = this.getLocationEventsDistribution(location); + const { x, y } = projectPoint([location.latitude, location.longitude]); + // const eventsByCategory = getLocationEventsDistribution(location); const locCategory = location.events.length > 0 ? location.events[0].category : 'default' - const customStyles = this.props.styleLocation ? this.props.styleLocation(location) : null + const customStyles = styleLocation ? styleLocation(location) : null const extraStyles = customStyles[0] const extraRender = customStyles[1] const styles = ({ - fill: this.props.getCategoryColor(locCategory), + fill: getCategoryColor(locCategory), fillOpacity: 1, ...customStyles[0] }) // in narrative mode, only render events in narrative - if (this.props.narrative) { - const { steps } = this.props.narrative + if (narrative) { + const { steps } = narrative const onlyIfInNarrative = e => steps.map(s => s.id).includes(e.id) const eventsInNarrative = location.events.filter(onlyIfInNarrative) @@ -64,7 +55,7 @@ class MapEvents extends React.Component { this.props.onSelect(location.events)} + onClick={() => onSelect(location.events)} > - {this.props.locations.map(loc => this.renderLocation(loc))} - - ); - } + return ( + + {locations.map(renderLocation)} + + ); } export default MapEvents; diff --git a/src/components/MapNarratives.jsx b/src/components/presentational/Map/Narratives.jsx similarity index 50% rename from src/components/MapNarratives.jsx rename to src/components/presentational/Map/Narratives.jsx index 6851fdd..e2ffbea 100644 --- a/src/components/MapNarratives.jsx +++ b/src/components/presentational/Map/Narratives.jsx @@ -1,76 +1,67 @@ import React from 'react' import { Portal } from 'react-portal' -class MapNarratives extends React.Component { - - projectPoint(location) { - const latLng = new L.LatLng(location[0], location[1]) - return { - x: this.props.map.latLngToLayerPoint(latLng).x + this.props.mapTransformX, - y: this.props.map.latLngToLayerPoint(latLng).y + this.props.mapTransformY - } - } - - getNarrativeStyle(narrativeId) { - const styleName = (narrativeId && narrativeId in this.props.narrativeProps) +function MapNarratives ({ narrativeProps, onSelectNarrative, svg, narrative, narratives, projectPoint }) { + function getNarrativeStyle(narrativeId) { + const styleName = (narrativeId && narrativeId in narrativeProps) ? narrativeId : 'default' - return this.props.narrativeProps[styleName] + return narrativeProps[styleName] } - getStepStyle(name) { + function getStepStyle(name) { if (name === 'None') return null - return this.props.narrativeProps.stepStyles[name] + return narrativeProps.stepStyles[name] } - hasNoLocation(step) { + function hasNoLocation(step) { return (step.latitude === '' || step.longitude === '') } - renderNarrativeStep(idx, n) { + function renderNarrativeStep(idx, n) { const step = n.steps[idx] const step2 = n.steps[idx + 1] // don't draw if one of the steps has no location - if (this.hasNoLocation(step) || this.hasNoLocation(step2)) + if (hasNoLocation(step) || hasNoLocation(step2)) return null // 0 if not in narrative mode, 1 if active narrative, 0.1 if inactive let styles = { strokeOpacity: (n === null) ? 0 - : (step && (n.id === this.props.narrative.id)) ? 1 : 0.1, + : (step && (n.id === narrative.id)) ? 1 : 0.1, strokeWidth: 0, strokeDasharray: 'none', stroke: 'none' } - const p1 = this.projectPoint([step.latitude, step.longitude]) - const p2 = this.projectPoint([step2.latitude, step2.longitude]) + const p1 = projectPoint([step.latitude, step.longitude]) + const p2 = projectPoint([step2.latitude, step2.longitude]) if (step) { if (process.env.features.NARRATIVE_STEP_STYLES) { const _idx = step.narratives.indexOf(n.id) const stepStyle = step.narrative___stepStyles[_idx] - return this._renderNarrativeStep( + return _renderNarrativeStep( p1, p2, - { ...styles, ...this.getStepStyle(stepStyle) } + { ...styles, ...getStepStyle(stepStyle) } ) // otherwise steps are styled per narrative } else { styles = { ...styles, - ...this.getNarrativeStyle(n.id) + ...getNarrativeStyle(n.id) } - return this._renderNarrativeStep(p1,p2,styles) + return _renderNarrativeStep(p1,p2,styles) } } } - _renderNarrativeStep(p1, p2, styles) { + function _renderNarrativeStep(p1, p2, styles) { const { stroke, strokeWidth, strokeDasharray, strokeOpacity } = styles return ( this.props.onSelectNarrative(n)} + onClick={() => onSelectNarrative(n)} style={{ strokeWidth, strokeDasharray, @@ -93,26 +84,23 @@ class MapNarratives extends React.Component { } - renderNarrative(n) { + function renderNarrative(n) { const steps = n.steps.slice(0, n.steps.length - 1) - console.log(n) return ( - {steps.map((s, idx) => this.renderNarrativeStep(idx, n))} + {steps.map((s, idx) => renderNarrativeStep(idx, n))} ) } - render() { - if (this.props.narrative === null) return (
) + if (narrative === null) return (
) - return ( - - {this.props.narratives.map(n => this.renderNarrative(n))} - - ) - } + return ( + + {narratives.map(n => renderNarrative(n))} + + ) } export default MapNarratives diff --git a/src/components/MapSelectedEvents.jsx b/src/components/presentational/Map/SelectedEvents.jsx similarity index 66% rename from src/components/MapSelectedEvents.jsx rename to src/components/presentational/Map/SelectedEvents.jsx index 8c48bc8..88c3036 100644 --- a/src/components/MapSelectedEvents.jsx +++ b/src/components/presentational/Map/SelectedEvents.jsx @@ -2,17 +2,8 @@ import React from 'react'; import { Portal } from 'react-portal'; class MapSelectedEvents extends React.Component { - - projectPoint(location) { - const latLng = new L.LatLng(location[0], location[1]); - return { - x: this.props.map.latLngToLayerPoint(latLng).x + this.props.mapTransformX, - y: this.props.map.latLngToLayerPoint(latLng).y + this.props.mapTransformY - }; - } - renderMarker (event) { - const { x, y } = this.projectPoint([event.latitude, event.longitude]); + const { x, y } = this.props.projectPoint([event.latitude, event.longitude]); return ( { if (!narrative) return null @@ -12,18 +12,18 @@ export default ({ narrative, methods }) => { return ( - - + - - methods.onSelectNarrative(null)} closeMsg='-- exit from narrative --' /> diff --git a/src/components/presentational/TimelineClip.js b/src/components/presentational/Timeline/Clip.js similarity index 100% rename from src/components/presentational/TimelineClip.js rename to src/components/presentational/Timeline/Clip.js diff --git a/src/components/presentational/DatetimeDot.js b/src/components/presentational/Timeline/DatetimeDot.js similarity index 100% rename from src/components/presentational/DatetimeDot.js rename to src/components/presentational/Timeline/DatetimeDot.js diff --git a/src/components/presentational/TimelineEvents.js b/src/components/presentational/Timeline/Events.js similarity index 100% rename from src/components/presentational/TimelineEvents.js rename to src/components/presentational/Timeline/Events.js diff --git a/src/components/presentational/TimelineHandles.js b/src/components/presentational/Timeline/Handles.js similarity index 100% rename from src/components/presentational/TimelineHandles.js rename to src/components/presentational/Timeline/Handles.js diff --git a/src/components/presentational/TimelineHeader.js b/src/components/presentational/Timeline/Header.js similarity index 100% rename from src/components/presentational/TimelineHeader.js rename to src/components/presentational/Timeline/Header.js diff --git a/src/components/presentational/TimelineLabels.js b/src/components/presentational/Timeline/Labels.js similarity index 94% rename from src/components/presentational/TimelineLabels.js rename to src/components/presentational/Timeline/Labels.js index 36466ba..9a75743 100644 --- a/src/components/presentational/TimelineLabels.js +++ b/src/components/presentational/Timeline/Labels.js @@ -1,6 +1,6 @@ import React from 'react'; -import { formatterWithYear } from '../../js/utilities.js'; +import { formatterWithYear } from '../../../js/utilities.js'; const TimelineLabels = ({ dims, timelabels }) => { diff --git a/src/components/presentational/TimelineMarkers.js b/src/components/presentational/Timeline/Markers.js similarity index 100% rename from src/components/presentational/TimelineMarkers.js rename to src/components/presentational/Timeline/Markers.js diff --git a/src/components/presentational/TimelineZoomControls.js b/src/components/presentational/Timeline/ZoomControls.js similarity index 100% rename from src/components/presentational/TimelineZoomControls.js rename to src/components/presentational/Timeline/ZoomControls.js