Changeset 12296

Timestamp:

12/05/2022 03:28:15 AM (4 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:

• wporg-bbp-code-blocks-expand-contract.css (modified) (1 diff)
• wporg-bbp-code-blocks-expand-contract.js (modified) (3 diffs)
• wporg-bbp-code-blocks-expand-contract.php (modified) (1 diff)

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

@@ -25 +25 @@
         content: "\f343";
 }
+
+/* force-disable overflow on the <code> elements. */
+#bbpress-forums div.bbp-topic-content pre code,
+#bbpress-forums div.bbp-reply-content pre code {
+        overflow: unset !important;
+        overflow-x: inherit;
+}
+
+#bbpress-forums div.bbp-topic-content pre.wporg-bbp-code-expander-code-wrapper,
+#bbpress-forums div.bbp-reply-content pre.wporg-bbp-code-expander-code-wrapper {
+        white-space: pre-wrap;
+}
+
+#bbpress-forums div.bbp-topic-content pre.wporg-bbp-code-expander-code-wrapper code,
+#bbpress-forums div.bbp-reply-content pre.wporg-bbp-code-expander-code-wrapper code {
+        display: unset;
+//      max-height: unset;
+}

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-bbp-code-blocks-expand-contract/wporg-bbp-code-blocks-expand-contract.js

@@ -1 +1 @@
 jQuery(document).ready( function($) {
-        $( '.bbp-topic-content > pre > code, .bbp-reply-content > pre > code' ).each( function() {
+        // The block editor may have multiple `<code>` within a `<pre>`.
+        $( '.bbp-topic-content > pre, .bbp-reply-content > pre' ).each( function() {
                 var $el = $( this );
 
-                if ( typeof this.scrollHeight !== 'undefined' && $el.height() < this.scrollHeight ) {
-                        var btn = $( '<div class="wporg-bbp-code-tools"><a class="wporg-bbp-code-expand" href="#"></a></div>' );
+                if (
+                        typeof this.scrollHeight === 'undefined' ||
+                        $el.outerHeight( true ) >= this.scrollHeight
+                ) {
+                        return;
+                }
 
-                        btn.find( 'a' ).text( bbpCodeBlocksExpandContract.expand );
+                // Add a CSS selector.
+                $el.addClass( 'wporg-bbp-code-expander-code-wrapper' );
 
-                        btn.insertAfter( $el.closest( 'pre' ) )
-                }
+                var btn = $( '<div class="wporg-bbp-code-tools"><a class="wporg-bbp-code-expand" href="#"></a></div>' );
+
+                btn.find( 'a' ).text( bbpCodeBlocksExpandContract.expand );
+
+                btn.insertAfter( $el );
         });
 
-        $( '.wporg-bbp-code-expand' ).on( 'click', function(el) {
+        $( '.wporg-bbp-code-expand' ).on( 'click', function(e) {
+                e.preventDefault();
+
                 var pre = $( this ).closest( 'div' ).prev( 'pre' ),
-                        code = pre.find( 'code' ),
                         heightGoal,
                         maxHeightGoal,
@@ -22 +32 @@
                         maxHeightGoal = pre.data( 'bbpInitHeight' );
                         scrollGoal = pre.offset().top - 45;
+
+                        // Account for the WordPress.org headers.
+                        scrollGoal -= jQuery( 'header.wp-block-group.global-header' ).height() || 0;
+                        scrollGoal -= jQuery( '#wpadminbar' ).height() || 0;
+
                 } else {
                         pre.data( 'bbpInitHeight', pre.css( 'max-height' ) );
-                        heightGoal = code.get( 0 ).scrollHeight;
+                        heightGoal = pre.get(0).scrollHeight + 2 * pre.css('padding-top');
                         maxHeightGoal = 'none';
                 }
@@ -30 +45 @@
                 if ( typeof heightGoal !== 'undefined' ) {
                         pre.css( 'max-height', maxHeightGoal );
-                        code.css( 'max-height', maxHeightGoal );
-                        code.animate( { height: heightGoal });
+                        pre.animate( { height: heightGoal } );
                         $( this ).text( bbpCodeBlocksExpandContract.contract );
                 } else {
                         $( [document.documentElement, document.body] ).animate({
-                                scrollTop: scrollGoal
-                            },
-                            600,
-                            'swing',
-                            function() {
+                                        scrollTop: scrollGoal
+                                },
+                                300,
+                                'swing',
+                                function() {
                                         pre.css( 'max-height', maxHeightGoal );
-                                        code.css( 'max-height', maxHeightGoal );
-                            }
-                    );
+                                }
+                        );
 
                         $( 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

@@ -26 +26 @@
 
 function wp_head() {
-        wp_enqueue_script( 'wporg-bbp-code-blocks-expand-contract', plugins_url( 'wporg-bbp-code-blocks-expand-contract.js', __FILE__ ), [ 'jquery' ], 1, true );
+        wp_enqueue_script(
+                'wporg-bbp-code-blocks-expand-contract',
+                plugins_url( 'wporg-bbp-code-blocks-expand-contract.js', __FILE__ ),
+                [ 'jquery' ],
+                filemtime( __DIR__ . '/wporg-bbp-code-blocks-expand-contract.js' ),
+                true
+        );
         wp_localize_script( 'wporg-bbp-code-blocks-expand-contract', 'bbpCodeBlocksExpandContract', [
                 'expand'   => __( 'Expand', 'wporg-forums' ),
                 'contract' => __( 'Contract', 'wporg-forums' ),
         ] );
-        wp_enqueue_style( 'wporg-bbp-code-blocks-expand-contract', plugins_url( 'wporg-bbp-code-blocks-expand-contract.css', __FILE__ ), [], 1 );
+        wp_enqueue_style(
+                'wporg-bbp-code-blocks-expand-contract', 
+                plugins_url( 'wporg-bbp-code-blocks-expand-contract.css', __FILE__ ),
+                [],
+                filemtime( __DIR__ . '/wporg-bbp-code-blocks-expand-contract.css' ),
+        );
 }
 add_action( 'wp_head', __NAMESPACE__ . '\wp_head' );