From 1d1d38a6e539c8bae9de25994121f0a5330a758f Mon Sep 17 00:00:00 2001 From: burtnoir Date: Mon, 15 Feb 2016 21:29:21 -0500 Subject: [PATCH 1/3] Add the ability to collapse nodes in the outline for XML. --- main.js | 1 + src/languages/XML.js | 37 ++++++++++++++++++++++++++++--------- styles/styles.css | 10 ++++++++++ 3 files changed, 39 insertions(+), 9 deletions(-) diff --git a/main.js b/main.js index 8d6109f..2d106f3 100644 --- a/main.js +++ b/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, diff --git a/src/languages/XML.js b/src/languages/XML.js index a3eaf2b..ff0a3a5 100644 --- a/src/languages/XML.js +++ b/src/languages/XML.js @@ -7,12 +7,32 @@ 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(){ + // Collapse the child nodes when this node is clicked. + var indentElementParent = $(this).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(); + } + }); $elements.push($indentation); } if (namespace) { @@ -43,13 +63,7 @@ define(function (require, exports, module) { if (!whitespace) { return 0; } - var indentSize = Editor.getUseTabChar() ? Editor.getTabSize() : Editor.getSpaceUnits(); - var tmpSpaces = ""; - for (var i = 0; i < indentSize; i++) { - tmpSpaces += " "; - } - whitespace = whitespace.replace(/\t/g, tmpSpaces); - return (whitespace.length / indentSize) | 0; + return whitespace.length; } /** @@ -62,9 +76,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 = idCounter + 1; var whitespace = match[1]; var namespace = showArguments ? (match[2] || "").trim() : ""; var name = match[3].trim(); @@ -73,6 +89,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); } diff --git a/styles/styles.css b/styles/styles.css index 5c71aef..e381221 100644 --- a/styles/styles.css +++ b/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; +} From b3dbec92fce601681385372bf054dbd9b8744160 Mon Sep 17 00:00:00 2001 From: burtnoir Date: Wed, 17 Feb 2016 00:06:42 -0500 Subject: [PATCH 2/3] Corrected some indentation and separated an inlined function into its own function. --- src/languages/XML.js | 42 +++++++++++++++++++++++------------------- styles/styles.css | 8 ++++---- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/src/languages/XML.js b/src/languages/XML.js index ff0a3a5..3b0940f 100644 --- a/src/languages/XML.js +++ b/src/languages/XML.js @@ -15,23 +15,7 @@ define(function (require, exports, module) { .text(interpunct) .attr("data-indent", indent) .click(function(){ - // Collapse the child nodes when this node is clicked. - var indentElementParent = $(this).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(); - } + _controlCollapse(this, indent); }); $elements.push($indentation); } @@ -59,11 +43,31 @@ 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; } - return whitespace.length; + return whitespace.length; } /** @@ -80,7 +84,7 @@ define(function (require, exports, module) { lines.forEach(function (line, index) { var match = regex.exec(line); while (match !== null) { - idCounter = idCounter + 1; + idCounter += 1; var whitespace = match[1]; var namespace = showArguments ? (match[2] || "").trim() : ""; var name = match[3].trim(); diff --git a/styles/styles.css b/styles/styles.css index e381221..726d49c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -394,11 +394,11 @@ } .outline-entry-indent.open:before { - content: "\f30f"; - font-family: Ionicons; + content: "\f30f"; + font-family: Ionicons; } .outline-entry-indent.closed:before { - content: "\f366"; - font-family: Ionicons; + content: "\f366"; + font-family: Ionicons; } From efc04dd6f4261d03d6bcd4619efa026dec5569df Mon Sep 17 00:00:00 2001 From: burtnoir Date: Wed, 17 Feb 2016 21:03:43 -0500 Subject: [PATCH 3/3] Restore the whitespace calculation to its original form. --- src/languages/XML.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/languages/XML.js b/src/languages/XML.js index 3b0940f..6c89af0 100644 --- a/src/languages/XML.js +++ b/src/languages/XML.js @@ -67,7 +67,13 @@ define(function (require, exports, module) { if (!whitespace) { return 0; } - return whitespace.length; + var indentSize = Editor.getUseTabChar() ? Editor.getTabSize() : Editor.getSpaceUnits(); + var tmpSpaces = ""; + for (var i = 0; i < indentSize; i++) { + tmpSpaces += " "; + } + whitespace = whitespace.replace(/\t/g, tmpSpaces); + return (whitespace.length / indentSize) | 0; } /**