updates for v4.20.0 (#3083)

docs/css/style.css

@@ -106,6 +106,8 @@ table.events td:nth-child(2) {
 
 pre {
     margin: 20px 0;
+    white-space: pre-wrap;
+    max-width: 100%;
 }
 
 a code {

docs/data/dataset.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -601,7 +602,7 @@ function (event, properties, senderId) {
         field <code>oldData</code> containing the original data of the items in the
         dataset before the items were updated or removed. The <code>update</code>
         event also contains a field <code>data</code> containing the changes:
-        the properties of the items that are being updated.
+        the properties of the items that are being updated. 
       </td>
     </tr>
     <tr>

docs/data/dataview.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -409,4 +410,4 @@ view.on('*', function (event, properties, senderId) {
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/data/index.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -134,4 +135,4 @@
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/graph2d/index.html

@@ -96,6 +96,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -574,7 +575,7 @@ function (value) {
             <pre class="prettyprint lang-js">
 drawPoints: true // or false
             </pre>
-
+            
             2. <code>Object</code> (the 'rendering' options): If an object is provided it may contain following properties which all can be optional: <code>onRender</code>, <code>className</code><code>size</code> and/or <code>style</code>. For more information check the property's documentation.<br />
             <pre class="prettyprint lang-js">
 drawPoints: {
@@ -582,7 +583,7 @@ drawPoints: {
   style: 'square'
 }
             </pre>
-
+            
             3. <code>Function</code>: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.<br />
             <pre class="prettyprint lang-js">
 drawPoints: function(item, group) {

docs/graph3d/index.html

@@ -12,7 +12,7 @@
   <link href="../css/bootstrap.css" rel="stylesheet">
   <!-- Tipue vendor css -->
   <link href="../css/tipuesearch.css" rel="stylesheet">
-
+  
   <link href="../css/style.css" rel="stylesheet">
 
 
@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -363,7 +364,7 @@ var options = {
       <td>dataColor.fill</td>
       <td>string</td>
       <td>'#7DC1FF'</td>
-      <td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
+      <td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>  
     </tr>
     <tr>
       <td>dataColor.stroke</td>
@@ -385,6 +386,24 @@ var options = {
       <td>Ratio of the size of the dots with respect to the width of the graph.</td>
     </tr>
 
+    <tr>
+      <td>dotSizeMinFraction</td>
+      <td>number</td>
+      <td>0.5</td>
+      <td>Size of minimum-value dot as a fraction of dotSizeRatio.
+          Applicable when using style <code>dot-size</code>.</td>
+      </td>
+    </tr>
+
+    <tr>
+      <td>dotSizeMaxFraction</td>
+      <td>number</td>
+      <td>2.5</td>
+      <td>Size of maximum-value dot as a fraction of dotSizeRatio.
+          Applicable when using style <code>dot-size</code>.</td>
+      </td>
+    </tr>
+
     <tr>
       <td>gridColor</td>
       <td>string</td>
@@ -456,8 +475,8 @@ var options = {
       <td>showLegend</td>
       <td>boolean</td>
       <td>none</td>
-      <td>If true, a legend is drawn for the graph (if the graph type supports it).
-          By default a legend is drawn for dot and dot-color style graphs.
+      <td>If true, a legend is drawn for the graph (if the graph type supports it). 
+          By default a legend is drawn for dot and dot-color style graphs. 
       </td>
     </tr>
     <tr>
@@ -502,7 +521,7 @@ var options = {
       <td>Object</td>
       <td>
 <pre class="prettyprint lang-js">
-{
+{ 
   content: {
     padding: '10px',
     border: '1px solid #4d4d4d',

docs/network/configure.html

@@ -59,6 +59,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>

docs/network/edges.html

@@ -59,6 +59,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>

docs/network/groups.html

@@ -57,6 +57,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -173,4 +174,4 @@ var options = {
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/index.html

@@ -88,6 +88,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -340,7 +341,7 @@ network.setOptions(options);
                   <code>'it'</code>,
                   <code>'nl'</code>
                   <code>'pt-br'</code>,
-                  <code>'ru'</code>
+                  <code>'ru'</code> 
                   are supported. Take a look at the
                   <a href="#locales" data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales section below</a>
                   for more explaination on how to customize this.

docs/network/interaction.html

@@ -52,6 +52,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -168,4 +169,4 @@ network.setOptions(options);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/layout.html

@@ -28,10 +28,10 @@
     <script language="JavaScript">
         smoothScroll.init();
     </script>
-
+    
     <!-- Tipue vendor css -->
     <link href="../css/tipuesearch.css" rel="stylesheet">
-
+    
     <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">
@@ -56,6 +56,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -165,4 +166,4 @@ network.setOptions(options);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/manipulation.html

@@ -52,6 +52,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -200,4 +201,4 @@ var options = {
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/nodes.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>

docs/network/physics.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -220,4 +221,4 @@ network.setOptions(options);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/timeline/index.html

@@ -60,6 +60,7 @@
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+            <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
             <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
             <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
             <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -467,10 +468,10 @@ var groups = [
       <td>Array of group ids nested in the group. Nested groups will appear under this nesting group.</td>
     </tr>
      <tr>
-      <td>showNestedGroups</td>
+      <td>showNested</td>
       <td>Boolean</td>
       <td>no</td>
-      <td>Assuming the group has nested groups, this will set the initial state of the group - shown or collapsed. The <code>showNestedGroups</code> is defaulted to <code>true</code>.</td>
+      <td>Assuming the group has nested groups, this will set the initial state of the group - shown or collapsed. The <code>showNested</code> is defaulted to <code>true</code>.</td>
     </tr>
   </table>
 
@@ -611,6 +612,7 @@ function (option, path) {
     hour:       'HH:mm',
     weekday:    'ddd D',
     day:        'D',
+    week:       'w',
     month:      'MMM',
     year:       'YYYY'
   },
@@ -621,6 +623,7 @@ function (option, path) {
     hour:       'ddd D MMMM',
     weekday:    'MMMM YYYY',
     day:        'MMMM YYYY',
+    week:       'MMMM YYYY',
     month:      'YYYY',
     year:       ''
   }
@@ -954,13 +957,29 @@ function (option, path) {
       <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>rollingMode</td>
+    <tr class='toggle collapsible' onclick="toggleTable('optionTable','rollingMode', this);">
+      <td><span parent="rollingMode" class="right-caret"></span> rollingMode</td>
+      <td>Object</td>
+      <td><code>Object</code></td>
+      <td>Specify how the timeline implements rolling mode.</td>
+    </tr>
+    <tr parent="rollingMode" class="hidden">
+      <td class="indent">rollingMode.follow</td>
       <td>boolean</td>
       <td><code>false</code></td>
       <td>If true, the timeline will initial in a rolling mode - the current time will always be centered. I the user drags the timeline, the timeline will go out of rolling mode and a toggle button will appear. Clicking that button will go back to rolling mode. Zooming in rolling mode will zoom in to the center without consideration of the mouse position.</td>
     </tr>
 
+    <tr parent="rollingMode" class="hidden">
+      <td class="indent">rollingMode.offset</td>
+      <td>Number</td>
+      <td><code>'0.5'</code></td>
+      <td>
+        Set how far from the left the rolling mode is implemented from. A percentage (i.e. a decimal between 0 and 1)
+        Defaults to the middle or 0.5 (50%)
+      </td>
+    </tr>
+
     <tr>
       <td>rtl</td>
       <td>boolean</td>
@@ -1007,6 +1026,13 @@ function (option, path) {
         visible.</td>
     </tr>
 
+    <tr>
+      <td>showTooltips</td>
+      <td>boolean</td>
+      <td><code>true</code></td>
+      <td>If true, items with titles will display a tooltip. If false, item tooltips are prevented from showing.</td>
+    </tr>
+
     <tr>
       <td>stack</td>
       <td>boolean</td>
@@ -1027,7 +1053,7 @@ function (option, path) {
       <td>function</td>
       <td>When moving items on the Timeline, they will be snapped to nice dates like full hours or days, depending on the current scale. The <code>snap</code> function can be replaced with a custom function, or can be set to <code>null</code> to disable snapping. The signature of the snap function is:
         <pre class="prettyprint lang-js">function snap(date: Date, scale: string, step: number) : Date or number</pre>
-        The parameter <code>scale</code> can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'day, 'month, or 'year'. The parameter <code>step</code> is a number like 1, 2, 4, 5.
+        The parameter <code>scale</code> can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'week', 'day, 'month, or 'year'. The parameter <code>step</code> is a number like 1, 2, 4, 5.
       </td>
     </tr>
 
@@ -1054,11 +1080,11 @@ function (option, path) {
       This would be used as an additional way to add content that is constant in size with the visible frame of the item and does not get visibly hidden with the item's internal container: <code>vis-item-overflow</code> which is <code>overflow:hidden</code>.</td>
     </tr>
 
-    <tr class='depricated'>
+    <tr class='deprecated'>
       <td>throttleRedraw</td>
       <td>number</td>
       <td><code>0</code></td>
-      <td>This option is <b>DEPRICATED</b> and no longer supported. It will be removed in the next MAJOR release.</td>
+      <td>This option is <b>DEPRECATED</b> and no longer supported. It will be removed in the next MAJOR release.</td>
     </tr>
 
     <tr class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);">
@@ -1071,10 +1097,11 @@ function (option, path) {
       <td class="indent">timeAxis.scale</td>
       <td>String</td>
       <td>none</td>
-      <td>Set a fixed scale for the time axis of the Timeline. Choose from <code>'millisecond'</code>, <code>'second'</code>, <code>'minute'</code>, <code>'hour'</code>, <code>'weekday'</code>, <code>'day'</code>, <code>'month'</code>, <code>'year'</code>. Example usage:
+      <td>Set a fixed scale for the time axis of the Timeline. Choose from <code>'millisecond'</code>, <code>'second'</code>, <code>'minute'</code>, <code>'hour'</code>, <code>'weekday'</code>, <code>'week'</code>, <code>'day'</code>, <code>'month'</code>, <code>'year'</code>. Example usage:
   <pre class="prettyprint lang-js">var options = {
   timeAxis: {scale: 'minute', step: 5}
 }</pre>
+        <p>Note: The 'week' scale only works properly when <a href="#Localization">locales</a> are enabled.</p>
       </td>
     </tr>
 
@@ -1307,12 +1334,13 @@ document.getElementById('myTimeline').onclick = function (event) {
     </tr>
 
     <tr>
-      <td>moveTo(time [, options])</td>
+      <td>moveTo(time [, options, callback])</td>
       <td>none</td>
       <td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
         <ul>
           <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
         </ul>
+        A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of moveTo function.
       </td>
     </tr>
 
@@ -1421,12 +1449,13 @@ document.getElementById('myTimeline').onclick = function (event) {
     </tr>
 
     <tr>
-      <td>setWindow(start, end [, options])</td>
+      <td>setWindow(start, end [, options, callback])</td>
       <td>none</td>
       <td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged. Available options:
         <ul>
           <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
         </ul>
+        A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of setWindow function. 
       </td>
     </tr>
 
@@ -1438,21 +1467,23 @@ document.getElementById('myTimeline').onclick = function (event) {
     </tr>
 
      <tr>
-      <td>zoomIn(percentage [, options])</td>
+      <td>zoomIn(percentage [, options, callback])</td>
       <td>none</td>
       <td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
         <ul>
           <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
         </ul>
+        A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of zoomIn function.
       </td>
     </tr>
     <tr>
-      <td>zoomOut(percentage [, options])</td>
+      <td>zoomOut(percentage [, options, callback])</td>
       <td>none</td>
       <td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
         <ul>
           <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
         </ul>
+        A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of zoomOut function.
       </td>
     </tr>
 
@@ -1541,6 +1572,16 @@ timeline.off('select', onSelect);
       </td>
     </tr>
 
+    <tr>
+      <td>drop</td>
+      <td>
+        Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
+      </td>
+      <td>Fired when dropping inside the Timeline.
+      </td>
+    </tr>
+
+
     <tr>
       <td>mouseOver</td>
       <td>
@@ -1550,6 +1591,33 @@ timeline.off('select', onSelect);
       </td>
     </tr>
 
+    <tr>
+      <td>mouseDown</td>
+      <td>
+        Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
+      </td>
+      <td>Fired when the mouse down event is triggered over a timeline element.
+      </td>
+    </tr>
+
+    <tr>
+      <td>mouseUp</td>
+      <td>
+        Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
+      </td>
+      <td>Fired when the mouse up event is triggered over a timeline element.
+      </td>
+    </tr>
+
+    <tr>
+      <td>mouseMove</td>
+      <td>
+        Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
+      </td>
+      <td>Fired when the mouse is moved over a timeline element.
+      </td>
+    </tr>
+
     <tr>
       <td>groupDragged</td>
       <td>
@@ -1990,7 +2058,10 @@ var options = {
       <td>Weekday</td><td><code>vis-monday</code>, <code>vis-tuesday</code>, <code>vis-wednesday</code>, <code>vis-thursday</code>, <code>vis-friday</code>, <code>vis-saturday</code>, <code>vis-sunday</code></td>
     </tr>
     <tr>
-      <td>Days</td><td><code>vis-date1</code>, <code>vis-date2</code>, ..., <code>vis-date31</code></td>
+      <td>Days</td><td><code>vis-day1</code>, <code>vis-day2</code>, ..., <code>vis-day31</code></td>
+    </tr>
+    <tr>
+      <td>Week</td><td><code>vis-week1</code>, <code>vis-week2</code>, ..., <code>vis-week53</code></td>
     </tr>
     <tr>
       <td>Months</td><td><code>vis-january</code>, <code>vis-february</code>, <code>vis-march</code>, <code>vis-april</code>, <code>vis-may</code>, <code>vis-june</code>, <code>vis-july</code>, <code>vis-august</code>, <code>vis-september</code>, <code>vis-october</code>, <code>vis-november</code>, <code>vis-december</code></td>
@@ -1999,6 +2070,9 @@ var options = {
       <td>Years</td><td><code>vis-year2014</code>, <code>vis-year2015</code>, ...</td>
     </tr>
   </table>
+  <p>
+    Note: the 'week' scale is not included in the automatic zoom levels as its scale is not a direct logical successor of 'days' nor a logical predecessor of 'months'
+  </p>
 
   <p>Examples:</p>
 

examples/graph3d/08_dot_cloud_size.html

@@ -49,7 +49,9 @@
           horizontal: -0.54,
           vertical: 0.5,
           distance: 1.6
-        }
+        },
+        dotSizeMinFraction: 0.5,
+        dotSizeMaxFraction: 2.5
       };
 
       // create our graph

examples/network/events/interactionEvents.html

@@ -24,6 +24,7 @@
 <pre id="eventSpan"></pre>
 
 <script type="text/javascript">
+
     // create an array with nodes
     var nodes = new vis.DataSet([
         {id: 1, label: 'Node 1', title: 'I have a popup!'},
@@ -53,6 +54,7 @@
     network.on("click", function (params) {
         params.event = "[original event]";
         document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
+        console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
     });
     network.on("doubleClick", function (params) {
         params.event = "[original event]";

examples/network/other/saveAndLoad.html

@@ -71,15 +71,6 @@
                 draw();
             }
 
-            function addContextualInformation(elem, index, array) {
-                addId(elem, index);
-                addConnections(elem, index);
-            }
-
-            function addId(elem, index) {
-                elem.id = index;
-            }
-
             function addConnections(elem, index) {
                 // need to replace this with a tree of the network, then get child direct children of the element
                 elem.connections = network.getConnectedNodes(index);
@@ -107,7 +98,7 @@
 
                 var nodes = objectToArray(network.getPositions());
 
-                nodes.forEach(addContextualInformation);
+                nodes.forEach(addConnections);
 
                 // pretty print node data
                 var exportValue = JSON.stringify(nodes, undefined, 2);
@@ -141,30 +132,47 @@
                 return new vis.DataSet(networkNodes);
             }
 
+            function getNodeById(data, id) {
+                for (var n = 0; n < data.length; n++) {
+                    if (data[n].id == id) {  // double equals since id can be numeric or string
+                      return data[n];
+                    }
+                };
+
+                throw 'Can not find id \'' + id + '\' in data';
+            }
+
             function getEdgeData(data) {
                 var networkEdges = [];
 
-                data.forEach(function(node, index, array) {
+                data.forEach(function(node) {
                     // add the connection
                     node.connections.forEach(function(connId, cIndex, conns) {
                         networkEdges.push({from: node.id, to: connId});
+                        let cNode = getNodeById(data, connId);
 
-                        var elementConnections = array[connId].connections;
+                        var elementConnections = cNode.connections;
 
                         // remove the connection from the other node to prevent duplicate connections
                         var duplicateIndex = elementConnections.findIndex(function(connection) {
-                            connection === node.id;
+                          return connection == node.id; // double equals since id can be numeric or string
                         });
 
-                        elementConnections = elementConnections.splice(0, duplicateIndex - 1).concat(elementConnections.splice(duplicateIndex + 1, elementConnections.length))
-                        });
+
+                        if (duplicateIndex != -1) {
+                          elementConnections.splice(duplicateIndex, 1);
+                        };
+                  });
                 });
 
                 return new vis.DataSet(networkEdges);
             }
 
             function objectToArray(obj) {
-                return Object.keys(obj).map(function (key) { return obj[key]; });
+                return Object.keys(obj).map(function (key) {
+                  obj[key].id = key;
+                  return obj[key];
+                });
             }
 
             function resizeExportArea() {
@@ -174,4 +182,4 @@
             init();
         </script>
     </body>
-</html>
+</html>

examples/timeline/interaction/eventListeners.html

@@ -72,6 +72,14 @@
       logEvent('contextmenu', properties);
     });
 
+    timeline.on('mouseDown', function (properties) {
+        logEvent('mouseDown', properties);
+    });
+
+    timeline.on('mouseUp', function (properties) {
+        logEvent('mouseUp', properties);
+    });
+
     // other possible events:
 
     // timeline.on('mouseOver', function (properties) {

examples/timeline/interaction/rollingMode.html

@@ -33,7 +33,10 @@
   var options = {
     start: new Date(),
     end: new Date(new Date().getTime() + 1000000),
-    rollingMode: true
+    rollingMode: {
+      follow: true,
+      offset: 0.5
+    }
   };
 
   // create a Timeline

examples/timeline/items/tooltip.html

@@ -12,7 +12,7 @@
 
   <script src="../../../dist/vis.js"></script>
   <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
-  
+
 </head>
 <body>
 
@@ -38,6 +38,12 @@
 
 <div id="tooltips-cap"></div>
 
+<p>
+  Disable item tooltips.
+</p>
+
+<div id="tooltips-hide"></div>
+
 <script type="text/javascript">
   // Create a DataSet (allows two way data-binding)
   var items = new vis.DataSet([
@@ -78,6 +84,15 @@
 
   var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'),
       items, cap_options);
+
+  // Hide options
+  var hide_options = {
+    showTooltips: false
+  }
+
+  var timelineHide = new vis.Timeline(document.getElementById('tooltips-hide'),
+      items, hide_options);
+
 </script>
 
 </body>

examples/timeline/styling/weekStyling.html

@@ -0,0 +1,111 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | Grid styling</title>
+
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        /* alternating column backgrounds */
+        .vis-time-axis .vis-grid.vis-odd {
+            background: #f5f5f5;
+        }
+    </style>
+
+</head>
+<body>
+
+<p>
+    Week numbers are calculated based on locales. For this to properly work, the timeline must be loaded with a version
+    of moment.js including locales.</p>
+<p>To set a locale for the timeline, specify the option
+    <code>{locale: STRING}</code>.</p>
+<p>To set the scale to use week numbers, use for example <code>{scale: 'week', step: 1}</code>.</p>
+<p>The following timeline is initialized with the 'de' locale and items are added with locally localized moment.js
+    objects. The timeline locale can be switched to another locale at runtime. If you choose the 'en' locale, the week
+    numbers will be calculated according to the US week calendar numbering scheme.</p>
+
+<p>
+    <label for="locale">Select a locale:</label>
+    <select id="locale">
+        <option value="en">en</option>
+        <option value="it">it</option>
+        <option value="nl">nl</option>
+        <option value="de" selected>de</option>
+    </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+    var itemCount = 26;
+
+    // DOM element where the Timeline will be attached
+    var container = document.getElementById('visualization');
+
+    // just a group for the effects
+    var groups = new vis.DataSet();
+    groups.add([{id: 1, content: "ISO Weeks"}, {id: 2, content: "US Weeks"}]);
+
+    // Create a DataSet (allows two way data-binding)
+    var items = new vis.DataSet();
+
+    // create a localized moment object based on the current date
+    var USdate = moment().locale('en').hours(0).minutes(0).seconds(0).milliseconds(0);
+
+    // use the locale-aware weekday function to move to the begin of the current week
+    USdate.weekday(0);
+
+    // Iterate and just add a week to use it again in the next iteration
+    for (var i = 0; i < itemCount; i++) {
+        var USweekNumber = USdate.format('w');
+        var USweekStart = USdate.format();
+        var USweekEnd = USdate.add(1, 'week').format();
+        items.add({
+            id: i,
+            group: 2,
+            content: 'US week ' + USweekNumber,
+            start: USweekStart,
+            end: USweekEnd
+        });
+    }
+
+    // create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system
+    var DEdate = moment().locale('de').hours(0).minutes(0).seconds(0).milliseconds(0);
+    DEdate.weekday(0);
+    for (var j = 0; j < itemCount; j++) {
+        var DEweekNumber = DEdate.format('w');
+        var DEweekStart = DEdate.format();
+        var DEweekEnd = DEdate.add(1, 'week').format();
+        items.add({
+            id: itemCount + j,
+            group: 1,
+            content: 'ISO week ' + DEweekNumber,
+            start: DEweekStart,
+            end: DEweekEnd
+        });
+    }
+
+    // Configuration for the Timeline
+    var options = {timeAxis: {scale: 'week', step: 1}, locale: 'de'};
+
+    // Create a Timeline
+    var timeline = new vis.Timeline(container, items, groups, options);
+
+    // update the locale when changing the select box value
+    var select = document.getElementById('locale');
+    select.onchange = function () {
+        timeline.setOptions({
+            locale: this.value
+        });
+    };
+    select.onchange();
+</script>
+</body>
+</html>

index.html

@@ -29,7 +29,7 @@
 
     <script src="./js/smooth-scroll.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
 
     <script language="JavaScript">
         smoothScroll.init();
@@ -37,7 +37,7 @@
         function evalLinks() {
             if (typeof vis === 'undefined') {
                 console.log(document.getElementById("linkStatus"));
-                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.19.1) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
+                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.20.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
                 document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
                 document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
             }
@@ -205,13 +205,13 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js" target="_blank">vis.min.js</a> <br>
-                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" target="_blank">vis.min.css</a> <br>
+                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js" target="_blank">vis.min.js</a> <br>
+                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" target="_blank">vis.min.css</a> <br>
                         <span id="linkStatus"></span>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="https://github.com/almende/vis/archive/v4.19.1.zip">v4.19.1.zip</a>
+                        <a href="https://github.com/almende/vis/archive/v4.20.0.zip">v4.20.0.zip</a>
                     </p>
                 </div>
             </div>

timeline_examples.html

@@ -110,6 +110,7 @@
         <a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br />
         <a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
         <a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
+        <a class='exampleLink' href="examples/timeline/styling/weekStyling.html">week styling</a><br />
 
         <h3>data handling</h3>
         <a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br />