From fa1c6a0b5db7d6e5f7adab3873b9c0dd52accdd5 Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Mon, 14 Apr 2014 13:56:21 +0200 Subject: [PATCH] added localization options --- dist/vis.js | 78 ++++++++++++++++------ docs/graph.html | 51 +++++++++++++- src/graph/Graph.js | 28 +++++++- src/graph/graphMixins/ManipulationMixin.js | 30 ++++----- 4 files changed, 149 insertions(+), 38 deletions(-) diff --git a/dist/vis.js b/dist/vis.js index c731a710..bcc33fc5 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -5,7 +5,7 @@ * A dynamic, browser-based visualization library. * * @version 0.7.3-SNAPSHOT - * @date 2014-04-09 + * @date 2014-04-14 * * @license * Copyright (C) 2011-2014 Almende B.V, http://almende.com @@ -12994,21 +12994,21 @@ var manipulationMixin = { // add the icons to the manipulator div this.manipulationDiv.innerHTML = "" + "" + - "Add Node" + + ""+this.constants.labels['add'] +"" + "
" + "" + - "Add Link"; + ""+this.constants.labels['link'] +""; if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { this.manipulationDiv.innerHTML += "" + "
" + "" + - "Edit Node"; + ""+this.constants.labels['editNode'] +""; } if (this._selectionIsEmpty() == false) { this.manipulationDiv.innerHTML += "" + "
" + "" + - "Delete selected"; + ""+this.constants.labels['delete'] +""; } @@ -13034,7 +13034,7 @@ var manipulationMixin = { else { this.editModeDiv.innerHTML = "" + "" + - "Edit" + ""+this.constants.labels['edit'] +"" var editModeButton = document.getElementById("graph-manipulate-editModeButton"); editModeButton.onclick = this._toggleEditMode.bind(this); } @@ -13057,10 +13057,10 @@ var manipulationMixin = { // create the toolbar contents this.manipulationDiv.innerHTML = "" + "" + - "Back" + + "" + this.constants.labels['back'] + " " + "
" + "" + - "Click in an empty space to place a new node"; + "" + this.constants.labels['addDescription'] + ""; // bind the icon var backButton = document.getElementById("graph-manipulate-back"); @@ -13093,10 +13093,10 @@ var manipulationMixin = { this.manipulationDiv.innerHTML = "" + "" + - "Back" + + "" + this.constants.labels['back'] + " " + "
" + "" + - "Click on a node and drag the edge to another node to connect them."; + "" + this.constants.labels['linkDescription'] + ""; // bind the icon var backButton = document.getElementById("graph-manipulate-back"); @@ -13217,7 +13217,7 @@ var manipulationMixin = { }); } else { - alert("The function for add does not support two arguments (data,callback)."); + alert(this.constants.labels['addError']); this._createManipulatorBar(); this.moving = true; this.start(); @@ -13251,7 +13251,7 @@ var manipulationMixin = { }); } else { - alert("The function for connect does not support two arguments (data,callback)."); + alert(this.constants.labels["linkError"]); this.moving = true; this.start(); } @@ -13295,11 +13295,11 @@ var manipulationMixin = { }); } else { - alert("The function for edit does not support two arguments (data, callback).") + alert(this.constants.labels["editError"]); } } else { - alert("No edit function has been bound to this button.") + alert(this.constants.labels["editBoundError"]); } }, @@ -13327,7 +13327,7 @@ var manipulationMixin = { }); } else { - alert("The function for edit does not support two arguments (data, callback).") + alert(this.constants.labels["deleteError"]) } } else { @@ -13339,7 +13339,7 @@ var manipulationMixin = { } } else { - alert("Clusters cannot be deleted."); + alert(this.constants.labels["deleteClusterError"]); } } } @@ -16170,7 +16170,23 @@ function Graph (container, data, options) { smoothCurves: true, maxVelocity: 10, minVelocity: 0.1, // px/s - stabilizationIterations: 1000 // maximum number of iteration to stabilize + stabilizationIterations: 1000, // maximum number of iteration to stabilize + labels:{ + add:"Add Node", + edit:"Edit", + link:"Add Link", + delete:"Delete selected", + editNode:"Edit Node", + 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.", + addError:"The function for add does not support two arguments (data,callback).", + linkError:"The function for connect does not support two arguments (data,callback).", + editError:"The function for edit does not support two arguments (data, callback).", + editBoundError:"No edit function has been bound to this button.", + deleteError:"The function for delete does not support two arguments (data, callback).", + deleteClusterError:"Clusters cannot be deleted." + } }; this.editMode = this.constants.dataManipulation.initiallyVisible; @@ -16503,6 +16519,16 @@ Graph.prototype.setOptions = function (options) { if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;} if (options.stabilizationIterations !== undefined) {this.constants.stabilizationIterations = options.stabilizationIterations;} + + + if (options.labels !== undefined) { + for (prop in options.labels) { + if (options.labels.hasOwnProperty(prop)) { + this.constants.labels[prop] = options.labels[prop]; + } + } + } + if (options.onAdd) { this.triggerFunctions.add = options.onAdd; } @@ -17920,13 +17946,23 @@ if (typeof window !== 'undefined') { /** * Schedule a animation step with the refreshrate interval. - * - * @poram {Boolean} runCalculationStep */ Graph.prototype.start = function() { if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) { - if (!this.timer) { - this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function + if (!this.timer) { + var ua = navigator.userAgent.toLowerCase(); + if (ua.indexOf('safari') != -1) { + if (ua.indexOf('chrome') <= -1) { + // safari + this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function + } + else { + this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function + } + } + else{ + this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function + } } } else { diff --git a/docs/graph.html b/docs/graph.html index 97766870..e4369b8e 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -66,6 +66,7 @@
  • Navigation controls
  • Keyboard navigation
  • Hierarchical layout
    • +
  • Localization
  • Methods
    • @@ -1830,7 +1831,55 @@ var options: { String UD This defines the direction the graph is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL). - These need to be supplied by the acronyms in parentheses. + These need to be supplied by the acronyms in parentheses. + + + +

    Localization

    +

    + When using vis.js in other languages, one can use the localization option to overwrite the labels used in the data manipulation interface. +

    + +
    +var options: {
+    labels:{
+      add:"Add Node",
+      edit:"Edit",
+      link:"Add Link",
+      delete:"Delete selected",
+      editNode:"Edit Node",
+      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.",
+      addError:"The function for add does not support two arguments
+                                                        (data,callback).",
+      linkError:"The function for connect does not support two arguments
+                                                        (data,callback).",
+      editError:"The function for edit does not support two arguments
+                                                        (data, callback).",
+      editBoundError:"No edit function has been bound to this button.",
+      deleteError:"The function for delete does not support two arguments
+                                                        (data, callback).",
+      deleteClusterError:"Clusters cannot be deleted."
+    }
+}
+
    + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    labelsobject(shown above)Overwrite one or all labels used in the datamanipulation interface with localized strings. +

    Methods

    diff --git a/src/graph/Graph.js b/src/graph/Graph.js index 3a330fd4..7b5758ad 100644 --- a/src/graph/Graph.js +++ b/src/graph/Graph.js @@ -151,7 +151,23 @@ function Graph (container, data, options) { smoothCurves: true, maxVelocity: 10, minVelocity: 0.1, // px/s - stabilizationIterations: 1000 // maximum number of iteration to stabilize + stabilizationIterations: 1000, // maximum number of iteration to stabilize + labels:{ + add:"Add Node", + edit:"Edit", + link:"Add Link", + delete:"Delete selected", + editNode:"Edit Node", + 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.", + addError:"The function for add does not support two arguments (data,callback).", + linkError:"The function for connect does not support two arguments (data,callback).", + editError:"The function for edit does not support two arguments (data, callback).", + editBoundError:"No edit function has been bound to this button.", + deleteError:"The function for delete does not support two arguments (data, callback).", + deleteClusterError:"Clusters cannot be deleted." + } }; this.editMode = this.constants.dataManipulation.initiallyVisible; @@ -484,6 +500,16 @@ Graph.prototype.setOptions = function (options) { if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;} if (options.stabilizationIterations !== undefined) {this.constants.stabilizationIterations = options.stabilizationIterations;} + + + if (options.labels !== undefined) { + for (prop in options.labels) { + if (options.labels.hasOwnProperty(prop)) { + this.constants.labels[prop] = options.labels[prop]; + } + } + } + if (options.onAdd) { this.triggerFunctions.add = options.onAdd; } diff --git a/src/graph/graphMixins/ManipulationMixin.js b/src/graph/graphMixins/ManipulationMixin.js index e949a759..7e96ad2f 100644 --- a/src/graph/graphMixins/ManipulationMixin.js +++ b/src/graph/graphMixins/ManipulationMixin.js @@ -83,21 +83,21 @@ var manipulationMixin = { // add the icons to the manipulator div this.manipulationDiv.innerHTML = "" + "" + - "Add Node" + + ""+this.constants.labels['add'] +"" + "
    " + "" + - "Add Link"; + ""+this.constants.labels['link'] +""; if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { this.manipulationDiv.innerHTML += "" + "
    " + "" + - "Edit Node"; + ""+this.constants.labels['editNode'] +""; } if (this._selectionIsEmpty() == false) { this.manipulationDiv.innerHTML += "" + "
    " + "" + - "Delete selected"; + ""+this.constants.labels['delete'] +""; } @@ -123,7 +123,7 @@ var manipulationMixin = { else { this.editModeDiv.innerHTML = "" + "" + - "Edit" + ""+this.constants.labels['edit'] +"" var editModeButton = document.getElementById("graph-manipulate-editModeButton"); editModeButton.onclick = this._toggleEditMode.bind(this); } @@ -146,10 +146,10 @@ var manipulationMixin = { // create the toolbar contents this.manipulationDiv.innerHTML = "" + "" + - "Back" + + "" + this.constants.labels['back'] + " " + "
    " + "" + - "Click in an empty space to place a new node"; + "" + this.constants.labels['addDescription'] + ""; // bind the icon var backButton = document.getElementById("graph-manipulate-back"); @@ -182,10 +182,10 @@ var manipulationMixin = { this.manipulationDiv.innerHTML = "" + "" + - "Back" + + "" + this.constants.labels['back'] + " " + "
    " + "" + - "Click on a node and drag the edge to another node to connect them."; + "" + this.constants.labels['linkDescription'] + ""; // bind the icon var backButton = document.getElementById("graph-manipulate-back"); @@ -306,7 +306,7 @@ var manipulationMixin = { }); } else { - alert("The function for add does not support two arguments (data,callback)."); + alert(this.constants.labels['addError']); this._createManipulatorBar(); this.moving = true; this.start(); @@ -340,7 +340,7 @@ var manipulationMixin = { }); } else { - alert("The function for connect does not support two arguments (data,callback)."); + alert(this.constants.labels["linkError"]); this.moving = true; this.start(); } @@ -384,11 +384,11 @@ var manipulationMixin = { }); } else { - alert("The function for edit does not support two arguments (data, callback).") + alert(this.constants.labels["editError"]); } } else { - alert("No edit function has been bound to this button.") + alert(this.constants.labels["editBoundError"]); } }, @@ -416,7 +416,7 @@ var manipulationMixin = { }); } else { - alert("The function for edit does not support two arguments (data, callback).") + alert(this.constants.labels["deleteError"]) } } else { @@ -428,7 +428,7 @@ var manipulationMixin = { } } else { - alert("Clusters cannot be deleted."); + alert(this.constants.labels["deleteClusterError"]); } } }