Changeset 6285

Timestamp:

12/18/2017 06:36:37 PM (7 years ago)

Author:

obenland

Message:

Plugins: Make FAQ topics linkable.

Allows for faq topics to be linked to directly, and show up expanded and scrolled to.

Props joostdevalk for initial patch.
Fixes #3319.

Location:

sites/trunk/wordpress.org/public_html/wp-content

Files:

• plugins/plugin-directory/readme/class-parser.php (modified) (1 diff)
• themes/pub/wporg-plugins/js/section-faq.js (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/plugin-directory/readme/class-parser.php ¶

@@ -401 +401 @@
                 $this->sections['faq'] .= "\n<dl>\n";
                 foreach ( $this->faq as $question => $answer ) {
-                    $this->sections['faq'] .= "<dt>{$question}</dt>\n<dd>{$answer}</dd>\n";
+                    $question_slug = sanitize_title_with_dashes( $question );
+                    $this->sections['faq'] .= "<dt id='{$question_slug}'>{$question}</dt>\n<dd>{$answer}</dd>\n";
                 }
                 $this->sections['faq'] .= "\n</dl>\n";

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

@@ -1 +1 @@
 ( function( $ ) {
-    $( 'dt', '#faq' )
+    var questions = $( 'dt', '#faq' );
+    var hash      = window.location.hash.replace( /[^a-z0-9-#]/gi, '' );
+
+    questions
         .each( function( index, question ) {
             var $question = $( question ),
-                $button   = $( '<button type="button" class="button-link" aria-expanded="false" />' );
+                $button   = $( '<a href="#" />' ),
+                id        = $question.attr( 'id' );
+
+            // If there is no ID, create our own.
+            if ( ! id ) {
+                id = '#' + $question.text().toLowerCase().replace( /[^\w\s]/gi, '' ).replace( /\s/gi, '-' );
+                $question.attr( 'id', id );
+            }
+
+            $button.attr( 'href', id ).on( 'click', function( event ) {
+                event.preventDefault();
+            } );
 
             $question.html( $button.text( $question.text() ) );
@@ -21 +35 @@
                 return 'true' !== attribute;
             } ).next( 'dd' ).slideToggle( 200 );
+
+            if ( hash ) {
+                window.scrollTo( 0, $question.offset().top );
+            }
         } );
+
+    if ( hash ) {
+        questions.find( '[href="' + hash + '"]' ).trigger( 'click' );
+    }
 } )( jQuery );