WordPress.org

Making WordPress.org

Ticket #1865: 1865.1.patch

File 1865.1.patch, 22.2 KB (added by keesiemeijer, 3 years ago)

Make preview a standalone feature. Update preview after clicking QuickTag buttons

  • 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

     
    4646require __DIR__ . '/inc/user-content.php';
    4747
    4848/**
     49 * User-submitted content preview.
     50 */
     51require __DIR__ . '/inc/user-content-preview.php';
     52
     53/**
    4954 * Voting for user-submitted content.
    5055 */
    5156require __DIR__ . '/inc/user-content-voting.php';
     
    111116        add_filter( 'wp_parser_skip_duplicate_hooks', '__return_true' );
    112117
    113118        add_filter( 'document_title_separator', __NAMESPACE__ . '\\theme_title_separator', 10, 2 );
     119
     120        add_filter( 'syntaxhighlighter_htmlresult', __NAMESPACE__ . '\\syntaxhighlighter_htmlresult' );
    114121}
    115122
    116123/**
     
    258265        wp_enqueue_style( 'dashicons' );
    259266        wp_enqueue_style( 'open-sans', '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600' );
    260267        wp_enqueue_style( 'wporg-developer-style', get_stylesheet_uri(), array(), '2' );
    261         wp_enqueue_style( 'wp-dev-sass-compiled', get_template_directory_uri() . '/stylesheets/main.css', array( 'wporg-developer-style' ), '20160729' );
     268        wp_enqueue_style( 'wp-dev-sass-compiled', get_template_directory_uri() . '/stylesheets/main.css', array( 'wporg-developer-style' ), '20160725' );
    262269        wp_enqueue_script( 'wporg-developer-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
    263270        wp_enqueue_script( 'wporg-developer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
    264271        wp_enqueue_script( 'wporg-developer-search', get_template_directory_uri() . '/js/search.js', array(), '20150430', true );
     
    276283                add_meta_box( 'commentsdiv', __( 'User Contributed Notes', 'wporg' ), 'post_comment_meta_box', $post_type, 'normal', 'high' );
    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/img/loading.gif

    Cannot display: file marked as a binary type.
    svn:mime-type = image/png
  • 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 ##
    +image/png
    \ 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-preview.php

     
     1<?php
     2/**
     3 * Code Reference user submitted content preview.
     4 *
     5 * @package wporg-developer
     6 */
     7
     8/**
     9 * Class to handle user submitted content preview.
     10 */
     11class DevHub_Note_Preview {
     12
     13        /**
     14         * Initializer
     15         */
     16        public static function init() {
     17                add_action( 'init', array( __CLASS__, 'do_init' ) );
     18        }
     19
     20        /**
     21         * Handles adding hooks to enable previews.
     22         */
     23        public static function do_init() {
     24
     25                // Ajax actions to process preview
     26                add_action( "wp_ajax_preview_comment",         array( __CLASS__, "ajax_preview" ) );
     27                add_action( "wp_ajax_nopriv_preview_comment",  array( __CLASS__, "ajax_preview" ) );
     28
     29                // Enqueue scripts and styles
     30                add_action( 'wp_enqueue_scripts',               array( __CLASS__, 'scripts_and_styles' ), 11 );
     31        }
     32
     33        /**
     34         * Enqueues scripts and styles.
     35         */
     36        public static function scripts_and_styles() {
     37                if ( is_singular() ) {
     38                        wp_enqueue_script( 'wporg-developer-preview', get_template_directory_uri() . '/js/user-notes-preview.js', array( 'jquery', 'quicktags', 'wporg-developer-function-reference' ), '20160606', true );
     39                        wp_localize_script( 'wporg-developer-preview', 'wporg_note_preview', array(
     40                                'ajaxurl' => admin_url( 'admin-ajax.php' ),
     41                                'nonce'   => wp_create_nonce( 'preview_nonce' ),
     42                                'preview'   => __( 'preview note', 'wporg' ),
     43                        ) );
     44                }
     45        }
     46
     47        /**
     48         * Ajax action to update the comment preview.
     49         */
     50        public static function ajax_preview( ) {
     51                check_ajax_referer( 'preview_nonce', 'preview_nonce' );
     52
     53                if ( !isset( $_POST['preview_comment'] ) ) {
     54                        wp_send_json_error( array( 'comment' => '' ) );
     55                }
     56
     57                $comment = apply_filters('pre_comment_content', $_POST['preview_comment'] );
     58                $comment = wp_unslash( $comment );
     59                $comment = apply_filters('get_comment_text', $comment);
     60                $comment = apply_filters('comment_text', $comment);             
     61
     62                wp_send_json_success( array( 'comment' => $comment ) );
     63        }
     64}
     65
     66
     67DevHub_Note_Preview::init();
     68 No newline at end of file
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php

     
    6868                                wp_enqueue_style( 'syntaxhighlighter-theme-default' );
    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' );
    7474                        }
  • 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                        // 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
    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-preview.js

     
     1/**
     2 * Preview for user contributed notes.
     3 *
     4 */
     5
     6var wporg_developer_note_preview = ( function( $ ) {
     7
     8        var textarea, preview, previewContent, spinner;
     9
     10        function init( textarea_selector, preview_selector ) {
     11
     12                textarea = $( textarea_selector );
     13                preview = $( preview_selector );
     14
     15                if ( textarea.length && preview.length && ( undefined !== wporg_note_preview ) ) {
     16
     17                        previewContent = $( '.comment-content', preview );
     18                        spinner = $( '.spinner', preview );
     19
     20                        if ( previewContent.length && spinner.length ) {
     21
     22                                add_preview_button();
     23
     24                                var current_text = textarea.val();
     25
     26                                if ( current_text.length ) {
     27                                        update_preview( current_text );
     28                                }
     29
     30                                add_preview_events();
     31                        }
     32                }
     33        }
     34
     35        function add_preview_button() {
     36                QTags.addButton( 'preview', wporg_note_preview.preview, function() {
     37                        var pos = preview.position();
     38                        $( 'html,body' ).animate( {
     39                                scrollTop: pos.top
     40                        }, 1000 );
     41                } );
     42        }
     43
     44        function add_preview_events() {
     45
     46                // Update Preview after QuickTag button is clicked.
     47                var buttons = $( '#qt_comment_toolbar' ).find( 'input' ).not( '#qt_comment_preview' );
     48                buttons.on( 'click', function() {
     49                        // Set timeout to let the quicktags do it's thing first.
     50                        setTimeout( function() {
     51                                update_preview( textarea.val() );
     52                        }, 500 );
     53                } );
     54
     55                // Update Preview after keykup event.
     56                // Delay updating the preview by 2 seconds to not overload the server.
     57                textarea.bind( 'keyup', debounce( function( e ) {
     58                        update_preview( $( this ).val() );
     59                }, 2000 ) );
     60
     61                // Display a spinner as soon as the comment form changes input.
     62                textarea.bind( 'input propertychange selectionchange', function( e ) {
     63                        spinner.show();
     64                } );
     65        }
     66
     67        function update_preview( content ) {
     68                spinner.show();
     69                $.post( wporg_note_preview.ajaxurl, {
     70                        action: "preview_comment",
     71                        preview_nonce: wporg_note_preview.nonce,
     72                        preview_comment: content
     73                } )
     74
     75                .done( function( response ) {
     76                        update_preview_html( response.data.comment );
     77                } )
     78
     79                .fail( function( response ) {
     80                        //console.log( 'fail', response );
     81                } )
     82
     83                .always( function( response ) {
     84                        spinner.hide();
     85                } );
     86        }
     87
     88        // Add toggle links to source code in preview if needed.
     89        function update_source_code() {
     90
     91                if ( undefined !== wporg_developer ) {
     92                        wporg_developer.sourceCodeDisplay( preview );
     93                }
     94        }
     95
     96        function update_preview_html( content ) {
     97                // Update preview content
     98                previewContent.html( content );
     99
     100                if ( undefined !== window.SyntaxHighlighter ) {
     101                        SyntaxHighlighter.highlight();
     102                }
     103
     104                // Add toggle link to source code in preview if needed.
     105                update_source_code();
     106                spinner.hide();
     107        }
     108
     109        // https://remysharp.com/2010/07/21/throttling-function-calls
     110        function debounce( fn, delay ) {
     111                var timer = null;
     112                return function() {
     113                        var context = this,
     114                                args = arguments;
     115                        clearTimeout( timer );
     116                        timer = setTimeout( function() {
     117                                fn.apply( context, args );
     118                        }, delay );
     119                };
     120        }
     121
     122        return {
     123                init: init
     124        }
     125
     126} )( jQuery );
     127 No newline at end of file
  • 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
     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();
    1020
     21                        //Initialize preview with textarea and preview selectors
     22                        wporg_developer_note_preview.init( '.comment-form textarea', '#comment-preview' );
     23                }
     24
    1125                if ( pos = $( '#submit' ).position() ) {
    1226                        if ( pos.top < $(window).scrollTop() ) {
    1327                                // Scroll up
     
    3852
    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
    4458                if ( e.keyCode == 27 ) { // escape key
  • 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;