Add the ability to collapse nodes in the outline for XML.

main.js

@@ -85,6 +85,7 @@ define(function (require, exports, module) {
             var $entry = $(document.createElement("li"));
             $entry.addClass("outline-entry");
             $entry.addClass(entry.classes);
+            $entry.attr("id", entry.id);
             $entry.append(entry.$html);
             $entry.click({
                 line: entry.line,

src/languages/XML.js

@@ -7,12 +7,16 @@ define(function (require, exports, module) {
         var $elements = [];
         if (indent) {
             var $indentation = $(document.createElement("span"));
-            $indentation.addClass("outline-entry-indent");
             var interpunct = "";
             for (var i = 0; i < indent; i++) {
                 interpunct += "·";
             }
-            $indentation.text(interpunct);
+            $indentation.addClass("outline-entry-indent open")
+                .text(interpunct)
+                .attr("data-indent", indent)
+                .click(function(){
+                    _controlCollapse(this, indent);
+                });
             $elements.push($indentation);
         }
         if (namespace) {
@@ -39,6 +43,26 @@ define(function (require, exports, module) {
         };
     }
 
+    function _controlCollapse(el, indent) {
+        // Collapse the child nodes when this node is clicked.
+        var indentElementParent = $(el).parent();
+        var nextParent = indentElementParent.next();
+        // Look at all subsequent nodes with a greater indent than the current node
+        // to see if they should be hidden or shown.
+        while (Number(nextParent.children(".outline-entry-indent").attr("data-indent")) > indent ){
+            if(nextParent.attr("data-closed-by") === indentElementParent[0].id){
+                nextParent.removeAttr("data-closed-by");
+                indentElementParent.children(".outline-entry-indent.closed").addClass("open").removeClass("closed");
+                nextParent.show();
+            } else if(nextParent.attr("data-closed-by") === undefined) {
+                nextParent.attr("data-closed-by", indentElementParent[0].id);
+                indentElementParent.children(".outline-entry-indent.open").addClass("closed").removeClass("open");
+                nextParent.hide();
+            }
+            nextParent = nextParent.next();
+        }
+    }
+
     function _getIndentationLevel(whitespace) {
         if (!whitespace) {
             return 0;
@@ -62,9 +86,11 @@ define(function (require, exports, module) {
         var lines = text.split("\n");
         var regex = /^(\s*)<([\w]+:)?([\w.:-]+)(?:[^>]*?(id|class)=["']([\w- ]+)["'])?/g;
         var result = [];
+        var idCounter = 0;
         lines.forEach(function (line, index) {
             var match = regex.exec(line);
             while (match !== null) {
+                idCounter += 1;
                 var whitespace = match[1];
                 var namespace = showArguments ? (match[2] || "").trim() : "";
                 var name = match[3].trim();
@@ -73,6 +99,9 @@ define(function (require, exports, module) {
                 var entry = _createListEntry(namespace, name, type, args, _getIndentationLevel(whitespace));
                 entry.line = index;
                 entry.ch = line.length;
+                // Add an id so the collapse can mark the collapsed nodes and so control
+                // what can reopen them.
+                entry.id = "ListEntry" + idCounter.toString();
                 result.push(entry);
                 match = regex.exec(line);
             }

styles/styles.css

@@ -392,3 +392,13 @@
 .outline-entry-xml-class {
     color: #adb9bd;
 }
+
+.outline-entry-indent.open:before {
+    content: "\f30f";
+    font-family: Ionicons;
+}
+
+.outline-entry-indent.closed:before {
+    content: "\f366";
+    font-family: Ionicons;
+}