Added TOC button
This commit is contained in:
parent
86fce00c08
commit
cf71c5c1fe
@ -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 {
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -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**
|
||||
|
8
js/html/buttonToc.html
Normal file
8
js/html/buttonToc.html
Normal file
@ -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>
|
@ -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>
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user