Fixed #243, Fixed #270: Implemented support for option `align` for range items.

HISTORY.md

@@ -6,9 +6,6 @@ http://visjs.org
 
 ### Timeline
 
-- Fixed the `change` event sometimes being fired twice on IE10.
-- Fixed canceling moving an item to another group did not move the item
-  back to the original group.
 - Added localization support.
 - Implemented option `clickToUse`.
 - Implemented function `focus(id)` to center a specific item (or multiple items)
@@ -20,6 +17,10 @@ http://visjs.org
   and `setWindow`.
 - Implemented functions `setCurrentTime(date)` and `getCurrentTime()`.
 - Implemented a new callback function `onMoving(item, callback)`.
+- Implemented support for option `align` for range items.
+- Fixed the `change` event sometimes being fired twice on IE10.
+- Fixed canceling moving an item to another group did not move the item
+  back to the original group.
 - Fixed the `change` event sometimes being fired twice on IE10.
 - Fixed canceling moving an item to another group did not move the item
   back to the original group.

docs/timeline.html

@@ -360,8 +360,7 @@ var options = {
     <td>align</td>
     <td>String</td>
     <td>"center"</td>
-    <td>Alignment of items with type 'box'. Available values are
-        'center' (default), 'left', or 'right').</td>
+    <td>Alignment of items with type 'box' and 'range'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td>
 </tr>
 
 <tr>

lib/timeline/component/ItemSet.js

@@ -26,7 +26,7 @@ function ItemSet(body, options) {
   this.defaultOptions = {
     type: null,  // 'box', 'point', 'range'
     orientation: 'bottom',  // 'top' or 'bottom'
-    align: 'center', // alignment of box items
+    align: 'auto', // alignment of box items
     stack: true,
     groupOrder: null,
 

lib/timeline/component/item/ItemBox.js

@@ -179,12 +179,12 @@ ItemBox.prototype.hide = function() {
  * @Override
  */
 ItemBox.prototype.repositionX = function() {
-  var start = this.conversion.toScreen(this.data.start),
-      align = this.options.align,
-      left,
-      box = this.dom.box,
-      line = this.dom.line,
-      dot = this.dom.dot;
+  var start = this.conversion.toScreen(this.data.start);
+  var align = this.options.align;
+  var left;
+  var box = this.dom.box;
+  var line = this.dom.line;
+  var dot = this.dom.dot;
 
   // calculate left position of the box
   if (align == 'right') {
@@ -213,10 +213,10 @@ ItemBox.prototype.repositionX = function() {
  * @Override
  */
 ItemBox.prototype.repositionY = function() {
-  var orientation = this.options.orientation,
-      box = this.dom.box,
-      line = this.dom.line,
-      dot = this.dom.dot;
+  var orientation = this.options.orientation;
+  var box = this.dom.box;
+  var line = this.dom.line;
+  var dot = this.dom.dot;
 
   if (orientation == 'top') {
     box.style.top     = (this.top || 0) + 'px';

lib/timeline/component/item/ItemRange.js

@@ -165,12 +165,11 @@ ItemRange.prototype.hide = function() {
  * @Override
  */
 ItemRange.prototype.repositionX = function() {
-  var props = this.props,
-      parentWidth = this.parent.width,
-      start = this.conversion.toScreen(this.data.start),
-      end = this.conversion.toScreen(this.data.end),
-      padding = this.options.padding,
-      contentLeft;
+  var parentWidth = this.parent.width;
+  var start = this.conversion.toScreen(this.data.start);
+  var end = this.conversion.toScreen(this.data.end);
+  var contentLeft;
+  var contentWidth;
 
   // limit the width of the this, as browsers cannot draw very wide divs
   if (start < -parentWidth) {
@@ -182,33 +181,54 @@ ItemRange.prototype.repositionX = function() {
   var boxWidth = Math.max(end - start, 1);
 
   if (this.overflow) {
-    // when range exceeds left of the window, position the contents at the left of the visible area
-    contentLeft = Math.max(-start, 0);
-
     this.left = start;
     this.width = boxWidth + this.props.content.width;
+    contentWidth = this.props.content.width;
+
     // Note: The calculation of width is an optimistic calculation, giving
     //       a width which will not change when moving the Timeline
-    //       So no restacking needed, which is nicer for the eye;
+    //       So no re-stacking needed, which is nicer for the eye;
   }
-  else { // no overflow
-    // when range exceeds left of the window, position the contents at the left of the visible area
-    if (start < 0) {
-      contentLeft = Math.min(-start,
-          (end - start - props.content.width - 2 * padding));
-      // TODO: remove the need for options.padding. it's terrible.
-    }
-    else {
-      contentLeft = 0;
-    }
-
+  else {
     this.left = start;
     this.width = boxWidth;
+    contentWidth = Math.min(end - start, this.props.content.width);
   }
 
   this.dom.box.style.left = this.left + 'px';
   this.dom.box.style.width = boxWidth + 'px';
-  this.dom.content.style.left = contentLeft + 'px';
+
+  switch (this.options.align) {
+    case 'left':
+      this.dom.content.style.left = '0';
+      break;
+
+    case 'right':
+      this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding), 0) + 'px';
+      break;
+
+    case 'center':
+      this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding) / 2, 0) + 'px';
+      break;
+
+    default: // 'auto'
+      if (this.overflow) {
+        // when range exceeds left of the window, position the contents at the left of the visible area
+        contentLeft = Math.max(-start, 0);
+      }
+      else {
+        // when range exceeds left of the window, position the contents at the left of the visible area
+        if (start < 0) {
+          contentLeft = Math.min(-start,
+              (end - start - this.props.content.width - 2 * this.options.padding));
+          // TODO: remove the need for options.padding. it's terrible.
+        }
+        else {
+          contentLeft = 0;
+        }
+      }
+      this.dom.content.style.left = contentLeft + 'px';
+  }
 };
 
 /**