@@ -8,67 +8,86 @@ function supports_html5_storage() {
88 }
99}
1010
11- function makeValidId ( text ) {
12- return text . toLowerCase ( ) . replace ( ' ' , '_' ) ;
13- }
14-
1511$ ( document ) . ready ( function ( ) {
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' ) ;
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+ }
6678 } ) ;
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' ) ;
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+ }
7191 } ) ;
72-
7392 } ) ;
7493} ) ;
0 commit comments