switch to using Browserify

For now this requires using my fork noty which adds support for
CommonJS.

Unfortunately WebCola is still broken with CommonJS.

Gulp automation will come soon ...

7 files changed, 60 insertions, 27 deletions

diff --git a/README.md b/README.md
index 360d0e8..a0aec87 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,8 @@ you will need to install some dependencies:
 
         cd html
         npm install
+        browserify -d js/main.js -o js/bundle.js
+
 *   You will need the [Flask](http://flask.pocoo.org/) Python
     module installed.
 
diff --git a/html/git-deps.html b/html/git-deps.html
index add778b..84da796 100644
--- a/html/git-deps.html
+++ b/html/git-deps.html
@@ -5,16 +5,8 @@
   <meta charset="utf-8" />
   <title>git commit dependency graph</title>
 
-  <script language="javascript" type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
-  <script language="javascript" type="text/javascript" src="node_modules/d3/d3.js"></script>
-  <script language="javascript" type="text/javascript" src="node_modules/d3-tip/index.js"></script>
   <script language="javascript" type="text/javascript" src="node_modules/webcola/WebCola/cola.v3.min.js"></script>
-  <script language="javascript" type="text/javascript" src="node_modules/noty/js/noty/packaged/jquery.noty.packaged.min.js"></script>
-
-  <script language="javascript" type="text/javascript" src="js/noty.js"></script>
-  <script language="javascript" type="text/javascript" src="js/fullscreen.js"></script>
-  <script language="javascript" type="text/javascript" src="js/git-deps-data.js"></script>
-  <script language="javascript" type="text/javascript" src="js/git-deps-graph.js"></script>
+  <script language="javascript" type="text/javascript" src="js/bundle.js"></script>
 
   <link rel="stylesheet" type="text/css" href="css/animate.css" />
   <link rel="stylesheet" type="text/css" href="css/git-deps.css" />
diff --git a/html/js/.gitignore b/html/js/.gitignore
new file mode 100644
index 0000000..0e804e3
--- /dev/null
+++ b/html/js/.gitignore
@@ -0,0 +1 @@
+bundle.js
diff --git a/html/js/git-deps-data.js b/html/js/git-deps-data.js
index b970f23..e45217a 100644
--- a/html/js/git-deps-data.js
+++ b/html/js/git-deps-data.js
@@ -1,3 +1,5 @@
+var $ = require('jquery');
+
 // The list of nodes, links, and constraints to feed into WebCola.
 // These will be dynamically built as we retrieve them via XHR.
 var nodes = [], links = [], constraints = [];
@@ -57,7 +59,7 @@ function add_link(parent_sha1, child_sha1) {
 }
 
 function build_constraints() {
-    constraints = [];  // FIXME: only rebuild constraints which changed
+    constraints.length = 0;  // FIXME: only rebuild constraints which changed
     for (var parent_sha1 in deps) {
         constraints.push(build_constraint(parent_sha1));
     }
@@ -97,3 +99,14 @@ function add_data(data) {
     return false;
 }
 
+module.exports = {
+    // Variables
+    nodes: nodes,
+    links: links,
+    constraints: constraints,
+    node_index: node_index,
+    deps: deps,
+
+    // Functions
+    add: add_data,
+};
diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js
index 0c156f9..2031355 100644
--- a/html/js/git-deps-graph.js
+++ b/html/js/git-deps-graph.js
@@ -1,3 +1,14 @@
+var jQuery = require('jquery');
+var $ = jQuery;
+var d3 = require('d3');
+var d3tip = require('d3-tip');
+d3tip(d3);
+
+global.gdn = require('./git-deps-noty');
+global.gdd = require('./git-deps-data');
+
+require('./fullscreen');
+
 var SVG_MARGIN = 2,  // space around <svg>, matching #svg-container border
     RECT_MARGIN = 14,  // space in between <rects>
     PADDING =  5,  // space in between <text> label and <rect> border
@@ -8,7 +19,7 @@ var svg_width  = 960, old_svg_width,
 
 var color = d3.scale.category20();
 
-var d3cola = cola.d3adaptor();
+global.d3cola = cola.d3adaptor();
 d3cola
     .flowLayout("y", 150)
     .linkDistance(60)
@@ -156,23 +167,23 @@ function init_svg() {
 
 function update_cola() {
     d3cola
-        .nodes(nodes)
-        .links(links)
-        .constraints(constraints);
+        .nodes(gdd.nodes)
+        .links(gdd.links)
+        .constraints(gdd.constraints);
 }
 
 function draw_graph(commitish) {
     d3.json("deps.json/" + commitish, function (error, data) {
         if (error) {
             var details = JSON.parse(error.responseText);
-            noty_error(details.message);
+            gdn.error(details.message);
             return;
         }
 
-        var new_data = add_data(data);
+        var new_data = gdd.add(data);
 
         if (! new_data) {
-            noty_warn('No new commits or dependencies found!');
+            gdn.warn('No new commits or dependencies found!');
             return;
         }
 
@@ -181,13 +192,13 @@ function draw_graph(commitish) {
         new_data_notification(new_data);
 
         path = fg.selectAll(".link")
-            .data(links, link_key);
+            .data(gdd.links, link_key);
 
         path.enter().append('svg:path')
             .attr('class', 'link');
 
         node = fg.selectAll(".node")
-            .data(nodes, function (d) {
+            .data(gdd.nodes, function (d) {
                 return d.sha1;
             })
           .call(d3cola.drag);
@@ -214,7 +225,7 @@ function link_key(link) {
 function sha1_of_link_pointer(pointer) {
     if (typeof(pointer) == 'object')
         return pointer.sha1;
-    return nodes[pointer].sha1;
+    return gdd.nodes[pointer].sha1;
 }
 
 function new_data_notification(new_data) {
@@ -233,7 +244,7 @@ function new_data_notification(new_data) {
         ((new_nodes == 1) ? 'dependency' : 'dependencies');
     notification += '</p>';
 
-    noty_success(notification);
+    gdn.success(notification);
 }
 
 function define_arrow_markers(fg) {
@@ -299,7 +310,7 @@ function position_nodes(rect, label, tip) {
     // turn on overlap avoidance after first convergence
     // d3cola.on("end", function () {
     //    if (!d3cola.avoidOverlaps()) {
-    //        nodes.forEach(function (v) {
+    //        gdd.nodes.forEach(function (v) {
     //            v.width = v.height = 10;
     //        });
     //        d3cola.avoidOverlaps(true);
@@ -325,9 +336,9 @@ function tip_html(d) {
     var pre = fragment.find(".commit-body pre").text(d.body);
 
     if (options.debug) {
-        var index = node_index[d.sha1];
+        var index = gdd.node_index[d.sha1];
         var debug = "node index: " + index;
-        $.each(constraints, function (i, constraint) {
+        $.each(gdd.constraints, function (i, constraint) {
             if (constraint.parent == d.sha1) {
                 var siblings = $.map(constraint.offsets,
                                      function (offset, i) {
diff --git a/html/js/noty.js b/html/js/git-deps-noty.js
index 8ee7f31..2639078 100644
--- a/html/js/noty.js
+++ b/html/js/git-deps-noty.js
@@ -1,3 +1,5 @@
+require('noty');
+
 // Different noty types:
 // alert, success, error, warning, information, confirmation
 function noty_error(text) {
@@ -22,7 +24,7 @@ function noty_debug(text) {
 
 // Haha, did you see what I did here?
 function notyfication(type, text) {
-    var n = noty({
+    var n = window.noty({
         text: text,
         type: type,
         layout: 'topRight',
@@ -36,3 +38,11 @@ function notyfication(type, text) {
         }
     });
 }
+
+module.exports = {
+    error: noty_error,
+    warn: noty_warn,
+    success: noty_success,
+    info: noty_info,
+    debug: noty_debug
+};
diff --git a/html/package.json b/html/package.json
index 124f092..909b4ba 100644
--- a/html/package.json
+++ b/html/package.json
@@ -27,9 +27,13 @@
     "dependencies": {
         "d3-tip": "~0.6.6",
         "d3": "~3.5.3",
-        "webcola": "~0.1.1",
+        "webcola": "aspiers/WebCola#fix/main-entrypoints",
         "jquery": "~2.1.3",
-        "noty": "~2.3.0"
+        "noty": "aspiers/noty#fix/commonjs",
+        "browserify": "*"
+    },
+    "devDependencies": {
+        "watchify": "*"
     },
     "directories": {
         "test": "test"