| 1 |
/** |
| 2 |
* @file ../includes/page-form-builder/ui-parts/_src/bfb-top-tabs.js |
| 3 |
* Tabs switcher (scoped by nav attributes): |
| 4 |
* - data-wpbc-bfb-tabs-nav="1" |
| 5 |
* - data-active-tab="..." |
| 6 |
* - data-wpbc-bfb-panels-root="#selector" (optional) |
| 7 |
* - data-wpbc-bfb-panel-class="base_class" (optional) |
| 8 |
* |
| 9 |
* Panels: |
| 10 |
* - .{base_class} |
| 11 |
* - .{base_class}__{tab_id} |
| 12 |
*/ |
| 13 |
(function (w, d) { |
| 14 |
'use strict'; |
| 15 |
|
| 16 |
function closest_nav(el) { |
| 17 |
return (el && el.closest) ? el.closest( '[data-wpbc-bfb-tabs-nav="1"]' ) : null; |
| 18 |
} |
| 19 |
|
| 20 |
function get_panels_root(nav) { |
| 21 |
var sel = nav ? String( nav.getAttribute( 'data-wpbc-bfb-panels-root' ) || '' ).trim() : ''; |
| 22 |
if ( sel ) { |
| 23 |
try { |
| 24 |
var root = d.querySelector( sel ); |
| 25 |
if ( root ) { |
| 26 |
return root; |
| 27 |
} |
| 28 |
} catch ( e ) {} |
| 29 |
} |
| 30 |
return d; |
| 31 |
} |
| 32 |
|
| 33 |
function get_panel_base_class(nav) { |
| 34 |
var base = nav ? String( nav.getAttribute( 'data-wpbc-bfb-panel-class' ) || '' ).trim() : ''; |
| 35 |
return base ? base : 'wpbc_bfb__tab_section'; |
| 36 |
} |
| 37 |
|
| 38 |
function emit_change(nav, tab_id, prev_tab_id) { |
| 39 |
var nav_id = (nav && nav.id) ? String(nav.id) : ''; |
| 40 |
try { |
| 41 |
d.dispatchEvent( |
| 42 |
new CustomEvent('wpbc:bfb:top-tab', { |
| 43 |
detail: { |
| 44 |
tab : tab_id, |
| 45 |
prev_tab: prev_tab_id || '', |
| 46 |
nav_id : nav_id |
| 47 |
} |
| 48 |
}) |
| 49 |
); |
| 50 |
} catch (e) {} |
| 51 |
} |
| 52 |
|
| 53 |
function set_active_menu_item(nav, tab_id) { |
| 54 |
var items = nav.querySelectorAll( '.wpbc_ui_el__horis_nav_item' ); |
| 55 |
for ( var i = 0; i < items.length; i++ ) { |
| 56 |
items[i].classList.remove( 'active' ); |
| 57 |
} |
| 58 |
var active = nav.querySelector( '.wpbc_ui_el__horis_nav_item__' + tab_id ); |
| 59 |
if ( active ) { |
| 60 |
active.classList.add( 'active' ); |
| 61 |
} |
| 62 |
} |
| 63 |
|
| 64 |
// --- update activate() to capture prev tab --- |
| 65 |
function activate(nav, tab_id) { |
| 66 |
if (!nav || !tab_id) return; |
| 67 |
|
| 68 |
tab_id = String(tab_id).trim(); |
| 69 |
if (!tab_id) return; |
| 70 |
|
| 71 |
var root = get_panels_root(nav); |
| 72 |
var base = get_panel_base_class(nav); |
| 73 |
|
| 74 |
var active_panel = root.querySelector('.' + base + '__' + tab_id); |
| 75 |
if (!active_panel) return; |
| 76 |
|
| 77 |
var prev_tab_id = String(nav.getAttribute('data-active-tab') || '').trim(); // NEW |
| 78 |
|
| 79 |
nav.setAttribute('data-active-tab', tab_id); |
| 80 |
|
| 81 |
var panels = root.querySelectorAll('.' + base); |
| 82 |
for (var i = 0; i < panels.length; i++) { |
| 83 |
panels[i].style.display = 'none'; |
| 84 |
} |
| 85 |
active_panel.style.display = ''; |
| 86 |
|
| 87 |
set_active_menu_item(nav, tab_id); |
| 88 |
|
| 89 |
emit_change(nav, tab_id, prev_tab_id); // NEW |
| 90 |
} |
| 91 |
|
| 92 |
// TODO listen for the loading tab on first initial load and depends from the "bfb_options":{"advanced_mode_source":"builder"} set active specific tab: builder or advanced. |
| 93 |
|
| 94 |
// Click handler (delegated). |
| 95 |
d.addEventListener( 'click', function (ev) { |
| 96 |
var link = (ev.target && ev.target.closest) ? ev.target.closest( '[data-wpbc-bfb-action="panel"][data-wpbc-bfb-tab]' ) : null; |
| 97 |
if ( ! link ) { |
| 98 |
return; |
| 99 |
} |
| 100 |
|
| 101 |
var nav = closest_nav( link ); |
| 102 |
if ( ! nav ) { |
| 103 |
return; |
| 104 |
} |
| 105 |
|
| 106 |
ev.preventDefault(); |
| 107 |
activate( nav, link.getAttribute( 'data-wpbc-bfb-tab' ) ); |
| 108 |
} ); |
| 109 |
|
| 110 |
// Init all nav containers on load. |
| 111 |
d.addEventListener( 'DOMContentLoaded', function () { |
| 112 |
var navs = d.querySelectorAll( '[data-wpbc-bfb-tabs-nav="1"]' ); |
| 113 |
|
| 114 |
for ( var i = 0; i < navs.length; i++ ) { |
| 115 |
var nav = navs[i]; |
| 116 |
|
| 117 |
// Use data-active-tab if valid, otherwise fallback to first panel tab link. |
| 118 |
var tab_id = String( nav.getAttribute( 'data-active-tab' ) || '' ).trim(); |
| 119 |
|
| 120 |
if ( tab_id ) { |
| 121 |
activate( nav, tab_id ); |
| 122 |
continue; |
| 123 |
} |
| 124 |
|
| 125 |
var first_link = nav.querySelector( '[data-wpbc-bfb-action="panel"][data-wpbc-bfb-tab]' ); |
| 126 |
if ( first_link ) { |
| 127 |
activate( nav, first_link.getAttribute( 'data-wpbc-bfb-tab' ) ); |
| 128 |
} |
| 129 |
} |
| 130 |
} ); |
| 131 |
|
| 132 |
})( window, document ); |
| 133 |
|
