@@ -11,17 +11,71 @@ function copyCodeToClipboard(panelId) {
1111 setTimeout ( ( ) => tooltip . style . display = 'none' , 1000 ) ;
1212}
1313
14+ function copyCodeToClipboardForCodetabs ( button ) {
15+ const codetabsId = button . getAttribute ( 'data-codetabs-id' ) ;
16+ const codetabsContainer = document . getElementById ( codetabsId ) ;
17+
18+ if ( ! codetabsContainer ) return ;
19+
20+ // Find the visible panel
21+ const visiblePanel = codetabsContainer . querySelector ( '.panel:not(.panel-hidden)' ) ;
22+ if ( ! visiblePanel ) return ;
23+
24+ // Get the code from the visible panel
25+ const code = [ ...visiblePanel . querySelectorAll ( 'code' ) ] . pop ( ) . textContent ;
26+ navigator . clipboard . writeText ( code ) ;
27+
28+ // Toggle tooltip
29+ const tooltip = button . querySelector ( '.tooltiptext' ) ;
30+ if ( tooltip ) {
31+ tooltip . style . display = 'block' ;
32+ setTimeout ( ( ) => tooltip . style . display = 'none' , 1000 ) ;
33+ }
34+ }
35+
1436function toggleVisibleLines ( evt ) {
1537 document . getElementById ( evt . getAttribute ( 'aria-controls' ) )
1638 . toggleAttribute ( 'aria-expanded' ) ;
1739}
1840
19- function switchCodeTab ( selectedTabInput , tabLang ) {
20- // Synchronize tab selection to relevant page tabs
21- const trg = document . querySelectorAll ( `.codetabs > input[data-lang=${ tabLang } ) ;
22- trg . forEach ( ( element ) => {
23- if ( element === selectedTabInput ) return ;
24- element . checked = true ;
41+ function toggleVisibleLinesForCodetabs ( button ) {
42+ const codetabsId = button . getAttribute ( 'data-codetabs-id' ) ;
43+ const codetabsContainer = document . getElementById ( codetabsId ) ;
44+
45+ if ( ! codetabsContainer ) return ;
46+
47+ // Find the visible panel
48+ const visiblePanel = codetabsContainer . querySelector ( '.panel:not(.panel-hidden)' ) ;
49+ if ( ! visiblePanel ) return ;
50+
51+ // Toggle aria-expanded attribute
52+ visiblePanel . toggleAttribute ( 'aria-expanded' ) ;
53+
54+ // Toggle visibility icons
55+ const iconOn = button . querySelector ( '.visibility-icon-on' ) ;
56+ const iconOff = button . querySelector ( '.visibility-icon-off' ) ;
57+
58+ if ( iconOn && iconOff ) {
59+ iconOn . classList . toggle ( 'panel-hidden' ) ;
60+ iconOff . classList . toggle ( 'panel-hidden' ) ;
61+ }
62+ }
63+
64+ function switchCodeTab ( selectedDropdown , tabLang ) {
65+ // Synchronize dropdown selection to all code tab dropdowns on the page
66+ const allDropdowns = document . querySelectorAll ( '.codetabs .lang-selector' ) ;
67+ allDropdowns . forEach ( ( dropdown ) => {
68+ if ( dropdown === selectedDropdown ) return ;
69+
70+ // Find the option with matching data-lang and select it
71+ const options = dropdown . querySelectorAll ( 'option' ) ;
72+ options . forEach ( ( option ) => {
73+ if ( option . value === tabLang ) {
74+ dropdown . value = tabLang ;
75+ // Trigger panel visibility update for this dropdown's codetabs
76+ updatePanelVisibility ( dropdown ) ;
77+ }
78+ } ) ;
2579 } ) ;
2680
2781 // Persist tab selection
@@ -30,35 +84,70 @@ function switchCodeTab(selectedTabInput, tabLang) {
3084 }
3185}
3286
87+ function updatePanelVisibility ( dropdown ) {
88+ const selectedLang = dropdown . value ;
89+ const codetabsId = dropdown . getAttribute ( 'data-codetabs-id' ) ;
90+ const codetabsContainer = document . getElementById ( codetabsId ) ;
91+
92+ if ( ! codetabsContainer ) return ;
93+
94+ // Hide all panels in this codetabs container
95+ const panels = codetabsContainer . querySelectorAll ( '.panel' ) ;
96+ panels . forEach ( ( panel ) => {
97+ panel . classList . add ( 'panel-hidden' ) ;
98+ } ) ;
99+
100+ // Show the selected panel
101+ const selectedPanel = Array . from ( panels ) . find ( panel =>
102+ panel . getAttribute ( 'data-lang' ) === selectedLang
103+ ) ;
104+
105+ if ( selectedPanel ) {
106+ selectedPanel . classList . remove ( 'panel-hidden' ) ;
107+ }
108+ }
109+
33110function onchangeCodeTab ( e ) {
34- const selectedTabInput = e . target ;
35- const tabLang = e . target . dataset . lang ;
111+ const selectedDropdown = e . target ;
112+ const tabLang = e . target . value ;
36113 const yPos = e . target . getBoundingClientRect ( ) . top ;
37114
38- switchCodeTab ( selectedTabInput , tabLang ) ;
115+ // Update visibility for this dropdown's panels
116+ updatePanelVisibility ( selectedDropdown ) ;
117+
118+ // Synchronize with other dropdowns
119+ switchCodeTab ( selectedDropdown , tabLang ) ;
39120
40121 // Scroll to the source element if it jumped
41122 const yDiff = e . target . getBoundingClientRect ( ) . top - yPos ;
42123 window . scrollTo ( window . scrollX , window . scrollY + yDiff ) ;
43124}
44125
45- document . addEventListener ( 'DOMContentLoaded' , ( ) => {
46- // Register tab switch listeners
47- for ( const tvr of document . querySelectorAll ( '.codetabs > input[type="radio"]' ) ) {
48- tvr . addEventListener ( "change" , ( e ) => onchangeCodeTab ( e ) ) ;
49- }
126+ // Initialize codetabs - script is deferred so DOM is already ready
127+ ( function initCodetabs ( ) {
128+ // Register dropdown change listeners
129+ const dropdowns = document . querySelectorAll ( '.codetabs .lang-selector' ) ;
130+ dropdowns . forEach ( ( dropdown ) => {
131+ dropdown . addEventListener ( "change" , ( e ) => onchangeCodeTab ( e ) ) ;
132+ } ) ;
50133
51- // Restore selection
134+ // Restore selection from localStorage
52135 if ( window . localStorage ) {
53136 const selectedTab = window . localStorage . getItem ( "selectedCodeTab" ) ;
54137 if ( selectedTab ) {
55- switchCodeTab ( null , selectedTab ) ;
138+ dropdowns . forEach ( ( dropdown ) => {
139+ const options = dropdown . querySelectorAll ( 'option' ) ;
140+ const matchingOption = Array . from ( options ) . find ( opt => opt . value === selectedTab ) ;
141+ if ( matchingOption ) {
142+ dropdown . value = selectedTab ;
143+ updatePanelVisibility ( dropdown ) ;
144+ }
145+ } ) ;
56146 }
57147 }
58148
59149 // Work around Chroma's tabindex: https://github.com/alecthomas/chroma/issues/731
60150 for ( const pre of document . querySelectorAll ( '.highlight pre' ) ) {
61151 pre . removeAttribute ( 'tabindex' ) ;
62152 }
63-
64- } ) ;
153+ } ) ( ) ;
0 commit comments