Merge remote-tracking branch 'origin/develop' into alex_dev

Conflicts: package.json vis.js vis.min.js
11 years ago · e120083e03
--- a/HISTORY.md
+++ b/HISTORY.md
@ -4,6 +4,8 @@ http://visjs.org
 ## <not yet released>, version 0.3.0
 - Moved the generated library to folder `./dist`
 - Css stylesheet must be loaded explicitly now.
 - Implemented options `showCurrentTime` and `showCustomTime`. Thanks fi0dor.
 - Implemented touch support for Timeline.
 - Fixed broken Timeline options `min` and `max`.
--- a/Jakefile.js
+++ b/Jakefile.js
@ -9,9 +9,10 @@ var jake = require('jake'),
 require('jake-utils');
 // constants
 var VIS = './vis.js';
 var VIS = './dist/vis.js';
 var VIS_CSS = './dist/vis.css';
 var VIS_TMP = './vis.js.tmp';
 var VIS_MIN = './vis.min.js';
 var VIS_MIN = './dist/vis.min.js';
 /**
 * default task
@ -27,7 +28,7 @@ task('default', ['build', 'minify', 'test'], function () {
 desc('Build the visualization library vis.js');
 task('build', {async: true}, function () {
  // concatenate and stringify the css files
  var result = concat({
  concat({
    src: [
      './src/timeline/component/css/timeline.css',
      './src/timeline/component/css/panel.css',
@ -38,10 +39,10 @@ task('build', {async: true}, function () {
      './src/timeline/component/css/currenttime.css',
      './src/timeline/component/css/customtime.css'
    ],
    header: '/* vis.js stylesheet */',
    dest: VIS_CSS,
    separator: '\n'
  });
  var cssText = JSON.stringify(result.code);
  console.log('created ' + VIS_CSS);
  // concatenate the script files
  concat({
@ -86,12 +87,7 @@ task('build', {async: true}, function () {
      './src/module/exports.js'
    ],
    separator: '\n',
    // Note: we insert the css as a string in the javascript code here
    //       the css will be injected on load of the javascript library
    footer: '// inject css\n' +
        'util.loadCss(' + cssText + ');\n'
    separator: '\n'
  });
  // bundle the concatenated script and dependencies into one file
--- a/docs/graph.html
+++ b/docs/graph.html
@ -53,7 +53,13 @@
 <h2 id="Example">Example</h2>
 <p>
  Here a basic graph example. More examples can be found in the
  Here a basic graph example. Note that unlike the
  <a href="timeline.html">Timeline</a>, the Graph does not need the vis.css
  file.
 </p>
 <p>
  More examples can be found in the
  <a href="../examples" target="_blank">examples directory</a>.
 </p>
@ -62,7 +68,7 @@
 &lt;head&gt;
  &lt;title&gt;Graph | Basic usage&lt;/title&gt;
  &lt;script type="text/javascript" src="../../vis.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
--- a/docs/index.html
+++ b/docs/index.html
@ -84,13 +84,14 @@ bower install vis
  <h2 id="Load">Load</h2>
  <p>
    To use a component, include the javascript file of vis in your web page:
    To load vis.js, include the javascript and css files of vis in your web page:
  </p>
 <pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
  &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
  &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script type="text/javascript"&gt;
@ -144,7 +145,9 @@ var timeline = new vis.Timeline(container, data, options);
 &lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Timeline basic demo&lt;/title&gt;
  &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
  &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
  &lt;style type="text/css"&gt;
    body, html {
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -59,7 +59,8 @@
    }
  &lt;/style&gt;
  &lt;script src="../../vis.js"&gt;&lt;/script&gt;
  &lt;script src="../../dist/vis.js"&gt;&lt;/script&gt;
  &lt;link href="../../dist/vis.css" rel="stylesheet" type="text/css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="visualization"&gt;&lt;/div&gt;
@ -85,11 +86,13 @@
 <h2 id="Loading">Loading</h2>
 <p>
  Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.
  in a subfolder of your project. Include the library script in the head of your html code:
  in a subfolder of your project. Include the libraries script and css files in the
  head of your html code:
 </p>
 <pre class="prettyprint lang-html">
 &lt;script type="text/javascript" src="vis/vis.js"&gt;&lt;/script&gt;
 &lt;script src="vis/dist/vis.js"&gt;&lt;/script&gt;
 &lt;link href="vis/dist/vis.css" rel="stylesheet" type="text/css" /&gt;
 </pre>
 The constructor of the Timeline is <code>vis.Timeline</code>
--- a/examples/graph/01_basic_usage.html
+++ b/examples/graph/01_basic_usage.html
@ -3,7 +3,7 @@
 <head>
  <title>Graph | Basic usage</title>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <style type="text/css">
    #mygraph {
--- a/examples/graph/02_random_nodes.html
+++ b/examples/graph/02_random_nodes.html
@ -14,7 +14,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var nodes = null;
--- a/examples/graph/03_images.html
+++ b/examples/graph/03_images.html
@ -14,7 +14,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var nodes = null;
--- a/examples/graph/04_shapes.html
+++ b/examples/graph/04_shapes.html
@ -14,7 +14,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var nodes = null;
--- a/examples/graph/05_social_network.html
+++ b/examples/graph/05_social_network.html
@ -15,7 +15,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var DIR = 'img/soft-scraps-icons/';
--- a/examples/graph/06_groups.html
+++ b/examples/graph/06_groups.html
@ -15,7 +15,7 @@
  </style>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var nodes = null;
--- a/examples/graph/07_selections.html
+++ b/examples/graph/07_selections.html
@ -3,7 +3,7 @@
 <head>
  <title>Graph | Selections</title>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <style type="text/css">
    #mygraph {
--- a/examples/graph/08_mobile_friendly.html
+++ b/examples/graph/08_mobile_friendly.html
@ -21,7 +21,7 @@
  <!-- for mobile devices like android and iphone -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var nodes = null;
--- a/examples/graph/09_sizing.html
+++ b/examples/graph/09_sizing.html
@ -14,7 +14,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var nodes = null;
--- a/examples/graph/10_multiline_text.html
+++ b/examples/graph/10_multiline_text.html
@ -11,7 +11,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    function draw() {
--- a/examples/graph/11_custom_style.html
+++ b/examples/graph/11_custom_style.html
@ -14,7 +14,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var nodes = null;
--- a/examples/graph/12_scalable_images.html
+++ b/examples/graph/12_scalable_images.html
@ -14,7 +14,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var DIR = 'img/soft-scraps-icons/';
--- a/examples/graph/13_dashed_lines.html
+++ b/examples/graph/13_dashed_lines.html
@ -14,7 +14,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    // Called on page load
--- a/examples/graph/14_dot_language.html
+++ b/examples/graph/14_dot_language.html
@ -2,7 +2,7 @@
 <head>
  <title>Graph | DOT Language</title>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
 </head>
 <body>
 <div id="mygraph"></div>
--- a/examples/graph/15_dot_language_playground.html
+++ b/examples/graph/15_dot_language_playground.html
@ -3,7 +3,7 @@
 <head>
  <title>Graph | DOT language playground</title>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <style type="text/css">
    body, html {
--- a/examples/graph/16_dynamic_data.html
+++ b/examples/graph/16_dynamic_data.html
@ -53,7 +53,7 @@
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script type="text/javascript" src="../../vis.js"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <script type="text/javascript">
    var nodes, edges, graph;
--- a/examples/graph/17_network_info.html
+++ b/examples/graph/17_network_info.html
@ -17,7 +17,7 @@
    }
  </style>
  <script type="text/javascript" src="../../vis.min.js"></script>
  <script type="text/javascript" src="../../dist/vis.min.js"></script>
  <script type="text/javascript">
    var nodes = null;
--- a/examples/graph/graphviz/graphviz_gallery.html
+++ b/examples/graph/graphviz/graphviz_gallery.html
@ -3,7 +3,7 @@
  <title>Graph | Graphviz Gallery</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script type="text/javascript" src="../../../vis.js"></script>
  <script type="text/javascript" src="../../../dist/vis.js"></script>
  <style type="text/css">
    p {
--- a/examples/timeline/01_basic.html
+++ b/examples/timeline/01_basic.html
@ -1,31 +1,32 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | Basic demo</title>
  <title>Timeline | Basic demo</title>
    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
    </style>
  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>
    <script src="../../vis.js"></script>
  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="visualization"></div>
 <script type="text/javascript">
    var container = document.getElementById('visualization');
    var items = [
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ];
    var options = {};
    var timeline = new vis.Timeline(container, items, options);
  var container = document.getElementById('visualization');
  var items = [
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  ];
  var options = {};
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/02_dataset.html
+++ b/examples/timeline/02_dataset.html
@ -1,61 +1,62 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | Dataset example</title>
    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #visualization {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
    <script src="../../vis.js"></script>
  <title>Timeline | Dataset example</title>
  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #visualization {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }
  </style>
  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="visualization"></div>
 <script>
    var now = moment().minutes(0).seconds(0).milliseconds(0);
    // create a dataset with items
    var items = new vis.DataSet({
        convert: {
            start: 'Date',
            end: 'Date'
        }
    });
    items.add([
        {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
        {id: 2, content: 'item 2', start: now.clone().add('days', -2)},
        {id: 3, content: 'item 3', start: now.clone().add('days', 2)},
        {id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
        {id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
        {id: 6, content: 'item 6', start: now.clone().add('days', 11)}
    ]);
    var container = document.getElementById('visualization');
    var options = {
        start: now.clone().add('days', -3),
        end: now.clone().add('days', 7),
        orientation: 'top',
        height: '100%',
        showCurrentTime: true
    };
    var timeline = new vis.Timeline(container, items, options);
  var now = moment().minutes(0).seconds(0).milliseconds(0);
  // create a dataset with items
  var items = new vis.DataSet({
    convert: {
      start: 'Date',
      end: 'Date'
    }
  });
  items.add([
    {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
    {id: 2, content: 'item 2', start: now.clone().add('days', -2)},
    {id: 3, content: 'item 3', start: now.clone().add('days', 2)},
    {id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
    {id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
    {id: 6, content: 'item 6', start: now.clone().add('days', 11)}
  ]);
  var container = document.getElementById('visualization');
  var options = {
    start: now.clone().add('days', -3),
    end: now.clone().add('days', 7),
    orientation: 'top',
    height: '100%',
    showCurrentTime: true
  };
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
--- a/examples/timeline/03_much_data.html
+++ b/examples/timeline/03_much_data.html
@ -13,7 +13,8 @@
    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
    <script src="../../vis.js"></script>
  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h1>
--- a/examples/timeline/04_html_data.html
+++ b/examples/timeline/04_html_data.html
@ -1,69 +1,74 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | HTML data</title>
  <title>Timeline | HTML data</title>
    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }
        span {
            color: red;
        }
        span.large {
            font-size: 200%;
        }
    </style>
  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
    span {
      color: red;
    }
    span.large {
      font-size: 200%;
    }
  </style>
  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
    <script src="../../vis.js"></script>
 </head>
 <body>
 <p>
    Load HTML contents in the Timeline
  Load HTML contents in the Timeline
 </p>
 <div id="visualization"></div>
 <script>
    // create a couple of HTML items in various ways
  // create a couple of HTML items in various ways
  var item1 = document.createElement('div');
  item1.appendChild(document.createTextNode('item 1'));
    var item1 = document.createElement('div');
    item1.appendChild(document.createTextNode('item 1'));
  var item2 = document.createElement('div');
  item2.innerHTML = '<span>item 2</span>';
    var item2 = document.createElement('div');
    item2.innerHTML = '<span>item 2</span>';
  var item3 = document.createElement('div');
  var span3 = document.createElement('span');
  span3.className = 'large';
  span3.appendChild(document.createTextNode('item 3'));
  item3.appendChild(span3);
    var item3 = document.createElement('div');
    var span3 = document.createElement('span');
    span3.className = 'large';
    span3.appendChild(document.createTextNode('item 3'));
    item3.appendChild(span3);
  var item4 = 'item <span class="large">4</span>';
    var item4 = 'item <span class="large">4</span>';
  var item5 = document.createElement('div');
  item5.appendChild(document.createTextNode('item 5'));
  item5.appendChild(document.createElement('br'));
  var img5 = document.createElement('img');
  img5.src = 'img/attachment-icon.png';
  img5.style.width = '48px';
  img5.style.height = '48px';
  item5.appendChild(img5);
    var item5 = document.createElement('div');
    item5.appendChild(document.createTextNode('item 5'));
    item5.appendChild(document.createElement('br'));
    var img5 = document.createElement('img');
    img5.src = 'img/attachment-icon.png';
    img5.style.width = '48px';
    img5.style.height = '48px';
    item5.appendChild(img5);
  var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
    var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
  var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>';
    // create data and a Timeline
    var container = document.getElementById('visualization');
    var items = [
        {id: 1, content: item1, start: '2013-04-20'},
        {id: 2, content: item2, start: '2013-04-14'},
        {id: 3, content: item3, start: '2013-04-18'},
        {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: item5, start: '2013-04-25'},
        {id: 6, content: item6, start: '2013-04-27'}
    ];
    var options = {};
    var timeline = new vis.Timeline(container, items, options);
  // create data and a Timeline
  var container = document.getElementById('visualization');
  var items = [
    {id: 1, content: item1, start: '2013-04-20'},
    {id: 2, content: item2, start: '2013-04-14'},
    {id: 3, content: item3, start: '2013-04-18'},
    {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: item5, start: '2013-04-25'},
    {id: 6, content: item6, start: '2013-04-27'},
    {id: 7, content: item7, start: '2013-04-21'}
  ];
  var options = {};
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/05_groups.html
+++ b/examples/timeline/05_groups.html
@ -1,71 +1,72 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | Group example</title>
  <title>Timeline | Group example</title>
    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }
  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
        #visualization {
            box-sizing: border-box;
            width: 100%;
            height: 300px;
        }
    </style>
    #visualization {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
    }
  </style>
    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
    <script src="../../vis.js"></script>
  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <p>
    This example demonstrate using groups. Note that a DataSet is used for both
    items and groups, allowing to dynamically add, update or remove both items
    and groups via the DataSet.
  This example demonstrate using groups. Note that a DataSet is used for both
  items and groups, allowing to dynamically add, update or remove both items
  and groups via the DataSet.
 </p>
 <div id="visualization"></div>
 <script>
    var now = moment().minutes(0).seconds(0).milliseconds(0);
    var groupCount = 3;
    var itemCount = 20;
  var now = moment().minutes(0).seconds(0).milliseconds(0);
  var groupCount = 3;
  var itemCount = 20;
    // create a data set with groups
    var names = ['John', 'Alston', 'Lee', 'Grant'];
    var groups = new vis.DataSet();
    for (var g = 0; g < groupCount; g++) {
        groups.add({id: g, content: names[g]});
    }
  // create a data set with groups
  var names = ['John', 'Alston', 'Lee', 'Grant'];
  var groups = new vis.DataSet();
  for (var g = 0; g < groupCount; g++) {
    groups.add({id: g, content: names[g]});
  }
    // create a dataset with items
    var items = new vis.DataSet();
    for (var i = 0; i < itemCount; i++) {
        var start = now.clone().add('hours', Math.random() * 200);
        var group = Math.floor(Math.random() * groupCount);
        items.add({
            id: i,
            group: group,
            content: 'item ' + i +
                    ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
            start: start,
            type: 'box'
        });
    }
  // create a dataset with items
  var items = new vis.DataSet();
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add('hours', Math.random() * 200);
    var group = Math.floor(Math.random() * groupCount);
    items.add({
      id: i,
      group: group,
      content: 'item ' + i +
          ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
      start: start,
      type: 'box'
    });
  }
    // create visualization
    var container = document.getElementById('visualization');
    var options = {
        groupOrder: 'content'
    };
  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    groupOrder: 'content'
  };
    var timeline = new vis.Timeline(container);
    timeline.setOptions(options);
    timeline.setGroups(groups);
    timeline.setItems(items);
  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setGroups(groups);
  timeline.setItems(items);
 </script>
 </body>
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@ -2,21 +2,21 @@
 <html>
 <head>
    <title>vis.js | timeline examples</title>
  <title>vis.js | timeline examples</title>
    <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
  <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
 </head>
 <body>
 <div id="container">
    <h1>vis.js timeline examples</h1>
  <h1>vis.js timeline examples</h1>
    <p><a href="01_basic.html">01_basic.html</a></p>
    <p><a href="02_dataset.html">02_dataset.html</a></p>
    <p><a href="03_much_data.html">03_much_data.html</a></p>
    <p><a href="04_html_data.html">04_html_data.html</a></p>
    <p><a href="05_groups.html">05_groups.html</a></p>
  <p><a href="01_basic.html">01_basic.html</a></p>
  <p><a href="02_dataset.html">02_dataset.html</a></p>
  <p><a href="03_much_data.html">03_much_data.html</a></p>
  <p><a href="04_html_data.html">04_html_data.html</a></p>
  <p><a href="05_groups.html">05_groups.html</a></p>
 </div>
 </body>
--- a/examples/timeline/requirejs/requirejs_example.html
+++ b/examples/timeline/requirejs/requirejs_example.html
@ -1,11 +1,13 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline requirejs demo</title>
  <title>Timeline requirejs demo</title>
    <script data-main="scripts/main" src="scripts/require.js"></script>
  <script data-main="scripts/main" src="scripts/require.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
    <div id="visualization"></div>
 <div id="visualization"></div>
 </body>
 </html>
--- a/examples/timeline/requirejs/scripts/main.js
+++ b/examples/timeline/requirejs/scripts/main.js
@ -1,19 +1,19 @@
 require.config({
    paths: {
        vis: '../../../../vis'
    }
  paths: {
    vis: '../../../../dist/vis'
  }
 });
 require(['vis'], function (vis) {
    var container = document.getElementById('visualization');
    var data = [
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ];
    var options = {};
    var timeline = new vis.Timeline(container, data, options);
  var container = document.getElementById('visualization');
  var data = [
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  ];
  var options = {};
  var timeline = new vis.Timeline(container, data, options);
 });
--- a/src/graph/Graph.js
+++ b/src/graph/Graph.js
@ -725,7 +725,7 @@ Graph.prototype._onMouseWheel = function(event) {
    scale *= (1 + zoom);
    // calculate the pointer location
    var gesture = Hammer.event.collectEventData(this, 'scroll', event);
    var gesture = util.fakeGesture(this, event);
    var pointer = this._getPointer(gesture.center);
    // apply the new scale
@ -746,7 +746,7 @@ Graph.prototype._onMouseWheel = function(event) {
 * @private
 */
 Graph.prototype._onMouseMoveTitle = function (event) {
  var gesture = Hammer.event.collectEventData(this, 'mousemove', event);
  var gesture = util.fakeGesture(this, event);
  var pointer = this._getPointer(gesture.center);
  // check if the previously selected node is still selected
@ -1920,4 +1920,4 @@ Graph.prototype.toggleFreeze = function() {
    this.start();
  }
  console.log('freezeSimulation',this.freezeSimulation)
 }
 }
--- a/src/timeline/Range.js
+++ b/src/timeline/Range.js
@ -389,7 +389,7 @@ Range.prototype._onMouseWheel = function(event, component, direction) {
    }
    // calculate center, the date to zoom around
    var gesture = Hammer.event.collectEventData(this, 'scroll', event),
    var gesture = util.fakeGesture(this, event),
        pointer = getPointer(gesture.touches[0], component.frame),
        pointerDate = this._pointerToDate(component, direction, pointer);
--- a/src/util.js
+++ b/src/util.js
@ -548,6 +548,21 @@ util.stopPropagation = function stopPropagation(event) {
  }
 };
 /**
 * Fake a hammer.js gesture. Event can be a ScrollEvent or MouseMoveEvent
 * @param {Element} element
 * @param {Event} event
 */
 util.fakeGesture = function fakeGesture (element, event) {
  var eventType = null;
  // for hammer.js 1.0.5
  return Hammer.event.collectEventData(this, eventType, event);
  // for hammer.js 1.0.6
  //var touches = Hammer.event.getTouchList(event, eventType);
  //return Hammer.event.collectEventData(this, eventType, touches, event);
 };
 /**
 * Cancels the event if it is cancelable, without stopping further propagation of the event.
@ -656,31 +671,3 @@ util.option.asElement = function (value, defaultValue) {
  return value || defaultValue || null;
 };
 /**
 * load css from text
 * @param {String} css    Text containing css
 */
 util.loadCss = function (css) {
  if (typeof document === 'undefined') {
    return;
  }
  // get the script location, and built the css file name from the js file name
  // http://stackoverflow.com/a/2161748/1262753
  // var scripts = document.getElementsByTagName('script');
  // var jsFile = scripts[scripts.length-1].src.split('?')[0];
  // var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
  // inject css
  // http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
  var style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  document.getElementsByTagName('head')[0].appendChild(style);
 };
--- a/test/dataset.html
+++ b/test/dataset.html
@ -2,7 +2,7 @@
 <html>
 <head>
  <title></title>
  <script src="../vis.js"></script>
  <script src="../dist/vis.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 </head>
 <body>
--- a/test/timeline.html
+++ b/test/timeline.html
@ -3,7 +3,8 @@
 <head>
  <title></title>
  <script src="../node_modules/moment/moment.js"></script>
  <script src="../vis.js"></script>
  <script src="../dist/vis.js"></script>
  <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    body, html {
@ -69,8 +70,8 @@
    height: 200,
    //start: moment('2013-01-01'),
    //end: moment('2013-12-31'),
    min: moment('2013-01-01'),
    max: moment('2013-12-31'),
    //min: moment('2013-01-01'),
    //max: moment('2013-12-31'),
    zoomMin: 1000 * 60 * 60 * 24,            // 1 day
    zoomMax: 1000 * 60 * 60 * 24 * 30 * 6    // 6 months
  };
--- a/test/timeline_groups.html
+++ b/test/timeline_groups.html
@ -19,7 +19,8 @@
  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
  <script src="../vis.js"></script>
  <script src="../dist/vis.js"></script>
  <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
--- a/test/timestep.html
+++ b/test/timestep.html
@ -2,7 +2,8 @@
 <html>
 <head>
  <title></title>
  <script src="../vis.js"></script>
  <script src="../dist/vis.js"></script>
  <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>