Make timeline controls plain svg

src/components/Timeline.jsx

@@ -6,18 +6,21 @@ import hash from 'object-hash';
 import copy from '../js/data/copy.json';
 import { formatterWithYear, isNotNullNorUndefined } from '../js/utilities';
 import TimelineHeader from './presentational/TimelineHeader';
+import TimelineHandles from './TimelineHandles.jsx';
 import TimelineLogic from '../js/timeline/timeline.js';
 
+
 class Timeline extends React.Component {
   constructor(props) {
     super(props);
+    this.svgRef = React.createRef()
     this.state = {
       isFolded: false
     };
   }
 
   componentDidMount() {
-    this.timeline = new TimelineLogic(this.props.app, this.props.ui, this.props.methods);
+    this.timeline = new TimelineLogic(this.svgRef.current, this.props.app, this.props.ui, this.props.methods);
     this.timeline.update(this.props.domain, this.props.app);
   }
 
@@ -33,6 +36,48 @@ class Timeline extends React.Component {
     });
   }
 
+  getClientDims() {
+    const WIDTH_CONTROLS = 100;
+    const HEIGHT = 140;
+    let WIDTH = 0;
+
+    if (document.querySelector(`#${this.props.ui.dom.timeline}`) !== null) {
+      const boundingClient = document.querySelector(`#${this.props.ui.dom.timeline}`).getBoundingClientRect();
+      WIDTH = boundingClient.width - WIDTH_CONTROLS;
+    }
+    return {
+      height: HEIGHT,
+      width: WIDTH,
+      width_controls: WIDTH_CONTROLS,
+      height_controls: 115,
+      margin_left: 120
+    }
+  }
+
+  onMoveTime(dir) {
+    if (this.timeline) {
+      return this.timeline.moveTime(dir);
+    }
+    return '';
+  }
+
+  renderSVG() {
+    const { width, height, margin_left } = this.getClientDims();
+  
+    return (
+      <svg
+        ref={this.svgRef}
+        width={width}
+        height={height}
+      >
+        <clipPath id="clip">
+          <rect x="120" y="0" width={width - margin_left} height={height - 25}></rect>
+        </clipPath>
+        <TimelineHandles dims={this.getClientDims()} onMoveTime={(dir) => { this.onMoveTime(dir) }} />
+      </svg>
+    ); 
+  }
+
   render() {
     const { isNarrative, app, ui } = this.props
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
@@ -47,7 +92,9 @@ class Timeline extends React.Component {
           hideInfo={isNarrative}
         />
         <div className="timeline-content">
-          <div id={ui.dom.timeline} className="timeline" />
+          <div id={this.props.ui.dom.timeline} className="timeline">
+            {this.renderSVG()}
+          </div>
         </div>
       </div>
     );

src/components/TimelineHandles.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+class TimelineHandles extends React.Component {
+
+  render() {
+    const dims = this.props.dims;
+    return (
+      <g className="time-controls-inline">
+        <g transform={`translate(${dims.margin_left + 20}, 62)`} onClick={() => this.props.onMoveTime('backwards')}>
+          <circle r="15">
+          </circle>
+          <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(270)"></path>
+        </g>
+        <g transform={`translate(${dims.width - 20}, 62)`}  onClick={() => this.props.onMoveTime('forward')}>
+          <circle r="15">
+          </circle>
+          <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(90)"></path>
+        </g>
+      </g>
+    )
+  }
+
+}
+
+export default TimelineHandles;