From 43b877caa1381c2ac8a031751acd2dab3ec739f0 Mon Sep 17 00:00:00 2001 From: Einer von Vielen Date: Tue, 13 Jan 2015 00:06:44 +0100 Subject: Test ...with table of content. jquery.tableofconent.js works bunt not properly --- include/bbcode.php | 4 + library/tableofcontents/jquery.tableofcontents.js | 191 ++++++++++++++++++++++ view/js/main.js | 2 + view/php/theme_init.php | 1 + 4 files changed, 198 insertions(+) create mode 100644 library/tableofcontents/jquery.tableofcontents.js diff --git a/include/bbcode.php b/include/bbcode.php index 030a1fb49..441c4cc5c 100644 --- a/include/bbcode.php +++ b/include/bbcode.php @@ -575,6 +575,10 @@ function bbcode($Text,$preserve_nl = false, $tryoembed = true) { if (strpos($Text,'[h6]') !== false) { $Text = preg_replace("(\[h6\](.*?)\[\/h6\])ism",'

$1

',$Text); } + // Check for h6 + if (strpos($Text,'[toc]') !== false) { + $Text = preg_replace("/\[toc\]/ism",'

',$Text); + } // Check for centered text if (strpos($Text,'[/center]') !== false) { $Text = preg_replace("(\[center\](.*?)\[\/center\])ism","

",$Text); diff --git a/library/tableofcontents/jquery.tableofcontents.js b/library/tableofcontents/jquery.tableofcontents.js new file mode 100644 index 000000000..93288bbc7 --- /dev/null +++ b/library/tableofcontents/jquery.tableofcontents.js @@ -0,0 +1,191 @@ +/* + 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) +

			
+		---
+		
+		
+		
+		
+		
+		
+		...
+

+ */ +(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 = "

\n" + base.toc + "

\n"; + base.$el.html(base.toc) + }; + base.addTopLink = function(element) { + var text = (base.options.topLinks === true ? "Top" + : base.options.topLinks); + var $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 = "'; + 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 = "

\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('' + "\n") + } + ; + base.toc += "

\n" + closing_tags.join('' + "\n"); + if (!last) { + base.toc += "\n

\n" + } + } else { + if (!last) { + base.toc += "

\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); \ No newline at end of file diff --git a/view/js/main.js b/view/js/main.js index 9d5136c34..459600793 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -1125,6 +1125,8 @@ $(document).ready(function() { $(".autotime").timeago(); + $("#toc").tableOfContents(); + }); diff --git a/view/php/theme_init.php b/view/php/theme_init.php index d43a87046..1b6c418f7 100644 --- a/view/php/theme_init.php +++ b/view/php/theme_init.php @@ -43,6 +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'); /** * Those who require this feature will know what to do with it. * Those who don't, won't. -- cgit v1.2.3 From 09129cbe5f7e8cb331b68469b74438464960af0b Mon Sep 17 00:00:00 2001 From: Date: Wed, 14 Jan 2015 22:47:54 +0100 Subject: 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 --- doc/bbcode.html | 3 +- include/bbcode.php | 2 +- library/tableofcontents/jquery.tableofcontents.js | 191 ---------------------- library/tableofcontents/jquery.toc.js | 96 +++++++++++ view/js/main.js | 2 +- view/php/theme_init.php | 2 +- 6 files changed, 101 insertions(+), 195 deletions(-) delete mode 100644 library/tableofcontents/jquery.tableofcontents.js create mode 100644 library/tableofcontents/jquery.toc.js diff --git a/doc/bbcode.html b/doc/bbcode.html index fac768879..f0b61b33c 100644 --- a/doc/bbcode.html +++ b/doc/bbcode.html @@ -65,7 +65,8 @@

[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

[qr]text to post[/qr] - create a QR code.
-
+

[toc] - create a table of content in a webpage (level h1,...,h4).
+

These require a suitable map plugin/addon such as openstreetmap or else the result will be blank

diff --git a/include/bbcode.php b/include/bbcode.php index 441c4cc5c..33017c011 100644 --- a/include/bbcode.php +++ b/include/bbcode.php @@ -575,7 +575,7 @@ function bbcode($Text,$preserve_nl = false, $tryoembed = true) { if (strpos($Text,'[h6]') !== false) { $Text = preg_replace("(\[h6\](.*?)\[\/h6\])ism",'

$1

',$Text); } - // Check for h6 + // Check for table of content if (strpos($Text,'[toc]') !== false) { $Text = preg_replace("/\[toc\]/ism",'

',$Text); } diff --git a/library/tableofcontents/jquery.tableofcontents.js b/library/tableofcontents/jquery.tableofcontents.js deleted file mode 100644 index 93288bbc7..000000000 --- a/library/tableofcontents/jquery.tableofcontents.js +++ /dev/null @@ -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) -

			
-		---
-		
-		
-		
-		
-		
-		
-		...
-

- */ -(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 = "

\n" + base.toc + "

\n"; - base.$el.html(base.toc) - }; - base.addTopLink = function(element) { - var text = (base.options.topLinks === true ? "Top" - : base.options.topLinks); - var $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 = "'; - 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 = "

\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('' + "\n") - } - ; - base.toc += "

\n" + closing_tags.join('' + "\n"); - if (!last) { - base.toc += "\n

\n" - } - } else { - if (!last) { - base.toc += "

\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); \ No newline at end of file diff --git a/library/tableofcontents/jquery.toc.js b/library/tableofcontents/jquery.toc.js new file mode 100644 index 000000000..d136f5aab --- /dev/null +++ b/library/tableofcontents/jquery.toc.js @@ -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 + $("

").appendTo(stack[0]).append( + $("").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)); diff --git a/view/js/main.js b/view/js/main.js index 459600793..0c56c8d41 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -1125,7 +1125,7 @@ $(document).ready(function() { $(".autotime").timeago(); - $("#toc").tableOfContents(); + $("#toc").toc({content: "div.page-body", headings: "h1,h2,h3,h4"}); }); diff --git a/view/php/theme_init.php b/view/php/theme_init.php index 1b6c418f7..b3580b81f 100644 --- a/view/php/theme_init.php +++ b/view/php/theme_init.php @@ -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. -- cgit v1.2.3