From e54bb16241313361f8f1a22f2a5548304b2f5233 Mon Sep 17 00:00:00 2001
From: Graham J <grahamj@users.noreply.github.com>
Date: Wed, 31 May 2017 11:14:51 -0400
Subject: [PATCH] Timeline: Allow overriding `align` per item (#3107)

Currently `align` is only available as a global timeline configuration
option. This change allows overriding alignment on a per-item basis.
---
 docs/timeline/index.html                 | 7 +++++++
 lib/timeline/component/item/RangeItem.js | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index d847af0a..2bd2a8c4 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -261,6 +261,13 @@ var items = new vis.DataSet([
         <a href="#Styles">Styles</a>.
       </td>
     </tr>
+    <tr>
+      <td>align</td>
+      <td>String</td>
+      <td>no</td>
+      <td>This field is optional. If set this overrides the global <code>align</code> configuration option for this item.
+      </td>
+    </tr>
     <tr>
       <td>content</td>
       <td>String</td>
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 0af637cc..27dedd54 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -171,6 +171,7 @@ RangeItem.prototype.repositionX = function(limitSize) {
   var parentWidth = this.parent.width;
   var start = this.conversion.toScreen(this.data.start);
   var end = this.conversion.toScreen(this.data.end);
+  var align = this.data.align === undefined ? this.options.align : this.data.align;
   var contentStartPosition;
   var contentWidth;
 
@@ -217,7 +218,7 @@ RangeItem.prototype.repositionX = function(limitSize) {
   }
   this.dom.box.style.width = boxWidth + 'px';
 
-  switch (this.options.align) {
+  switch (align) {
     case 'left':
       if (this.options.rtl) {
         this.dom.content.style.right = '0';