|
2 | 2 | 'use strict'; |
3 | 3 |
|
4 | 4 | document.addEventListener( 'DOMContentLoaded', function() { |
| 5 | + var consentTabs = document.querySelectorAll( '.basicrum-consent-tabs' ); |
5 | 6 | var enabled = document.getElementById( 'basicrum_enabled' ); |
6 | 7 | var waitAfterOnload = document.getElementById( 'basicrum_wait_after_onload' ); |
7 | 8 | var delay = document.getElementById( 'basicrum_delay_ms' ); |
|
15 | 16 | } ) : []; |
16 | 17 | var preservedValues = form ? Array.from( form.querySelectorAll( '.basicrum-disabled-setting-value' ) ) : []; |
17 | 18 |
|
| 19 | + /** |
| 20 | + * Activate one consent integration tab. |
| 21 | + * |
| 22 | + * @param {HTMLElement} tabContainer Tab container. |
| 23 | + * @param {HTMLButtonElement} activeTab Tab to activate. |
| 24 | + * @return {void} |
| 25 | + */ |
| 26 | + function activateConsentTab( tabContainer, activeTab ) { |
| 27 | + var tabs = Array.from( tabContainer.querySelectorAll( '[role="tab"]' ) ); |
| 28 | + var panels = Array.from( tabContainer.querySelectorAll( '[role="tabpanel"]' ) ); |
| 29 | + |
| 30 | + tabs.forEach( function( tab ) { |
| 31 | + var isActive = tab === activeTab; |
| 32 | + |
| 33 | + tab.classList.toggle( 'nav-tab-active', isActive ); |
| 34 | + tab.setAttribute( 'aria-selected', isActive ? 'true' : 'false' ); |
| 35 | + tab.tabIndex = isActive ? 0 : -1; |
| 36 | + } ); |
| 37 | + |
| 38 | + panels.forEach( function( panel ) { |
| 39 | + var isActive = panel.id === activeTab.getAttribute( 'aria-controls' ); |
| 40 | + |
| 41 | + panel.hidden = ! isActive; |
| 42 | + panel.classList.toggle( 'is-active', isActive ); |
| 43 | + } ); |
| 44 | + } |
| 45 | + |
| 46 | + /** |
| 47 | + * Initialize accessible tabs and copy buttons for consent snippets. |
| 48 | + * |
| 49 | + * @param {HTMLElement} tabContainer Tab container. |
| 50 | + * @return {void} |
| 51 | + */ |
| 52 | + function initializeConsentTabs( tabContainer ) { |
| 53 | + var tabs = Array.from( tabContainer.querySelectorAll( '[role="tab"]' ) ); |
| 54 | + |
| 55 | + if ( ! tabs.length ) { |
| 56 | + return; |
| 57 | + } |
| 58 | + |
| 59 | + tabs.forEach( function( tab, tabIndex ) { |
| 60 | + tab.addEventListener( 'click', function() { |
| 61 | + activateConsentTab( tabContainer, tab ); |
| 62 | + } ); |
| 63 | + |
| 64 | + tab.addEventListener( 'keydown', function( event ) { |
| 65 | + var targetIndex = tabIndex; |
| 66 | + |
| 67 | + if ( 'ArrowLeft' === event.key ) { |
| 68 | + targetIndex = 0 === tabIndex ? tabs.length - 1 : tabIndex - 1; |
| 69 | + } else if ( 'ArrowRight' === event.key ) { |
| 70 | + targetIndex = tabIndex === tabs.length - 1 ? 0 : tabIndex + 1; |
| 71 | + } else if ( 'Home' === event.key ) { |
| 72 | + targetIndex = 0; |
| 73 | + } else if ( 'End' === event.key ) { |
| 74 | + targetIndex = tabs.length - 1; |
| 75 | + } else { |
| 76 | + return; |
| 77 | + } |
| 78 | + |
| 79 | + event.preventDefault(); |
| 80 | + activateConsentTab( tabContainer, tabs[ targetIndex ] ); |
| 81 | + tabs[ targetIndex ].focus(); |
| 82 | + } ); |
| 83 | + } ); |
| 84 | + |
| 85 | + tabContainer.querySelectorAll( '.basicrum-copy-consent-snippet' ).forEach( function( button ) { |
| 86 | + button.addEventListener( 'click', function() { |
| 87 | + var target = document.getElementById( button.dataset.copyTarget ); |
| 88 | + var status = button.parentElement.querySelector( '.basicrum-copy-status' ); |
| 89 | + |
| 90 | + if ( ! target ) { |
| 91 | + return; |
| 92 | + } |
| 93 | + |
| 94 | + function reportCopied() { |
| 95 | + if ( status ) { |
| 96 | + status.textContent = button.dataset.copiedLabel; |
| 97 | + } |
| 98 | + } |
| 99 | + |
| 100 | + function reportCopyFallback() { |
| 101 | + if ( status ) { |
| 102 | + status.textContent = button.dataset.copyFallbackLabel; |
| 103 | + } |
| 104 | + } |
| 105 | + |
| 106 | + function copyWithSelection() { |
| 107 | + target.focus(); |
| 108 | + target.select(); |
| 109 | + |
| 110 | + if ( 'function' === typeof document.execCommand && document.execCommand( 'copy' ) ) { |
| 111 | + reportCopied(); |
| 112 | + return; |
| 113 | + } |
| 114 | + |
| 115 | + reportCopyFallback(); |
| 116 | + } |
| 117 | + |
| 118 | + if ( navigator.clipboard && 'function' === typeof navigator.clipboard.writeText ) { |
| 119 | + navigator.clipboard.writeText( target.value ).then( reportCopied, copyWithSelection ); |
| 120 | + return; |
| 121 | + } |
| 122 | + |
| 123 | + copyWithSelection(); |
| 124 | + } ); |
| 125 | + } ); |
| 126 | + |
| 127 | + tabContainer.classList.add( 'is-initialized' ); |
| 128 | + activateConsentTab( |
| 129 | + tabContainer, |
| 130 | + tabContainer.querySelector( '[role="tab"][aria-selected="true"]' ) || tabs[0] |
| 131 | + ); |
| 132 | + } |
| 133 | + |
| 134 | + consentTabs.forEach( initializeConsentTabs ); |
| 135 | + |
18 | 136 | if ( ! enabled || ! form || ! requiredFields.length ) { |
19 | 137 | return; |
20 | 138 | } |
|
0 commit comments