@@ -8,86 +8,67 @@ function supports_html5_storage() {
88 }
99}
1010
11+ function makeValidId ( text ) {
12+ return text . toLowerCase ( ) . replace ( ' ' , '_' ) ;
13+ }
14+
1115$ ( document ) . ready ( function ( ) {
12- $ ( 'ul[tab-list]' ) . each ( function ( i , element ) {
13- var $list = $ ( element ) ;
14- $list . wrap ( '<div tab-area="' + i + '"></div>' ) ;
15- var $tabContentArea = $ ( '<div tab-content-area="' + i + '"></div>' ) ;
16- $tabContentArea . insertAfter ( $list ) ;
17- $list . children ( 'li[tab]' ) . each ( function ( i , element ) {
18- var $tab = $ ( element ) ;
19- var tabValue = $tab . attr ( 'tab' ) ;
20- var $content = $tab . contents ( ) . detach ( ) ;
21- $tab . text ( tabValue ) ;
22- $tabContentArea . append ( $content ) ;
23- $content . wrapAll ( '<div tab-content="' + tabValue + '"></div>' ) ;
24- } ) ;
25- } ) ;
26- $ ( 'div[tab-area]' ) . each ( function ( i , element ) {
27- var $tabArea = $ ( element ) ;
28- var tabAreaValue = $tabArea . attr ( 'tab-area' ) ;
29- var $tabList = $tabArea . children ( 'ul[tab-list]' ) ;
30- var initialTabValue = $tabList . children ( 'li[tab]:first-child' ) . attr ( 'tab' ) ;
31- var tabListValue = $tabArea . children ( 'ul[tab-list]' ) . attr ( 'tab-list' ) ;
32- var urlParam = $ ( document ) . getUrlParam ( tabListValue ) ;
33- if ( tabListValue == 'os' ) {
34- initialTabValue = $ . ua . os . name || initialTabValue ;
35- } else if ( tabListValue == 'os-version' ) {
36- initialTabValue = osName = $ . ua . os . version || initialTabValue ;
37- }
38- if ( tabListValue == 'os-version' ) {
39- var $versionTab = $tabArea . parents ( 'div[tab-content]' ) ;
40- if ( $versionTab ) {
41- var versionTabValue = $versionTab . attr ( 'tab-content' ) ;
42- var key = tabListValue + '.' + versionTabValue ;
43- if ( localStorage . getItem ( key ) ) {
44- initialTabValue = localStorage . getItem ( key ) || initialTabValue ;
45- }
46- }
47- } else {
48- if ( supports_html5_storage ( ) && localStorage . getItem ( tabListValue ) ) {
49- initialTabValue = localStorage . getItem ( tabListValue ) || initialTabValue ;
50- }
51- }
52- $tabList . children ( 'li[tab]' ) . each ( function ( i , element ) {
53- var $tab = $ ( element ) ;
54- var tabValue = $tab . attr ( 'tab' ) ;
55- $tab . on ( 'click' , function ( ) {
56- $ ( 'ul[tab-list="' + tabListValue + '"]' ) . each ( function ( i , element ) {
57- var $tabArea2 = $ ( element ) . parent ( 'div[tab-area]' ) ;
58- var $tabList2 = $tabArea2 . children ( 'ul[tab-list]' ) ;
59- var $tab2 = $tabList2 . children ( 'li[tab="' + tabValue + '"]' ) ;
60- $tabList2 . children ( 'li[tab]' ) . removeClass ( "tab-active" ) ;
61- $tab2 . addClass ( "tab-active" ) ;
62- var $tabContentArea2 = $tabArea2 . children ( 'div[tab-content-area]' ) ;
63- $tabContentArea2 . children ( 'div[tab-content]' ) . hide ( ) ;
64- var $content = $tabContentArea2 . children ( 'div[tab-content="' + tabValue + '"]' ) ;
65- $content . show ( ) ;
66- } ) ;
67- if ( supports_html5_storage ( ) && tabListValue ) {
68- if ( tabListValue == 'os-version' ) {
69- var $versionTab = $tabArea . parents ( 'div[tab-content]' ) ;
70- if ( $versionTab ) {
71- var versionTabValue = $versionTab . attr ( 'tab-content' ) ;
72- localStorage . setItem ( tabListValue + '.' + versionTabValue , tabValue ) ;
73- }
74- } else {
75- localStorage . setItem ( tabListValue , tabValue ) ;
76- }
77- }
16+ // Get the elements that we need to separate (we want the content in a separate div)
17+ var $tabGroups = $ ( 'ul.tab-group' ) ;
18+
19+ // Iterate over each tab group
20+ $tabGroups . each ( function ( ) {
21+ // Get the header element (the ul that contains the headers and their content)
22+ var $tabGroupHeader = $ ( this ) ;
23+ // Add proper style and other info for this to act as a tab header
24+ $tabGroupHeader . addClass ( 'nav' ) ;
25+ $tabGroupHeader . addClass ( 'nav-tabs' ) ;
26+ $tabGroupHeader . attr ( 'role' , 'tablist' ) ;
27+
28+ // Add a div to hold the content of each tab after the existing header
29+ var $tabGroupContent = $ ( '<div/>' ) . insertAfter ( $tabGroupHeader ) ;
30+ $tabGroupContent . addClass ( 'tab-content' ) ;
31+
32+ // Get the topic of the tab headers (e.g. 'os')
33+ var tabGroupTopic = $tabGroupHeader . data ( 'tab-topic' ) ;
34+
35+ // Iterate over each tab header element in this group
36+ $tabGroupHeader . children ( 'li' ) . each ( function ( ) {
37+ // Get the header item and the text that was specified for it
38+ var $tabHeader = $ ( this ) ;
39+ var tabHeadingText = $tabHeader . data ( 'tab-heading' ) ;
40+
41+ // Generate the ID for this tab and its associated content
42+ var newTabId = 'tab-' + makeValidId ( tabHeadingText ) ;
43+
44+ // Add the content div for this tab to the group's content container
45+ var $tabContent = $ ( '<div/>' ) . appendTo ( $tabGroupContent ) ;
46+ // Add info to link the tab header and the associated content
47+ $tabContent . addClass ( 'tab-pane' ) ;
48+ $tabContent . attr ( 'id' , newTabId ) ;
49+ $tabContent . attr ( 'role' , 'tabpanel' ) ;
50+
51+ // Move the tab contents from the original ul to the new div
52+ $tabContent . append ( $tabHeader . contents ( ) ) ;
53+
54+ // Add a link to serve as the clickable header component
55+ var $headerLink = $ ( '<a/>' ) . appendTo ( $tabHeader ) ;
56+ // Set the link target and style info
57+ $headerLink . attr ( 'href' , '#' + newTabId ) ;
58+ $headerLink . attr ( 'role' , 'tab' ) ;
59+ $headerLink . data ( 'toggle' , 'tab' ) ;
60+ // Add the header text
61+ $headerLink . text ( tabHeadingText ) ;
62+ // Register the handler to show the content when the tab is clicked
63+ $headerLink . click ( function ( e ) {
64+ e . preventDefault ( ) ;
65+ $ ( this ) . tab ( 'show' ) ;
7866 } ) ;
79- if ( urlParam && urlParam == tabValue ) {
80- initialTabValue = tabValue ;
81- }
82- } ) ;
83- $tabList . children ( 'li[tab="' + initialTabValue + '"]' ) . addClass ( "tab-active" ) ;
84- var $tabContentArea = $tabArea . children ( 'div[tab-content-area]' ) ;
85- $tabContentArea . children ( 'div[tab-content]' ) . each ( function ( i , element ) {
86- var $content = $ ( element ) ;
87- var tabContentValue = $content . attr ( 'tab-content' ) ;
88- if ( tabContentValue != initialTabValue ) {
89- $content . hide ( ) ;
90- }
67+
68+ // Show the current tab (this will hide all others)
69+ // TODO: This should be replaced with the old loader logic
70+ $headerLink . tab ( 'show' ) ;
9171 } ) ;
72+
9273 } ) ;
9374} ) ;
0 commit comments