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-07-04 10:05:43 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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 );
}
} );
} );
} );