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.

Author: grahamj

docs/timeline/index.html

@@ -261,6 +261,13 @@ <h3 id="items">Items</h3>
         <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>

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';