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;
|
border-bottom-right-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#markdown-syntax {
|
.markdown-syntax, .table-of-contents {
|
||||||
max-height: 300px;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
margin: 0 -20px 10px 0;
|
margin: 0 -20px 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-syntax {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
white-space: normal;
|
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 {
|
.btn-group>.btn+.dropdown-toggle {
|
||||||
|
@ -6,13 +6,6 @@ define([
|
|||||||
"settings",
|
"settings",
|
||||||
"text!html/settingsExtensionsAccordion.html",
|
"text!html/settingsExtensionsAccordion.html",
|
||||||
"extensions/googleAnalytics",
|
"extensions/googleAnalytics",
|
||||||
"extensions/buttonSync",
|
|
||||||
"extensions/buttonPublish",
|
|
||||||
"extensions/buttonShare",
|
|
||||||
"extensions/buttonStat",
|
|
||||||
"extensions/buttonHtmlCode",
|
|
||||||
"extensions/buttonMarkdownSyntax",
|
|
||||||
"extensions/buttonViewer",
|
|
||||||
"extensions/dialogAbout",
|
"extensions/dialogAbout",
|
||||||
"extensions/dialogManagePublication",
|
"extensions/dialogManagePublication",
|
||||||
"extensions/dialogManageSynchronization",
|
"extensions/dialogManageSynchronization",
|
||||||
@ -27,6 +20,13 @@ define([
|
|||||||
"extensions/mathJax",
|
"extensions/mathJax",
|
||||||
"extensions/emailConverter",
|
"extensions/emailConverter",
|
||||||
"extensions/scrollLink",
|
"extensions/scrollLink",
|
||||||
|
"extensions/buttonSync",
|
||||||
|
"extensions/buttonPublish",
|
||||||
|
"extensions/buttonShare",
|
||||||
|
"extensions/buttonStat",
|
||||||
|
"extensions/buttonHtmlCode",
|
||||||
|
"extensions/buttonMarkdownSyntax",
|
||||||
|
"extensions/buttonViewer",
|
||||||
"libs/bootstrap",
|
"libs/bootstrap",
|
||||||
"libs/jquery.waitforimages"
|
"libs/jquery.waitforimages"
|
||||||
], function($, _, utils, Extension, settings, settingsExtensionsAccordionHTML) {
|
], function($, _, utils, Extension, settings, settingsExtensionsAccordionHTML) {
|
||||||
|
@ -3,21 +3,31 @@ define([
|
|||||||
"underscore",
|
"underscore",
|
||||||
"utils",
|
"utils",
|
||||||
"classes/Extension",
|
"classes/Extension",
|
||||||
|
"text!html/buttonToc.html",
|
||||||
"text!html/tocSettingsBlock.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.settingsBlock = tocSettingsBlockHTML;
|
||||||
toc.defaultConfig = {
|
toc.defaultConfig = {
|
||||||
marker: "\\[(TOC|toc)\\]"
|
marker: "\\[(TOC|toc)\\]",
|
||||||
|
button: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
toc.onLoadSettings = function() {
|
toc.onLoadSettings = function() {
|
||||||
utils.setInputValue("#input-toc-marker", toc.config.marker);
|
utils.setInputValue("#input-toc-marker", toc.config.marker);
|
||||||
|
utils.setInputChecked("#input-toc-button", toc.config.button);
|
||||||
};
|
};
|
||||||
|
|
||||||
toc.onSaveSettings = function(newConfig, event) {
|
toc.onSaveSettings = function(newConfig, event) {
|
||||||
newConfig.marker = utils.getInputRegExpValue("#input-toc-marker", 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
|
// TOC element description
|
||||||
@ -31,11 +41,11 @@ define([
|
|||||||
if(this.children.length === 0) {
|
if(this.children.length === 0) {
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
var result = "<ul>";
|
var result = "<ul>\n";
|
||||||
_.each(this.children, function(child) {
|
_.each(this.children, function(child) {
|
||||||
result += child.toString();
|
result += child.toString();
|
||||||
});
|
});
|
||||||
result += "</ul>";
|
result += "</ul>\n";
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
TocElement.prototype.toString = function() {
|
TocElement.prototype.toString = function() {
|
||||||
@ -43,7 +53,7 @@ define([
|
|||||||
if(this.anchor && this.text) {
|
if(this.anchor && this.text) {
|
||||||
result += '<a href="#' + this.anchor + '">' + this.text + '</a>';
|
result += '<a href="#' + this.anchor + '">' + this.text + '</a>';
|
||||||
}
|
}
|
||||||
result += this.childrenToString() + "</li>";
|
result += this.childrenToString() + "</li>\n";
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -96,11 +106,11 @@ define([
|
|||||||
}
|
}
|
||||||
|
|
||||||
var elementList = [];
|
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.push(new TocElement($(this).prop("tagName"), createAnchor($(this)), $(this).text()));
|
||||||
});
|
});
|
||||||
elementList = groupTags(elementList);
|
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) {
|
toc.onEditorConfigure = function(editor) {
|
||||||
@ -110,6 +120,7 @@ define([
|
|||||||
var html = $("#wmd-preview").html();
|
var html = $("#wmd-preview").html();
|
||||||
html = html.replace(new RegExp("<p>" + toc.config.marker + "<\\/p>", "g"), htmlToc);
|
html = html.replace(new RegExp("<p>" + toc.config.marker + "<\\/p>", "g"), htmlToc);
|
||||||
$("#wmd-preview").html(html);
|
$("#wmd-preview").html(html);
|
||||||
|
$(".table-of-contents").html(htmlToc);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<div class="dropdown-menu pull-right">
|
<div class="dropdown-menu pull-right">
|
||||||
<h3>Markdown syntax</h3>
|
<h3>Markdown syntax</h3>
|
||||||
<div id="markdown-syntax">
|
<div class="markdown-syntax">
|
||||||
<h4>Phrase Emphasis</h4>
|
<h4>Phrase Emphasis</h4>
|
||||||
|
|
||||||
<pre><code>*italic* **bold**
|
<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="form-horizontal">
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label class="control-label" for="input-toc-marker">Marker
|
<label class="control-label" for="input-toc-marker">Marker
|
||||||
@ -7,4 +7,11 @@
|
|||||||
<input type="text" id="input-toc-marker" class="span2">
|
<input type="text" id="input-toc-marker" class="span2">
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
@ -91,7 +91,7 @@ blockquote {
|
|||||||
#extension-preview-buttons .dropdown-menu,
|
#extension-preview-buttons .dropdown-menu,
|
||||||
#extension-preview-buttons .btn-group.open .btn,
|
#extension-preview-buttons .btn-group.open .btn,
|
||||||
#extension-preview-buttons .btn-group.open:hover .btn {
|
#extension-preview-buttons .btn-group.open:hover .btn {
|
||||||
background-color: #555;
|
background-color: #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
|
Loading…
Reference in New Issue
Block a user