Changeset 13750

Timestamp:

05/28/2024 12:45:57 AM (11 months ago)

Author:

dufresnesteven

Message:

wporg-plugins-2024: Fix FAQ anchor links.

See: ​https://github.com/WordPress/wordpress.org/pull/315
Props: dd32, ryelle

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/js/section-faq.js (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/js/section-faq.js

@@ -6 +6 @@
             var $question = $( question ),
                 $button   = $( '<button />' ),
-                $h3       = $( '<h3 />' ),
-                id        = $question.attr( 'id' );
-
-            // If there is no ID, create our own.
-            if ( ! id ) {
-                id = encodeURIComponent( $question.text().toLowerCase().trim() );
-                $question.attr( 'id', id );
-            }
-
-            $button.attr( 'formaction', id ).on( 'click', function( event ) {
-                event.preventDefault();
-                window.location.hash = id;
-            } );
+                $h3       = $( '<h3 />' );
 
             $question.html( $h3.html( $button.text( $question.text() ) ) );
@@ -42 +30 @@
                 window.scrollTo( 0, $question.offset().top - scrollPaddingTop );
             }
+
+            if ( $question.prop( 'id' ) ) {
+                window.location.hash = $question.prop( 'id' );
+            }
         } );
 
     if ( window.location.hash ) {
-        jQuery(
+        var uriHash = window.location.hash.substr(1),
+            uriElement = document.getElementById( uriHash );
+
+        if ( ! uriElement ) {
             // Decode/Encode here is to work with any existing links that are not fully-encoded, the trim handles whitespace/newlines.
-            document.getElementById( encodeURIComponent( decodeURIComponent( window.location.hash.substr(1) ).trim() ) )
-        ).trigger( 'click' );
+            uriHash    = encodeURIComponent( decodeURIComponent( uriHash ) ).trim();
+            uriElement = document.getElementById( uriHash );
+
+            if ( ! uriElement ) {
+                // Perform PHP-style URI encoding. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI#encoding_for_rfc3986
+                uriHash    = uriHash.replace( /[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}` );
+                uriElement = document.getElementById( uriHash );
+            }
+        }
+
+        jQuery( uriElement ).trigger( 'click' );
     }
 } )( jQuery );