WordPress.org
Get WordPress

Making WordPress.org

Changeset 3788


Ignore:
Timestamp:
08/09/2016 06:06:41 PM (10 years ago)
Author:
coffee2code
Message:

developer.wordpress.org: Add a comment preview to the front-end form for user contributed notes.

  • Preview is fetched via AJAX.
  • Preview updates 1.5 seconds after user stops typing.
  • Adds editor toolbar button "preview note".
  • Moves filtering of 'syntaxhighlighter_htmlresult' outside of just handbooks since it can also be applied elsewhere.

Props keesiemeijer.
Fixes #1865.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
2 added
8 edited

Legend:

Unmodified
Added
Removed

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

    r3787 r3788  
    8888                ) ); ?>
    8989
     90                <!-- Comment Preview -->
     91                <div id='comment-preview' class='comment byuser depth-1' style='display:none;'>
     92                        <article class='comment-body'>
     93                                <header class='comment-meta'>
     94                                        <div>
     95                                                <?php _e( 'Preview', 'wporg' ); ?>
     96                                                <span class='spinner' style='display:none'></span>
     97                                        </div>
     98                                </header>
     99                                <div class='comment-content'></div>
     100                        </article>
     101                </div>
     102
    90103        <?php endif; ?>
    91104

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

    r3754 r3788  
    4545 */
    4646require __DIR__ . '/inc/user-content.php';
     47
     48/**
     49 * User-submitted content preview.
     50 */
     51require __DIR__ . '/inc/user-content-preview.php';
    4752
    4853/**
    … …  
    112117
    113118        add_filter( 'document_title_separator', __NAMESPACE__ . '\\theme_title_separator', 10, 2 );
     119
     120        add_filter( 'syntaxhighlighter_htmlresult', __NAMESPACE__ . '\\syntaxhighlighter_htmlresult' );
    114121}
    115122
    … …  
    277284        }
    278285}
     286
     287/**
     288 * If a syntax highlighted code block exceeds a given number of lines, wrap the
     289 * markup with other markup to trigger the code expansion/collapse JS handling
     290 * already implemented for the code reference.
     291 *
     292 * @param string  $text The pending result of the syntax highlighting.
     293 * @return string
     294 */
     295function syntaxhighlighter_htmlresult( $text ) {
     296
     297        // is_admin() is true in front end AJAX requests.
     298        if ( is_admin() && !( defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
     299                return $text;
     300        }
     301
     302        $new_text      = '';
     303        // Collapse is handled for >10 lines. But just go ahead and show the full
     304        // code if that is just barely being exceeded (no one wants to expand to
     305        // see one or two more lines).
     306        $lines_to_show = 12;
     307        $do_collapse   = ( substr_count( $text, "\n" ) - 1 ) > $lines_to_show;
     308
     309        if ( $do_collapse )  {
     310                $new_text .= '<section class="source-content">';
     311                $new_text .= '<div class="source-code-container">';
     312        }
     313
     314        $new_text .= $text;
     315
     316        if ( $do_collapse ) {
     317                $new_text .= '</div>';
     318                $new_text .= '<p class="source-code-links"><span>';
     319                $new_text .= '<a href="#" class="show-complete-source">' . __( 'Expand full source code', 'wporg' ) . '</a>';
     320                $new_text .= '<a href="#" class="less-complete-source">' . __( 'Collapse full source code', 'wporg' ) . '</a>';
     321                $new_text .= '</span></p>';
     322                $new_text .= '</section>';
     323        }
     324
     325        return $new_text;
     326}

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

    r3508 r3788  
    5050                        add_action( 'wporg_action_links', array( 'WPorg_Handbook_Watchlist', 'display_action_link' ) );
    5151                }
    52 
    53                 // Modify SyntaxHighlighter Evolved code output to facilitate code collapse/expand.
    54                 if ( ! is_admin() ) {
    55                         add_filter( 'syntaxhighlighter_htmlresult', array( __CLASS__, 'syntaxhighlighter_htmlresult' ) );
    56                 }
    5752        }
    5853
    … …  
    8984                $current_handbook_name = function_exists( 'wporg_get_current_handbook_name' ) ? wporg_get_current_handbook_name() : '';
    9085                $query->set( 'current_handbook_name', $current_handbook_name );
    91         }
    92 
    93         /**
    94          * If a syntax highlighted code block exceeds a given number of lines, wrap the
    95          * markup with other markup to trigger the code expansion/collapse JS handling
    96          * already implemented for the code reference.
    97          *
    98          * @param string  $text The pending result of the syntax highlighting.
    99          * @return string
    100          */
    101         public static function syntaxhighlighter_htmlresult( $text ) {
    102                 $new_text      = '';
    103                 // Collapse is handled for >10 lines. But just go ahead and show the full
    104                 // code if that is just barely being exceeded (no one wants to expand to
    105                 // see one or two more lines).
    106                 $lines_to_show = 12;
    107                 $do_collapse   = ( substr_count( $text, "\n" ) - 1 ) > $lines_to_show;
    108 
    109                 if ( $do_collapse )  {
    110                         $new_text .= '<section class="source-content">';
    111                         $new_text .= '<div class="source-code-container">';
    112                 }
    113 
    114                 $new_text .= $text;
    115 
    116                 if ( $do_collapse ) {
    117                         $new_text .= '</div>';
    118                         $new_text .= '<p class="source-code-links"><span>';
    119                         $new_text .= '<a href="#" class="show-complete-source">' . __( 'Expand full source code', 'wporg' ) . '</a>';
    120                         $new_text .= '<a href="#" class="less-complete-source">' . __( 'Collapse full source code', 'wporg' ) . '</a>';
    121                         $new_text .= '</span></p>';
    122                         $new_text .= '</section>';
    123                 }
    124 
    125                 return $new_text;
    12686        }
    12787

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

    r3787 r3788  
    6969                        }
    7070
    71                         wp_enqueue_script( 'wporg-developer-user-notes', get_template_directory_uri() . '/js/user-notes.js', array( 'quicktags' ), '20160606', true );
     71                        wp_enqueue_script( 'wporg-developer-user-notes', get_template_directory_uri() . '/js/user-notes.js', array( 'quicktags', 'wporg-developer-preview' ), '20160606', true );
    7272                        if ( get_option( 'thread_comments' ) ) {
    7373                                wp_enqueue_script( 'comment-reply' );

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

    r1429 r3788  
    44 * Handles all interactivity on the single function page
    55 */
    6 ( function( $ ) {
     6var wporg_developer = ( function( $ ) {
    77        'use strict';
    88
    … …  
    2929                // Extra 10px added to partially show next line so it's clear there is more.
    3030                $sourceCollapsedHeight = 196;
     31                sourceCodeDisplay();
     32        }
    3133
    32                 $( '.source-content' ).find( 'table' ).each( function( t ) {
     34        function sourceCodeDisplay( element ) {
     35                 
     36                if ( element !== undefined ) {
     37                        // Find table inside a specific source code element if passed.
     38                        var sourceCode = $( '.source-content', element ).find( 'table' );
     39                } else {
     40                        // Find table inside all source code elements.
     41                        var sourceCode = $( '.source-content' ).find( 'table' );
     42                }
     43
     44                if ( !sourceCode.length ) {
     45                        return;
     46                }
     47
     48                sourceCode.each( function( t ) {
    3349                        if ( ( $sourceCollapsedHeight - 12 ) < $( this ).height() ) {
    3450
    … …  
    3652
    3753                                // Do this with javascript so javascript-less can enjoy the total sourcecode
    38                                 sourceContent.find( '.source-code-container' ).css( { height: $sourceCollapsedHeight + 'px' } );
     54                                sourceContent.find( '.source-code-container' ).css( {
     55                                        height: $sourceCollapsedHeight + 'px'
     56                                } );
    3957
    40                                 sourceContent.find( '.source-code-links').find('span:first' ).show();
     58                                sourceContent.find( '.source-code-links' ).find( 'span:first' ).show();
    4159                                sourceContent.find( '.show-complete-source' ).show();
    42                                 sourceContent.find( '.show-complete-source' ).on( 'click', toggleCompleteSource );
    43                                 sourceContent.find( '.less-complete-source' ).on( 'click', toggleCompleteSource );
     60                                sourceContent.find( '.show-complete-source' ).off( 'click.togglesource' ).on( 'click.togglesource', toggleCompleteSource );
     61                                sourceContent.find( '.less-complete-source' ).off( 'click.togglesource' ).on( 'click.togglesource', toggleCompleteSource );
    4462                        }
    4563                } );
    … …  
    102120
    103121        $( onLoad );
     122
     123        // Expose the sourceCodeDisplay() function for usage outside of this function.
     124        return {
     125                sourceCodeDisplay: sourceCodeDisplay
     126        };
     127
    104128} )( jQuery );

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes.js

    r3316 r3788  
    66( function( $ ) {
    77
     8        var commentForm = $( '.comment-form textarea' );
     9
     10        if ( !commentForm.length ) {
     11                return;
     12        }
     13
    814        function showCommentForm() {
    915                $( '#respond, #add-user-note' ).toggle();
     16               
     17                var preview = $( '#comment-preview' );
     18                if( preview.length && ( wporg_developer_note_preview !== undefined ) ) {
     19                        preview.show();
     20
     21                        //Initialize preview with textarea and preview selectors
     22                        wporg_developer_note_preview.init( '.comment-form textarea', '#comment-preview' );
     23                }
    1024
    1125                if ( pos = $( '#submit' ).position() ) {
    … …  
    3953        // Override tab within user notes textarea to actually insert a tab character.
    4054        // Copied from code within core's wp-admin/js/common.js.
    41         $('.comment-form textarea').bind('keydown.wpevent_InsertTab', function(e) {
     55        commentForm.bind('keydown.wpevent_InsertTab', function(e) {
    4256                var el = e.target, selStart, selEnd, val, scroll, sel;
    4357

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

    r3753 r3788  
    11831183                }
    11841184
    1185                 .comment-list li {
     1185                .comment-list li,
     1186                #comment-preview {
    11861187                        margin-top: 2.5rem;
    11871188                        background: #fff;
    … …  
    11931194                                overflow: auto;
    11941195                        }
     1196                }
     1197
     1198                #comment-preview {
     1199                        clear:both;
     1200                }
     1201
     1202                #comment-preview .comment-content {
     1203                        min-height: 6em;
     1204                }
     1205
     1206                #comment-preview .spinner {
     1207                        background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
     1208                        -webkit-background-size: 20px 20px;
     1209                        background-size: 20px 20px;
     1210                        margin: 0 0.5em;
     1211                        padding-left: 20px;
    11951212                }
    11961213

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

    r3753 r3788  
    15551555}
    15561556
    1557 .devhub-wrap.single-wp-parser-function .comment-list li, .devhub-wrap.single-wp-parser-method .comment-list li, .devhub-wrap.single-wp-parser-hook .comment-list li, .devhub-wrap.single-wp-parser-class .comment-list li {
     1557.devhub-wrap.single-wp-parser-function .comment-list li,
     1558.devhub-wrap.single-wp-parser-function #comment-preview, .devhub-wrap.single-wp-parser-method .comment-list li,
     1559.devhub-wrap.single-wp-parser-method #comment-preview, .devhub-wrap.single-wp-parser-hook .comment-list li,
     1560.devhub-wrap.single-wp-parser-hook #comment-preview, .devhub-wrap.single-wp-parser-class .comment-list li,
     1561.devhub-wrap.single-wp-parser-class #comment-preview {
    15581562  margin-top: 2.5rem;
    15591563  background: #fff;
    … …  
    15631567}
    15641568
    1565 .devhub-wrap.single-wp-parser-function .comment-list li article, .devhub-wrap.single-wp-parser-method .comment-list li article, .devhub-wrap.single-wp-parser-hook .comment-list li article, .devhub-wrap.single-wp-parser-class .comment-list li article {
     1569.devhub-wrap.single-wp-parser-function .comment-list li article,
     1570.devhub-wrap.single-wp-parser-function #comment-preview article, .devhub-wrap.single-wp-parser-method .comment-list li article,
     1571.devhub-wrap.single-wp-parser-method #comment-preview article, .devhub-wrap.single-wp-parser-hook .comment-list li article,
     1572.devhub-wrap.single-wp-parser-hook #comment-preview article, .devhub-wrap.single-wp-parser-class .comment-list li article,
     1573.devhub-wrap.single-wp-parser-class #comment-preview article {
    15661574  overflow: auto;
     1575}
     1576
     1577.devhub-wrap.single-wp-parser-function #comment-preview, .devhub-wrap.single-wp-parser-method #comment-preview, .devhub-wrap.single-wp-parser-hook #comment-preview, .devhub-wrap.single-wp-parser-class #comment-preview {
     1578  clear: both;
     1579}
     1580
     1581.devhub-wrap.single-wp-parser-function #comment-preview .comment-content, .devhub-wrap.single-wp-parser-method #comment-preview .comment-content, .devhub-wrap.single-wp-parser-hook #comment-preview .comment-content, .devhub-wrap.single-wp-parser-class #comment-preview .comment-content {
     1582  min-height: 6em;
     1583}
     1584
     1585.devhub-wrap.single-wp-parser-function #comment-preview .spinner, .devhub-wrap.single-wp-parser-method #comment-preview .spinner, .devhub-wrap.single-wp-parser-hook #comment-preview .spinner, .devhub-wrap.single-wp-parser-class #comment-preview .spinner {
     1586  background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
     1587  -webkit-background-size: 20px 20px;
     1588  background-size: 20px 20px;
     1589  margin: 0 0.5em;
     1590  padding-left: 20px;
    15671591}
    15681592
Note: See TracChangeset for help on using the changeset viewer.