Changeset 47829

Timestamp:

05/19/2020 10:48:49 PM (6 years ago)

Author:

whyisjake

Message:

Bundled Themes: Twenty Twenty anchor links don't work in mobile menu.
Modifies the mobile modal menu javascript, so that anchor links will close the modal and scroll to the anchor within the page.

This brings the changes from [47784] to the 5.4 branch.

Props Giorgio25b, suzylah, yuhin, samful, bdcstr.
Fixes #48916.

Location:

branches/5.4

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentytwenty/assets/js/index.js (modified) (1 diff)

branches/5.4/src/wp-content/themes/twentytwenty/assets/js/index.js

@@ -137 +137 @@
                         var target = event.target;
                         var modal = document.querySelector( '.cover-modal.active' );
+
+                        // if target onclick is <a> with # within the href attribute
+                        if ( event.target.tagName.toLowerCase() === 'a' && event.target.hash.includes( '#' ) && modal !== null ) {
+                                // untoggle the modal
+                                this.untoggleModal( modal );
+                                // wait 550 and scroll to the anchor
+                                setTimeout( function() {
+                                        var anchor = document.getElementById( event.target.hash.slice( 1 ) );
+                                        anchor.scrollIntoView();
+                                }, 550 );
+                        }
 
                         if ( target === modal ) {