~\js\plumb.js

This is the script that will use jsPlumb--which in turn will use jQuery and jQuery UI--to connect our topic DOM elements with pretty lines so we can mimic the concept map created by Mirabai and Mel Chua.

File Dependencies

Files that this file needs

• None

Files that need this file

• ~\templates\ploverdojo.html

Code Detail

First, we must wait for all the DOM elements to load so bind our script to the ready event

jsPlumb.bind("ready", function() {
});

Then we set some defaults for jsPlumb

  jsPlumb.importDefaults({
    Anchors : [["Perimeter", {shape:"rectangle"}], ["Perimeter", {shape:"rectangle"}]],
    Connector : "StateMachine"
  });

Make the DOM elements draggable just for the fun of it :-p

  jsPlumb.draggable($(".topic"));

Create some styles for the lines and endpoints

  var paintStyleStrongConnection = {lineWidth:3, strokeStyle:'rgba(98, 98, 98, 0.618)'}
  var paintStyleWeakConnection = {lineWidth:2, strokeStyle:'rgba(158,158,158,0.382)', "dashstyle":"2 3"}
  
  var endpointStyleStrongConnection = {fillStyle:'rgba(98, 98, 98, 0.618)', radius:6}
  var endpointStyleWeakConnection = {fillStyle:'rgba(158,158,158,0.382)', radius:4}

The start connecting elements to each other

  jsPlumb.connect({
    source:"[topic_id]",
    target:"[another_topic_id]",
    endpointStyle:endpointStyleStrongConnection,
    paintStyle:paintStyleStrongConnection,
  });

Make sure to apply the correct style for the appropriate type of lines

Helpful Links

JavaScript

• w3schools' JavaScript Tutorial
• Mozilla Developer Network's JavaScript Documentation

Libraries

• jsPlumb
• jQuery
• jQuery UI