Implemented localization in Timeline and Graph2d

HISTORY.md

@@ -9,6 +9,7 @@ http://visjs.org
 - Fixed the `change` event sometimes being fired twice on IE10.
 - Fixed canceling moving an item to another group did not move the item
   back to the original group.
+- Added localization support.
 
 ### Network
 
@@ -21,7 +22,7 @@ http://visjs.org
 - Added 'allowOverlap' option for barCharts.
 - Added two examples showing the two additions above.
 - Added 'customRange' for the Y axis and an example showing how it works.
-
+- Added localization support.
 
 ## 2014-08-14, version 3.2.0
 

docs/graph2d.html

@@ -48,6 +48,8 @@
   </li>
   <li><a href="#Methods">Methods</a></li>
   <li><a href="#Events">Events</a></li>
+  <li><a href="#Localization">Localization</a></li>
+  <li><a href="#Styles">Styles</a></li>
   <li><a href="#Data_Policy">Data Policy</a></li>
 </ul>
 
@@ -91,7 +93,7 @@
       start: '2014-06-10',
       end: '2014-06-18'
   };
-  var graph2d = new vis.Graph2d(container, dataset, options);
+  var Graph2d = new vis.Graph2d(container, dataset, options);
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
@@ -278,13 +280,13 @@ groups.add({
         <td>slots.slot</td>
         <td>Number</td>
         <td></td>
-        <td>The slot the bar chart is plotted in. This has to be used in combination with slots.total. See <a href="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
+        <td>The slot the bar chart is plotted in. This has to be used in combination with slots.total. See <a href="../examples/Graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
     </tr>
     <tr>
         <td>slots.total</td>
         <td>Number</td>
         <td></td>
-        <td>The total amount of slots available. This has to be used in combination with slots.slot. See <a href="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
+        <td>The total amount of slots available. This has to be used in combination with slots.slot. See <a href="../examples/Graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
     </tr>
 </table>
 
@@ -316,7 +318,7 @@ The options colored in green can also be used as options for the groups. All opt
         <td class="greenField">yAxisOrientation</td>
         <td>String</td>
         <td>'left'</td>
-        <td>This defines with which axis, left or right, the graph is coupled. <a href="../examples/graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
+        <td>This defines with which axis, left or right, the graph is coupled. <a href="../examples/Graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
         with an axis, it will not be shown.</td>
     </tr>
     <tr>
@@ -336,7 +338,7 @@ The options colored in green can also be used as options for the groups. All opt
         <td class="greenField">sampling</td>
         <td>Boolean</td>
         <td>true</td>
-        <td>If sampling is enabled, graph2D will automatically determine the amount of points per pixel.
+        <td>If sampling is enabled, Graph2d will automatically determine the amount of points per pixel.
             If there are more than 1 point per pixel, not all points will be drawn. Disabling sampling will cause a decrease in performance.</td>
     </tr>
     <tr>
@@ -388,8 +390,8 @@ The options colored in green can also be used as options for the groups. All opt
         <td>Boolean</td>
         <td>true</td>
         <td>When true, bars that have the same x coordinate are plotted on top of eachother (not stacking).
-            See <a href="../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
-            When using groups, see <a href="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
+            See <a href="../examples/Graph2d/10_barsSideBySide.html">example 10</a> for more information.
+            When using groups, see <a href="../examples/Graph2d/11_barsSideBySideGroups.html">example 11</a>.
         </td>
     </tr>
     <tr>
@@ -408,7 +410,7 @@ The options colored in green can also be used as options for the groups. All opt
         <td class="greenField">catmullRom.parametrization</td>
         <td>String</td>
         <td>'centripetal'</td>
-        <td>Define the type of parametrizaion. <a href="../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
+        <td>Define the type of parametrizaion. <a href="../examples/Graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
             If catmullRom is disabled, linear interpolation is used.</td>
     </tr>
     <tr>
@@ -512,7 +514,7 @@ The options colored in green can also be used as options for the groups. All opt
 <h3 id="timelineOptions">Timeline Options</h3>
 
 <p>
-  Graph2d is built upon the framework of the timeline. These options from the timeline can be used with graph2D.
+  Graph2d is built upon the framework of the timeline. These options from the timeline can be used with Graph2d.
   All options are optional.
 </p>
 
@@ -917,16 +919,72 @@ Graph2d.off('rangechanged', onChange);
 
 </table>
 
+<h2 id="Localization">Localization</h2>
+<p>
+  Graph2d can be localized. For localization, Graph2d depends largely on the localization of <a href="http://momentjs.com">moment.js</a>. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.
+</p>
+
+<p>
+  To set a locale for the Graph2d, specify the option <code>locale</code>:
+</p>
+
+<pre class="prettyprint lang-js">var options = {
+  locale: 'nl'
+};
+</pre>
+
+<h3>Create a new locale</h3>
+
+To load a locale into the Graph2d not supported by default, one can add a new locale to the option <code>locales</code>:
+
+<pre class="prettyprint lang-js">var options = {
+  locales: {
+    // create a new locale
+    mylocale: {
+      current: 'current',
+      time: 'time',
+    }
+  },
+
+  // use the new locale
+  locale: 'mylocale'
+};
+</pre>
+
+<h3 id="available-locales">Available locales</h3>
+
+Graph2d comes with support for the following locales:
+
+<table>
+  <tr><th>Language</th><th>Code</th></tr>
+  <tr>
+    <td>English</td>
+    <td>
+      <code>en</code><br>
+      <code>en_EN</code><br>
+      <code>en_US</code>
+    </td>
+  </tr>
+  <tr>
+    <td>Dutch</td>
+    <td>
+      <code>nl</code><br>
+      <code>nl_NL</code><br>
+      <code>nl_BE</code>
+    </td>
+  </tr>
+</table>
+
 <h2 id="Styles">Styles</h2>
 <p>
-    All parts of the Graph2d have a class name and a default css style just like the Timeline.
+    All parts of the Graph2d have a class name and a default css style just like the Graph2d.
     The styles can be overwritten, which enables full customization of the layout
     of the Graph2d.
 </p>
 <p>
     Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten
-    as well, along with defining your own classes to style the graphs! <a href="../examples/graph2d/04_rightAxis.html">Example 4</a> and
-    <a href="../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
+    as well, along with defining your own classes to style the graphs! <a href="../examples/Graph2d/04_rightAxis.html">Example 4</a> and
+    <a href="../examples/Graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
 </p>
 
 <h2 id="Data_Policy">Data Policy</h2>

docs/timeline.html

@@ -43,6 +43,7 @@
   <li><a href="#Methods">Methods</a></li>
   <li><a href="#Events">Events</a></li>
   <li><a href="#Editing_Items">Editing Items</a></li>
+  <li><a href="#Localization">Localization</a></li>
   <li><a href="#Styles">Styles</a></li>
   <li><a href="#Data_Policy">Data Policy</a></li>
 </ul>
@@ -438,6 +439,20 @@ var options = {
     </td>
 </tr>
 
+<tr>
+    <td>locale</td>
+    <td>String</td>
+    <td>none</td>
+    <td>Select a locale for the Timeline. See section <a>Localization</a> for more information.</td>
+</tr>
+
+<tr>
+    <td>locales</td>
+    <td>Object</td>
+    <td>none</td>
+    <td>A map with i18n locales. See section <a>Localization</a> for more information.</td>
+</tr>
+
 <tr>
     <td>margin.axis</td>
     <td>Number</td>
@@ -985,11 +1000,67 @@ var options = {
       callback(null); // cancel updating the item
     }
   }
-}
+};
 </pre>
 
 A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>.
 
+<h2 id="Localization">Localization</h2>
+<p>
+  Timeline can be localized. For localization, Timeline depends largely on the localization of <a href="http://momentjs.com">moment.js</a>. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.
+</p>
+
+<p>
+  To set a locale for the Timeline, specify the option <code>locale</code>:
+</p>
+
+<pre class="prettyprint lang-js">var options = {
+  locale: 'nl'
+};
+</pre>
+
+<h3>Create a new locale</h3>
+
+To load a locale into the Timeline not supported by default, one can add a new locale to the option <code>locales</code>:
+
+<pre class="prettyprint lang-js">var options = {
+  locales: {
+    // create a new locale
+    mylocale: {
+      current: 'current',
+      time: 'time',
+    }
+  },
+
+  // use the new locale
+  locale: 'mylocale'
+};
+</pre>
+
+<h3 id="available-locales">Available locales</h3>
+
+Timeline comes with support for the following locales:
+
+<table>
+  <tr><th>Language</th><th>Code</th></tr>
+  <tr>
+    <td>English</td>
+    <td>
+      <code>en</code><br>
+      <code>en_EN</code><br>
+      <code>en_US</code>
+    </td>
+  </tr>
+  <tr>
+    <td>Dutch</td>
+    <td>
+      <code>nl</code><br>
+      <code>nl_NL</code><br>
+      <code>nl_BE</code>
+    </td>
+  </tr>
+</table>
+
 
 <h2 id="Styles">Styles</h2>
 <p>
@@ -1008,7 +1079,6 @@ A full example is available here:
 </pre>
 
-
 <h2 id="Data_Policy">Data Policy</h2>
 <p>
   All code and data is processed and rendered in the browser.

examples/graph2d/01_basic.html

@@ -2,8 +2,8 @@
 <html>
 
 <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
   <title>Graph2d | Basic Example</title>
 
   <style type="text/css">
@@ -18,13 +18,13 @@
 <body>
 <h2>Graph2d | Basic Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
-    This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
-    In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
-    There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
-    create your own styling.
-    <br /><br />
+  This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
+  In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
+  There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
+  create your own styling.
+  <br /><br />
   Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
-    In these examples however, we will focus on what's new in Graph2d!
+  In these examples however, we will focus on what's new in Graph2d!
 </div>
 <br />
 <div id="visualization"></div>
@@ -33,18 +33,18 @@
 
   var container = document.getElementById('visualization');
   var items = [
-      {x: '2014-06-11', y: 10},
-      {x: '2014-06-12', y: 25},
-      {x: '2014-06-13', y: 30},
-      {x: '2014-06-14', y: 10},
-      {x: '2014-06-15', y: 15},
-      {x: '2014-06-16', y: 30}
+    {x: '2014-06-11', y: 10},
+    {x: '2014-06-12', y: 25},
+    {x: '2014-06-13', y: 30},
+    {x: '2014-06-14', y: 10},
+    {x: '2014-06-15', y: 15},
+    {x: '2014-06-16', y: 30}
   ];
 
   var dataset = new vis.DataSet(items);
   var options = {
-      start: '2014-06-10',
-      end: '2014-06-18'
+    start: '2014-06-10',
+    end: '2014-06-18'
   };
   var graph2d = new vis.Graph2d(container, dataset, options);
 

examples/graph2d/13_localization.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Localization</title>
+
+  <style type="text/css">
+    body, html, select {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Localization</h2>
+<p>
+  To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
+</p>
+
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale">
+    <option value="en" selected>en</option>
+    <option value="nl">nl</option>
+  </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-11', y: 10},
+    {x: '2014-06-12', y: 25},
+    {x: '2014-06-13', y: 30},
+    {x: '2014-06-14', y: 10},
+    {x: '2014-06-15', y: 15},
+    {x: '2014-06-16', y: 30}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+    start: '2014-06-10',
+    end: '2014-06-18'
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+
+  // update the locale when changing the select box value
+  var select = document.getElementById('locale');
+  select.onchange = function () {
+    graph2d.setOptions({
+      locale: this.value
+    });
+  };
+  select.onchange();
+</script>
+</body>
+</html>

examples/graph2d/index.html

@@ -19,6 +19,7 @@
   <p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p>
   <p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
   <p><a href="12_customRange.html">12_customRange.html</a></p>
+  <p><a href="13_localization.html">13_localization.html</a></p>
 
 </div>
 </body>

examples/timeline/19_localization.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Localization</title>
+
+  <style type="text/css">
+    body, html, select {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<p>
+  To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
+</p>
+
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale">
+    <option value="en" selected>en</option>
+    <option value="nl">nl</option>
+  </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var DAY = 24 * 60 * 60 * 1000;
+
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)},
+    {id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)}
+  ]);
+
+  // Configuration for the Timeline
+  var options = {
+    showCurrentTime: true,
+    showCustomTime: true
+  };
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+
+  timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
+
+  // 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>

examples/timeline/index.html

@@ -30,6 +30,7 @@
   <p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
   <p><a href="17_data_serialization.html">17_data_serialization.html</a></p>
   <p><a href="18_range_overflow.html">18_range_overflow.html</a></p>
+  <p><a href="19_localization.html">19_localization.html</a></p>
 
   <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 

lib/timeline/component/CurrentTime.js

@@ -1,5 +1,7 @@
 var util = require('../../util');
 var Component = require('./Component');
+var moment = require('../../module/moment');
+var locales = require('../locales');
 
 /**
  * A current time bar
@@ -14,7 +16,10 @@ function CurrentTime (body, options) {
 
   // default options
   this.defaultOptions = {
-    showCurrentTime: true
+    showCurrentTime: true,
+
+    locales: locales,
+    locale: 'en'
   };
   this.options = util.extend({}, this.defaultOptions);
 
@@ -57,7 +62,7 @@ CurrentTime.prototype.destroy = function () {
 CurrentTime.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    util.selectiveExtend(['showCurrentTime'], this.options, options);
+    util.selectiveExtend(['showCurrentTime', 'locale', 'locales'], this.options, options);
   }
 };
 
@@ -81,8 +86,12 @@ CurrentTime.prototype.redraw = function() {
     var now = new Date();
     var x = this.body.util.toScreen(now);
 
+    var locale = this.options.locales[this.options.locale];
+    var title = locale.current + ' ' + locale.time + ': ' + moment(now).format('dddd, MMMM Do YYYY, H:mm:ss');
+    title = title.charAt(0).toUpperCase() + title.substring(1);
+
     this.bar.style.left = x + 'px';
-    this.bar.title = 'Current time: ' + now;
+    this.bar.title = title;
   }
   else {
     // remove the line from the DOM

lib/timeline/component/CustomTime.js

@@ -1,6 +1,8 @@
 var Hammer = require('../../module/hammer');
 var util = require('../../util');
 var Component = require('./Component');
+var moment = require('../../module/moment');
+var locales = require('../locales');
 
 /**
  * A custom time bar
@@ -16,7 +18,9 @@ function CustomTime (body, options) {
 
   // default options
   this.defaultOptions = {
-    showCustomTime: false
+    showCustomTime: false,
+    locales: locales,
+    locale: 'en'
   };
   this.options = util.extend({}, this.defaultOptions);
 
@@ -39,7 +43,7 @@ CustomTime.prototype = new Component();
 CustomTime.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    util.selectiveExtend(['showCustomTime'], this.options, options);
+    util.selectiveExtend(['showCustomTime', 'locale', 'locales'], this.options, options);
   }
 };
 
@@ -102,8 +106,12 @@ CustomTime.prototype.redraw = function () {
 
     var x = this.body.util.toScreen(this.customTime);
 
+    var locale = this.options.locales[this.options.locale];
+    var title = locale.time + ': ' + moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
+    title = title.charAt(0).toUpperCase() + title.substring(1);
+
     this.bar.style.left = x + 'px';
-    this.bar.title = 'Time: ' + this.customTime;
+    this.bar.title = title;
   }
   else {
     // remove the line from the DOM

lib/timeline/component/TimeAxis.js

@@ -1,6 +1,7 @@
 var util = require('../../util');
 var Component = require('./Component');
 var TimeStep = require('../TimeStep');
+var moment = require('../../module/moment');
 
 /**
  * A horizontal time axis
@@ -63,6 +64,18 @@ TimeAxis.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
     util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels'], this.options, options);
+
+    // apply locale to moment.js
+    // TODO: not so nice, this is applied globally to moment.js
+    if ('locale' in options) {
+      if (typeof moment.locale === 'function') {
+        // moment.js 2.8.1+
+        moment.locale(options.locale);
+      }
+      else {
+        moment.lang(options.locale);
+      }
+    }
   }
 };
 

lib/timeline/locales.js

@@ -0,0 +1,41 @@
+// English
+exports['en'] = {
+  // Timeline
+  current: 'current',
+  time: 'time',
+
+  // Network
+  add: 'Add Node',
+  edit: 'Edit',
+  link: 'Add Link',
+  del: 'Delete selected',
+  editNode: 'Edit Node',
+  editEdge: 'Edit Edge',
+  back: 'Back',
+  addDescription: 'Click in an empty space to place a new node.',
+  linkDescription: 'Click on a node and drag the edge to another node to connect them.',
+  editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.'
+};
+exports['en_EN'] = exports['en'];
+exports['en_US'] = exports['en'];
+
+// Dutch
+exports['nl'] = {
+  // Timeline
+  custom: 'aangepaste',
+  time: 'tijd',
+
+  // Network
+  add: 'Node',
+  edit: 'Wijzigen',
+  link: 'Link toevoegen',
+  del: 'Selectie verwijderen',
+  editNode: 'Node wijzigen',
+  editEdge: 'Link wijzigen',
+  back: 'Terug',
+  addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
+  linkDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
+  editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.'
+};
+exports['nl_NL'] = exports['nl'];
+exports['nl_BE'] = exports['nl'];