Make timeline zoom controls reactified

src/components/Timeline.jsx

@@ -7,6 +7,7 @@ import copy from '../js/data/copy.json';
 import { formatterWithYear, isNotNullNorUndefined } from '../js/utilities';
 import TimelineHeader from './presentational/TimelineHeader';
 import TimelineHandles from './TimelineHandles.jsx';
+import TimelineZoomControls from './TimelineZoomControls.jsx';
 import TimelineLogic from '../js/timeline/timeline.js';
 
 
@@ -43,7 +44,7 @@ class Timeline extends React.Component {
 
     if (document.querySelector(`#${this.props.ui.dom.timeline}`) !== null) {
       const boundingClient = document.querySelector(`#${this.props.ui.dom.timeline}`).getBoundingClientRect();
-      WIDTH = boundingClient.width - WIDTH_CONTROLS;
+      WIDTH = boundingClient.width;
     }
     return {
       height: HEIGHT,
@@ -61,19 +62,27 @@ class Timeline extends React.Component {
     return '';
   }
 
+  onApplyZoom(zoom) {
+    if (this.timeline) {
+      return this.timeline.applyZoom(zoom);
+    }
+    return '';
+  }  
+
   renderSVG() {
-    const { width, height, margin_left } = this.getClientDims();
+    const dims = this.getClientDims();
   
     return (
       <svg
         ref={this.svgRef}
-        width={width}
-        height={height}
+        width={dims.width}
+        height={dims.height}
       >
         <clipPath id="clip">
-          <rect x="120" y="0" width={width - margin_left} height={height - 25}></rect>
+          <rect x="120" y="0" width={dims.width - dims.margin_left - dims.width_controls} height={dims.height - 25}></rect>
         </clipPath>
-        <TimelineHandles dims={this.getClientDims()} onMoveTime={(dir) => { this.onMoveTime(dir) }} />
+        <TimelineHandles dims={dims} onMoveTime={(dir) => { this.onMoveTime(dir) }} />
+        <TimelineZoomControls zoomLevels={this.props.app.zoomLevels} dims={dims} onApplyZoom={(zoom) => { this.onApplyZoom(zoom); }} />
       </svg>
     ); 
   }

src/components/TimelineHandles.jsx

@@ -11,7 +11,7 @@ class TimelineHandles extends React.Component {
           </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')}>
+        <g transform={`translate(${dims.width - dims.width_controls - 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>

src/components/TimelineZoomControls.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+class TimelineZoomControls extends React.Component {
+
+  renderZoom(zoom, idx) {
+    return (
+      <text
+        className={`zoom-level-button ${zoom.active ? 'active' : ''}`}
+        x="60"
+        y={(idx * 15) + 20}
+        onClick={() => this.props.onApplyZoom(zoom)}
+      >
+        {zoom.label}
+      </text>
+    )
+  }
+
+  render() {
+    const dims = this.props.dims;
+
+    return (
+      <g transform={`translate(${dims.width - dims.width_controls}, 0)`}>
+        {this.props.zoomLevels.map((z, idx) => this.renderZoom(z, idx))}
+      </g>
+    );
+  }
+}
+
+export default TimelineZoomControls;

src/js/timeline/timeline.js

@@ -132,12 +132,12 @@ console.log(svg)
 //  dom.backwards.append('circle');
 //  dom.backwards.append('path');
 
-  dom.zooms = dom.controls.append('g');
-
-  dom.zooms.selectAll('.zoom-level-button')
-    .data(app.zoomLevels)
-    .enter().append('text')
-    .attr('class', 'zoom-level-button');
+//  dom.zooms = dom.controls.append('g');
+//
+//  dom.zooms.selectAll('.zoom-level-button')
+//    .data(app.zoomLevels)
+//    .enter().append('text')
+//    .attr('class', 'zoom-level-button');
 
 
   /*
@@ -251,18 +251,18 @@ console.log(svg)
   /*
   * TODO: Highlight zoom level based on time range selected
   */
-  function highlightZoomLevel(zoom) {
-    app.zoomLevels.forEach((level) => {
-      if (level.label === zoom.label) {
-        level.active = true;
-      } else {
-        level.active = false;
-      }
-    });
-
-    dom.zooms.selectAll('text')
-      .classed('active', level => level.active);
-  }
+//  function highlightZoomLevel(zoom) {
+//    app.zoomLevels.forEach((level) => {
+//      if (level.label === zoom.label) {
+//        level.active = true;
+//      } else {
+//        level.active = false;
+//      }
+//    });
+//
+//    dom.zooms.selectAll('text')
+//      .classed('active', level => level.active);
+//  }
 
 
   /**
@@ -270,7 +270,7 @@ console.log(svg)
    * @param {object} zoom: zoom level from zoomLevels
    */
   function applyZoom(zoom) {
-    highlightZoomLevel(zoom);
+//    highlightZoomLevel(zoom);
 
     const extent = getTimeScaleExtent();
     const newCentralTime = d3.timeMinute.offset(scale.x.domain()[0], extent / 2);
@@ -507,14 +507,14 @@ console.log(svg)
 //      .attr('d', d3.symbol().type(d3.symbolTriangle).size(80))
 //      .attr('transform', `translate(${scale.x.range()[1] - 20}, 62)rotate(90)`);
 
-    dom.zooms.selectAll('text')
-      .text(d => d.label)
-      .attr('x', 60)
-      .attr('y', (d, i) => (i * 15) + 20)
-      .classed('active', level => level.active);
-
-    dom.zooms.selectAll('text')
-      .on('click', zoom => applyZoom(zoom));
+//    dom.zooms.selectAll('text')
+//      .text(d => d.label)
+//      .attr('x', 60)
+//      .attr('y', (d, i) => (i * 15) + 20)
+//      .classed('active', level => level.active);
+//
+//    dom.zooms.selectAll('text')
+//      .on('click', zoom => applyZoom(zoom));
   }
 
 
@@ -583,6 +583,7 @@ console.log(svg)
   }
 
   return {
+    applyZoom,
     moveTime,
     update,
   };