Added TOC button

css/default.css

@@ -249,14 +249,28 @@ input[readonly],select[readonly],textarea[readonly] {
     border-bottom-right-radius: 4px;
 }
 
-#markdown-syntax {
-	max-height: 300px;
+.markdown-syntax, .table-of-contents {
     overflow-y: auto;
     overflow-x: hidden;
     padding-right: 20px;
     margin: 0 -20px 10px 0;
+}
+
+.markdown-syntax {
     width: 300px;
     white-space: normal;
+    max-height: 350px;
+}
+
+.table-of-contents {
+	width: 250px;
+	margin-left: -10px;
+    max-height: 400px;
+}
+
+.table-of-contents ul {
+    margin-left: 10px;
+    margin-bottom: 10px;
 }
 
 .btn-group>.btn+.dropdown-toggle {

js/extensionMgr.js

@@ -6,13 +6,6 @@ define([
     "settings",
     "text!html/settingsExtensionsAccordion.html",
     "extensions/googleAnalytics",
-    "extensions/buttonSync",
-    "extensions/buttonPublish",
-    "extensions/buttonShare",
-    "extensions/buttonStat",
-    "extensions/buttonHtmlCode",
-    "extensions/buttonMarkdownSyntax",
-    "extensions/buttonViewer",
     "extensions/dialogAbout",
     "extensions/dialogManagePublication",
     "extensions/dialogManageSynchronization",
@@ -27,6 +20,13 @@ define([
     "extensions/mathJax",
     "extensions/emailConverter",
     "extensions/scrollLink",
+    "extensions/buttonSync",
+    "extensions/buttonPublish",
+    "extensions/buttonShare",
+    "extensions/buttonStat",
+    "extensions/buttonHtmlCode",
+    "extensions/buttonMarkdownSyntax",
+    "extensions/buttonViewer",
     "libs/bootstrap",
     "libs/jquery.waitforimages"
 ], function($, _, utils, Extension, settings, settingsExtensionsAccordionHTML) {

js/extensions/toc.js

@@ -3,21 +3,31 @@ define([
     "underscore",
     "utils",
     "classes/Extension",
+    "text!html/buttonToc.html",
     "text!html/tocSettingsBlock.html",
-], function($, _, utils, Extension, tocSettingsBlockHTML) {
+], function($, _, utils, Extension, buttonTocHTML, tocSettingsBlockHTML) {
 
-    var toc = new Extension("toc", "Markdown Table of Content", true);
+    var toc = new Extension("toc", "Table of Contents", true);
     toc.settingsBlock = tocSettingsBlockHTML;
     toc.defaultConfig = {
-        marker: "\\[(TOC|toc)\\]"
+        marker: "\\[(TOC|toc)\\]",
+        button: true,
     };
 
     toc.onLoadSettings = function() {
         utils.setInputValue("#input-toc-marker", toc.config.marker);
+        utils.setInputChecked("#input-toc-button", toc.config.button);
     };
 
     toc.onSaveSettings = function(newConfig, event) {
         newConfig.marker = utils.getInputRegExpValue("#input-toc-marker", event);
+        newConfig.button = utils.getInputChecked("#input-toc-button");
+    };
+
+    toc.onCreatePreviewButton = function() {
+        if(toc.config.button) {
+            return $(buttonTocHTML);
+        }
     };
 
     // TOC element description
@@ -31,11 +41,11 @@ define([
         if(this.children.length === 0) {
             return "";
         }
-        var result = "<ul>";
+        var result = "<ul>\n";
         _.each(this.children, function(child) {
             result += child.toString();
         });
-        result += "</ul>";
+        result += "</ul>\n";
         return result;
     };
     TocElement.prototype.toString = function() {
@@ -43,7 +53,7 @@ define([
         if(this.anchor && this.text) {
             result += '<a href="#' + this.anchor + '">' + this.text + '</a>';
         }
-        result += this.childrenToString() + "</li>";
+        result += this.childrenToString() + "</li>\n";
         return result;
     };
 
@@ -96,11 +106,11 @@ define([
         }
 
         var elementList = [];
-        $("#wmd-preview > h1," + "#wmd-preview > h2," + "#wmd-preview > h3," + "#wmd-preview > h4," + "#wmd-preview > h5," + "#wmd-preview > h6").each(function() {
+        $("#wmd-preview").children("h1, h2, h3, h4, h5, h6").each(function() {
             elementList.push(new TocElement($(this).prop("tagName"), createAnchor($(this)), $(this).text()));
         });
         elementList = groupTags(elementList);
-        return '<div class="toc"><ul>' + elementList.toString() + '</ul></div>';
+        return '<div class="toc">\n<ul>\n' + elementList.join("") + '</ul>\n</div>\n';
     }
 
     toc.onEditorConfigure = function(editor) {
@@ -110,6 +120,7 @@ define([
             var html = $("#wmd-preview").html();
             html = html.replace(new RegExp("<p>" + toc.config.marker + "<\\/p>", "g"), htmlToc);
             $("#wmd-preview").html(html);
+            $(".table-of-contents").html(htmlToc);
         });
     };
 

js/html/buttonMarkdownSyntax.html

@@ -3,7 +3,7 @@
 </button>
 <div class="dropdown-menu pull-right">
 	<h3>Markdown syntax</h3>
-	<div id="markdown-syntax">
+	<div class="markdown-syntax">
 <h4>Phrase Emphasis</h4>
 
 <pre><code>*italic*   **bold**

js/html/buttonToc.html

@@ -0,0 +1,8 @@
+<button class="btn dropdown-toggle" title="Table of contents">
+    <i class="icon-th-list"></i>
+</button>
+<div class="dropdown-menu pull-right">
+    <h3>Table of contents</h3>
+    <div class="table-of-contents">
+    </div>
+</div>

js/html/tocSettingsBlock.html

@@ -1,4 +1,4 @@
-<p>Generates a table of content when a [TOC] marker is found.</p>
+<p>Generates a table of contents when a [TOC] marker is found.</p>
 <div class="form-horizontal">
 	<div class="control-group">
 		<label class="control-label" for="input-toc-marker">Marker
@@ -7,4 +7,11 @@
 			<input type="text" id="input-toc-marker" class="span2">
 		</div>
 	</div>
+	<div class="control-group">
+        <label class="control-label" for="input-toc-button">Button over preview</label>
+        <div class="controls">
+            <input type="checkbox" id="input-toc-button">
+        </div>
+    </div>
+	
 </div>

themes/night/night.css

@@ -91,7 +91,7 @@ blockquote {
 #extension-preview-buttons .dropdown-menu,
 #extension-preview-buttons .btn-group.open .btn,
 #extension-preview-buttons .btn-group.open:hover .btn {
-	background-color: #555;
+	background-color: #444;
 }
 
 .btn:hover {