Fixed #691: Orientation can now be configured separately for axis and items.

HISTORY.md

@@ -8,6 +8,10 @@ http://visjs.org
 
 - Fixed support for DataSet with custom id fields (option `fieldId`).
 
+### Timeline
+
+- Orientation can now be configured separately for axis and items.
+
 
 ## 2015-03-05, version 3.11.0
 

docs/timeline.html

@@ -554,6 +554,13 @@ var options = {
     <td>A map with i18n locales. See section <a href="#Localization">Localization</a> for more information.</td>
 </tr>
 
+<tr>
+    <td>margin</td>
+    <td>Number | Object</td>
+    <td>Object</td>
+    <td>When a number, applies the margin to <code>margin.axis</code>, <code>margin.item.horizontal</code>, and <code>margin.item.vertical</code>.</td>
+</tr>
+
 <tr>
     <td>margin.axis</td>
     <td>Number</td>
@@ -680,9 +687,23 @@ var options = {
 
 <tr>
     <td>orientation</td>
+    <td>String | Object</td>
+    <td>'bottom'</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>
+</tr>
+
+<tr>
+    <td>orientation.axis</td>
+    <td>String</td>
+    <td>'bottom'</td>
+    <td>Orientation of the timeline axis: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
+</tr>
+
+<tr>
+    <td>orientation.item</td>
     <td>String</td>
     <td>'bottom'</td>
-    <td>Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
+    <td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</td>
 </tr>
 
 <tr>

lib/timeline/Core.js

@@ -190,9 +190,18 @@ Core.prototype._create = function (container) {
 Core.prototype.setOptions = function (options) {
   if (options) {
     // copy the known options
-    var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes', 'hiddenDates'];
+    var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates'];
     util.selectiveExtend(fields, this.options, options);
 
+    if ('orientation' in options) {
+      if (typeof options.orientation === 'string') {
+        this.options.orientation = options.orientation;
+      }
+      else if (typeof options.orientation === 'object' && 'axis' in options.orientation) {
+        this.options.orientation = options.orientation.axis;
+      }
+    }
+
     if (this.options.orientation === 'both') {
       if (!this.timeAxis2) {
         var timeAxis2 = this.timeAxis2 = new TimeAxis(this.body);

lib/timeline/Timeline.js

@@ -38,7 +38,7 @@ function Timeline (container, items, groups, options) {
 
     autoResize: true,
 
-    orientation: 'bottom', // 'bottom', 'top', or 'both'
+    orientation: 'bottom',  // axis orientation: 'bottom', 'top', or 'both'
     width: null,
     height: null,
     maxHeight: null,

lib/timeline/component/ItemSet.js

@@ -29,7 +29,7 @@ function ItemSet(body, options) {
 
   this.defaultOptions = {
     type: null,  // 'box', 'point', 'range', 'background'
-    orientation: 'bottom',  // 'top' or 'bottom'
+    orientation: 'bottom',  // item orientation: 'top' or 'bottom'
     align: 'auto', // alignment of box items
     stack: true,
     groupOrder: null,
@@ -274,9 +274,18 @@ ItemSet.prototype._create = function(){
 ItemSet.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    var fields = ['type', 'align', 'orientation', 'order', 'padding', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
+    var fields = ['type', 'align', 'order', 'padding', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
     util.selectiveExtend(fields, this.options, options);
 
+    if ('orientation' in options) {
+      if (typeof options.orientation === 'string') {
+        this.options.orientation = options.orientation;
+      }
+      else if (typeof options.orientation === 'object' && 'item' in options.orientation) {
+        this.options.orientation = options.orientation.item;
+      }
+    }
+
     if ('margin' in options) {
       if (typeof options.margin === 'number') {
         this.options.margin.axis = options.margin;

lib/timeline/component/TimeAxis.js

@@ -34,8 +34,7 @@ function TimeAxis (body, options) {
   };
 
   this.defaultOptions = {
-    orientation: 'bottom',  // supported: 'top', 'bottom'
-    // TODO: implement timeaxis orientations 'left' and 'right'
+    orientation: 'bottom',  // axis orientation: 'top' or 'bottom'
     showMinorLabels: true,
     showMajorLabels: true,
     format: null,
@@ -65,7 +64,6 @@ TimeAxis.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
     util.selectiveExtend([
-      'orientation',
       'showMinorLabels',
       'showMajorLabels',
       'hiddenDates',
@@ -73,6 +71,15 @@ TimeAxis.prototype.setOptions = function(options) {
       'timeAxis'
     ], this.options, options);
 
+    if ('orientation' in options) {
+      if (typeof options.orientation === 'string') {
+        this.options.orientation = options.orientation;
+      }
+      else if (typeof options.orientation === 'object' && 'axis' in options.orientation) {
+        this.options.orientation = options.orientation.axis;
+      }
+    }
+
     // apply locale to moment.js
     // TODO: not so nice, this is applied globally to moment.js
     if ('locale' in options) {
@@ -131,9 +138,8 @@ TimeAxis.prototype.redraw = function () {
   this._calculateCharSize();
 
   // TODO: recalculate sizes only needed when parent is resized or options is changed
-  var orientation = this.options.orientation,
-      showMinorLabels = this.options.showMinorLabels,
-      showMajorLabels = this.options.showMajorLabels;
+  var showMinorLabels = this.options.showMinorLabels;
+  var showMajorLabels = this.options.showMajorLabels;
 
   // determine the width and height of the elemens for the axis
   props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;

test/timeline_groups.html

@@ -23,8 +23,9 @@
 <div>
   <label for="orientation">Orientation</label>
   <select id="orientation">
-    <option value="top">top</option>
+    <option value="both">both</option>
     <option value="bottom" selected>bottom</option>
+    <option value="top">top</option>
   </select>
 </div>
 <script>
@@ -81,6 +82,10 @@
       updateGroup: true
     },
 
+//    orientation: {
+//      item: 'top',
+//      axis: 'both'
+//    },
 
     onAdd: function (item, callback) {
       item.content = prompt('Enter text content for new item:', item.content);