Making WordPress.org


Ignore:
Timestamp:
03/19/2015 10:36:17 PM (10 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.

File:
1 edited

Legend:

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

    r954 r1429  
    4545            add_action( 'wporg_action_links', array( 'WPorg_Handbook_Watchlist', 'display_action_link' ) );
    4646        }
     47
     48        // Modify SyntaxHighlighter Evolved code output to facilitate code collapse/expand.
     49        add_filter( 'syntaxhighlighter_htmlresult', array( __CLASS__, 'syntaxhighlighter_htmlresult' ) );
     50    }
     51
     52    /**
     53     * Is the current (or specified) post_type one of the DevHub handbook post types?
     54     *
     55     * TOOD: The handbook plugin should probably have this.
     56     *
     57     * @param string $post_type Optional. The post_type to check for being a handbook post type. Default '' (the current post type).
     58     * @return bool
     59     */
     60    public static function is_handbook_post_type( $post_type = '' ) {
     61        if ( ! $post_type ) {
     62            $post_type = get_post_type();
     63        }
     64
     65        return in_array( str_replace( '-handbook', '', $post_type ), self::$post_types );
     66    }
     67
     68    /**
     69     * If a syntax highlighted code block exceeds a given number of lines, wrap the
     70     * markup with other markup to trigger the code expansion/collapse JS handling
     71     * already implemented for the code reference.
     72     *
     73     * @param string  $text The pending result of the syntax highlighting.
     74     * @return string
     75     */
     76    public static function syntaxhighlighter_htmlresult( $text ) {
     77        $new_text      = '';
     78        // Collapse is handled for >10 lines. But just go ahead and show the full
     79        // code if that is just barely being exceeded (no one wants to expand to
     80        // see one or two more lines).
     81        $lines_to_show = 12;
     82        $do_collapse   = ( substr_count( $text, "\n" ) - 1 ) > $lines_to_show;
     83
     84        if ( $do_collapse )  {
     85            $new_text .= '<section class="source-content">';
     86            $new_text .= '<div class="source-code-container">';
     87        }
     88
     89        $new_text .= $text;
     90
     91        if ( $do_collapse ) {
     92            $new_text .= '</div>';
     93            $new_text .= '<p class="source-code-links"><span>';
     94            $new_text .= '<a href="#" class="show-complete-source">' . __( 'Expand full source code', 'wporg' ) . '</a>';
     95            $new_text .= '<a href="#" class="less-complete-source">' . __( 'Collapse full source code', 'wporg' ) . '</a>';
     96            $new_text .= '</span></p>';
     97            $new_text .= '</section>';
     98        }
     99
     100        return $new_text;
    47101    }
    48102
Note: See TracChangeset for help on using the changeset viewer.