ES6ify all the things!

6 files changed, 439 insertions, 366 deletions

diff --git a/app/assets/javascripts/network/branch-graph.js b/app/assets/javascripts/network/branch-graph.js
new file mode 100644
index 00000000000..c0fec1f8607
--- /dev/null
+++ b/app/assets/javascripts/network/branch-graph.js
@@ -0,0 +1,404 @@
+(function() {
+  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
+  this.BranchGraph = (function() {
+    function BranchGraph(element1, options1) {
+      this.element = element1;
+      this.options = options1;
+      this.scrollTop = bind(this.scrollTop, this);
+      this.scrollBottom = bind(this.scrollBottom, this);
+      this.scrollRight = bind(this.scrollRight, this);
+      this.scrollLeft = bind(this.scrollLeft, this);
+      this.scrollUp = bind(this.scrollUp, this);
+      this.scrollDown = bind(this.scrollDown, this);
+      this.preparedCommits = {};
+      this.mtime = 0;
+      this.mspace = 0;
+      this.parents = {};
+      this.colors = ["#000"];
+      this.offsetX = 150;
+      this.offsetY = 20;
+      this.unitTime = 30;
+      this.unitSpace = 10;
+      this.prev_start = -1;
+      this.load();
+    }
+
+    BranchGraph.prototype.load = function() {
+      return $.ajax({
+        url: this.options.url,
+        method: "get",
+        dataType: "json",
+        success: $.proxy(function(data) {
+          $(".loading", this.element).hide();
+          this.prepareData(data.days, data.commits);
+          return this.buildGraph();
+        }, this)
+      });
+    };
+
+    BranchGraph.prototype.prepareData = function(days, commits) {
+      var c, ch, cw, j, len, ref;
+      this.days = days;
+      this.commits = commits;
+      this.collectParents();
+      this.graphHeight = $(this.element).height();
+      this.graphWidth = $(this.element).width();
+      ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
+      cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
+      this.r = Raphael(this.element.get(0), cw, ch);
+      this.top = this.r.set();
+      this.barHeight = Math.max(this.graphHeight, this.unitTime * this.days.length + 320);
+      ref = this.commits;
+      for (j = 0, len = ref.length; j < len; j++) {
+        c = ref[j];
+        if (c.id in this.parents) {
+          c.isParent = true;
+        }
+        this.preparedCommits[c.id] = c;
+        this.markCommit(c);
+      }
+      return this.collectColors();
+    };
+
+    BranchGraph.prototype.collectParents = function() {
+      var c, j, len, p, ref, results;
+      ref = this.commits;
+      results = [];
+      for (j = 0, len = ref.length; j < len; j++) {
+        c = ref[j];
+        this.mtime = Math.max(this.mtime, c.time);
+        this.mspace = Math.max(this.mspace, c.space);
+        results.push((function() {
+          var l, len1, ref1, results1;
+          ref1 = c.parents;
+          results1 = [];
+          for (l = 0, len1 = ref1.length; l < len1; l++) {
+            p = ref1[l];
+            this.parents[p[0]] = true;
+            results1.push(this.mspace = Math.max(this.mspace, p[1]));
+          }
+          return results1;
+        }).call(this));
+      }
+      return results;
+    };
+
+    BranchGraph.prototype.collectColors = function() {
+      var k, results;
+      k = 0;
+      results = [];
+      while (k < this.mspace) {
+        this.colors.push(Raphael.getColor(.8));
+        Raphael.getColor();
+        Raphael.getColor();
+        results.push(k++);
+      }
+      return results;
+    };
+
+    BranchGraph.prototype.buildGraph = function() {
+      var cuday, cumonth, day, j, len, mm, r, ref;
+      r = this.r;
+      cuday = 0;
+      cumonth = "";
+      r.rect(0, 0, 40, this.barHeight).attr({
+        fill: "#222"
+      });
+      r.rect(40, 0, 30, this.barHeight).attr({
+        fill: "#444"
+      });
+      ref = this.days;
+      for (mm = j = 0, len = ref.length; j < len; mm = ++j) {
+        day = ref[mm];
+        if (cuday !== day[0] || cumonth !== day[1]) {
+          r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
+            font: "12px Monaco, monospace",
+            fill: "#BBB"
+          });
+          cuday = day[0];
+        }
+        if (cumonth !== day[1]) {
+          r.text(20, this.offsetY + this.unitTime * mm, day[1]).attr({
+            font: "12px Monaco, monospace",
+            fill: "#EEE"
+          });
+          cumonth = day[1];
+        }
+      }
+      this.renderPartialGraph();
+      return this.bindEvents();
+    };
+
+    BranchGraph.prototype.renderPartialGraph = function() {
+      var commit, end, i, isGraphEdge, start, x, y;
+      start = Math.floor((this.element.scrollTop() - this.offsetY) / this.unitTime) - 10;
+      if (start < 0) {
+        isGraphEdge = true;
+        start = 0;
+      }
+      end = start + 40;
+      if (this.commits.length < end) {
+        isGraphEdge = true;
+        end = this.commits.length;
+      }
+      if (this.prev_start === -1 || Math.abs(this.prev_start - start) > 10 || isGraphEdge) {
+        i = start;
+        this.prev_start = start;
+        while (i < end) {
+          commit = this.commits[i];
+          i += 1;
+          if (commit.hasDrawn !== true) {
+            x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
+            y = this.offsetY + this.unitTime * commit.time;
+            this.drawDot(x, y, commit);
+            this.drawLines(x, y, commit);
+            this.appendLabel(x, y, commit);
+            this.appendAnchor(x, y, commit);
+            commit.hasDrawn = true;
+          }
+        }
+        return this.top.toFront();
+      }
+    };
+
+    BranchGraph.prototype.bindEvents = function() {
+      var element;
+      element = this.element;
+      return $(element).scroll((function(_this) {
+        return function(event) {
+          return _this.renderPartialGraph();
+        };
+      })(this));
+    };
+
+    BranchGraph.prototype.scrollDown = function() {
+      this.element.scrollTop(this.element.scrollTop() + 50);
+      return this.renderPartialGraph();
+    };
+
+    BranchGraph.prototype.scrollUp = function() {
+      this.element.scrollTop(this.element.scrollTop() - 50);
+      return this.renderPartialGraph();
+    };
+
+    BranchGraph.prototype.scrollLeft = function() {
+      this.element.scrollLeft(this.element.scrollLeft() - 50);
+      return this.renderPartialGraph();
+    };
+
+    BranchGraph.prototype.scrollRight = function() {
+      this.element.scrollLeft(this.element.scrollLeft() + 50);
+      return this.renderPartialGraph();
+    };
+
+    BranchGraph.prototype.scrollBottom = function() {
+      return this.element.scrollTop(this.element.find('svg').height());
+    };
+
+    BranchGraph.prototype.scrollTop = function() {
+      return this.element.scrollTop(0);
+    };
+
+    BranchGraph.prototype.appendLabel = function(x, y, commit) {
+      var label, r, rect, shortrefs, text, textbox, triangle;
+      if (!commit.refs) {
+        return;
+      }
+      r = this.r;
+      shortrefs = commit.refs;
+      if (shortrefs.length > 17) {
+        shortrefs = shortrefs.substr(0, 15) + "…";
+      }
+      text = r.text(x + 4, y, shortrefs).attr({
+        "text-anchor": "start",
+        font: "10px Monaco, monospace",
+        fill: "#FFF",
+        title: commit.refs
+      });
+      textbox = text.getBBox();
+      rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
+        fill: "#000",
+        "fill-opacity": .5,
+        stroke: "none"
+      });
+      triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr({
+        fill: "#000",
+        "fill-opacity": .5,
+        stroke: "none"
+      });
+      label = r.set(rect, text);
+      label.transform(["t", -rect.getBBox().width - 15, 0]);
+      return text.toFront();
+    };
+
+    BranchGraph.prototype.appendAnchor = function(x, y, commit) {
+      var anchor, options, r, top;
+      r = this.r;
+      top = this.top;
+      options = this.options;
+      anchor = r.circle(x, y, 10).attr({
+        fill: "#000",
+        opacity: 0,
+        cursor: "pointer"
+      }).click(function() {
+        return window.open(options.commit_url.replace("%s", commit.id), "_blank");
+      }).hover(function() {
+        this.tooltip = r.commitTooltip(x + 5, y, commit);
+        return top.push(this.tooltip.insertBefore(this));
+      }, function() {
+        return this.tooltip && this.tooltip.remove() && delete this.tooltip;
+      });
+      return top.push(anchor);
+    };
+
+    BranchGraph.prototype.drawDot = function(x, y, commit) {
+      var avatar_box_x, avatar_box_y, r;
+      r = this.r;
+      r.circle(x, y, 3).attr({
+        fill: this.colors[commit.space],
+        stroke: "none"
+      });
+      avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
+      avatar_box_y = y - 10;
+      r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
+        stroke: this.colors[commit.space],
+        "stroke-width": 2
+      });
+      r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20);
+      return r.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split("\n")[0]).attr({
+        "text-anchor": "start",
+        font: "14px Monaco, monospace"
+      });
+    };
+
+    BranchGraph.prototype.drawLines = function(x, y, commit) {
+      var arrow, color, i, j, len, offset, parent, parentCommit, parentX1, parentX2, parentY, r, ref, results, route;
+      r = this.r;
+      ref = commit.parents;
+      results = [];
+      for (i = j = 0, len = ref.length; j < len; i = ++j) {
+        parent = ref[i];
+        parentCommit = this.preparedCommits[parent[0]];
+        parentY = this.offsetY + this.unitTime * parentCommit.time;
+        parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
+        parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
+        if (parentCommit.space <= commit.space) {
+          color = this.colors[commit.space];
+        } else {
+          color = this.colors[parentCommit.space];
+        }
+        if (parent[1] === commit.space) {
+          offset = [0, 5];
+          arrow = "l-2,5,4,0,-2,-5,0,5";
+        } else if (parent[1] < commit.space) {
+          offset = [3, 3];
+          arrow = "l5,0,-2,4,-3,-4,4,2";
+        } else {
+          offset = [-3, 3];
+          arrow = "l-5,0,2,4,3,-4,-4,2";
+        }
+        route = ["M", x + offset[0], y + offset[1]];
+        if (i > 0) {
+          route.push(arrow);
+        }
+        if (commit.space !== parentCommit.space || commit.space !== parent[1]) {
+          route.push("L", parentX2, y + 10, "L", parentX2, parentY - 5);
+        }
+        route.push("L", parentX1, parentY);
+        results.push(r.path(route).attr({
+          stroke: color,
+          "stroke-width": 2
+        }));
+      }
+      return results;
+    };
+
+    BranchGraph.prototype.markCommit = function(commit) {
+      var r, x, y;
+      if (commit.id === this.options.commit_id) {
+        r = this.r;
+        x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
+        y = this.offsetY + this.unitTime * commit.time;
+        r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
+          fill: "#000",
+          "fill-opacity": .5,
+          stroke: "none"
+        });
+        return this.element.scrollTop(y - this.graphHeight / 2);
+      }
+    };
+
+    return BranchGraph;
+
+  })();
+
+  Raphael.prototype.commitTooltip = function(x, y, commit) {
+    var boxHeight, boxWidth, icon, idText, messageText, nameText, rect, textSet, tooltip;
+    boxWidth = 300;
+    boxHeight = 200;
+    icon = this.image(gon.relative_url_root + commit.author.icon, x, y, 20, 20);
+    nameText = this.text(x + 25, y + 10, commit.author.name);
+    idText = this.text(x, y + 35, commit.id);
+    messageText = this.text(x, y + 50, commit.message);
+    textSet = this.set(icon, nameText, idText, messageText).attr({
+      "text-anchor": "start",
+      font: "12px Monaco, monospace"
+    });
+    nameText.attr({
+      font: "14px Arial",
+      "font-weight": "bold"
+    });
+    idText.attr({
+      fill: "#AAA"
+    });
+    this.textWrap(messageText, boxWidth - 50);
+    rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({
+      fill: "#FFF",
+      stroke: "#000",
+      "stroke-linecap": "round",
+      "stroke-width": 2
+    });
+    tooltip = this.set(rect, textSet);
+    rect.attr({
+      height: tooltip.getBBox().height + 10,
+      width: tooltip.getBBox().width + 10
+    });
+    tooltip.transform(["t", 20, 20]);
+    return tooltip;
+  };
+
+  Raphael.prototype.textWrap = function(t, width) {
+    var abc, b, content, h, j, len, letterWidth, s, word, words, x;
+    content = t.attr("text");
+    abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    t.attr({
+      text: abc
+    });
+    letterWidth = t.getBBox().width / abc.length;
+    t.attr({
+      text: content
+    });
+    words = content.split(" ");
+    x = 0;
+    s = [];
+    for (j = 0, len = words.length; j < len; j++) {
+      word = words[j];
+      if (x + (word.length * letterWidth) > width) {
+        s.push("\n");
+        x = 0;
+      }
+      x += word.length * letterWidth;
+      s.push(word + " ");
+    }
+    t.attr({
+      text: s.join("")
+    });
+    b = t.getBBox();
+    h = Math.abs(b.y2) - Math.abs(b.y) + 1;
+    return t.attr({
+      y: b.y + h
+    });
+  };
+
+}).call(this);
diff --git a/app/assets/javascripts/network/branch-graph.js.coffee b/app/assets/javascripts/network/branch-graph.js.coffee
deleted file mode 100644
index f2fd2a775a4..00000000000
--- a/app/assets/javascripts/network/branch-graph.js.coffee
+++ /dev/null
@@ -1,340 +0,0 @@
-class @BranchGraph
-  constructor: (@element, @options) ->
-    @preparedCommits = {}
-    @mtime = 0
-    @mspace = 0
-    @parents = {}
-    @colors = ["#000"]
-    @offsetX = 150
-    @offsetY = 20
-    @unitTime = 30
-    @unitSpace = 10
-    @prev_start = -1
-    @load()
-
-  load: ->
-    $.ajax
-      url: @options.url
-      method: "get"
-      dataType: "json"
-      success: $.proxy((data) ->
-        $(".loading", @element).hide()
-        @prepareData data.days, data.commits
-        @buildGraph()
-      , this)
-
-  prepareData: (@days, @commits) ->
-    @collectParents()
-    @graphHeight = $(@element).height()
-    @graphWidth = $(@element).width()
-    ch = Math.max(@graphHeight, @offsetY + @unitTime * @mtime + 150)
-    cw = Math.max(@graphWidth, @offsetX + @unitSpace * @mspace + 300)
-    @r = Raphael(@element.get(0), cw, ch)
-    @top = @r.set()
-    @barHeight = Math.max(@graphHeight, @unitTime * @days.length + 320)
-
-    for c in @commits
-      c.isParent = true  if c.id of @parents
-      @preparedCommits[c.id] = c
-      @markCommit(c)
-
-    @collectColors()
-
-  collectParents: ->
-    for c in @commits
-      @mtime = Math.max(@mtime, c.time)
-      @mspace = Math.max(@mspace, c.space)
-      for p in c.parents
-        @parents[p[0]] = true
-        @mspace = Math.max(@mspace, p[1])
-
-  collectColors: ->
-    k = 0
-    while k < @mspace
-      @colors.push Raphael.getColor(.8)
-      # Skipping a few colors in the spectrum to get more contrast between colors
-      Raphael.getColor()
-      Raphael.getColor()
-      k++
-
-  buildGraph: ->
-    r = @r
-    cuday = 0
-    cumonth = ""
-
-    r.rect(0, 0, 40, @barHeight).attr fill: "#222"
-    r.rect(40, 0, 30, @barHeight).attr fill: "#444"
-
-    for day, mm in @days
-      if cuday isnt day[0] || cumonth isnt day[1]
-        # Dates
-        r.text(55, @offsetY + @unitTime * mm, day[0])
-          .attr(
-            font: "12px Monaco, monospace"
-            fill: "#BBB"
-          )
-        cuday = day[0]
-
-      if cumonth isnt day[1]
-        # Months
-        r.text(20, @offsetY + @unitTime * mm, day[1])
-          .attr(
-            font: "12px Monaco, monospace"
-            fill: "#EEE"
-          )
-        cumonth = day[1]
-
-    @renderPartialGraph()
-
-    @bindEvents()
-
-  renderPartialGraph: ->
-    start = Math.floor((@element.scrollTop() - @offsetY) / @unitTime) - 10
-    if start < 0
-      isGraphEdge = true
-      start = 0
-    end = start + 40
-    if @commits.length < end
-      isGraphEdge = true
-      end = @commits.length
-
-    if @prev_start == -1 or Math.abs(@prev_start - start) > 10 or isGraphEdge
-      i = start
-
-      @prev_start = start
-
-      while i < end
-        commit = @commits[i]
-        i += 1
-
-        if commit.hasDrawn isnt true
-          x = @offsetX + @unitSpace * (@mspace - commit.space)
-          y = @offsetY + @unitTime * commit.time
-
-          @drawDot(x, y, commit)
-
-          @drawLines(x, y, commit)
-
-          @appendLabel(x, y, commit)
-
-          @appendAnchor(x, y, commit)
-
-          commit.hasDrawn = true
-
-      @top.toFront()
-
-  bindEvents: ->
-    element = @element
-
-    $(element).scroll (event) =>
-      @renderPartialGraph()
-
-  scrollDown: =>
-    @element.scrollTop @element.scrollTop() + 50
-    @renderPartialGraph()
-
-  scrollUp: =>
-    @element.scrollTop @element.scrollTop() - 50
-    @renderPartialGraph()
-
-  scrollLeft: =>
-    @element.scrollLeft @element.scrollLeft() - 50
-    @renderPartialGraph()
-
-  scrollRight: =>
-    @element.scrollLeft @element.scrollLeft() + 50
-    @renderPartialGraph()
-
-  scrollBottom: =>
-    @element.scrollTop @element.find('svg').height()
-
-  scrollTop: =>
-    @element.scrollTop 0
-
-  appendLabel: (x, y, commit) ->
-    return unless commit.refs
-
-    r = @r
-    shortrefs = commit.refs
-    # Truncate if longer than 15 chars
-    shortrefs = shortrefs.substr(0, 15) + "…"  if shortrefs.length > 17
-    text = r.text(x + 4, y, shortrefs).attr(
-      "text-anchor": "start"
-      font: "10px Monaco, monospace"
-      fill: "#FFF"
-      title: commit.refs
-    )
-    textbox = text.getBBox()
-    # Create rectangle based on the size of the textbox
-    rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr(
-      fill: "#000"
-      "fill-opacity": .5
-      stroke: "none"
-    )
-    triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr(
-      fill: "#000"
-      "fill-opacity": .5
-      stroke: "none"
-    )
-
-    label = r.set(rect, text)
-    label.transform(["t", -rect.getBBox().width - 15, 0])
-
-    # Set text to front
-    text.toFront()
-
-  appendAnchor: (x, y, commit) ->
-    r = @r
-    top = @top
-    options = @options
-    anchor = r.circle(x, y, 10).attr(
-      fill: "#000"
-      opacity: 0
-      cursor: "pointer"
-    ).click(->
-      window.open options.commit_url.replace("%s", commit.id), "_blank"
-    ).hover(->
-      @tooltip = r.commitTooltip(x + 5, y, commit)
-      top.push @tooltip.insertBefore(this)
-    , ->
-      @tooltip and @tooltip.remove() and delete @tooltip
-    )
-    top.push anchor
-
-  drawDot: (x, y, commit) ->
-    r = @r
-    r.circle(x, y, 3).attr(
-      fill: @colors[commit.space]
-      stroke: "none"
-    )
-
-    avatar_box_x = @offsetX + @unitSpace * @mspace + 10
-    avatar_box_y = y - 10
-    r.rect(avatar_box_x, avatar_box_y, 20, 20).attr(
-      stroke: @colors[commit.space]
-      "stroke-width": 2
-    )
-    r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20)
-    r.text(@offsetX + @unitSpace * @mspace + 35, y, commit.message.split("\n")[0]).attr(
-      "text-anchor": "start"
-      font: "14px Monaco, monospace"
-    )
-
-  drawLines: (x, y, commit) ->
-    r = @r
-    for parent, i in commit.parents
-      parentCommit = @preparedCommits[parent[0]]
-      parentY = @offsetY + @unitTime * parentCommit.time
-      parentX1 = @offsetX + @unitSpace * (@mspace - parentCommit.space)
-      parentX2 = @offsetX + @unitSpace * (@mspace - parent[1])
-
-      # Set line color
-      if parentCommit.space <= commit.space
-        color = @colors[commit.space]
-
-      else
-        color = @colors[parentCommit.space]
-
-      # Build line shape
-      if parent[1] is commit.space
-        offset = [0, 5]
-        arrow = "l-2,5,4,0,-2,-5,0,5"
-
-      else if parent[1] < commit.space
-        offset = [3, 3]
-        arrow = "l5,0,-2,4,-3,-4,4,2"
-
-      else
-        offset = [-3, 3]
-        arrow = "l-5,0,2,4,3,-4,-4,2"
-
-      # Start point
-      route = ["M", x + offset[0], y + offset[1]]
-
-      # Add arrow if not first parent
-      if i > 0
-        route.push(arrow)
-
-      # Circumvent if overlap
-      if commit.space isnt parentCommit.space or commit.space isnt parent[1]
-        route.push(
-          "L", parentX2, y + 10,
-          "L", parentX2, parentY - 5,
-        )
-
-      # End point
-      route.push("L", parentX1, parentY)
-
-      r
-        .path(route)
-        .attr(
-          stroke: color
-          "stroke-width": 2)
-
-  markCommit: (commit) ->
-    if commit.id is @options.commit_id
-      r = @r
-      x = @offsetX + @unitSpace * (@mspace - commit.space)
-      y = @offsetY + @unitTime * commit.time
-      r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr(
-        fill: "#000"
-        "fill-opacity": .5
-        stroke: "none"
-      )
-      # Displayed in the center
-      @element.scrollTop(y - @graphHeight / 2)
-
-Raphael::commitTooltip = (x, y, commit) ->
-  boxWidth = 300
-  boxHeight = 200
-  icon = @image(gon.relative_url_root + commit.author.icon, x, y, 20, 20)
-  nameText = @text(x + 25, y + 10, commit.author.name)
-  idText = @text(x, y + 35, commit.id)
-  messageText = @text(x, y + 50, commit.message)
-  textSet = @set(icon, nameText, idText, messageText).attr(
-    "text-anchor": "start"
-    font: "12px Monaco, monospace"
-  )
-  nameText.attr(
-    font: "14px Arial"
-    "font-weight": "bold"
-  )
-
-  idText.attr fill: "#AAA"
-  @textWrap messageText, boxWidth - 50
-  rect = @rect(x - 10, y - 10, boxWidth, 100, 4).attr(
-    fill: "#FFF"
-    stroke: "#000"
-    "stroke-linecap": "round"
-    "stroke-width": 2
-  )
-  tooltip = @set(rect, textSet)
-  rect.attr(
-    height: tooltip.getBBox().height + 10
-    width: tooltip.getBBox().width + 10
-  )
-
-  tooltip.transform ["t", 20, 20]
-  tooltip
-
-Raphael::textWrap = (t, width) ->
-  content = t.attr("text")
-  abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
-  t.attr text: abc
-  letterWidth = t.getBBox().width / abc.length
-  t.attr text: content
-  words = content.split(" ")
-  x = 0
-  s = []
-
-  for word in words
-    if x + (word.length * letterWidth) > width
-      s.push "\n"
-      x = 0
-    x += word.length * letterWidth
-    s.push word + " "
-
-  t.attr text: s.join("")
-  b = t.getBBox()
-  h = Math.abs(b.y2) - Math.abs(b.y) + 1
-  t.attr y: b.y + h
diff --git a/app/assets/javascripts/network/network.js b/app/assets/javascripts/network/network.js
new file mode 100644
index 00000000000..7baebcd100a
--- /dev/null
+++ b/app/assets/javascripts/network/network.js
@@ -0,0 +1,19 @@
+(function() {
+  this.Network = (function() {
+    function Network(opts) {
+      var vph;
+      $("#filter_ref").click(function() {
+        return $(this).closest('form').submit();
+      });
+      this.branch_graph = new BranchGraph($(".network-graph"), opts);
+      vph = $(window).height() - 250;
+      $('.network-graph').css({
+        'height': vph + 'px'
+      });
+    }
+
+    return Network;
+
+  })();
+
+}).call(this);
diff --git a/app/assets/javascripts/network/network.js.coffee b/app/assets/javascripts/network/network.js.coffee
deleted file mode 100644
index f4ef07a50a7..00000000000
--- a/app/assets/javascripts/network/network.js.coffee
+++ /dev/null
@@ -1,9 +0,0 @@
-class @Network
-  constructor: (opts) ->
-    $("#filter_ref").click ->
-      $(this).closest('form').submit()
-
-    @branch_graph = new BranchGraph($(".network-graph"), opts)
-
-    vph = $(window).height() - 250
-    $('.network-graph').css 'height': (vph + 'px')
diff --git a/app/assets/javascripts/network/network_bundle.js b/app/assets/javascripts/network/network_bundle.js
new file mode 100644
index 00000000000..6a7422a7755
--- /dev/null
+++ b/app/assets/javascripts/network/network_bundle.js
@@ -0,0 +1,16 @@
+
+/*= require_tree . */
+
+(function() {
+  $(function() {
+    var network_graph;
+    network_graph = new Network({
+      url: $(".network-graph").attr('data-url'),
+      commit_url: $(".network-graph").attr('data-commit-url'),
+      ref: $(".network-graph").attr('data-ref'),
+      commit_id: $(".network-graph").attr('data-commit-id')
+    });
+    return new ShortcutsNetwork(network_graph.branch_graph);
+  });
+
+}).call(this);
diff --git a/app/assets/javascripts/network/network_bundle.js.coffee b/app/assets/javascripts/network/network_bundle.js.coffee
deleted file mode 100644
index f75f63869c5..00000000000
--- a/app/assets/javascripts/network/network_bundle.js.coffee
+++ /dev/null
@@ -1,17 +0,0 @@
-# This is a manifest file that'll be compiled into including all the files listed below.
-# Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
-# be included in the compiled file accessible from http://example.com/assets/application.js
-# It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-# the compiled file.
-#
-#= require_tree .
-
-$ ->
-  network_graph = new Network({
-    url: $(".network-graph").attr('data-url'),
-    commit_url: $(".network-graph").attr('data-commit-url'),
-    ref: $(".network-graph").attr('data-ref'),
-    commit_id: $(".network-graph").attr('data-commit-id')
-  })
-
-  new ShortcutsNetwork(network_graph.branch_graph)