Fixed ordering of grid lines, fixed odd/even on hour scale

lib/timeline/TimeStep.js

@@ -530,8 +530,6 @@ TimeStep.prototype.getClassName = function() {
   var date = moment(this.current).locale('en');
   var step = this.step;
 
-  // TODO: if step is not 1, change the className to something like '0-4h'
-
   function even(value) {
     return (value / step % 2 == 0) ? ' even' : ' odd';
   }
@@ -563,20 +561,20 @@ TimeStep.prototype.getClassName = function() {
 
   switch (this.scale) {
     case 'millisecond':
-      return even(date.milliseconds());
+      return even(date.milliseconds()).trim();
 
     case 'second':
-      return even(date.seconds());
+      return even(date.seconds()).trim();
 
     case 'minute':
-      return even(date.minutes());
+      return even(date.minutes()).trim();
 
     case 'hour':
-      var hour = date.hours();
+      var hours = date.hours();
       if (this.step == 4) {
-        hour = hour + '-' + (hour + 4);
+        hours = hours + '-' + (hours + 4);
       }
-      return hour + 'h' + today(date) + even(hour);
+      return hours + 'h' + today(date) + even(date.hours());
 
     case 'weekday':
       return date.format('dddd').toLowerCase() +

lib/timeline/component/TimeAxis.js

@@ -15,14 +15,12 @@ var moment = require('../../module/moment');
 function TimeAxis (body, options) {
   this.dom = {
     foreground: null,
-    majorLines: [],
+    lines: [],
     majorTexts: [],
-    minorLines: [],
     minorTexts: [],
     redundant: {
-      majorLines: [],
+      lines: [],
       majorTexts: [],
-      minorLines: [],
       minorTexts: []
     }
   };
@@ -194,13 +192,11 @@ TimeAxis.prototype._repaintLabels = function () {
   // can be picked for re-use, and clear the lists with lines and texts.
   // At the end of the function _repaintLabels, left over elements will be cleaned up
   var dom = this.dom;
-  dom.redundant.majorLines = dom.majorLines;
+  dom.redundant.lines = dom.lines;
   dom.redundant.majorTexts = dom.majorTexts;
-  dom.redundant.minorLines = dom.minorLines;
   dom.redundant.minorTexts = dom.minorTexts;
-  dom.majorLines = [];
+  dom.lines = [];
   dom.majorTexts = [];
-  dom.minorLines = [];
   dom.minorTexts = [];
 
   var cur;
@@ -228,14 +224,10 @@ TimeAxis.prototype._repaintLabels = function () {
       prevLine.style.width = width + 'px';
     }
 
-    // FIXME: the width is not always correct, for example on the month scale.
-
     if (this.options.showMinorLabels) {
       this._repaintMinorText(x, step.getLabelMinor(), orientation);
     }
 
-    // FIXME: the divs must be ordered so that you can use css odd/even classes
-
     if (isMajor && this.options.showMajorLabels) {
       if (x > 0) {
         if (xFirstMajorLabel == undefined) {
@@ -342,14 +334,13 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
  */
 TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
   // reuse redundant line
-  var line = this.dom.redundant.minorLines.shift();
-
+  var line = this.dom.redundant.lines.shift();
   if (!line) {
     // create vertical line
     line = document.createElement('div');
     this.dom.background.appendChild(line);
   }
-  this.dom.minorLines.push(line);
+  this.dom.lines.push(line);
 
   var props = this.props;
   if (orientation == 'top') {
@@ -376,14 +367,13 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
  */
 TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
   // reuse redundant line
-  var line = this.dom.redundant.majorLines.shift();
-
+  var line = this.dom.redundant.lines.shift();
   if (!line) {
     // create vertical line
-    line = document.createElement('DIV');
+    line = document.createElement('div');
     this.dom.background.appendChild(line);
   }
-  this.dom.majorLines.push(line);
+  this.dom.lines.push(line);
 
   var props = this.props;
   if (orientation == 'top') {