Skip to content

♿️ aria(side-navigation): made changes in tabs js to make it work with side navigation. #480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: aria/SUI-320
Choose a base branch
from
Open

♿️ aria(side-navigation): made changes in tabs js to make it work with side navigation. #480

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
06bd6e9
js for new markup of side navigation
creador-dev Mar 16, 2022
ecec170
Merge branch 'aria/SUI-320' of https://github.com/wpmudev/shared-ui i…
creador-dev Mar 16, 2022
70ab9ab
merging with branch
creador-dev Mar 16, 2022
d158c51
made changes in markup
creador-dev Mar 16, 2022
271514d
Merge branch 'aria/SUI-320' of https://github.com/wpmudev/shared-ui i…
creador-dev Mar 16, 2022
2b86b53
used exisiting tabs js for side navigation as well
creador-dev Mar 16, 2022
02bd9e5
added sui select functionality
creador-dev Mar 16, 2022
58fbb7c
Merge branch 'aria/SUI-320' of https://github.com/wpmudev/shared-ui i…
creador-dev Mar 16, 2022
d63680a
Merge branch 'aria/SUI-320' of https://github.com/wpmudev/shared-ui i…
creador-dev Mar 16, 2022
482ec64
fixed button not working
creador-dev Mar 22, 2022
dca32bd
merge with latest changes
creador-dev Mar 22, 2022
3bd7d60
Merge branch 'aria/SUI-320' of https://github.com/wpmudev/shared-ui i…
creador-dev Mar 22, 2022
7bd50de
Merge branch 'aria/SUI-320' of https://github.com/wpmudev/shared-ui i…
creador-dev Mar 22, 2022
f7fdc66
Merge branch 'aria/SUI-320' of https://github.com/wpmudev/shared-ui i…
creador-dev Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 29 additions & 7 deletions assets/js/shared-ui/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,9 +195,9 @@
});
};

SUI.tabs = function( config ) {
SUI.tabs = function( config, elem ) {

var tablist = $( '.sui-tabs > div[role="tablist"]' );
var tablist = $( elem ).find( 'div[role="tablist"]' );
var data = config;

// For easy reference.
Expand Down Expand Up @@ -245,7 +245,7 @@

var tabs = $( tab ).closest( '[role="tablist"]' ).find( '[role="tab"]' ),
inputs = $( tab ).closest( '[role="tablist"]' ).find( 'input[type="radio"]' ),
panels = $( tab ).closest( '.sui-tabs' ).find( '> .sui-tabs-content > [role="tabpanel"]' ),
panels = $( tab ).closest( elem ).find( '> .sui-tabs-content > [role="tabpanel"]' ),
controls = $( tab ).attr( 'aria-controls' ),
input = $( tab ).next( 'input[type="radio"]' ),
panel = $( '#' + controls )
Expand Down Expand Up @@ -281,6 +281,10 @@
event.preventDefault();
proceed = true;
}
} else if ( '.sui-sidenav-wrapper' === elem && (keys.up === key || keys.down === key) ) {

event.preventDefault();
proceed = true;
} else {

if ( keys.left === key || keys.right === key ) {
Expand Down Expand Up @@ -388,7 +392,7 @@

function init() {

var tabgroup = tablist.closest( '.sui-tabs' );
var tabgroup = tablist.closest( elem );

// Run the function for each group of tabs to prevent conflicts
// when having child tabs.
Expand All @@ -397,8 +401,8 @@
var tabs, index;

tabgroup = $( this );
tablist = tabgroup.find( '> [role="tablist"]' );
tabs = tablist.find( '> [role="tab"]' );
tablist = tabgroup.find( '[role="tablist"]' );
tabs = tablist.find( '[role="tab"]' );

// Trigger events on click.
tabs.on( 'click', function( e ) {
Expand All @@ -425,8 +429,10 @@

if ( 0 !== $( 'SUI_BODY_CLASS .sui-tabs' ).length ) {

var elem = '.sui-tabs';

// Support tabs new markup.
SUI.tabs();
SUI.tabs('', elem);

// Support legacy tabs.
SUI.suiTabs();
Expand All @@ -436,4 +442,20 @@
});
}

if ( 0 !== $( 'SUI_BODY_CLASS .sui-row-with-sidenav' ).length ) {

var elem = '.sui-row-with-sidenav';
var suiselect = $( elem ).find( '.sui-select' );

SUI.tabs('', elem);

// sui select nav onselect change.
suiselect.each( function() {
$( this ).on( 'change', function() {
var btnId = $( '#' + $( this ).val() );
btnId.trigger( 'click' );
});
});
}

}( jQuery ) );