Changeset 4387

Timestamp:

11/21/2016 03:23:52 AM (8 years ago)

Author:

dd32

Message:

Plugin Directory: Toggle the "Read More" links to "Show Less" after the section is expanded.
This also fixes a bug where the toggle was incorrectly hidden when visiting a page such as /hello-dolly/#changelog.

Fixes #2206

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins

Files:

• functions.php (modified) (1 diff)
• js/section-accordion.js (modified) (4 diffs)
• template-parts/section.php (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php

@@ -74 +74 @@
 
     if ( is_singular( 'plugin' ) ) {
-        wp_enqueue_script( 'wporg-plugins-accordion', get_template_directory_uri() . '/js/section-accordion.js', array(), '20160525', true );
+        wp_enqueue_script( 'wporg-plugins-accordion', get_template_directory_uri() . '/js/section-accordion.js', array(), '20161121', true );
     }
 

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

@@ -2 +2 @@
 ( function( $, wporg ) {
     wporg.plugins = {
-        toggle: function( sectionId ) {
-            $( sectionId ).toggleClass( 'toggled' ).attr( 'aria-expanded', function( index, attribute ) {
+        toggle: function( section ) {
+            var sectionId = '#' + section,
+                $section = $( sectionId ),
+                $button = $('button.section-toggle[aria-controls="' + section + '"]');
+
+            $section.toggleClass( 'toggled' ).attr( 'aria-expanded', function( index, attribute ) {
                 var notExpanded = 'false' === attribute;
 
@@ -14 +18 @@
 
             $( '.read-more:not(' + sectionId + ',.short-content)' ).removeClass( 'toggled' ).attr( 'aria-expanded', false );
+
+            $button.text(
+                $section.hasClass( 'toggled' ) ?
+                    $button.data('show-less') :
+                    $button.data('read-more')
+            );
         },
         initial_size: function( selector ) {
             $( selector ).each( function( i, el) {
-                var $el = $(el);
+                var $el = $(el),
+                    $section_toggle = $( '.section-toggle[aria-controls="' + el.id + '"]' );
+
                 if ( $el.height() / el.scrollHeight > 0.8 || el.id == 'screenshots' ) {
                     // Force the section to expand, and hide its button
                     $el.toggleClass( 'toggled' ).addClass('short-content').attr( 'aria-expanded', true );
-                    $( '.section-toggle[aria-controls="' + el.id + '"]' ).hide();
+                    $section_toggle.hide();
                 } else {
                     // If the description starts with an embed/video, set the min-height to include it.
@@ -34 +46 @@
                     // Contract the section and make sure its button is visible
                     $el.removeClass( 'short-content' ).attr( 'aria-expanded', false );
-                    $( '.section-toggle[aria-controls="' + el.id + '"]' ).show();
+                    $section_toggle.show();
                 }
             } );
@@ -41 +53 @@
 
     $( function() {
+        // Must always run first, else expand/contract buttons will get hidden incorrectly.
+        wporg.plugins.initial_size( '.read-more' );
+
         if ( document.location.hash ) {
-            wporg.plugins.toggle( document.location.hash );
+            wporg.plugins.toggle( document.location.hash.substr(1) );
         }
 
-        wporg.plugins.initial_size( '.read-more' );
-
         $( window ).on( 'hashchange', function() {
-            wporg.plugins.toggle( document.location.hash );
+            wporg.plugins.toggle( document.location.hash.substr(1) );
         } );
 
         $( '#main' ).on( 'click', '.section-toggle', function( event ) {
-            wporg.plugins.toggle( '#' + $( event.target ).attr( 'aria-controls' ) );
+            wporg.plugins.toggle( $( event.target ).attr( 'aria-controls' ) );
         } );
     } );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php

@@ -15 +15 @@
     <?php echo $section_content; ?>
 </div>
-<button type="button" class="button-link section-toggle" aria-controls="<?php echo esc_attr( $section_slug ); ?>"><?php _e( 'Read more', 'wporg-plugins' ); ?></button>
+<button
+    type="button"
+    class="button-link section-toggle"
+    aria-controls="<?php echo esc_attr( $section_slug ); ?>"
+    data-show-less="<?php esc_attr_e( 'Show less', 'wporg-plugins' ); ?>"
+    data-read-more="<?php esc_attr_e( 'Read more', 'wporg-plugins' ); ?>"
+><?php _e( 'Read more', 'wporg-plugins' ); ?></button>