-
Notifications
You must be signed in to change notification settings - Fork 2
Home
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.
The samples/index.html webpage provides a quickstart of KNode capabilities.
In order to create a new nodemap you should
-
Get jQuery and jQuery UI or use the versions provided with this repository
-
Get Raphaël or use the version provided with this repository
-
Include
nodemap.jsandstyle.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>
- Create a div where the map will be rendered
<div id="map" style="width:550px; height:550px; border: 2px solid black;"></div>
- 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"); };
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');