tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-20 10:03:43 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor to use JSON + templates for contributors

Browse source 
This will make it easier to show contributors as they're added
This commit is contained in:
Kelly Dwan 2019-11-13 15:35:39 -05:00
parent aa79c8147e
commit b0672a6f6e
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
5 changed files with 151 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
plugins/wporg-5ftf/assets/js/admin.js
View file

@ -1,7 +1,66 @@
/* global ajaxurl, FiveForTheFuture, jQuery */
/* global ajaxurl, FiveForTheFuture, fftfContributors, jQuery */
/* eslint no-alert: "off" */
jQuery( document ).ready( function( $ ) {
/**
* Render the contributor lists using the contributors template into the pledge-contributors container. This
* uses `_renderContributors` to render a list of contributors per status (published, pending).
*
* @param {Object} contributors - An object listing all contributors on a pledge.
* @param {Object[]} contributors.publish - The list of published/confirmed contributors.
* @param {Object[]} contributors.pending - The list of pending/unconfirmed contributors.
* @param {Object} container - The parent container for this section.
*/
function render( contributors, container ) {
const listContainer = container.querySelector( '.pledge-contributors' );
const template = wp.template( '5ftf-contributor-lists' );
const data = {
publish: _renderContributors( contributors.publish ),
pending: _renderContributors( contributors.pending ),
};
$( listContainer ).html( template( data ) );
}
/**
* Render a given contributor list using the contributor template.
*
* @param {Object[]} contributors - An array of contributor data objects.
* @return {string} An HTML string of contributors.
*/
function _renderContributors( contributors ) {
if ( ! contributors ) {
return [];
}
const template = wp.template( '5ftf-contributor' );
return contributors.map( template ).join( '' );
}
/**
* The default callback for AJAX actions.
*
* @param {Object} response - An array of contributor data objects.
* @param {string} response.message - An optional message to display to the user.
* @param {Object[]} response.contributors - The new list of contributors.
*/
function defaultCallback( response ) {
if ( response.message ) {
alert( response.message );
}
if ( response.contributors ) {
render( response.contributors, container );
}
}
/**
* Send an ajax request using the `manage_contributors` action. This function also automatically adds the
* nonce, which should be defined in the global FiveForTheFuture variable.
*
* @param {Object} data - A list of data to send to the endpoint.
* @param {Function} callback - A function to be called when the request completes.
*/
function sendAjaxRequest( data, callback ) {
if ( ! callback ) {
callback = defaultCallback;
}
$.ajax( {
type: 'POST',
url: ajaxurl,
@ -14,7 +73,9 @@ jQuery( document ).ready( function( $ ) {
} );
}
// Initialize.
const container = document.getElementById( '5ftf-contributors' );
render( fftfContributors, container );
// Remove Contributor button action.
$( container ).on( 'click', '[data-action="remove-contributor"]', function( event ) {
@ -28,13 +89,6 @@ jQuery( document ).ready( function( $ ) {
pledge_id: data.pledgePost || 0,
contributor_id: data.contributorPost || 0,
manage_action: data.action || '',
}, function( response ) {
if ( response.message ) {
alert( response.message );
}
if ( response.success ) {
$( event.currentTarget ).closest( 'li' ).remove();
}
} );
}
} );
@ -48,10 +102,6 @@ jQuery( document ).ready( function( $ ) {
pledge_id: data.pledgePost || 0,
contributor_id: data.contributorPost || 0,
manage_action: data.action || '',
}, function( response ) {
if ( response.message ) {
alert( response.message );
}
} );
} );
} );

35
plugins/wporg-5ftf/includes/contributor.php
View file

@ -238,6 +238,41 @@ function get_pledge_contributors( $pledge_id, $status = 'publish', $contributor_
return $posts;
}
/**
* Get the contributor posts in the format used for the JS templates.
*
* @param int $pledge_id The post ID of the pledge.
*
* @return array An array of contributor data, ready to be used in the JS templates.
*/
function get_pledge_contributors_data( $pledge_id ) {
$contrib_data = array();
$contributors = get_pledge_contributors( $pledge_id, 'all' );
foreach ( $contributors as $contributor_status => $group ) {
$contrib_data[ $contributor_status ] = array_map(
function( $contributor_post ) use ( $contributor_status, $pledge_id ) {
$name = $contributor_post->post_title;
$contributor = get_user_by( 'login', $name );
return [
'pledgeId' => $pledge_id,
'contributorId' => $contributor_post->ID,
'status' => $contributor_status,
'avatar' => get_avatar( $contributor, 32 ),
// @todo Add full name, from `$contributor`?
'name' => $name,
'resendLabel' => __( 'Resend Confirmation', 'wporg' ),
'removeConfirm' => sprintf( __( 'Remove %s from this pledge?', 'wporg-5ftf' ), $name ),
'removeLabel' => sprintf( __( 'Remove %s', 'wporg' ), $name ),
];
},
$group
);
}
return $contrib_data;
}
/**
* Get the user objects that correspond with pledge contributor posts.
*

1
plugins/wporg-5ftf/includes/endpoints.php
View file

@ -34,6 +34,7 @@ function handler() {
Contributor\remove_contributor( $contributor_id );
wp_die( wp_json_encode( [
'success' => true,
'contributors' => Contributor\get_pledge_contributors_data( $pledge_id ),
] ) );
break;
}

2
plugins/wporg-5ftf/includes/pledge-meta.php
View file

@ -210,7 +210,7 @@ function render_meta_boxes( $pledge, $box ) {
$data[ $key ] = get_post_meta( $pledge->ID, META_PREFIX . $key, $config['single'] );
}
$contributors = Contributor\get_pledge_contributors( $pledge->ID, 'all' );
$contributors = Contributor\get_pledge_contributors_data( $pledge->ID );
echo '<div class="pledge-form">';

108
plugins/wporg-5ftf/views/manage-contributors.php
View file

@ -8,63 +8,59 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
/** @var bool $readonly */
?>
<div id="5ftf-contributors">
<?php if ( ! empty( $contributors ) ) : ?>
<?php foreach ( $contributors as $contributor_status => $group ) : ?>
<?php if ( ! empty( $group ) ) : ?>
<h3 class="contributor-list-heading">
<?php
switch ( $contributor_status ) {
case 'pending':
esc_html_e( 'Unconfirmed', 'wporg' );
break;
case 'publish':
esc_html_e( 'Confirmed', 'wporg' );
break;
}
?>
</h3>
<script type="text/template" id="tmpl-5ftf-contributor-lists">
<# if ( data.publish.length ) { #>
<h3 class="contributor-list-heading"><?php esc_html_e( 'Confirmed', 'wporg' ); ?></h3>
<ul class="contributor-list publish">{{{ data.publish }}}</ul>
<# } #>
<# if ( data.pending.length ) { #>
<h3 class="contributor-list-heading"><?php esc_html_e( 'Unconfirmed', 'wporg' ); ?></h3>
<ul class="contributor-list pending">{{{ data.pending }}}</ul>
<# } #>
</script>
<ul class="contributor-list <?php echo esc_attr( $contributor_status ); ?>">
<?php foreach ( $group as $contributor_post ) :
$name = $contributor_post->post_title;
$contributor = get_user_by( 'login', $name );
$remove_confirm = sprintf( __( 'Remove %s from this pledge?', 'wporg-5ftf' ), $name );
$remove_label = sprintf( __( 'Remove %s', 'wporg' ), $name );
?>
<li>
<button
class="button-link button-link-delete"
data-action="remove-contributor"
data-pledge-post="<?php the_ID(); ?>"
data-contributor-post="<?php echo esc_attr( $contributor_post->ID ); ?>"
data-confirm="<?php echo esc_attr( $remove_confirm ); ?>"
aria-label="<?php echo esc_attr( $remove_label ); ?>"
>
<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>
</button>
<?php echo get_avatar( $contributor->user_email, 32 ); ?>
<span class="contributor-list__name">
<?php echo esc_html( $name ); ?>
</span>
<?php if ( 'pending' === $contributor_post->post_status ) : ?>
<button
class="button"
data-action="resend-contributor-confirmation"
data-pledge-post="<?php the_ID(); ?>"
data-contributor-post="<?php echo esc_attr( $contributor_post->ID ); ?>"
>
<?php esc_html_e( 'Resend Confirmation', 'wporg' ); ?>
</button>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php endforeach; ?>
<?php else : ?>
<p><?php esc_html_e( 'There are no contributors added to this pledge yet.', 'wporg' ); ?></p>
<?php endif; ?>
<script type="text/template" id="tmpl-5ftf-contributor">
<li>
<button
class="button-link button-link-delete"
data-action="remove-contributor"
data-pledge-post="{{ data.pledgeId }}"
data-contributor-post="{{ data.contributorId }}"
data-confirm="{{ data.removeConfirm }}"
aria-label="{{ data.removeLabel }}"
>
<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>
</button>
{{{ data.avatar }}}
<span class="contributor-list__name">
{{ data.name }}
</span>
<# if ( 'pending' === data.status ) { #>
<button
class="button"
data-action="resend-contributor-confirmation"
data-pledge-post="{{ data.pledgeId }}"
data-contributor-post="{{ data.contributorId }}"
>
{{ data.resendLabel }}
</button>
<# } #>
</li>
</script>
<div id="5ftf-contributors">
<div class="pledge-contributors">
<?php if ( ! empty( $contributors ) ) : ?>
<?php
printf(
'<script>var fftfContributors = JSON.parse( decodeURIComponent( \'%s\' ) );</script>',
rawurlencode( wp_json_encode( $contributors ) )
);
?>
<?php else : ?>
<p><?php esc_html_e( 'There are no contributors added to this pledge yet.', 'wporg' ); ?></p>
<?php endif; ?>
</div>
<hr />