Merge remote-tracking branch 'origin/v4' into v4

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>

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) {

lib/timeline/component/css/item.css

@@ -87,15 +87,15 @@
 .vis-item .vis-item-content {
   white-space: nowrap;
   box-sizing: border-box;
-  margin: 5px;
+  padding: 5px;
 }
 
 .vis-item .vis-delete {
-  background: url('img/timeline/delete.png') no-repeat top center;
+  background: url('img/timeline/delete.png') no-repeat center;
   position: absolute;
   width: 24px;
   height: 24px;
-  top: 0;
+  top: -4px;
   right: -24px;
   cursor: pointer;
 }

lib/timeline/component/item/RangeItem.js

@@ -188,7 +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);
+    contentWidth = Math.min(end - start, this.props.content.width);
   }
 
   this.dom.box.style.left = this.left + 'px';
@@ -200,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'
@@ -219,9 +219,7 @@ RangeItem.prototype.repositionX = function(limitSize) {
       }
       else {
         if (start < 0) {
-          contentLeft = Math.min(-start,
-              (end - start - contentWidth - 2 * this.options.padding));
-          // TODO: remove the need for options.padding. it's terrible.
+          contentLeft = -start;
         }
         else {
           contentLeft = 0;

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 () {