From 04d1a122966357686038d725ef2133ccd87b9537 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Wed, 20 Nov 2019 16:58:18 -0500
Subject: [PATCH] Remove shortcode, add button & dialog by hooking into actions

---
 plugins/wporg-5ftf/includes/pledge-form.php   | 14 ----
 plugins/wporg-5ftf/includes/pledge.php        | 35 ++++++++-
 .../views/button-request-manage-link.php      | 13 ++++
 .../views/form-pledge-request-manage-link.php | 75 -------------------
 .../views/modal-request-manage-link.php       | 41 ++++++++++
 themes/wporg-5ftf/single-5ftf_pledge.php      |  4 +-
 6 files changed, 88 insertions(+), 94 deletions(-)
 create mode 100644 plugins/wporg-5ftf/views/button-request-manage-link.php
 delete mode 100644 plugins/wporg-5ftf/views/form-pledge-request-manage-link.php
 create mode 100644 plugins/wporg-5ftf/views/modal-request-manage-link.php

diff --git a/plugins/wporg-5ftf/includes/pledge-form.php b/plugins/wporg-5ftf/includes/pledge-form.php
index 18d2a03..69d7596 100755
--- a/plugins/wporg-5ftf/includes/pledge-form.php
+++ b/plugins/wporg-5ftf/includes/pledge-form.php
@@ -14,7 +14,6 @@ defined( 'WPINC' ) || die();
 // Todo make this into simple optionless blocks instead?
 add_shortcode( '5ftf_pledge_form_new', __NAMESPACE__ . '\render_form_new' );
 add_shortcode( '5ftf_pledge_form_manage', __NAMESPACE__ . '\render_form_manage' );
-add_shortcode( '5ftf_pledge_form_manage_link', __NAMESPACE__ . '\render_manage_link_request' );
 
 /**
  * Render the form(s) for creating new pledges.
@@ -175,19 +174,6 @@ function render_form_manage() {
 	return ob_get_clean();
 }
 
-
-/**
- * Render the `render_manage_link_request` shortcode.
- */
-function render_manage_link_request() {
-	// @todo enable when https://github.com/WordPress/five-for-the-future/issues/6 is done
-	if ( ! defined( 'WPORG_SANDBOXED' ) || ! WPORG_SANDBOXED ) {
-		return;
-	}
-
-	require_once FiveForTheFuture\get_views_path() . 'form-pledge-request-manage-link.php';
-}
-
 /**
  * Process a submission from the Manage Existing Pledge form.
  *
diff --git a/plugins/wporg-5ftf/includes/pledge.php b/plugins/wporg-5ftf/includes/pledge.php
index 1acf7ef..fd75c06 100755
--- a/plugins/wporg-5ftf/includes/pledge.php
+++ b/plugins/wporg-5ftf/includes/pledge.php
@@ -18,12 +18,18 @@ const SLUG    = 'pledge';
 const SLUG_PL = 'pledges';
 const CPT_ID  = FiveForTheFuture\PREFIX . '_' . SLUG;
 
-add_action( 'init', __NAMESPACE__ . '\register', 0 );
-add_action( 'admin_menu', __NAMESPACE__ . '\admin_menu' );
+// Admin hooks.
+add_action( 'init',          __NAMESPACE__ . '\register', 0 );
+add_action( 'admin_menu',    __NAMESPACE__ . '\admin_menu' );
 add_action( 'pre_get_posts', __NAMESPACE__ . '\filter_query' );
+// List table columns.
 add_filter( 'manage_edit-' . CPT_ID . '_columns',        __NAMESPACE__ . '\add_list_table_columns' );
 add_action( 'manage_' . CPT_ID . '_posts_custom_column', __NAMESPACE__ . '\populate_list_table_columns', 10, 2 );
 
+// Front end hooks.
+add_action( 'pledge_footer',       __NAMESPACE__ . '\render_manage_link_request' );
+add_action( 'wp_footer',           __NAMESPACE__ . '\render_js_templates' );
+
 /**
  * Register all the things.
  *
@@ -252,3 +258,28 @@ function filter_query( $query ) {
 	// see https://github.com/WordPress/five-for-the-future/issues/70#issuecomment-549066883.
 	$query->set( 'posts_per_page', 100 );
 }
+
+/**
+ * Render the button to toggle the "Request Manage Email" dialog.
+ *
+ * @return void
+ */
+function render_manage_link_request() {
+	// @todo enable when https://github.com/WordPress/five-for-the-future/issues/6 is done
+	if ( ! defined( 'WPORG_SANDBOXED' ) || ! WPORG_SANDBOXED ) {
+		return;
+	}
+
+	require_once FiveForTheFuture\get_views_path() . 'button-request-manage-link.php';
+}
+
+/**
+ * Render JS templates at the end of the page.
+ *
+ * @return void
+ */
+function render_js_templates() {
+	if ( CPT_ID === get_post_type() ) {
+		require_once FiveForTheFuture\get_views_path() . 'modal-request-manage-link.php';
+	}
+}
diff --git a/plugins/wporg-5ftf/views/button-request-manage-link.php b/plugins/wporg-5ftf/views/button-request-manage-link.php
new file mode 100644
index 0000000..d546764
--- /dev/null
+++ b/plugins/wporg-5ftf/views/button-request-manage-link.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace WordPressDotOrg\FiveForTheFuture\View;
+
+defined( 'WPINC' ) || die();
+
+?>
+<div class="edit-pledge-wrapper">
+	<button id="toggle-management-link-form" class="button button-link">
+		<span class="dashicons dashicons-edit" aria-hidden="true"></span>
+		<?php esc_html_e( 'Edit Pledge', 'wporg-5ftf' ); ?>
+	</button>
+</div>
diff --git a/plugins/wporg-5ftf/views/form-pledge-request-manage-link.php b/plugins/wporg-5ftf/views/form-pledge-request-manage-link.php
deleted file mode 100644
index d0a94ad..0000000
--- a/plugins/wporg-5ftf/views/form-pledge-request-manage-link.php
+++ /dev/null
@@ -1,75 +0,0 @@
-<?php
-
-namespace WordPressDotOrg\FiveForTheFuture\View;
-
-defined( 'WPINC' ) || die();
-
-/**
- * @var array $errors
- */
-
-// Hide it if it hasn't submitted, but show success/error messages if it was submitted.
-// phpcs:ignore
-$hidden = empty( $errors ) && empty( $_POST['get_manage_pledge_link'] ) ? 'hidden' : '';
-
-?>
-
-<button id="toggle-management-link-form">
-	<span class="dashicons dashicons-edit"></span>
-	<?php esc_html_e( 'Edit Pledge', 'wporg-5ftf' ); ?>
-</button>
-
-<div id="request-management-link" <?php echo esc_attr( $hidden ); ?> >
-	<p>
-		<?php esc_html_e( 'Only pledge admins can edit pledges.', 'wporg-5ftf' ); ?>
-	</p>
-
-	<p>
-		<?php esc_html_e( "If you're the admin, enter your email address and a confirmation link will be sent to you.", 'wporg-5ftf' ); ?>
-	</p>
-
-	<form action="#form-messages" method="post">
-		<input type="hidden" name="pledge_id" value="<?php echo esc_attr( get_post()->ID ); ?>" />
-
-		<label for="pledge_admin_address">
-			<?php esc_html_e( 'Email Address', 'wporg-5ftf' ); ?>
-		</label>
-
-		<input
-			id="pledge_admin_address"
-			name="pledge_admin_address"
-			type="email"
-			required
-			value=""
-		/>
-
-		<input
-			type="submit"
-			name="get_manage_pledge_link"
-			value="Submit"
-		/>
-
-		<?php require __DIR__ . '/partial-result-messages.php'; ?>
-	</form>
-</div>
-
-<script>
-	( function() {
-		var toggleLinkFormButton = document.getElementById( 'toggle-management-link-form' ),
-			linkForm = document.getElementById( 'request-management-link' );
-
-		// Toggle the form when the button is clicked.
-		toggleLinkFormButton.addEventListener( 'click', function() {
-			switch( linkForm.hidden ) {
-				case true:
-					linkForm.hidden = false;
-					linkForm.scrollIntoView( { behavior: 'smooth' } );
-					break;
-
-				default:
-					linkForm.hidden = true;
-					break;
-			}
-		} );
-	}() );
-</script>
diff --git a/plugins/wporg-5ftf/views/modal-request-manage-link.php b/plugins/wporg-5ftf/views/modal-request-manage-link.php
new file mode 100644
index 0000000..48f0766
--- /dev/null
+++ b/plugins/wporg-5ftf/views/modal-request-manage-link.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace WordPressDotOrg\FiveForTheFuture\View;
+
+defined( 'WPINC' ) || die();
+
+?>
+<script type="text/template" id="tmpl-5ftf-send-link-dialog">
+	<div id="send-link-dialog" role="dialog" class="pledge-dialog" hidden tabindex="-1" aria-label="<?php esc_attr_e( 'Request to edit this pledge', 'wporg-5ftf' ); ?>">
+		<p>
+			<?php esc_html_e( 'Only pledge admins can edit pledges.', 'wporg-5ftf' ); ?>
+		</p>
+
+		<p>
+			<?php esc_html_e( "If you're the admin, enter your email address and a confirmation link will be sent to you.", 'wporg-5ftf' ); ?>
+		</p>
+
+		<form method="post">
+			<input type="hidden" name="pledge_id" value="<?php echo esc_attr( get_post()->ID ); ?>" />
+
+			<label for="pledge_admin_address">
+				<?php esc_html_e( 'Email Address', 'wporg-5ftf' ); ?>
+			</label>
+
+			<input
+				id="pledge_admin_address"
+				name="pledge_admin_address"
+				type="email"
+				required
+				value=""
+			/>
+
+			<input
+				type="submit"
+				name="get_manage_pledge_link"
+				value="<?php esc_attr_e( 'Submit', 'wporg-5ftf' ); ?>"
+			/>
+		</form>
+		<button type="button" class="button button-link pledge-dialog__close" aria-label="Close"><span class="dashicons dashicons-no-alt" aria-hidden="true"></span></button></div>
+	</div>
+</script>
diff --git a/themes/wporg-5ftf/single-5ftf_pledge.php b/themes/wporg-5ftf/single-5ftf_pledge.php
index eb0ea51..a5f1c10 100644
--- a/themes/wporg-5ftf/single-5ftf_pledge.php
+++ b/themes/wporg-5ftf/single-5ftf_pledge.php
@@ -130,9 +130,7 @@ get_header();
 					</a>
 				</div>
 
-				<div class="edit-pledge-wrapper">
-					<?php do_shortcode( '[5ftf_pledge_form_manage_link]' ); ?>
-				</div>
+				<?php do_action( 'pledge_footer' ); ?>
 			</footer>
 		</article>