Added axis orientation option `'none'`

HISTORY.md

@@ -10,6 +10,7 @@ http://visjs.org
 
 ### Timeline
 
+- Added axis orientation option `'none'`.
 - Improved function `fit()` to take into account the actual width of items.
 - Fixed #897: Timeline option `{snap: null}` did give a validation error.
 

docs/timeline/index.html

@@ -758,7 +758,7 @@ function (option, path) {
       <td><span parent="orientation" class="right-caret"></span> orientation</td>
       <td>String or Object</td>
       <td><code>'bottom'</code></td>
-      <td>Orientation of the timelines axis and items. When orientation is a string, the value is applied to both items and axis. Can be 'top', 'bottom' (default), or 'both'.</td>
+      <td>Orientation of the timelines axis and items. When orientation is a string, the value is applied to both items and axis. Can be 'top', 'bottom' (default), 'both', or 'none'.</td>
     </tr>
     <tr parent="orientation" class="hidden">
       <td class="indent">orientation.axis</td>

examples/timeline/styling/axisOrientation.html

@@ -25,6 +25,7 @@
   <select id="axis-orientation">
     <option value="both">both</option>
     <option value="bottom" selected>bottom</option>
+    <option value="none">none</option>
     <option value="top">top</option>
   </select>
 </p>

lib/timeline/component/TimeAxis.js

@@ -129,21 +129,20 @@ TimeAxis.prototype.destroy = function() {
  * @return {boolean} Returns true if the component is resized
  */
 TimeAxis.prototype.redraw = function () {
-  var options = this.options;
   var props = this.props;
   var foreground = this.dom.foreground;
   var background = this.dom.background;
 
   // determine the correct parent DOM element (depending on option orientation)
-  var parent = (options.orientation.axis == 'top') ? this.body.dom.top : this.body.dom.bottom;
+  var parent = (this.options.orientation.axis == 'top') ? this.body.dom.top : this.body.dom.bottom;
   var parentChanged = (foreground.parentNode !== parent);
 
   // calculate character width and height
   this._calculateCharSize();
 
   // TODO: recalculate sizes only needed when parent is resized or options is changed
-  var showMinorLabels = this.options.showMinorLabels;
-  var showMajorLabels = this.options.showMajorLabels;
+  var showMinorLabels = this.options.showMinorLabels && this.options.orientation.axis !== 'none';
+  var showMajorLabels = this.options.showMajorLabels && this.options.orientation.axis !== 'none';
 
   // determine the width and height of the elemens for the axis
   props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
@@ -152,7 +151,7 @@ TimeAxis.prototype.redraw = function () {
   props.width = foreground.offsetWidth;
 
   props.minorLineHeight = this.body.domProps.root.height - props.majorLabelHeight -
-      (options.orientation.axis == 'top' ? this.body.domProps.bottom.height : this.body.domProps.top.height);
+      (this.options.orientation.axis == 'top' ? this.body.domProps.bottom.height : this.body.domProps.top.height);
   props.minorLineWidth = 1; // TODO: really calculate width
   props.majorLineHeight = props.minorLineHeight + props.majorLabelHeight;
   props.majorLineWidth = 1; // TODO: really calculate width

test/timeline.html

@@ -49,6 +49,7 @@
   <select id="orientation">
     <option value="both" selected>both</option>
     <option value="bottom">bottom</option>
+    <option value="none">none</option>
     <option value="top">top</option>
   </select>
 </p>