Changeset 1429

Timestamp:

03/19/2015 10:36:17 PM (9 years ago)

Author:

coffee2code

Message:

developer.wordpress.org: Enable expand/collapse functionality for syntax-highlighted code in handbooks.

• Enqueue function-reference.js on handbook pages as well
• Wrap handbook syntax-highlighted code in similar markup the JS expects as used on coderef pages
• Modify JS to handle multiple expandable code blocks on a page
• Change styling for expand/collapse links since for handbooks only one link will be present in that section

Fixes #959.

Location:

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

Files:

• inc/handbooks.php (modified) (1 diff)
• inc/user-content.php (modified) (1 diff)
• js/function-reference.js (modified) (3 diffs)
• scss/main.scss (modified) (1 diff)
• stylesheets/main.css (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/handbooks.php

@@ -45 +45 @@
             add_action( 'wporg_action_links', array( 'WPorg_Handbook_Watchlist', 'display_action_link' ) );
         }
+
+        // Modify SyntaxHighlighter Evolved code output to facilitate code collapse/expand.
+        add_filter( 'syntaxhighlighter_htmlresult', array( __CLASS__, 'syntaxhighlighter_htmlresult' ) );
+    }
+
+    /**
+     * Is the current (or specified) post_type one of the DevHub handbook post types?
+     *
+     * TOOD: The handbook plugin should probably have this.
+     *
+     * @param string $post_type Optional. The post_type to check for being a handbook post type. Default '' (the current post type).
+     * @return bool
+     */
+    public static function is_handbook_post_type( $post_type = '' ) {
+        if ( ! $post_type ) {
+            $post_type = get_post_type();
+        }
+
+        return in_array( str_replace( '-handbook', '', $post_type ), self::$post_types );
+    }
+
+    /**
+     * If a syntax highlighted code block exceeds a given number of lines, wrap the
+     * markup with other markup to trigger the code expansion/collapse JS handling
+     * already implemented for the code reference.
+     *
+     * @param string  $text The pending result of the syntax highlighting.
+     * @return string
+     */
+    public static function syntaxhighlighter_htmlresult( $text ) {
+        $new_text      = '';
+        // Collapse is handled for >10 lines. But just go ahead and show the full
+        // code if that is just barely being exceeded (no one wants to expand to
+        // see one or two more lines).
+        $lines_to_show = 12;
+        $do_collapse   = ( substr_count( $text, "\n" ) - 1 ) > $lines_to_show;
+
+        if ( $do_collapse )  {
+            $new_text .= '<section class="source-content">';
+            $new_text .= '<div class="source-code-container">';
+        }
+
+        $new_text .= $text;
+
+        if ( $do_collapse ) {
+            $new_text .= '</div>';
+            $new_text .= '<p class="source-code-links"><span>';
+            $new_text .= '<a href="#" class="show-complete-source">' . __( 'Expand full source code', 'wporg' ) . '</a>';
+            $new_text .= '<a href="#" class="less-complete-source">' . __( 'Collapse full source code', 'wporg' ) . '</a>';
+            $new_text .= '</span></p>';
+            $new_text .= '</section>';
+        }
+
+        return $new_text;
     }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php

@@ -66 +66 @@
     public static function scripts_and_styles() {
         if ( is_singular() ) {
-            if ( '0' != get_comments_number() || \DevHub\post_type_has_source_code() ) {
+            if ( '0' != get_comments_number() || \DevHub\post_type_has_source_code() || Devhub_Handbooks::is_handbook_post_type() ) {
                 wp_enqueue_script( 'wporg-developer-function-reference', get_template_directory_uri() . '/js/function-reference.js', array( 'jquery', 'syntaxhighlighter-core', 'syntaxhighlighter-brush-php' ), '20150126', true );
                 wp_enqueue_style( 'syntaxhighlighter-core' );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/function-reference.js

@@ -7 +7 @@
     'use strict';
 
-    var $sourceContent, $sourceCodeContainer, $sourceCodeTable, $showCompleteSource, $lessCompleteSource, sourceCollapsedHeight;
+    var $sourceCollapsedHeight;
 
     var $usesList, $usedByList, $showMoreUses, $hideMoreUses, $showMoreUsedBy, $hideMoreUsedBy;
@@ -24 +24 @@
         }
 
-        // We only expect one source-content per document
-        $sourceContent = $( '.source-content' );
-        $sourceCodeContainer = $( '.source-code-container' );
-
         SyntaxHighlighter.highlight();
-
-        $sourceCodeTable = $sourceContent.find( 'table' );
 
         // 1em (margin) + 10 * 17px + 10. Lines are 1.1em which rounds to 17px: calc( 1em + 17px * 10 + 10 ).
         // Extra 10px added to partially show next line so it's clear there is more.
-        sourceCollapsedHeight = 196;
+        $sourceCollapsedHeight = 196;
 
-        if ( ( sourceCollapsedHeight - 12 ) < $sourceCodeTable.height() ) {
+        $( '.source-content' ).find( 'table' ).each( function( t ) {
+            if ( ( $sourceCollapsedHeight - 12 ) < $( this ).height() ) {
 
-            // Do this with javascript so javascript-less can enjoy the total sourcecode
-            $( '.source-code-container' ).css( { height: sourceCollapsedHeight + 'px' } );
+                var sourceContent = $( this ).closest( '.source-content' );
 
-            $showCompleteSource = $( '.show-complete-source' );
-            $lessCompleteSource = $( '.less-complete-source' );
+                // Do this with javascript so javascript-less can enjoy the total sourcecode
+                sourceContent.find( '.source-code-container' ).css( { height: $sourceCollapsedHeight + 'px' } );
 
-            $( '.source-code-links span:first' ).show();
-            $showCompleteSource.show();
-            $showCompleteSource.on( 'click', toggleCompleteSource );
-            $lessCompleteSource.on( 'click', toggleCompleteSource );
-        }
+                sourceContent.find( '.source-code-links').find('span:first' ).show();
+                sourceContent.find( '.show-complete-source' ).show();
+                sourceContent.find( '.show-complete-source' ).on( 'click', toggleCompleteSource );
+                sourceContent.find( '.less-complete-source' ).on( 'click', toggleCompleteSource );
+            }
+        } );
     }
 
@@ -54 +49 @@
         e.preventDefault();
 
-        if ( $showCompleteSource.is(':visible') ) {
-            var heightGoal = $sourceCodeTable.height() + 45; // takes into consideration potential x-scrollbar
+        var sourceContent = $( this ).closest( '.source-content' );
+
+        if ( $( this ).parent().find( '.show-complete-source' ).is( ':visible' ) ) {
+            var heightGoal = sourceContent.find( 'table' ).height() + 45; // takes into consideration potential x-scrollbar
         } else {
-            var heightGoal = sourceCollapsedHeight;
+            var heightGoal = $sourceCollapsedHeight;
         }
 
-        $sourceCodeContainer.animate( { height: heightGoal + 'px' } );
+        sourceContent.find( '.source-code-container:first' ).animate( { height: heightGoal + 'px' } );
 
-        $showCompleteSource.toggle();
-        $lessCompleteSource.toggle();
-
+        $( this ).parent().find( 'a' ).toggle();
     }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -1063 +1063 @@
     }
 
+    .source-code-links span {
+        border-left: 1px solid #999;
+        margin-left: 1em;
+        padding-left: 1em;
+    }
+
     .source-code-links span:first-child {
         display: none;
-        border-right: 1px solid #999;
-        margin-right: 1em;
-        padding-right: 1em;
+        border-left: 0;
+        margin-left: 1em;
+        padding-left: 0;
     }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -1242 +1242 @@
   margin-top: 1em;
 }
+.devhub-wrap .source-code-links span {
+  border-left: 1px solid #999;
+  margin-left: 1em;
+  padding-left: 1em;
+}
 .devhub-wrap .source-code-links span:first-child {
   display: none;
-  border-right: 1px solid #999;
-  margin-right: 1em;
-  padding-right: 1em;
+  border-left: 0;
+  margin-left: 1em;
+  padding-left: 0;
 }
 .devhub-wrap .source-code-container {