Merge branch 'develop' of https://github.com/forensic-architecture/timemap into add-search-bar

example.config.js

@@ -19,9 +19,7 @@ module.exports = {
       }
     },
     ui: {
-      style: {
-        // tiles: 'your-mapbox-account-name/x5678-map-id'
-      }
+      // tiles: 'your-mapbox-account-name/x5678-map-id'
     },
     features: {
       USE_CATEGORIES: false,

package.json

@@ -43,7 +43,7 @@
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.4.4",
     "mocha": "^5.2.0",
-    "node-sass": "4.12.0",
+    "node-sass": "4.13.1",
     "redux-devtools": "^3.4.0",
     "sass-loader": "^7.1.0",
     "standard": "^12.0.1",

src/actions/index.js

@@ -246,17 +246,11 @@ export function updateNarrative (narrative) {
   }
 }
 
-export const INCREMENT_NARRATIVE_CURRENT = 'INCREMENT_NARRATIVE_CURRENT'
-export function incrementNarrativeCurrent () {
+export const UPDATE_NARRATIVE_STEP_IDX = 'UPDATE_NARRATIVE_STEP_IDX'
+export function updateNarrativeStepIdx (idx) {
   return {
-    type: INCREMENT_NARRATIVE_CURRENT
-  }
-}
-
-export const DECREMENT_NARRATIVE_CURRENT = 'DECREMENT_NARRATIVE_CURRENT'
-export function decrementNarrativeCurrent () {
-  return {
-    type: DECREMENT_NARRATIVE_CURRENT
+    type: UPDATE_NARRATIVE_STEP_IDX,
+    idx
   }
 }
 

src/components/Card.jsx

@@ -172,6 +172,7 @@ class Card extends React.Component {
         className={`event-card ${isSelected ? 'selected' : ''}`}
         id={`event-card-${idx}`}
         ref={this.props.innerRef}
+        onClick={this.props.onSelect}
       >
         {this.renderMain()}
         {this.state.isOpen ? this.renderExtra() : null}

src/components/CardStack.jsx

@@ -72,7 +72,7 @@ class CardStack extends React.Component {
         getCategoryLabel={this.props.getCategoryLabel}
         onViewSource={this.props.onViewSource}
         onHighlight={this.props.onHighlight}
-        onSelect={this.props.onSelect}
+        onSelect={() => this.props.onSelect(idx)}
         features={this.props.features}
       />)
     })

src/components/Layout.js

@@ -31,11 +31,11 @@ class Dashboard extends React.Component {
     this.handleHighlight = this.handleHighlight.bind(this)
     this.setNarrative = this.setNarrative.bind(this)
     this.setNarrativeFromFilters = this.setNarrativeFromFilters.bind(this)
-    this.moveInNarrative = this.moveInNarrative.bind(this)
     this.handleSelect = this.handleSelect.bind(this)
     this.getCategoryColor = this.getCategoryColor.bind(this)
     this.findEventIdx = this.findEventIdx.bind(this)
     this.onKeyDown = this.onKeyDown.bind(this)
+    this.selectNarrativeStep = this.selectNarrativeStep.bind(this)
   }
 
   componentDidMount () {
@@ -177,18 +177,32 @@ class Dashboard extends React.Component {
     })
   }
 
-  moveInNarrative (amt) {
-    const { current } = this.props.app.narrativeState
+  selectNarrativeStep (idx) {
+    // Try to find idx if event passed rather than number
+    if (typeof idx !== 'number') {
+      let e = idx[0] || idx
+
+      if (this.props.app.narrative) {
+        const { steps } = this.props.app.narrative
+        // choose the first event at a given location
+        const locationEventId = e.id
+        const narrativeIdxObj = steps.find(s => s.id === locationEventId)
+        let narrativeIdx = steps.indexOf(narrativeIdxObj)
+
+        if (narrativeIdx > -1) {
+          idx = narrativeIdx
+        }
+      }
+    }
+
     const { narrative } = this.props.app
     if (narrative === null) return
 
-    if (amt === 1 && current < narrative.steps.length - 1) {
-      this.handleSelect([ narrative.steps[current + 1] ])
-      this.props.actions.incrementNarrativeCurrent()
-    }
-    if (amt === -1 && current > 0) {
-      this.handleSelect([ narrative.steps[current - 1] ])
-      this.props.actions.decrementNarrativeCurrent()
+    if (idx < narrative.steps.length && idx >= 0) {
+      const step = narrative.steps[idx]
+
+      this.handleSelect([step])
+      this.props.actions.updateNarrativeStepIdx(idx)
     }
   }
 
@@ -199,14 +213,14 @@ class Dashboard extends React.Component {
       if (narrative === null) {
         this.handleSelect(events[idx - 1], 0)
       } else {
-        this.moveInNarrative(-1)
+        this.selectNarrativeStep(this.props.app.narrativeState.current - 1)
       }
     }
     const next = idx => {
       if (narrative === null) {
         this.handleSelect(events[idx + 1], 0)
       } else {
-        this.moveInNarrative(1)
+        this.selectNarrativeStep(this.props.app.narrativeState.current + 1)
       }
     }
     if (selected.length > 0) {
@@ -264,15 +278,15 @@ class Dashboard extends React.Component {
         <Map
           onKeyDown={this.onKeyDown}
           methods={{
-            onSelect: ev => this.handleSelect(ev, 1),
             onSelectNarrative: this.setNarrative,
-            getCategoryColor: this.getCategoryColor
+            getCategoryColor: this.getCategoryColor,
+            onSelect: app.narrative ? this.selectNarrativeStep : ev => this.handleSelect(ev, 1)
           }}
         />
         <Timeline
           onKeyDown={this.onKeyDown}
           methods={{
-            onSelect: ev => this.handleSelect(ev, 0),
+            onSelect: app.narrative ? this.selectNarrativeStep : ev => this.handleSelect(ev, 0),
             onUpdateTimerange: actions.updateTimeRange,
             getCategoryColor: this.getCategoryColor
           }}
@@ -280,7 +294,7 @@ class Dashboard extends React.Component {
         <CardStack
           timelineDims={app.timeline.dimensions}
           onViewSource={this.handleViewSource}
-          onSelect={this.handleSelect}
+          onSelect={app.narrative ? this.selectNarrativeStep : this.handleSelect}
           onHighlight={this.handleHighlight}
           onToggleCardstack={() => actions.updateSelected([])}
           getNarrativeLinks={event => this.getNarrativeLinks(event)}
@@ -297,8 +311,8 @@ class Dashboard extends React.Component {
             current: app.narrativeState.current
           } : null}
           methods={{
-            onNext: () => this.moveInNarrative(1),
-            onPrev: () => this.moveInNarrative(-1),
+            onNext: () => this.selectNarrativeStep(this.props.app.narrativeState.current + 1),
+            onPrev: () => this.selectNarrativeStep(this.props.app.narrativeState.current - 1),
             onSelectNarrative: this.setNarrative
           }}
         />

src/components/Map.jsx

@@ -183,7 +183,6 @@ class Map extends React.Component {
         projectPoint={this.projectPoint}
         narrative={this.props.app.narrative}
         styles={this.props.ui.narratives}
-        onSelect={this.props.methods.onSelect}
         onSelectNarrative={this.props.methods.onSelectNarrative}
         features={this.props.features}
       />
@@ -215,7 +214,6 @@ class Map extends React.Component {
         selected={this.props.app.selected}
         narrative={this.props.app.narrative}
         onSelect={this.props.methods.onSelect}
-        onSelectNarrative={this.props.methods.onSelectNarrative}
         getCategoryColor={this.props.methods.getCategoryColor}
         eventRadius={this.props.ui.eventRadius}
       />

src/components/presentational/Map/Events.jsx

@@ -135,7 +135,7 @@ function MapEvents ({
       <g
         className={`location-event ${narrative ? 'no-hover' : ''}`}
         transform={`translate(${x}, ${y})`}
-        onClick={(!narrative) ? () => onSelect(location.events) : null}
+        onClick={() => onSelect(location.events)}
       >
         {renderLocationSlicesByCategory(location)}
         {extraRender ? extraRender() : null}

src/reducers/app.js

@@ -9,8 +9,7 @@ import {
   UPDATE_TIMERANGE,
   UPDATE_DIMENSIONS,
   UPDATE_NARRATIVE,
-  INCREMENT_NARRATIVE_CURRENT,
-  DECREMENT_NARRATIVE_CURRENT,
+  UPDATE_NARRATIVE_STEP_IDX,
   UPDATE_SOURCE,
   TOGGLE_LANGUAGE,
   TOGGLE_SITES,
@@ -99,24 +98,11 @@ function updateNarrative (appState, action) {
   }
 }
 
-function incrementNarrativeCurrent (appState, action) {
-  appState.narrativeState.current += 1
-
+function updateNarrativeStepIdx (appState, action) {
   return {
     ...appState,
     narrativeState: {
-      current: appState.narrativeState.current
-    }
-  }
-}
-
-function decrementNarrativeCurrent (appState, action) {
-  appState.narrativeState.current -= 1
-
-  return {
-    ...appState,
-    narrativeState: {
-      current: appState.narrativeState.current
+      current: action.idx
     }
   }
 }
@@ -253,10 +239,8 @@ function app (appState = initial.app, action) {
       return updateDimensions(appState, action)
     case UPDATE_NARRATIVE:
       return updateNarrative(appState, action)
-    case INCREMENT_NARRATIVE_CURRENT:
-      return incrementNarrativeCurrent(appState, action)
-    case DECREMENT_NARRATIVE_CURRENT:
-      return decrementNarrativeCurrent(appState, action)
+    case UPDATE_NARRATIVE_STEP_IDX:
+      return updateNarrativeStepIdx(appState, action)
     case UPDATE_SOURCE:
       return updateSource(appState, action)
     /* toggles */

src/scss/card.scss

@@ -16,6 +16,7 @@
   &:hover {
     background: $lightwhite;
     transition: background-color 0.4s;
+    cursor: pointer;
   }
 
   h4 {