| (function($){ | (function ($) { |
| $.fn.stoc = function(options) { | $.fn.stoc = function (options) { |
| //Our default options | //Our default options |
| var defaults = { | var defaults = { |
| search: "body", //where we will search for titles | depth: 6, //how many hN should we search |
| depth: 6, //how many hN should we search | start: 1, //which hN will be the first (and after it we go just deeper) |
| start: 1, //which hN will be the first (and after it we go just deeper) | stocTitle: "<h2>Contents</h2>", //what to display before our box |
| stocTitle: "<h2>Contents</h2>", //what to display before our box | listType: "ul", //could be ul or ol |
| listType: "ul", //could be ul or ol | smoothScroll: 1 |
| smoothScroll: 1 | }; |
| }; | |
| //let's extend our plugin with default or user options when defined | |
| //let's extend our plugin with default or user options when defined | var options = $.extend(defaults, options); |
| var options = $.extend(defaults, options); | |
| return function () { | |
| return this.each(function() { | //"cache" our target and search objects |
| //"cache" our target and search objects | obj = $(this); //target |
| obj = $(this); //target | //let's declare some variables. We need this var declaration to create them as local variables (not global) |
| src = $(options.search); //search | var appHTML = "", tagNumber = 0, txt = "", id = "", before = "", after = "", previous = options.start, start = options.start, depth = options.depth, i = 0, srcTags = "h" + options.start, cacheHN = ""; |
| //let's declare some variables. We need this var declaration to create them as local variables (not global) | |
| var appHTML = "", tagNumber = 0, txt = "", id = "", before = "", after = "", previous = options.start, start = options.start, depth = options.depth, i = 0, srcTags = "h" + options.start, cacheHN = ""; | obj.nextUntil('h1').each(function () { |
| if ($(this).tagName == "h2" || $(this).tagName == "h3") { | |
| //which tags we will search | //we will cache our current H element |
| while ( depth > 1) { | cacheHN = $(this); |
| start++; //we will just get our start level and numbers higher than it | //if we are on h1, 2, 3... |
| srcTags = srcTags + ", h" + start; | tagNumber = ( cacheHN.get(0).tagName ).substr(1); |
| depth--; //since went one level up, our depth will go one level down | |
| } | //sets the needed id to the element |
| src.find(srcTags).each(function() { | id = cacheHN.attr('id'); |
| //we will cache our current H element | if (id == "") { //if it doesn't have only, of course |
| cacheHN = $(this); | id = "h" + tagNumber + "_" + i; |
| //if we are on h1, 2, 3... | cacheHN.attr('id', id); |
| tagNumber = ( cacheHN.get(0).tagName ).substr(1); | } |
| //our current text | |
| //sets the needed id to the element | txt = cacheHN.text(); |
| id = cacheHN.attr('id'); | |
| if (id == "") { //if it doesn't have only, of course | switch (true) { //with switch(true) we can do comparisons in each case |
| id = "h" + tagNumber + "_" + i; | case (tagNumber > previous) : //it means that we went down one level (e.g. from h2 to h3) |
| cacheHN.attr('id', id); | appHTML = appHTML + "<" + options.listType + "><li>" + before + "<a href=\"#" + id + "\">" + txt + "</a>"; |
| } | previous = tagNumber; |
| //our current text | break; |
| txt = cacheHN.text(); | case (tagNumber == previous) : //it means that stay on the same level (e.g. h3 and stay on it) |
| appHTML = appHTML + "</li><li>" + before + "<a href=\"#" + id + "\">" + txt + "</a>"; | |
| switch(true) { //with switch(true) we can do comparisons in each case | break; |
| case (tagNumber > previous) : //it means that we went down one level (e.g. from h2 to h3) | case (tagNumber < previous) : //it means that we went up but we don't know how much levels (e.g. from h3 to h2) |
| appHTML = appHTML + "<" + options.listType +"><li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a>"; | while (tagNumber != previous) { |
| previous = tagNumber; | appHTML = appHTML + "</" + options.listType + "></li>"; |
| break; | previous--; |
| case (tagNumber == previous) : //it means that stay on the same level (e.g. h3 and stay on it) | } |
| appHTML = appHTML + "</li><li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a>"; | appHTML = appHTML + "<li>" + before + "<a href=\"#" + id + "\">" + txt + "</a></li>"; |
| break; | break; |
| case (tagNumber < previous) : //it means that we went up but we don't know how much levels (e.g. from h3 to h2) | } |
| while(tagNumber != previous) { | i++; |
| appHTML = appHTML + "</" + options.listType +"></li>"; | } |
| previous--; | }); |
| } | //corrects our last item, because it may have some opened ul's |
| appHTML = appHTML + "<li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a></li>"; | while (tagNumber != options.start) { |
| break; | appHTML = appHTML + "</" + options.listType + ">"; |
| } | tagNumber--; |
| i++; | } |
| }); | //append our html to our object |
| //corrects our last item, because it may have some opened ul's | appHTML = options.stocTitle + "<" + options.listType + ">" + appHTML + "</" + options.listType + ">"; |
| while(tagNumber != options.start) { | obj.append(appHTML); |
| appHTML = appHTML + "</" + options.listType +">"; | |
| tagNumber--; | //our pretty smooth scrolling here |
| } | // acctually I've just compressed the code so you guys will think that I'm the man . Source: http://css-tricks.com/snippets/jquery/smooth-scrolling/ |
| //append our html to our object | if (options.smoothScroll == 1) { |
| appHTML = options.stocTitle + "<"+ options.listType + ">" + appHTML + "</" + options.listType + ">"; | $(window).load(function () { |
| obj.append(appHTML); | function filterPath(string) { |
| return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '') | |
| //our pretty smooth scrolling here | } |
| // acctually I've just compressed the code so you guys will think that I'm the man . Source: http://css-tricks.com/snippets/jquery/smooth-scrolling/ | |
| if (options.smoothScroll == 1) { | var locationPath = filterPath(location.pathname); |
| $(window).load(function(){ | var scrollElem = scrollableElement('html', 'body'); |
| function filterPath(string){return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'')}var locationPath=filterPath(location.pathname);var scrollElem=scrollableElement('html','body');obj.find('a[href*=#]').each(function(){var thisPath=filterPath(this.pathname)||locationPath;if(locationPath==thisPath&&(location.hostname==this.hostname||!this.hostname)&&this.hash.replace(/#/,'')){var $target=$(this.hash),target=this.hash;if(target){var targetOffset=$target.offset().top;$(this).click(function(event){event.preventDefault();$(scrollElem).animate({scrollTop:targetOffset},400,function(){location.hash=target})})}}});function scrollableElement(els){for(var i=0,argLength=arguments.length;i<argLength;i++){var el=arguments[i],$scrollElement=$(el);if($scrollElement.scrollTop()>0){return el}else{$scrollElement.scrollTop(1);var isScrollable=$scrollElement.scrollTop()>0;$scrollElement.scrollTop(0);if(isScrollable){return el}}}return[]} | obj.find('a[href*=#]').each(function () { |
| }); | var thisPath = filterPath(this.pathname) || locationPath; |
| } | if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) { |
| }); | var $target = $(this.hash), target = this.hash; |
| }; | if (target) { |
| var targetOffset = $target.offset().top; | |
| $(this).click(function (event) { | |
| event.preventDefault(); | |
| $(scrollElem).animate({scrollTop: targetOffset}, 400, function () { | |
| location.hash = target | |
| }) | |
| }) | |
| } | |
| } | |
| }); | |
| function scrollableElement(els) { | |
| for (var i = 0, argLength = arguments.length; i < argLength; i++) { | |
| var el = arguments[i], $scrollElement = $(el); | |
| if ($scrollElement.scrollTop() > 0) { | |
| return el | |
| } else { | |
| $scrollElement.scrollTop(1); | |
| var isScrollable = $scrollElement.scrollTop() > 0; | |
| $scrollElement.scrollTop(0); | |
| if (isScrollable) { | |
| return el | |
| } | |
| } | |
| } | |
| return[] | |
| } | |
| }); | |
| } | |
| }; | |
| }; | |
| })(jQuery); | })(jQuery); |