From cf8c299d11ba7f6baf9b67c23ae788426e6dd472 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Thu, 30 Apr 2015 10:38:48 +0200
Subject: [PATCH] Removed the option `padding` for Timeline, is now redundant
 (can be done purely with css now)

---
 docs/timeline.html                       | 13 ------------
 lib/timeline/component/ItemSet.js        |  8 ++------
 lib/timeline/component/item/RangeItem.js |  7 +++----
 test/timeline.html                       | 25 ++++++++++++++++++++----
 4 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/docs/timeline.html b/docs/timeline.html
index 9c4a3089..6b92cac1 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -706,19 +706,6 @@ var options = {
     <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>
-    <td>padding</td>
-    <td>Number</td>
-    <td>5</td>
-    <td>The padding of items, needed to correctly calculate the size
-        of item ranges. Must correspond with the css of items, for example when setting <code>options.padding=10</code>, corresponding css is:
-  <pre class="prettyprint lang-css">
-.vis.timeline .item {
-  padding: 10px;
-}</pre>
-    </td>
-</tr>
-
 <tr>
     <td>selectable</td>
     <td>Boolean</td>
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 9be1e4ab..3c6de0f4 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -66,8 +66,7 @@ function ItemSet(body, options) {
         vertical: 10
       },
       axis: 20
-    },
-    padding: 5
+    }
   };
 
   // options is shared by this ItemSet and all its items
@@ -243,9 +242,6 @@ ItemSet.prototype._create = function(){
  *                              and vertical direction. Default is 10.
  *                           {Number} margin
  *                              Set margin for both axis and items in pixels.
- *                           {Number} padding
- *                              Padding of the contents of an item in pixels.
- *                              Must correspond with the items css. Default is 5.
  *                           {Boolean} selectable
  *                              If true (default), items can be selected.
  *                           {Boolean} editable
@@ -276,7 +272,7 @@ ItemSet.prototype._create = function(){
 ItemSet.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    var fields = ['type', 'align', 'order', 'padding', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
+    var fields = ['type', 'align', 'order', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
     util.selectiveExtend(fields, this.options, options);
 
     if ('orientation' in options) {
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 53bec65c..fcc65e8b 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -188,8 +188,7 @@ RangeItem.prototype.repositionX = function(limitSize) {
   else {
     this.left = start;
     this.width = boxWidth;
-    contentWidth = Math.min(end - start - 2 * this.options.padding, this.props.content.width);
-    // TODO: remove the need for options.padding. it's terrible.
+    contentWidth = Math.min(end - start, this.props.content.width);
   }
 
   this.dom.box.style.left = this.left + 'px';
@@ -201,11 +200,11 @@ RangeItem.prototype.repositionX = function(limitSize) {
       break;
 
     case 'right':
-      this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding), 0) + 'px';
+      this.dom.content.style.left = Math.max((boxWidth - contentWidth), 0) + 'px';
       break;
 
     case 'center':
-      this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding) / 2, 0) + 'px';
+      this.dom.content.style.left = Math.max((boxWidth - contentWidth) / 2, 0) + 'px';
       break;
 
     default: // 'auto'
diff --git a/test/timeline.html b/test/timeline.html
index 3e4dd1ca..e6fb7e13 100644
--- a/test/timeline.html
+++ b/test/timeline.html
@@ -44,14 +44,23 @@
   <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
 <body>
 
-<div>
+<p>
   <label for="orientation">Orientation</label>
   <select id="orientation">
     <option value="both" selected>both</option>
     <option value="bottom">bottom</option>
     <option value="top">top</option>
   </select>
-</div>
+</p>
+<p>
+  <label for="align">Content alignment</label>
+  <select id="align">
+    <option value="auto" selected>auto</option>
+    <option value="center">center</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+  </select>
+</p>
 <script>
   var o = document.getElementById('orientation');
   o.onchange = function () {
@@ -59,11 +68,19 @@
       orientation: o.value
     });
   };
+
+  var a = document.getElementById('align');
+  a.onchange = function () {
+    timeline.setOptions({
+      align: a.value
+    });
+  };
+
 </script>
 
-<div>
+<p>
   <label for="currenttime"><input id="currenttime" type="checkbox" checked="true"> Show current time</label>
-</div>
+</p>
 <script>
   var currenttime = document.getElementById('currenttime');
   currenttime.onchange = function () {