WordPress.org

Making WordPress.org

Ticket #1865: 1865.patch

File 1865.patch, 17.8 KB (added by keesiemeijer, 3 years ago)

Add comment preview after comment form

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

     
    8585                        'title_reply'         =>  '', //'Add Example'
    8686                ) ); ?>
    8787
     88                <!-- Comment Preview -->
     89                <div id='comment-preview' class='comment byuser depth-1' style='display:none;'>
     90                        <article class='comment-body'>
     91                                <header class='comment-meta'>
     92                                        <div>
     93                                                <?php _e('Preview', 'wporg') ?>
     94                                                <span class='spinner' style='display:none'></span>
     95                                        </div>
     96                                </header>
     97                                <div class='comment-content'></div>
     98                        </article>
     99                </div>
     100
    88101        <?php endif; ?>
    89102
    90103        <?php if ( ! \DevHub\is_parsed_post_type() && comments_open() ) : ?>
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php

     
    111111        add_filter( 'wp_parser_skip_duplicate_hooks', '__return_true' );
    112112
    113113        add_filter( 'document_title_separator', __NAMESPACE__ . '\\theme_title_separator', 10, 2 );
     114
     115        add_filter( 'syntaxhighlighter_htmlresult', __NAMESPACE__ . '\\syntaxhighlighter_htmlresult' );
    114116}
    115117
    116118/**
     
    276278                add_meta_box( 'commentsdiv', __( 'User Contributed Notes', 'wporg' ), 'post_comment_meta_box', $post_type, 'normal', 'high' );
    277279        }
    278280}
     281
     282/**
     283 * If a syntax highlighted code block exceeds a given number of lines, wrap the
     284 * markup with other markup to trigger the code expansion/collapse JS handling
     285 * already implemented for the code reference.
     286 *
     287 * @param string  $text The pending result of the syntax highlighting.
     288 * @return string
     289 */
     290function syntaxhighlighter_htmlresult( $text ) {
     291
     292        // is_admin() is true in front end AJAX requests.
     293        if ( is_admin() && !( defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
     294                return $text;
     295        }
     296
     297        $new_text      = '';
     298        // Collapse is handled for >10 lines. But just go ahead and show the full
     299        // code if that is just barely being exceeded (no one wants to expand to
     300        // see one or two more lines).
     301        $lines_to_show = 12;
     302        $do_collapse   = ( substr_count( $text, "\n" ) - 1 ) > $lines_to_show;
     303
     304        if ( $do_collapse )  {
     305                $new_text .= '<section class="source-content">';
     306                $new_text .= '<div class="source-code-container">';
     307        }
     308
     309        $new_text .= $text;
     310
     311        if ( $do_collapse ) {
     312                $new_text .= '</div>';
     313                $new_text .= '<p class="source-code-links"><span>';
     314                $new_text .= '<a href="#" class="show-complete-source">' . __( 'Expand full source code', 'wporg' ) . '</a>';
     315                $new_text .= '<a href="#" class="less-complete-source">' . __( 'Collapse full source code', 'wporg' ) . '</a>';
     316                $new_text .= '</span></p>';
     317                $new_text .= '</section>';
     318        }
     319
     320        return $new_text;
     321}
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/img/loading.gif

    Cannot display: file marked as a binary type.
    svn:mime-type = application/octet-stream
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/handbooks.php

    Property changes on: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/img/loading.gif
    ___________________________________________________________________
    Added: svn:mime-type
    ## -0,0 +1 ##
    +application/octet-stream
    \ No newline at end of property
     
    4949                if ( class_exists( 'WPorg_Handbook_Watchlist' ) && method_exists( 'WPorg_Handbook_Watchlist', 'display_action_link' ) ) {
    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
    5954        /**
     
    9186        }
    9287
    9388        /**
    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;
    126         }
    127 
    128         /**
    12989         * Filter handbook post types to create handbooks for: plugins, themes.
    13090         *
    13191         * @access public
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php

     
    5555                // Tweak code contained in shortcode
    5656                add_filter( 'syntaxhighlighter_precode',       array( __CLASS__, 'syntaxhighlighter_precode' ) );
    5757
     58                // Ajax actions to process preview
     59                add_action( "wp_ajax_preview_comment",         array( __CLASS__, "ajax_preview" ) );
     60                add_action( "wp_ajax_nopriv_preview_comment",  array( __CLASS__, "ajax_preview" ) );
    5861        }
    5962
    6063        /**
     
    6972                        }
    7073
    7174                        wp_enqueue_script( 'wporg-developer-user-notes', get_template_directory_uri() . '/js/user-notes.js', array( 'quicktags' ), '20160606', true );
     75                        wp_localize_script( 'wporg-developer-user-notes', 'wporg_user_notes', array(
     76                                        'ajaxurl' => admin_url( 'admin-ajax.php' ),
     77                                        'nonce'   => wp_create_nonce( 'preview_nonce' ),
     78                                        'preview'   => __( 'preview note', 'wporg' ),
     79                                ) );
     80
    7281                        if ( get_option( 'thread_comments' ) ) {
    7382                                wp_enqueue_script( 'comment-reply' );
    7483                        }
     
    120129                return ob_get_clean();
    121130        }
    122131
     132        /**
     133         * Ajax action to update the comment preview.
     134         */
     135        public static function ajax_preview( ) {
     136                check_ajax_referer( 'preview_nonce', 'preview_nonce' );
     137
     138                if ( !isset( $_POST['preview_comment'] ) ) {
     139                        wp_send_json_error( array( 'comment' => '' ) );
     140                }
     141
     142                $comment = apply_filters('pre_comment_content', $_POST['preview_comment'] );
     143                $comment = wp_unslash( $comment );
     144                $comment = apply_filters('get_comment_text', $comment);
     145                $comment = apply_filters('comment_text', $comment);             
     146
     147                wp_send_json_success( array( 'comment' => $comment ) );
     148        }
     149
    123150} // DevHub_User_Submitted_Content
    124151
    125152DevHub_User_Submitted_Content::init();
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/function-reference.js

     
    33 *
    44 * Handles all interactivity on the single function page
    55 */
    6 ( function( $ ) {
     6var wporg_developer = ( function( $ ) {
    77        'use strict';
    88
    99        var $sourceCollapsedHeight;
     
    2828                // 1em (margin) + 10 * 17px + 10. Lines are 1.1em which rounds to 17px: calc( 1em + 17px * 10 + 10 ).
    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                        // Search table inside a specific source code element if passed.
     38                        var sourceCode = $( '.source-content', element ).find( 'table' );
     39                } else {
     40                        // Search 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
    3551                                var sourceContent = $( this ).closest( '.source-content' );
    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                } );
    4664        }
     
    101119        }
    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

     
    55
    66( function( $ ) {
    77
     8        var commentForm = $( '.comment-form textarea' );
     9        var preview = $( '#comment-preview' );
     10
     11        if ( !commentForm.length ) {
     12                return;
     13        }
     14
    815        function showCommentForm() {
    916                $( '#respond, #add-user-note' ).toggle();
     17                toggle_preview();
    1018
    1119                if ( pos = $( '#submit' ).position() ) {
    1220                        if ( pos.top < $(window).scrollTop() ) {
     
    7785                        e.preventDefault();
    7886        });
    7987
     88        if ( !preview.length || ( typeof wporg_user_notes === 'undefined' ) ) {
     89                return;
     90        }
     91
     92        var previewContent = $( '.comment-content', preview );
     93        var spinner = $( '.spinner', preview );
     94        var comment = commentForm.val();
     95
     96        QTags.addButton( 'preview', wporg_user_notes.preview, function() {
     97                var pos = preview.position();
     98                $( 'html,body' ).animate( {
     99                        scrollTop: pos.top
     100                }, 1000 );
     101        } );
     102
     103        if ( comment.length ) {
     104                update_preview( comment );
     105        }
     106
     107        // Display a spinner as soon as the comment form changes input
     108        commentForm.bind( 'input propertychange', function( e ) {
     109                spinner.show();
     110        } );
     111
     112        // Delay updating the preview by 1.5 seconds to not overload the server
     113        commentForm.bind( 'keyup', debounce( function( e ) {
     114                update_preview( $( this ).val() );
     115        }, 1500 ) );
     116
     117        function update_preview( content ) {
     118                $.post( wporg_user_notes.ajaxurl, {
     119                        action: "preview_comment",
     120                        preview_nonce: wporg_user_notes.nonce,
     121                        preview_comment: content
     122                } )
     123
     124                .done( function( response ) {
     125                        update_preview_html( response.data.comment );
     126                } )
     127
     128                .fail( function( response ) {
     129                        //console.log( 'fail', response );
     130                } )
     131
     132                .always( function( response ) {
     133                        spinner.hide();
     134                } );
     135        }
     136
     137        function toggle_preview(){
     138                preview.toggle();
     139
     140                // Add toggle links to source code in preview if needed.
     141                // Toggle links were not added (before) because the preview was hidden.
     142                wporg_developer.sourceCodeDisplay( preview );
     143        }
     144
     145        function update_preview_html( content ) {
     146                // Update preview content
     147                previewContent.html( content );
     148
     149                if ( undefined !== window.SyntaxHighlighter ) {
     150                        SyntaxHighlighter.highlight();
     151                }
     152               
     153                // Add toggle links to source code in preview if needed.
     154                wporg_developer.sourceCodeDisplay( preview );
     155                spinner.hide();
     156        }
     157
     158        // https://remysharp.com/2010/07/21/throttling-function-calls
     159        function debounce( fn, delay ) {
     160                var timer = null;
     161                return function() {
     162                        var context = this,
     163                                args = arguments;
     164                        clearTimeout( timer );
     165                        timer = setTimeout( function() {
     166                                fn.apply( context, args );
     167                        }, delay );
     168                };
     169        }
     170
    80171} )( jQuery );
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

     
    11821182                        padding: 0;
    11831183                }
    11841184
    1185                 .comment-list li {
     1185                .comment-list li,
     1186                #comment-preview {
    11861187                        margin-top: 2.5rem;
    11871188                        background: #fff;
    11881189                        overflow: auto;
     
    11941195                        }
    11951196                }
    11961197
     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("../img/loading.gif") no-repeat scroll 0 50%;
     1208                        margin: 0 1em;
     1209                        padding-left: 16px;
     1210                }
     1211
    11971212                .comment-list .avatar {
    11981213                        float: left;
    11991214                        margin: -2px 1em 0 0;
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

     
    15541554  padding: 0;
    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;
    15601564  overflow: auto;
     
    15621566  border-radius: 2px;
    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;
    15671575}
    15681576
     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("../img/loading.gif") no-repeat scroll 0 50%;
     1587  margin: 0 1em;
     1588  padding-left: 16px;
     1589}
     1590
    15691591.devhub-wrap.single-wp-parser-function .comment-list .avatar, .devhub-wrap.single-wp-parser-method .comment-list .avatar, .devhub-wrap.single-wp-parser-hook .comment-list .avatar, .devhub-wrap.single-wp-parser-class .comment-list .avatar {
    15701592  float: left;
    15711593  margin: -2px 1em 0 0;