Merge pull request #9768 from awesomemotive/release/3.3.5

Release 3.3.5

assets/css/admin/extensions/_features.scss

@@ -2,6 +2,7 @@
 	ul {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		text-align: left;
 	}
 
 	.dashicons-yes {

assets/css/admin/forms/_form-group.scss

@@ -31,6 +31,10 @@
 	&:last-of-type {
 		margin-bottom: 0;
 	}
+
+	legend {
+		margin-bottom: 8px;
+	}
 }
 
 .edd-form-group__label,
@@ -58,6 +62,12 @@
 		display: inline-flex;
 		align-items: flex-end;
 	}
+
+	&--row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
 }
 
 .edd-form-group__input {

assets/js/admin/components/vertical-sections/index.js

@@ -9,53 +9,62 @@ jQuery( document ).ready( function( $ ) {
 	// Hides the section content.
 	$( `${ sectionSelector } .section-content` ).hide();
 
-	const hash = window.location.hash;
-	if ( hash && hash.includes( 'edd_' ) ) {
-		// Show the section content related to the URL.
-		$( sectionSelector ).find( hash ).show();
+	// Handle the hash existing on page load.
+	const hash = window.location.hash,
+		defaultSectionHash = $( `${ sectionSelector } .section-nav li:first-child a` ).attr( 'href' );
 
-		// Set the aria-selected for section titles to be false
-		$( `${ sectionSelector } .section-title` ).attr( 'aria-selected', 'false' ).removeClass( 'section-title--is-active' );
-
-		// Set aria-selected true on the related link.
-		$( sectionSelector ).find( '.section-title a[href="' + hash + '"]' ).parents( '.section-title' ).attr( 'aria-selected', 'true' ).addClass( 'section-title--is-active' );
-
-	} else {
-		// Shows the first section's content.
-		$( `${ sectionSelector } .section-content:first-child` ).show();
-
-		// Makes the 'aria-selected' attribute true for the first section nav item.
-		$( `${ sectionSelector } .section-nav li:first-child` ).attr( 'aria-selected', 'true' ).addClass( 'section-title--is-active' );
-	}
+	// When the page loads, make sure a section is selected.
+	processSectionChange( hash );
 
 	// When a section nav item is clicked.
 	$( `${ sectionSelector } .section-nav li a` ).on( 'click',
-		function( j ) {
+		function( e ) {
 			// Prevent the default browser action when a link is clicked.
-			j.preventDefault();
+			e.preventDefault();
 
-			// Get the `href` attribute of the item.
-			const them = $( this ),
-				href = them.attr( 'href' ),
-				rents = them.parents( '.edd-vertical-sections' );
+			let href = $( this ).attr( 'href' );
 
-			// Hide all section content.
-			rents.find( '.section-content' ).hide();
+			processSectionChange( href );
 
-			// Find the section content that matches the section nav item and show it.
-			rents.find( href ).show();
+			// Add the current "link" to the page URL
+			window.history.pushState( 'object or string', '', href );
+		}
+	); // click()
+
+	$( window ).on( 'hashchange', function() {
+		processSectionChange( window.location.hash );
+	} ); // Back/Forward Navigation.
+
+	function processSectionChange( hash ) {
+		// If the has is empty or doesn't include edd_, use the default section hash.
+		if ( hash.length === 0 || ! hash.includes( 'edd_' ) ) {
+			hash = defaultSectionHash;
+		}
+
+		// If the selected nav item doesn't exist, use the default section hash.
+		let selectedNavItem = $( sectionSelector + ' ' + hash + '-nav-item' );
+
+		if ( ! selectedNavItem.length ) {
+			hash = defaultSectionHash;
+			selectedNavItem = $( sectionSelector + ' ' + defaultSectionHash + '-nav-item' );
+		}
+
+		let selectedContent = $( sectionSelector + ' ' + hash ),
+			parents  = selectedNavItem.parents( '.edd-vertical-sections' );
+
+			// Hide all section content.
+			parents.find( '.section-content' ).hide();
 
 			// Set the `aria-selected` attribute to false for all section nav items.
-			rents.find( '.section-title' ).attr( 'aria-selected', 'false' ).removeClass( 'section-title--is-active' );
+			parents.find( '.section-title' ).attr( 'aria-selected', 'false' ).removeClass( 'section-title--is-active' ).find( 'a' ).trigger( 'blur' );
 
 			// Set the `aria-selected` attribute to true for this section nav item.
-			them.parent().attr( 'aria-selected', 'true' ).addClass( 'section-title--is-active' );
+			selectedNavItem.attr( 'aria-selected', 'true' ).addClass( 'section-title--is-active' ).find( 'a' ).trigger( 'focus' );
 
-			// Maybe re-Chosen
-			rents.find( 'div.chosen-container' ).css( 'width', '100%' );
+			// Find the section content that matches the section nav item and show it.
+			selectedContent.show();
 
-			// Add the current "link" to the page URL
-			window.history.pushState( 'object or string', '', href );
-		}
-	); // click()
+			// Maybe re-Chosen
+			selectedContent.find( 'div.chosen-container' ).css( 'width', '100%' );
+	}
 } );

assets/js/admin/stripe/index.js

@@ -5,6 +5,7 @@
  */
 // import './../../../css/src/admin.scss';
 import './settings/index.js';
+import './settings/payment-methods.js';
 
 let testModeCheckbox;
 let testModeToggleNotice;

assets/js/admin/stripe/settings/payment-methods.js

@@ -0,0 +1,29 @@
+const toggles = document.querySelectorAll( '.edd-stripe-payment-method-toggle' );
+
+toggles.forEach( function ( button ) {
+	button.addEventListener( 'click', function ( e ) {
+		e.preventDefault();
+		toggleElement( this.dataset.toggle );
+		toggles.forEach( function ( button ) {
+			button.classList.remove( 'active' );
+		} );
+		this.classList.add( 'active' );
+	} );
+} );
+
+function toggleElement( value ) {
+	var elements = document.querySelectorAll( '.edd-stripe-payment-method' );
+	for ( var i = 0; i < elements.length; i++ ) {
+		elements[ i ].style.display = 'none';
+	}
+
+	var selectedElements;
+	if ( ! value ) {
+		selectedElements = elements;
+	} else {
+		selectedElements = document.querySelectorAll( '.edd-stripe-payment-method--' + value );
+	}
+	for ( var i = 0; i < selectedElements.length; i++ ) {
+		selectedElements[ i ].style.display = 'block';
+	}
+}