Skip to content
Alesiani Marco edited this page Apr 23, 2015 · 4 revisions

KNode wiki

KNode is a JS rendering library for dynamic content management in the form of a nodemap. It requires jQuery, Raphaël for SVG graphics and heavily relies on HTML5/CSS3 capabilities.

Quickstart with KNode

The samples/index.html webpage provides a quickstart of KNode capabilities.

In order to create a new nodemap you should

  1. Get jQuery and jQuery UI or use the versions provided with this repository

  2. Get Raphaël or use the version provided with this repository

  3. Include nodemap.js and style.css (js files are not shrinked, it is recommended to do so in production use)

<!-- jQuery and UI for draggable nodes -->
<script type="text/javascript" src="jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- Raphael for SVG graphics -->
<script type="text/javascript" src="raphael/2.1.4/raphael-min.js"></script>

<!-- Node map -->
<link href="style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="nodemap.js"></script>
  1. Create a div where the map will be rendered

<div id="map" style="width:550px; height:550px; border: 2px solid black;"></div>

  1. You can initialize a KNode map from a <ul> list into a <div>
var map; // The nodemap
$(document).ready(function() {
  map = $('#map').createNodeMap({scaleLevel: 0.5}); // Optional zoom level for the map
  map.createNodes($('#ulList'));
});

...
<body>
  <div id="ulList">
    <ul>
      <li><a id="itemId" href="This list item links to..">List Item</a></li>
      <li>
        <ul>
          <li><div>SubList Item which doesn't link to anything</div></li>
        </ul>
      </li>
    </ul>
  </div>
</body>

Alternatively a map can be created dynamically

// Create a new root node
var newRoot = map.createRootNode ("root", null, "new Root");
// and a child element
newRoot.addChildNode(null, null, "New Child");
newRoot.addChildNode(null, null, "New Child 2");

A root node is always necessary and it is also the item where the map is centered on. A new node can be promoted as root by referring to its id and calling markAsSelected()

var animals = map.getNodeFromId ("animals");
animals.markAsSelected ();

Nodes can be added by calling node.addChildNode(newNodeId_canBeNull, newNodeHref_canBeNull, newNodeText), deleted with node.deleteNode ();.

The entire map area can be cleared with map.clearMap (); (cannot be undone).

Callbacks (i.e. when a node element is clicked) can be configured with a simple

node.callback = function () { console.log("hello world, I was clicked"); };

Advanced configurations

Configuring the map's physical behavior can be done in the nodemap.js header

var MOVEMENT_TIMEOUT = 5; // 5 seconds for the nodes' movement timeout
var CHILD_PARENT_INIT_DISTANCE = 50; // Starting child<->parent distance
var NODES_REPULSIVE_FACTOR = 460;
var LINES_RESTORING_FACTOR = 8000;

its style can be customized in the style.css file. If access to the underlying jQuery selector for the node element is required, one might use

node.$element.addClass('parent');
Clone this wiki locally