<!doctype html> <html> <head> <title>Network | Localization</title> <style type="text/css"> body, select { font: 10pt sans; } #mynetwork { position:relative; width: 800px; height: 600px; border: 1px solid lightgray; } table.legend_table { font-size: 11px; border-width:1px; border-color:#d3d3d3; border-style:solid; } table.legend_table,td { border-width:1px; border-color:#d3d3d3; border-style:solid; padding: 2px; } div.table_content { width:80px; text-align:center; } div.table_description { width:100px; } #operation { font-size:28px; } #network-popUp { display:none; position:absolute; top:350px; left:170px; z-index:299; width:250px; height:120px; background-color: #f9f9f9; border-style:solid; border-width:3px; border-color: #5394ed; padding:10px; text-align: center; } </style> <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; var edges = null; var network = null; // randomly create some nodes and edges var data = getScaleFreeNetwork(25); var seed = 2; function destroy() { if (network !== null) { network.destroy(); network = null; } } function draw() { destroy(); nodes = []; edges = []; // create a network var container = document.getElementById('mynetwork'); var options = { layout: {randomSeed:seed}, // just to make sure the layout is the same when the locale is changed locale: document.getElementById('locale').value, manipulation: { addNode: function (data, callback) { // filling in the popup DOM elements document.getElementById('operation').innerHTML = "Add Node"; document.getElementById('node-id').value = data.id; document.getElementById('node-label').value = data.label; document.getElementById('saveButton').onclick = saveData.bind(this, data, callback); document.getElementById('cancelButton').onclick = clearPopUp.bind(); document.getElementById('network-popUp').style.display = 'block'; }, editNode: function (data, callback) { // filling in the popup DOM elements document.getElementById('operation').innerHTML = "Edit Node"; document.getElementById('node-id').value = data.id; document.getElementById('node-label').value = data.label; document.getElementById('saveButton').onclick = saveData.bind(this, data, callback); document.getElementById('cancelButton').onclick = clearPopUp.bind(); document.getElementById('network-popUp').style.display = 'block'; }, addEdge: function (data, callback) { if (data.from == data.to) { var r = confirm("Do you want to connect the node to itself?"); if (r == true) { callback(data); } } else { callback(data); } } } }; network = new vis.Network(container, data, options); } function clearPopUp() { document.getElementById('saveButton').onclick = null; document.getElementById('cancelButton').onclick = null; document.getElementById('network-popUp').style.display = 'none'; } function saveData(data,callback) { data.id = document.getElementById('node-id').value; data.label = document.getElementById('node-label').value; clearPopUp(); callback(data); } </script> <script src="../../googleAnalytics.js"></script> </head> <body onload="draw();"> <h2>Editing the nodes and edges (localized)</h2> <p style="width: 700px; font-size:14px; text-align: justify;"> The localization is only relevant to the manipulation buttons. </p> <p> <label for="locale">Select a locale:</label> <select id="locale" onchange="draw();"> <option value="en" selected>en</option> <option value="nl">nl</option> </select> </p> <div id="network-popUp"> <span id="operation">node</span> <br> <table style="margin:auto;"><tr> <td>id</td><td><input id="node-id" value="new value" /></td> </tr> <tr> <td>label</td><td><input id="node-label" value="new value" /></td> </tr></table> <input type="button" value="save" id="saveButton" /> <input type="button" value="cancel" id="cancelButton" /> </div> <br /> <div id="mynetwork"></div> </body> </html>