Made slider layout work in Firefox

src/app/main.coffee

@@ -10,7 +10,6 @@ window.nesstartimebars.main = (containerId, dataDesc) ->
     "Please wait"
   nesstarloader.reloadNesstarData( (data) ->
     timebars.setupChart containerId, data, dataDesc.display
-    timebars.nextFrame containerId
   , (errorStatus) ->
     timebars.displayPoster containerId,
       "fa fa-exclamation-triangle"

src/app/timebars.coffee

@@ -92,7 +92,6 @@ yAxisLabels = (chartId) ->
     .orient "right"
     .ticks 5
 
-
 prepareMetadataDiv = (chartId, data, mapping) ->
   if data
     fieldMapping = mapping or {
@@ -120,7 +119,6 @@ prepareMetadataDiv = (chartId, data, mapping) ->
     _results.join ""
 
 updateMetadata = (chartId, currentYear, ageGroup) ->
-  # FIXME: Add a delay to reduce flicker
   data = lodash.filter chartState[chartId].yearData[currentYear],
                        { 'birthyear': ageGroup }
   d3.select "#" + chartId + " div.dataDetails"
@@ -142,14 +140,13 @@ unhoverBar = (chartId) ->
 selectBar = (chartId) ->
   (data, index) ->
     chartState[chartId].selectedYear = data.birthyear
-    #FIXME: Shouln't this be updated automatically when the backed data changes?
     d3.selectAll "#" + chartId + " svg.chart g.valuepoint"
       .classed "selected", (d) ->
         d.birthyear is chartState[chartId].selectedYear
 
     updateMetadata chartId, "2015", data.birthyear
 
-addBar = (newBar, chartId) ->
+addBars = (newBar, chartId) ->
   barGroup = newBar.append "g"
     .attr "class", "valuepoint"
     .attr "transform", (d, i) ->
@@ -193,6 +190,113 @@ valuesFromFrame = (chartId, frameNum) ->
   frameIndexes = lodash.keys(chartState[chartId].yearData)
   chartState[chartId].yearData['' + frameIndexes[frameNum] + '']
 
+initChart = (chartId, data, displayDetails) ->
+  container = d3.select "#" + chartId
+
+  container.html ""
+
+  svg = container.insert "svg"
+      .attr "class", "chart"
+      .attr "shape-rendering", "geometricPrecision"
+      .attr "width", chartWidth chartId
+      .attr "height", chartHeight chartId
+
+  svg.append "g"
+    .attr "class", "axisLabels"
+    .attr "transform", (d, i) ->
+      "translate(" +
+      horizMargin(chartId) +
+      ", " +
+      (chartHeight(chartId) - vertMargin(chartId) + 5) +
+      ")"
+    .call xAxisLeft(chartId)
+
+  svg.append "g"
+    .attr "class", "axisLabels"
+    .attr "transform", (d, i) ->
+      "translate(" +
+      (horizMargin(chartId) + (chartWidth(chartId) / 2)) +
+      ", " +
+      (chartHeight(chartId) - vertMargin(chartId) + 5) +
+      ")"
+    .call xAxisRight(chartId)
+
+  svg.append "g"
+    .attr "class", "yAxisGrid"
+    .attr "transform", (d, i) ->
+      "translate(0, " +
+      ((barThickness(chartId) / 2) + 1) +
+      ")"
+    .call yAxisGrid(chartId)
+
+  svg.append "g"
+    .attr "class", "axisLabels"
+    .attr "transform", (d, i) ->
+      "translate(" +
+      ((chartWidth(chartId) - horizMargin(chartId)) / 2) +
+      ", " +
+      ((barThickness(chartId) / 2) + 1) +
+      ")"
+    .call yAxisLabels(chartId)
+      .selectAll("text")
+      .style("text-anchor", "middle")
+
+
+  metadata = container.append "div"
+    .attr "class", "metaData"
+
+  metadata.append "span"
+    .attr "class", "yearLabel"
+
+  metadata.append "div"
+    .attr "class", "dataDetails"
+
+  container.append "div"
+    .attr "class", "inlineLabel left"
+    .html "<i class='" +
+      chartState[chartId].displayDetails.leftsymbol +
+      "'></i> " +
+      chartState[chartId].displayDetails.leftlabel
+
+  container.append "div"
+    .attr "class", "inlineLabel right"
+    .html chartState[chartId].displayDetails.rightlabel +
+      " <i class='" +
+      chartState[chartId].displayDetails.rightsymbol +
+      "'></i>"
+
+  controls = container.append "div"
+    .attr "class", "controls"
+
+  controls.append "button"
+    .attr "id", chartId + "playBtn"
+    .attr "class", "btn btn-primary"
+    .on "click", -> window.nesstartimebars.toggleAnimation chartId
+    .append "i"
+      .attr "class", "fa fa-play"
+
+  controls.append "div"
+    .attr "id", chartId + "Slider"
+    .attr "class", "dragdealer"
+    .append "div"
+      .attr "class", "handle red-bar"
+      .attr "style", "width " + chartWidth - 40
+
+  chartState[chartId].slider = new dragDealer(chartId + "Slider", {
+    steps: lodash.keys(data).length
+    animationCallback: ->
+      frame = @getStep()[0]
+      d3.select "#" + chartId + " .dragdealer .handle"
+        .html lodash.keys(chartState[chartId].yearData)[frame - 1]
+    callback: ->
+      chartState[chartId].currentFrame = @getStep()[0]
+      requestAnimationFrame ->
+        updateChart chartId, chartState[chartId].currentFrame - 1
+  })
+
+  setFrame chartId, 0
+  window.onresize = -> initChart chartId, data, displayDetails
+
 updateChart = (chartId, frameNum) ->
   data = valuesFromFrame chartId, frameNum
   chart = d3.select "#" + chartId + " svg.chart"
@@ -224,15 +328,16 @@ updateChart = (chartId, frameNum) ->
   valuepoints.select "rect.right"
     .transition()
     .attr "width", (d) -> xScaleRight(chartId)(d.rvalue)
-
-  addBar valuepoints.enter(), chartId
-
+  
   valuepoints.exit()
     .transition()
-    .duration speed() / 2
+    .duration 10
     .attr "height", 0
     .remove()
 
+
+  addBars valuepoints.enter(), chartId
+
   updateMetadata chartId,
                  lodash.keys(chartState[chartId].yearData)[frameNum],
                  chartState[chartId].selectedYear
@@ -250,7 +355,7 @@ nextFrame = (chartId) ->
 
 setFrame = (chartId, frame) ->
   dataLength = lodash.keys(chartState[chartId].yearData).length
-  if frame <= dataLength
+  if frame >= 0 and frame <= dataLength
     chartState[chartId].currentFrame = frame
     chartState[chartId].slider.setStep(frame, 0, snap=true)
 
@@ -333,109 +438,8 @@ setupChart = (chartId, data, displayDetails) ->
                   "Problems rendering chart",
                   "Could not understand data")
   else
-    container = d3.select "#" + chartId
-
-    container.html ""
-
-    svg = container.insert "svg"
-        .attr "class", "chart"
-        .attr "shape-rendering", "geometricPrecision"
-        .attr "width", chartWidth chartId
-        .attr "height", chartHeight chartId
-
-    svg.append "g"
-      .attr "class", "axisLabels"
-      .attr "transform", (d, i) ->
-        "translate(" +
-        horizMargin(chartId) +
-        ", " +
-        (chartHeight(chartId) - vertMargin(chartId) + 5) +
-        ")"
-      .call xAxisLeft(chartId)
-
-    svg.append "g"
-      .attr "class", "axisLabels"
-      .attr "transform", (d, i) ->
-        "translate(" +
-        (horizMargin(chartId) + (chartWidth(chartId) / 2)) +
-        ", " +
-        (chartHeight(chartId) - vertMargin(chartId) + 5) +
-        ")"
-      .call xAxisRight(chartId)
-
-    svg.append "g"
-      .attr "class", "yAxisGrid"
-      .attr "transform", (d, i) ->
-        "translate(0, " +
-        ((barThickness(chartId) / 2) + 1) +
-        ")"
-      .call yAxisGrid(chartId)
-
-    svg.append "g"
-      .attr "class", "axisLabels"
-      .attr "transform", (d, i) ->
-        "translate(" +
-        ((chartWidth(chartId) - horizMargin(chartId)) / 2) +
-        ", " +
-        ((barThickness(chartId) / 2) + 1) +
-        ")"
-      .call yAxisLabels(chartId)
-        .selectAll("text")
-        .style("text-anchor", "middle")
-
-
-    metadata = container.append "div"
-      .attr "class", "metaData"
-
-    metadata.append "span"
-      .attr "class", "yearLabel"
-
-    metadata.append "div"
-      .attr "class", "dataDetails"
-
-    container.append "div"
-      .attr "class", "inlineLabel left"
-      .html "<i class='" +
-        chartState[chartId].displayDetails.leftsymbol +
-        "'></i> " +
-        chartState[chartId].displayDetails.leftlabel
-
-    container.append "div"
-      .attr "class", "inlineLabel right"
-      .html chartState[chartId].displayDetails.rightlabel +
-        " <i class='" +
-        chartState[chartId].displayDetails.rightsymbol +
-        "'></i>"
-
-    controls = container.append "div"
-      .attr "class", "controls"
-
-    controls.append "button"
-      .attr "id", chartId + "playBtn"
-      .attr "class", "btn btn-primary"
-      .on "click", -> window.nesstartimebars.toggleAnimation chartId
-      .append "i"
-        .attr "class", "fa fa-play"
-
-    controls.append "div"
-      .attr "id", chartId + "Slider"
-      .attr "class", "dragdealer"
-      .append "div"
-        .attr "class", "handle red-bar"
-
-    chartState[chartId].slider = new dragDealer(chartId + "Slider", {
-      steps: lodash.keys(data).length
-      animationCallback: ->
-        frame = @getStep()[0]
-        d3.select "#" + chartId + " .dragdealer .handle"
-          .html lodash.keys(chartState[chartId].yearData)[frame - 1]
-      callback: ->
-        chartState[chartId].currentFrame = @getStep()[0]
-        updateChart(chartId, chartState[chartId].currentFrame - 1)
-    })
-
+    initChart chartId, data, displayDetails
     setFrame chartId, 0
-    window.onresize = -> setupChart chartId, data, displayDetails
 
 exports.displayPoster = displayPoster
 exports.setupChart = setupChart

src/style/timebars.scss

@@ -15,24 +15,23 @@
   position: relative;
 
   .controls {
-    display: table;
-    border-spacing: 5px;
     height: 45px;
 
     button {
-      display: table-cell;
+      float: left;
     }
 
     .dragdealer {
       @include rounded();
-      width: 100%;
+      margin-left: 40px;
+      height: 35px;
       font-size: 14px;
-      display: table-cell;
       background: #e1e1e1;
       position: relative;
       .handle {
         @include rounded();
-        height: 100%;
+        height: 35px;
+        line-height: 35px;
         width: 75px;
         background: #c00;
         color: white;
@@ -42,7 +41,6 @@
         text-align:center;
         border:1px solid silver;
         vertical-align:middle; //now we can center vertically like in a TD
-        line-height: 35px;
       }
     }
   }