|
a |
|
b/docs/site_libs/navigation-1.1/tabsets.js |
|
|
1 |
|
|
|
2 |
|
|
|
3 |
/** |
|
|
4 |
* jQuery Plugin: Sticky Tabs |
|
|
5 |
* |
|
|
6 |
* @author Aidan Lister <aidan@php.net> |
|
|
7 |
* adapted by Ruben Arslan to activate parent tabs too |
|
|
8 |
* http://www.aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/ |
|
|
9 |
*/ |
|
|
10 |
(function($) { |
|
|
11 |
"use strict"; |
|
|
12 |
$.fn.rmarkdownStickyTabs = function() { |
|
|
13 |
var context = this; |
|
|
14 |
// Show the tab corresponding with the hash in the URL, or the first tab |
|
|
15 |
var showStuffFromHash = function() { |
|
|
16 |
var hash = window.location.hash; |
|
|
17 |
var selector = hash ? 'a[href="' + hash + '"]' : 'li.active > a'; |
|
|
18 |
var $selector = $(selector, context); |
|
|
19 |
if($selector.data('toggle') === "tab") { |
|
|
20 |
$selector.tab('show'); |
|
|
21 |
// walk up the ancestors of this element, show any hidden tabs |
|
|
22 |
$selector.parents('.section.tabset').each(function(i, elm) { |
|
|
23 |
var link = $('a[href="#' + $(elm).attr('id') + '"]'); |
|
|
24 |
if(link.data('toggle') === "tab") { |
|
|
25 |
link.tab("show"); |
|
|
26 |
} |
|
|
27 |
}); |
|
|
28 |
} |
|
|
29 |
}; |
|
|
30 |
|
|
|
31 |
|
|
|
32 |
// Set the correct tab when the page loads |
|
|
33 |
showStuffFromHash(context); |
|
|
34 |
|
|
|
35 |
// Set the correct tab when a user uses their back/forward button |
|
|
36 |
$(window).on('hashchange', function() { |
|
|
37 |
showStuffFromHash(context); |
|
|
38 |
}); |
|
|
39 |
|
|
|
40 |
// Change the URL when tabs are clicked |
|
|
41 |
$('a', context).on('click', function(e) { |
|
|
42 |
history.pushState(null, null, this.href); |
|
|
43 |
showStuffFromHash(context); |
|
|
44 |
}); |
|
|
45 |
|
|
|
46 |
return this; |
|
|
47 |
}; |
|
|
48 |
}(jQuery)); |
|
|
49 |
|
|
|
50 |
window.buildTabsets = function(tocID) { |
|
|
51 |
|
|
|
52 |
// build a tabset from a section div with the .tabset class |
|
|
53 |
function buildTabset(tabset) { |
|
|
54 |
|
|
|
55 |
// check for fade and pills options |
|
|
56 |
var fade = tabset.hasClass("tabset-fade"); |
|
|
57 |
var pills = tabset.hasClass("tabset-pills"); |
|
|
58 |
var navClass = pills ? "nav-pills" : "nav-tabs"; |
|
|
59 |
|
|
|
60 |
// determine the heading level of the tabset and tabs |
|
|
61 |
var match = tabset.attr('class').match(/level(\d) /); |
|
|
62 |
if (match === null) |
|
|
63 |
return; |
|
|
64 |
var tabsetLevel = Number(match[1]); |
|
|
65 |
var tabLevel = tabsetLevel + 1; |
|
|
66 |
|
|
|
67 |
// find all subheadings immediately below |
|
|
68 |
var tabs = tabset.find("div.section.level" + tabLevel); |
|
|
69 |
if (!tabs.length) |
|
|
70 |
return; |
|
|
71 |
|
|
|
72 |
// create tablist and tab-content elements |
|
|
73 |
var tabList = $('<ul class="nav ' + navClass + '" role="tablist"></ul>'); |
|
|
74 |
$(tabs[0]).before(tabList); |
|
|
75 |
var tabContent = $('<div class="tab-content"></div>'); |
|
|
76 |
$(tabs[0]).before(tabContent); |
|
|
77 |
|
|
|
78 |
// build the tabset |
|
|
79 |
var activeTab = 0; |
|
|
80 |
tabs.each(function(i) { |
|
|
81 |
|
|
|
82 |
// get the tab div |
|
|
83 |
var tab = $(tabs[i]); |
|
|
84 |
|
|
|
85 |
// get the id then sanitize it for use with bootstrap tabs |
|
|
86 |
var id = tab.attr('id'); |
|
|
87 |
|
|
|
88 |
// see if this is marked as the active tab |
|
|
89 |
if (tab.hasClass('active')) |
|
|
90 |
activeTab = i; |
|
|
91 |
|
|
|
92 |
// remove any table of contents entries associated with |
|
|
93 |
// this ID (since we'll be removing the heading element) |
|
|
94 |
$("div#" + tocID + " li a[href='#" + id + "']").parent().remove(); |
|
|
95 |
|
|
|
96 |
// sanitize the id for use with bootstrap tabs |
|
|
97 |
id = id.replace(/[.\/?&!#<>]/g, '').replace(/\s/g, '_'); |
|
|
98 |
tab.attr('id', id); |
|
|
99 |
|
|
|
100 |
// get the heading element within it, grab it's text, then remove it |
|
|
101 |
var heading = tab.find('h' + tabLevel + ':first'); |
|
|
102 |
var headingText = heading.html(); |
|
|
103 |
heading.remove(); |
|
|
104 |
|
|
|
105 |
// build and append the tab list item |
|
|
106 |
var a = $('<a role="tab" data-toggle="tab">' + headingText + '</a>'); |
|
|
107 |
a.attr('href', '#' + id); |
|
|
108 |
a.attr('aria-controls', id); |
|
|
109 |
var li = $('<li role="presentation"></li>'); |
|
|
110 |
li.append(a); |
|
|
111 |
tabList.append(li); |
|
|
112 |
|
|
|
113 |
// set it's attributes |
|
|
114 |
tab.attr('role', 'tabpanel'); |
|
|
115 |
tab.addClass('tab-pane'); |
|
|
116 |
tab.addClass('tabbed-pane'); |
|
|
117 |
if (fade) |
|
|
118 |
tab.addClass('fade'); |
|
|
119 |
|
|
|
120 |
// move it into the tab content div |
|
|
121 |
tab.detach().appendTo(tabContent); |
|
|
122 |
}); |
|
|
123 |
|
|
|
124 |
// set active tab |
|
|
125 |
$(tabList.children('li')[activeTab]).addClass('active'); |
|
|
126 |
var active = $(tabContent.children('div.section')[activeTab]); |
|
|
127 |
active.addClass('active'); |
|
|
128 |
if (fade) |
|
|
129 |
active.addClass('in'); |
|
|
130 |
|
|
|
131 |
if (tabset.hasClass("tabset-sticky")) |
|
|
132 |
tabset.rmarkdownStickyTabs(); |
|
|
133 |
} |
|
|
134 |
|
|
|
135 |
// convert section divs with the .tabset class to tabsets |
|
|
136 |
var tabsets = $("div.section.tabset"); |
|
|
137 |
tabsets.each(function(i) { |
|
|
138 |
buildTabset($(tabsets[i])); |
|
|
139 |
}); |
|
|
140 |
}; |
|
|
141 |
|