Making WordPress.org


Ignore:
Timestamp:
03/07/2017 09:26:14 PM (8 years ago)
Author:
obenland
Message:

Plugin Directory: Clean up comitter widget

Separates JS and CSS from PHP and uses some more core functionality.

See #2111.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/plugin-directory/widgets/class-committers.php

    r4301 r5117  
    1010 */
    1111class Committers extends \WP_Widget {
    12 
    1312    /**
    14      * Meta constructor.
     13     * Committers constructor.
    1514     */
    1615    public function __construct() {
     
    3130
    3231        $committers = Tools::get_plugin_committers( $post->post_name );
    33         $committers = array_map( function( $user_login ) {
     32        $committers = array_map( function ( $user_login ) {
    3433            return get_user_by( 'login', $user_login );
    3534        }, $committers );
    3635
     36        wp_enqueue_script( 'wporg-plugins-committers', plugins_url( 'js/committers.js', __FILE__ ), array( 'wp-util' ), true );
     37        wp_localize_script( 'wporg-plugins-committers', 'committersWidget', array(
     38            'restUrl'    => get_rest_url(),
     39            'restNonce'  => wp_create_nonce( 'wp_rest' ),
     40            'pluginSlug' => $post->post_name,
     41        ) );
     42
    3743        echo $args['before_widget'];
    3844        ?>
    39         <style>
    40             <?php // TODO: Yes, these need to be moved into the CSS somewhere. ?>
    41             ul.committer-list {
    42                 list-style: none;
    43                 margin: 0;
    44                 font-size: 0.9em;
    45             }
    46             ul.committer-list li {
    47                 clear: both;
    48                 padding-bottom: 0.5em;
    49             }
    50             ul.committer-list a.remove {
    51                 color: red;
    52                 cursor: pointer;
    53                 visibility: hidden;
    54             }
    55             ul.committer-list li:hover a.remove {
    56                 visibility: visible;
    57             }
    58         </style>
    59 
    6045        <h3><?php _e( 'Committers', 'wporg-plugins' ); ?></h3>
    6146
    62         <ul class="committer-list">
    63         <?php foreach ( $committers as $committer ) {
    64             echo '<li data-user="' . esc_attr( $committer->user_nicename ) . '">' .
    65                 get_avatar( $committer->ID, 32 ) .
    66                 '<a href="' . esc_url( 'https://profiles.wordpress.org/' . $committer->user_nicename ) . '">' . Template::encode( $committer->display_name ) . '</a>' .
    67                 '<br><small>' .
    68                 ( current_user_can( 'plugin_review' ) ? esc_html( $committer->user_email ) . ' ' : '' ) .
    69                 '<a class="remove">' . __( 'Remove', 'wporg-plugins' ) . '</a>' .
    70                 '</small>' .
    71                 '</li>';
    72         } ?>
    73         <li class="new" data-template="<?php echo esc_attr( '<li><img src="" class="avatar avatar-32 photo" height="32" width="32"><a class="profile" href=""></a><br><small><span class="email"></span> <a class="remove">' . __( 'Remove', 'wporg-plugins' ) . '</a></small></li>' ); ?>">
    74             <input type="text" name="committer" placeholder="<?php esc_attr_e( 'Login, Slug, or Email.', 'wporg-plugins' ); ?>">
    75             <input type="submit" value="<?php esc_attr_e( 'Add', 'wporg-plugins' ); ?>">
    76         </li>
     47        <ul id="committer-list" class="committer-list">
    7748
     49            <?php foreach ( $committers as $committer ) : ?>
     50                <li data-user="<?php echo esc_attr( $committer->user_nicename ); ?>">
     51                    <?php echo get_avatar( $committer->ID, 32 ); ?>
     52                    <a href="<?php echo esc_url( 'https://profiles.wordpress.org/' . $committer->user_nicename ); ?>">
     53                        <?php echo Template::encode( $committer->display_name ); ?>
     54                    </a><br>
     55                    <small>
     56                        <?php echo current_user_can( 'plugin_review' ) ? esc_html( $committer->user_email ) . ' ' : ''; ?>
     57                        <button class="button-link spinner remove"><?php _e( 'Remove', 'wporg-plugins' ); ?></button>
     58                    </small>
     59                </li>
     60            <?php endforeach; ?>
     61
     62            <li class="new">
     63                <form id="add-committer" action="POST">
     64                    <input type="text" name="committer" placeholder="<?php esc_attr_e( 'Login, Slug, or Email.', 'wporg-plugins' ); ?>">
     65                    <input type="submit" value="<?php esc_attr_e( 'Add', 'wporg-plugins' ); ?>" />
     66                </form>
     67            </li>
    7868        </ul>
    79         <script>
    80             var rest_api_url = <?php echo wp_json_encode( get_rest_url() ); ?>,
    81                 rest_api_nonce = <?php echo wp_json_encode( wp_create_nonce( 'wp_rest' ) ); ?>,
    82                 plugin_slug = <?php echo wp_json_encode( $post->post_name ); ?>;
    83 
    84         jQuery( 'ul.committer-list' ).on( 'click', 'a.remove', function(e) {
    85             e.preventDefault();
    86 
    87             var $this = jQuery( this ),
    88                 $row = $this.parents('li'),
    89                 user_nicename = $row.data( 'user' ),
    90                 url = rest_api_url + 'plugins/v1/plugin/' + plugin_slug + '/committers/' + user_nicename + '/?_wpnonce=' + rest_api_nonce;
    91 
    92             jQuery.post({
    93                 url: url,
    94                 method: 'DELETE',
    95             }).success( function( result ) {
    96                 if ( true === result ) {
    97                     $row.slideUp( 500, function() {
    98                         $row.remove();
    99                     } );
    100                 } else {
    101                     alert( result.messsage );
    102                 }
    103             } ).fail( function( result ) {
    104                 result = jQuery.parseJSON( result.responseText );
    105                 if ( typeof result.message !== undefined ) {
    106                     alert( result.message );
    107                 }
    108             } );
    109         } );
    110 
    111         jQuery( 'ul.committer-list' ).on( 'click', 'li.new input[type="submit"]', function(e) {
    112             e.preventDefault();
    113 
    114             var $this = jQuery( this ),
    115                 $row = $this.parents('li'),
    116                 $list = $row.parents('ul'),
    117                 $new_user_input = $row.find( 'input[name="committer"]' ),
    118                 user_to_add = $new_user_input.val(),
    119                 url = rest_api_url + 'plugins/v1/plugin/' + plugin_slug + '/committers/?_wpnonce=' + rest_api_nonce;
    120 
    121             jQuery.post({
    122                 url: url,
    123                 dataType: 'json',
    124                 data: {
    125                     committer: user_to_add
    126                 }
    127             }).done( function( result ) {
    128                 if ( typeof result.name !== "undefined" ) {
    129                     $newrow = jQuery( $row.data('template') );
    130                     $newrow.data('user', result.nicename );
    131                     $newrow.find('img').attr( 'src', result.avatar );
    132                     $newrow.find('a.profile').attr('href', result.profile ).html( result.name );
    133                     if ( typeof result.email !== "undefined" ) {
    134                         $newrow.find('span.email').text( result.email );
    135                     }
    136                     $row.before( $newrow );
    137                     $new_user_input.val('');
    138                 } else {
    139                     alert( result.messsage );
    140                 }
    141             } ).fail( function( result ) {
    142                 result = jQuery.parseJSON( result.responseText );
    143                 if ( typeof result.message !== undefined ) {
    144                     alert( result.message );
    145                 }
    146             } );
    147         } );
    148            
     69        <script id="tmpl-new-committer" type="text/template">
     70            <li data-user="{{ data.nicename }}">
     71                <a class="profile" href="{{ data.profile }}">
     72                    <img src="{{ data.avatar }}" class="avatar avatar-32 photo" height="32" width="32">
     73                    {{ data.name }}
     74                </a><br>
     75                <small>
     76                    <# if ( data.email ) { #>
     77                        <span class="email">{{ data.email }}</span>
     78                    <# } #>
     79                        <button class="button-link remove"><?php _e( 'Remove', 'wporg-plugins' ); ?></button>
     80                </small>
     81            </li>
    14982        </script>
    150 
    15183        <?php
    15284        echo $args['after_widget'];
Note: See TracChangeset for help on using the changeset viewer.