Display a dialog when user approves an image

Sometimes it’s useful to display some information after the user approves an image. Perhaps you simply want to let them know that you’ve received their approval and will be in contact.

First you’ll want to create a new blank javascript file. Let’s call it my-user-approves-image.js. Inside the file, we’ll add this code:

<?php

add_action('wp_enqueue_scripts', function () {
	wp_add_inline_script('project-huddle', "
	/**
	 * Hook into Approve Button View initialize method
	 */
	ph.api.hooks.addAction('ph.api.views.ApproveButton.initialize', 'custom-popup', function (view) {
		view.messageAfterApproval();
	});
	
	/**
	 * Extend the original approve button view
	 * Here we can add our own functions, events, whatever we like.
	 */
	_.extend(ph.api.views.ApproveButton.prototype, {
		// add message function
		messageAfterApproval: function () {
			this.listenTo(this.model, 'change:approval', function () {
				// (optional) only display on approval
				if (this.model.get('approval')) {
					vex.dialog.confirm({
						message: 'Thanks! Could you please leave us a review?',
						callback: function (value) {
							if ( value )  {
								window.location.href = 'http://google.com';
							}
						}
					});
				}
			});
		}
	});
	");
}, 9999999);

Here we’re hooking into the approve button view’s initialize function and listening for the successful approval event. When an image is successfully approved, we’ll show a dialog box (using the  Vex plugin) with our custom message. 

Then, add your script to the  SureFeedback Project page to add this to your projects.