adds reset timeline button (#81)

src/common/data/copy.json

@@ -240,6 +240,7 @@
         "Other"
       ],
       "info": "Showing <span>%n events</span> that occurred between",
+      "reset": "reset dates",
       "default_categories_label": ""
     },
     "cardstack": {

src/components/time/Timeline.jsx

@@ -53,6 +53,9 @@ class Timeline extends Component {
         timerange: nextProps.app.timeline.range,
         scaleX: this.makeScaleX(),
       });
+      if(this?.initialTimeRange == null) {
+        this.initialTimeRange = nextProps.app.timeline.range;
+      }
     }
 
     if (
@@ -377,6 +380,8 @@ class Timeline extends Component {
       domain.eventCountInTimeRange
     );
 
+    const resetTest = copy[this.props.app.language].timeline.reset;
+
     return (
       <div className={classes} onKeyDown={this.props.onKeyDown} tabIndex="1">
         <Header
@@ -387,6 +392,15 @@ class Timeline extends Component {
             this.onClickArrow();
           }}
           hideInfo={isNarrative}
+          resetTest={resetTest}
+          resetClick={() => {
+            this.setState({
+              timerange: this.initialTimeRange
+            }, () => {
+              this.props.methods.onUpdateTimerange(this.state.timerange);
+            });
+            this.computeDims();
+          }}
         />
         <div className="timeline-content">
           <div id={this.props.ui.dom.timeline} className="timeline">

src/components/time/atoms/Header.jsx

@@ -1,6 +1,6 @@
 import { makeNiceDate } from "../../../common/utilities";
 
-const TimelineHeader = ({ title, from, to, onClick, hideInfo }) => {
+const TimelineHeader = ({ title, from, to, onClick, hideInfo, resetTest, resetClick }) => {
   const d0 = from && makeNiceDate(from);
   const d1 = to && makeNiceDate(to);
   return (
@@ -14,6 +14,7 @@ const TimelineHeader = ({ title, from, to, onClick, hideInfo }) => {
         <p dangerouslySetInnerHTML={{ __html: title }} />
         <p>
           {d0} - {d1}
+          <small className="reset-button" onClick={() => resetClick() }><a className="cell">{ resetTest }</a></small>
         </p>
       </div>
     </div>

src/scss/timeline.scss

@@ -108,6 +108,12 @@
         }
       }
 
+      small.reset-button {
+        float:right;
+        cursor: pointer;
+        font-size: 0.75rem;
+      }
+
       // mobile styles
       @media screen and (max-width: 600px) {
         bottom: 115%;