Allow disabling of RangeItem limitSize (#3050)

Some browsers cannot handle very large DIVs so by default range DIVs
can be truncated outside the visible area. This change allows the use
of a new `limitSize` item option which disables this functionality,
allowing the creation of full-width DIVs.

I don’t see an existing test spec that covers RageItem.js so I’m
submitting without tests. However we’ve using Timeline in production on
a fairly large project with these changes in place for several months
and it works fine.

docs/timeline/index.html

@@ -342,6 +342,14 @@ var items = new vis.DataSet([
         Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
       </td>
     </tr>
+    <tr>
+      <td>limitSize</td>
+      <td>Boolean</td>
+      <td>no</td>
+      <td>Some browsers cannot handle very large DIVs so by default range DIVs can be truncated outside the visible area.
+        Setting this to <code>false</code> will cause the creation of full-size DIVs.
+      </td>
+    </tr>
     <tr class='toggle collapsible' onclick="toggleTable('itemOptionTable', 'itemEditable', this);">
       <td><span parent="itemEditable" class="right-caret"></span> editable</td>
       <td>Boolean or Object</td>

lib/timeline/component/item/RangeItem.js

@@ -231,7 +231,8 @@ RangeItem.prototype.repositionX = function(limitSize) {
   var contentWidth;
 
   // limit the width of the range, as browsers cannot draw very wide divs
-  if (limitSize === undefined || limitSize === true) {
+  // unless limitSize: false is explicitly set in item data
+  if (this.data.limitSize !== false && (limitSize === undefined || limitSize === true)) {
     if (start < -parentWidth) {
       start = -parentWidth;
     }

lib/timeline/optionsTimeline.js

@@ -94,6 +94,7 @@ let allOptions = {
     range: { 'boolean': bool, 'undefined': 'undefined'},
     __type__: { 'boolean': bool, object}
   },
+  limitSize: {'boolean': bool},
   locale:{string},
   locales:{
     __any__: {any},