WordPress.org

Making WordPress.org

Changeset 4387


Ignore:
Timestamp:
11/21/2016 03:23:52 AM (3 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:
3 edited

Legend:

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

    r4376 r4387  
    7474
    7575    if ( is_singular( 'plugin' ) ) {
    76         wp_enqueue_script( 'wporg-plugins-accordion', get_template_directory_uri() . '/js/section-accordion.js', array(), '20160525', true );
     76        wp_enqueue_script( 'wporg-plugins-accordion', get_template_directory_uri() . '/js/section-accordion.js', array(), '20161121', true );
    7777    }
    7878
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/section-accordion.js

    r4385 r4387  
    22( function( $, wporg ) {
    33    wporg.plugins = {
    4         toggle: function( sectionId ) {
    5             $( sectionId ).toggleClass( 'toggled' ).attr( 'aria-expanded', function( index, attribute ) {
     4        toggle: function( section ) {
     5            var sectionId = '#' + section,
     6                $section = $( sectionId ),
     7                $button = $('button.section-toggle[aria-controls="' + section + '"]');
     8
     9            $section.toggleClass( 'toggled' ).attr( 'aria-expanded', function( index, attribute ) {
    610                var notExpanded = 'false' === attribute;
    711
     
    1418
    1519            $( '.read-more:not(' + sectionId + ',.short-content)' ).removeClass( 'toggled' ).attr( 'aria-expanded', false );
     20
     21            $button.text(
     22                $section.hasClass( 'toggled' ) ?
     23                    $button.data('show-less') :
     24                    $button.data('read-more')
     25            );
    1626        },
    1727        initial_size: function( selector ) {
    1828            $( selector ).each( function( i, el) {
    19                 var $el = $(el);
     29                var $el = $(el),
     30                    $section_toggle = $( '.section-toggle[aria-controls="' + el.id + '"]' );
     31
    2032                if ( $el.height() / el.scrollHeight > 0.8 || el.id == 'screenshots' ) {
    2133                    // Force the section to expand, and hide its button
    2234                    $el.toggleClass( 'toggled' ).addClass('short-content').attr( 'aria-expanded', true );
    23                     $( '.section-toggle[aria-controls="' + el.id + '"]' ).hide();
     35                    $section_toggle.hide();
    2436                } else {
    2537                    // If the description starts with an embed/video, set the min-height to include it.
     
    3446                    // Contract the section and make sure its button is visible
    3547                    $el.removeClass( 'short-content' ).attr( 'aria-expanded', false );
    36                     $( '.section-toggle[aria-controls="' + el.id + '"]' ).show();
     48                    $section_toggle.show();
    3749                }
    3850            } );
     
    4153
    4254    $( function() {
     55        // Must always run first, else expand/contract buttons will get hidden incorrectly.
     56        wporg.plugins.initial_size( '.read-more' );
     57
    4358        if ( document.location.hash ) {
    44             wporg.plugins.toggle( document.location.hash );
     59            wporg.plugins.toggle( document.location.hash.substr(1) );
    4560        }
    4661
    47         wporg.plugins.initial_size( '.read-more' );
    48 
    4962        $( window ).on( 'hashchange', function() {
    50             wporg.plugins.toggle( document.location.hash );
     63            wporg.plugins.toggle( document.location.hash.substr(1) );
    5164        } );
    5265
    5366        $( '#main' ).on( 'click', '.section-toggle', function( event ) {
    54             wporg.plugins.toggle( '#' + $( event.target ).attr( 'aria-controls' ) );
     67            wporg.plugins.toggle( $( event.target ).attr( 'aria-controls' ) );
    5568        } );
    5669    } );
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php

    r4223 r4387  
    1515    <?php echo $section_content; ?>
    1616</div>
    17 <button type="button" class="button-link section-toggle" aria-controls="<?php echo esc_attr( $section_slug ); ?>"><?php _e( 'Read more', 'wporg-plugins' ); ?></button>
     17<button
     18    type="button"
     19    class="button-link section-toggle"
     20    aria-controls="<?php echo esc_attr( $section_slug ); ?>"
     21    data-show-less="<?php esc_attr_e( 'Show less', 'wporg-plugins' ); ?>"
     22    data-read-more="<?php esc_attr_e( 'Read more', 'wporg-plugins' ); ?>"
     23><?php _e( 'Read more', 'wporg-plugins' ); ?></button>
Note: See TracChangeset for help on using the changeset viewer.