Removed the option `padding` for Timeline, is now redundant (can be done purely with css now)

9 years ago · cf8c299d11
--- 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>
--- 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) {
--- 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'
--- 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 () {