Making WordPress.org

Changeset 12296


Ignore:
Timestamp:
12/05/2022 03:28:15 AM (2 years ago)
Author:
dd32
Message:

Support Forums: Code Expand/Contract: Allow for Block Editor Code sections that may have multiple <code>s within a single <pre>.

See #6608.

Location:
sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-bbp-code-blocks-expand-contract
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-bbp-code-blocks-expand-contract/wporg-bbp-code-blocks-expand-contract.css

    r9610 r12296  
    2525    content: "\f343";
    2626}
     27
     28/* force-disable overflow on the <code> elements. */
     29#bbpress-forums div.bbp-topic-content pre code,
     30#bbpress-forums div.bbp-reply-content pre code {
     31    overflow: unset !important;
     32    overflow-x: inherit;
     33}
     34
     35#bbpress-forums div.bbp-topic-content pre.wporg-bbp-code-expander-code-wrapper,
     36#bbpress-forums div.bbp-reply-content pre.wporg-bbp-code-expander-code-wrapper {
     37    white-space: pre-wrap;
     38}
     39
     40#bbpress-forums div.bbp-topic-content pre.wporg-bbp-code-expander-code-wrapper code,
     41#bbpress-forums div.bbp-reply-content pre.wporg-bbp-code-expander-code-wrapper code {
     42    display: unset;
     43//  max-height: unset;
     44}
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-bbp-code-blocks-expand-contract/wporg-bbp-code-blocks-expand-contract.js

    r9610 r12296  
    11jQuery(document).ready( function($) {
    2     $( '.bbp-topic-content > pre > code, .bbp-reply-content > pre > code' ).each( function() {
     2    // The block editor may have multiple `<code>` within a `<pre>`.
     3    $( '.bbp-topic-content > pre, .bbp-reply-content > pre' ).each( function() {
    34        var $el = $( this );
    45
    5         if ( typeof this.scrollHeight !== 'undefined' && $el.height() < this.scrollHeight ) {
    6             var btn = $( '<div class="wporg-bbp-code-tools"><a class="wporg-bbp-code-expand" href="#"></a></div>' );
     6        if (
     7            typeof this.scrollHeight === 'undefined' ||
     8            $el.outerHeight( true ) >= this.scrollHeight
     9        ) {
     10            return;
     11        }
    712
    8             btn.find( 'a' ).text( bbpCodeBlocksExpandContract.expand );
     13        // Add a CSS selector.
     14        $el.addClass( 'wporg-bbp-code-expander-code-wrapper' );
    915
    10             btn.insertAfter( $el.closest( 'pre' ) )
    11         }
     16        var btn = $( '<div class="wporg-bbp-code-tools"><a class="wporg-bbp-code-expand" href="#"></a></div>' );
     17
     18        btn.find( 'a' ).text( bbpCodeBlocksExpandContract.expand );
     19
     20        btn.insertAfter( $el );
    1221    });
    1322
    14     $( '.wporg-bbp-code-expand' ).on( 'click', function(el) {
     23    $( '.wporg-bbp-code-expand' ).on( 'click', function(e) {
     24        e.preventDefault();
     25
    1526        var pre = $( this ).closest( 'div' ).prev( 'pre' ),
    16             code = pre.find( 'code' ),
    1727            heightGoal,
    1828            maxHeightGoal,
     
    2232            maxHeightGoal = pre.data( 'bbpInitHeight' );
    2333            scrollGoal = pre.offset().top - 45;
     34
     35            // Account for the WordPress.org headers.
     36            scrollGoal -= jQuery( 'header.wp-block-group.global-header' ).height() || 0;
     37            scrollGoal -= jQuery( '#wpadminbar' ).height() || 0;
     38
    2439        } else {
    2540            pre.data( 'bbpInitHeight', pre.css( 'max-height' ) );
    26             heightGoal = code.get( 0 ).scrollHeight;
     41            heightGoal = pre.get(0).scrollHeight + 2 * pre.css('padding-top');
    2742            maxHeightGoal = 'none';
    2843        }
     
    3045        if ( typeof heightGoal !== 'undefined' ) {
    3146            pre.css( 'max-height', maxHeightGoal );
    32             code.css( 'max-height', maxHeightGoal );
    33             code.animate( { height: heightGoal });
     47            pre.animate( { height: heightGoal } );
    3448            $( this ).text( bbpCodeBlocksExpandContract.contract );
    3549        } else {
    3650            $( [document.documentElement, document.body] ).animate({
    37                     scrollTop: scrollGoal
    38                 },
    39                 600,
    40                 'swing',
    41                 function() {
     51                    scrollTop: scrollGoal
     52                },
     53                300,
     54                'swing',
     55                function() {
    4256                    pre.css( 'max-height', maxHeightGoal );
    43                     code.css( 'max-height', maxHeightGoal );
    44                 }
    45             );
     57                }
     58            );
    4659
    4760            $( this ).text( bbpCodeBlocksExpandContract.expand );
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-bbp-code-blocks-expand-contract/wporg-bbp-code-blocks-expand-contract.php

    r9837 r12296  
    2626
    2727function wp_head() {
    28     wp_enqueue_script( 'wporg-bbp-code-blocks-expand-contract', plugins_url( 'wporg-bbp-code-blocks-expand-contract.js', __FILE__ ), [ 'jquery' ], 1, true );
     28    wp_enqueue_script(
     29        'wporg-bbp-code-blocks-expand-contract',
     30        plugins_url( 'wporg-bbp-code-blocks-expand-contract.js', __FILE__ ),
     31        [ 'jquery' ],
     32        filemtime( __DIR__ . '/wporg-bbp-code-blocks-expand-contract.js' ),
     33        true
     34    );
    2935    wp_localize_script( 'wporg-bbp-code-blocks-expand-contract', 'bbpCodeBlocksExpandContract', [
    3036        'expand'   => __( 'Expand', 'wporg-forums' ),
    3137        'contract' => __( 'Contract', 'wporg-forums' ),
    3238    ] );
    33     wp_enqueue_style( 'wporg-bbp-code-blocks-expand-contract', plugins_url( 'wporg-bbp-code-blocks-expand-contract.css', __FILE__ ), [], 1 );
     39    wp_enqueue_style(
     40        'wporg-bbp-code-blocks-expand-contract',
     41        plugins_url( 'wporg-bbp-code-blocks-expand-contract.css', __FILE__ ),
     42        [],
     43        filemtime( __DIR__ . '/wporg-bbp-code-blocks-expand-contract.css' ),
     44    );
    3445}
    3546add_action( 'wp_head', __NAMESPACE__ . '\wp_head' );
Note: See TracChangeset for help on using the changeset viewer.