WordPress.org
Get WordPress

Making WordPress.org

Changeset 3788


Ignore:
Timestamp:
08/09/2016 06:06:41 PM (9 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.