Added a table of content as bbcode element [toc] for webpages
- Included jquery.toc.js (http://www.apache.org/licenses/LICENSE-2.0) - Modified jquery.toc.js to work with the webpages of the red#matrix - Added info to the help
This commit is contained in:
parent
43b877caa1
commit
09129cbe5f
@ -65,7 +65,8 @@
|
||||
|
||||
<li>[rpost=title]Text to post[/rpost] The observer will be returned to their home hub to enter a post with the specified title and body. Both are optional <br />
|
||||
<li>[qr]text to post[/qr] - create a QR code.<br />
|
||||
<br />
|
||||
<li>[toc] - create a table of content in a webpage (level h1,...,h4).<br />
|
||||
<br /><br />
|
||||
</ul>
|
||||
|
||||
<p>These require a suitable map plugin/addon such as openstreetmap or else the result will be blank</p>
|
||||
|
@ -575,7 +575,7 @@ function bbcode($Text,$preserve_nl = false, $tryoembed = true) {
|
||||
if (strpos($Text,'[h6]') !== false) {
|
||||
$Text = preg_replace("(\[h6\](.*?)\[\/h6\])ism",'<h6>$1</h6>',$Text);
|
||||
}
|
||||
// Check for h6
|
||||
// Check for table of content
|
||||
if (strpos($Text,'[toc]') !== false) {
|
||||
$Text = preg_replace("/\[toc\]/ism",'<ul id="toc"></ul>',$Text);
|
||||
}
|
||||
|
@ -1,191 +0,0 @@
|
||||
/*
|
||||
TableOfContents Plugin for jQuery (by Doug Neiner)
|
||||
|
||||
Version: 0.8
|
||||
|
||||
Based on code and concept by Janko Jovanovic
|
||||
in his article: http://www.jankoatwarpspeed.com/post/2009/08/20/Table-of-contents-using-jQuery.aspx
|
||||
|
||||
This plugin is offered under the MIT license.
|
||||
(c) 2009 by Doug Neiner, http://dougneiner.com
|
||||
|
||||
Iclude in html like this (just an example)
|
||||
<pre>
|
||||
---
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="jquery.tableofcontents.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function(){ $("#toc").tableOfContents(); });
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ul id="toc"></ul>
|
||||
...
|
||||
</pre>
|
||||
*/
|
||||
(function($) {
|
||||
$.TableOfContents = function(el, scope, options) {
|
||||
var base = this;
|
||||
base.$el = $(el);
|
||||
base.el = el;
|
||||
base.toc = "";
|
||||
base.listStyle = null;
|
||||
base.tags = [ "h1", "h2", "h3", "h4", "h5", "h6" ];
|
||||
base.init = function() {
|
||||
base.options = $.extend({}, $.TableOfContents.defaultOptions,
|
||||
options);
|
||||
if (typeof (scope) == "undefined" || scope == null)
|
||||
scope = document.body;
|
||||
base.$scope = $(scope);
|
||||
var $first = base.$scope.find(base.tags.join(', '))
|
||||
.filter(':first');
|
||||
if ($first.length != 1)
|
||||
return;
|
||||
base.starting_depth = base.options.startLevel;
|
||||
if (base.options.depth < 1)
|
||||
base.options.depth = 1;
|
||||
var filtered_tags = base.tags.splice(base.options.startLevel - 1,
|
||||
base.options.depth);
|
||||
base.$headings = base.$scope.find(filtered_tags.join(', '));
|
||||
if (base.options.topLinks !== false) {
|
||||
var id = $(document.body).attr('id');
|
||||
if (id == "") {
|
||||
id = base.options.topBodyId;
|
||||
document.body.id = id
|
||||
}
|
||||
;
|
||||
base.topLinkId = id
|
||||
}
|
||||
;
|
||||
if (base.$el.is('ul')) {
|
||||
base.listStyle = 'ul'
|
||||
} else if (base.$el.is('ol')) {
|
||||
base.listStyle = 'ol'
|
||||
}
|
||||
;
|
||||
base.buildTOC();
|
||||
if (base.options.proportionateSpacing === true
|
||||
&& !base.tieredList()) {
|
||||
base.addSpacing()
|
||||
}
|
||||
;
|
||||
return base
|
||||
};
|
||||
base.tieredList = function() {
|
||||
return (base.listStyle == 'ul' || base.listStyle == 'ol')
|
||||
};
|
||||
base.buildTOC = function() {
|
||||
base.current_depth = base.starting_depth;
|
||||
base.$headings.each(function(i, element) {
|
||||
var depth = this.nodeName.toLowerCase().substr(1, 1);
|
||||
if (i > 0 || (i == 0 && depth != base.current_depth)) {
|
||||
base.changeDepth(depth)
|
||||
}
|
||||
;
|
||||
base.toc += base.formatLink(this, depth, i) + "\n";
|
||||
if (base.options.topLinks !== false)
|
||||
base.addTopLink(this)
|
||||
});
|
||||
base.changeDepth(base.starting_depth, true);
|
||||
if (base.tieredList())
|
||||
base.toc = "<li>\n" + base.toc + "</li>\n";
|
||||
base.$el.html(base.toc)
|
||||
};
|
||||
base.addTopLink = function(element) {
|
||||
var text = (base.options.topLinks === true ? "Top"
|
||||
: base.options.topLinks);
|
||||
var $a = $(
|
||||
"<a href='#" + base.topLinkId + "' class='"
|
||||
+ base.options.topLinkClass + "'></a>").html(text);
|
||||
$(element).append($a)
|
||||
};
|
||||
base.formatLink = function(element, depth, index) {
|
||||
var id = element.id;
|
||||
if (id == "") {
|
||||
id = base.buildSlug($(element).text());
|
||||
element.id = id
|
||||
}
|
||||
;
|
||||
var a = "<a href='#" + id + "'";
|
||||
if (!base.tieredList())
|
||||
a += " class='" + base.depthClass(depth) + "'";
|
||||
a += ">" + base.options.levelText.replace('%', $(element).text())
|
||||
+ '</a>';
|
||||
return a
|
||||
};
|
||||
base.changeDepth = function(new_depth, last) {
|
||||
if (last !== true)
|
||||
last = false;
|
||||
if (!base.tieredList()) {
|
||||
base.current_depth = new_depth;
|
||||
return true
|
||||
}
|
||||
;
|
||||
if (new_depth > base.current_depth) {
|
||||
var opening_tags = [];
|
||||
for ( var i = base.current_depth; i < new_depth; i++) {
|
||||
opening_tags.push('<' + base.listStyle + '>' + "\n")
|
||||
}
|
||||
;
|
||||
var li = "<li>\n";
|
||||
base.toc += opening_tags.join(li) + li
|
||||
} else if (new_depth < base.current_depth) {
|
||||
var closing_tags = [];
|
||||
for ( var i = base.current_depth; i > new_depth; i--) {
|
||||
closing_tags.push('</' + base.listStyle + '>' + "\n")
|
||||
}
|
||||
;
|
||||
base.toc += "</li>\n" + closing_tags.join('</li>' + "\n");
|
||||
if (!last) {
|
||||
base.toc += "</li>\n<li>\n"
|
||||
}
|
||||
} else {
|
||||
if (!last) {
|
||||
base.toc += "</li>\n<li>\n"
|
||||
}
|
||||
}
|
||||
;
|
||||
base.current_depth = new_depth
|
||||
};
|
||||
base.buildSlug = function(text) {
|
||||
text = text.toLowerCase().replace(/[^a-z0-9 -]/gi, '').replace(
|
||||
/ /gi, '-');
|
||||
text = text.substr(0, 50);
|
||||
return text
|
||||
};
|
||||
base.depthClass = function(depth) {
|
||||
return base.options.levelClass.replace('%',
|
||||
(depth - (base.starting_depth - 1)))
|
||||
};
|
||||
base.addSpacing = function() {
|
||||
var start = base.$headings.filter(':first').position().top;
|
||||
base.$headings.each(function(i, el) {
|
||||
var $a = base.$el.find('a:eq(' + i + ')');
|
||||
var pos = (($(this).position().top - start) / (base.$scope
|
||||
.height() - start))
|
||||
* base.$el.height();
|
||||
$a.css({
|
||||
position : "absolute",
|
||||
top : pos
|
||||
})
|
||||
})
|
||||
};
|
||||
return base.init()
|
||||
};
|
||||
$.TableOfContents.defaultOptions = {
|
||||
startLevel : 1,
|
||||
depth : 3,
|
||||
levelClass : "toc-depth-%",
|
||||
levelText : "%",
|
||||
topLinks : false,
|
||||
topLinkClass : "toc-top-link",
|
||||
topBodyId : "toc-top",
|
||||
proportionateSpacing : false
|
||||
};
|
||||
$.fn.tableOfContents = function(scope, options) {
|
||||
return this.each(function() {
|
||||
var toc = new $.TableOfContents(this, scope, options);
|
||||
delete toc
|
||||
})
|
||||
}
|
||||
})(jQuery);
|
96
library/tableofcontents/jquery.toc.js
Normal file
96
library/tableofcontents/jquery.toc.js
Normal file
@ -0,0 +1,96 @@
|
||||
/*
|
||||
* Table of Contents jQuery Plugin - jquery.toc
|
||||
*
|
||||
* Copyright 2013 Nikhil Dabas
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software distributed under the License
|
||||
* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
|
||||
* or implied. See the License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* The original script was modified to work within the red#martrix (added var pathname).
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
// Builds a list with the table of contents in the current selector.
|
||||
// options:
|
||||
// content: where to look for headings
|
||||
// headings: string with a comma-separated list of selectors to be used as headings, ordered
|
||||
// by their relative hierarchy level
|
||||
var toc = function (options) {
|
||||
return this.each(function () {
|
||||
var root = $(this),
|
||||
data = root.data(),
|
||||
thisOptions,
|
||||
stack = [root], // The upside-down stack keeps track of list elements
|
||||
listTag = this.tagName,
|
||||
currentLevel = 0,
|
||||
headingSelectors;
|
||||
|
||||
// Defaults: plugin parameters override data attributes, which override our defaults
|
||||
thisOptions = $.extend(
|
||||
{content: "body", headings: "h1,h2,h3"},
|
||||
{content: data.toc || undefined, headings: data.tocHeadings || undefined},
|
||||
options
|
||||
);
|
||||
headingSelectors = thisOptions.headings.split(",");
|
||||
|
||||
// Set up some automatic IDs if we do not already have them
|
||||
$(thisOptions.content).find(thisOptions.headings).attr("id", function (index, attr) {
|
||||
// Generate a valid ID: must start with a letter, and contain only letters and
|
||||
// numbers. All other characters are replaced with underscores.
|
||||
return attr ||
|
||||
$(this).text().replace(/^[^A-Za-z]*/, "").replace(/[^A-Za-z0-9]+/g, "_");
|
||||
}).each(function () {
|
||||
// What level is the current heading?
|
||||
var elem = $(this), level = $.map(headingSelectors, function (selector, index) {
|
||||
return elem.is(selector) ? index : undefined;
|
||||
})[0];
|
||||
|
||||
if (level > currentLevel) {
|
||||
// If the heading is at a deeper level than where we are, start a new nested
|
||||
// list, but only if we already have some list items in the parent. If we do
|
||||
// not, that means that we're skipping levels, so we can just add new list items
|
||||
// at the current level.
|
||||
// In the upside-down stack, unshift = push, and stack[0] = the top.
|
||||
var parentItem = stack[0].children("li:last")[0];
|
||||
if (parentItem) {
|
||||
stack.unshift($("<" + listTag + "/>").appendTo(parentItem));
|
||||
}
|
||||
} else {
|
||||
// Truncate the stack to the current level by chopping off the 'top' of the
|
||||
// stack. We also need to preserve at least one element in the stack - that is
|
||||
// the containing element.
|
||||
stack.splice(0, Math.min(currentLevel - level, Math.max(stack.length - 1, 0)));
|
||||
}
|
||||
// the variable pathname was added to the original script.
|
||||
var pathname = window.location.pathname;
|
||||
// Add the list item
|
||||
$("<li/>").appendTo(stack[0]).append(
|
||||
$("<a/>").text(elem.text()).attr("href", pathname + "#" + elem.attr("id"))
|
||||
);
|
||||
|
||||
currentLevel = level;
|
||||
});
|
||||
});
|
||||
}, old = $.fn.toc;
|
||||
|
||||
$.fn.toc = toc;
|
||||
|
||||
$.fn.toc.noConflict = function () {
|
||||
$.fn.toc = old;
|
||||
return this;
|
||||
};
|
||||
|
||||
// Data API
|
||||
$(function () {
|
||||
toc.call($("[data-toc]"));
|
||||
});
|
||||
}(window.jQuery));
|
@ -1125,7 +1125,7 @@ $(document).ready(function() {
|
||||
|
||||
|
||||
$(".autotime").timeago();
|
||||
$("#toc").tableOfContents();
|
||||
$("#toc").toc({content: "div.page-body", headings: "h1,h2,h3,h4"});
|
||||
|
||||
|
||||
});
|
||||
|
@ -43,7 +43,7 @@ head_add_js('library/colorbox/jquery.colorbox-min.js');
|
||||
head_add_js('library/bootstrap-tagsinput/bootstrap-tagsinput.js');
|
||||
|
||||
head_add_js('library/jquery.AreYouSure/jquery.are-you-sure.js');
|
||||
head_add_js('library/tableofcontents/jquery.tableofcontents.js');
|
||||
head_add_js('library/tableofcontents/jquery.toc.js');
|
||||
/**
|
||||
* Those who require this feature will know what to do with it.
|
||||
* Those who don't, won't.
|
||||
|
Reference in New Issue
Block a user