Merge pull request #13 from impress-org/fix/selctable-company-dropdow…

…n-11 fix: separate even listener to avoid duplicate listeners
impress-org · Nov 6, 2020 · 0a5feb8 · 0a5feb8
2 parents 121efd2 + 512bfd6
commit 0a5feb8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/src/DoubleTheDonation/Assets.php b/src/DoubleTheDonation/Assets.php
@@ -32,18 +32,24 @@ public static function loadBackendAssets() {
 	 * @return void
 	 */
 	public static function loadFrontendAssets() {
-
 		wp_enqueue_script(
-			'give-double-the-donation-style-script',
+			'give-double-the-donation-script',
 			'https://doublethedonation.com/api/js/ddplugin.js',
 			[]
 		);
+
 		wp_enqueue_style(
 			'give-double-the-donation-style',
 			'https://doublethedonation.com/api/css/ddplugin.css',
 			[]
 		);
 
-
+		wp_enqueue_script(
+			'give-double-the-donation-script-frontend',
+			GIVE_DTD_URL . 'public/js/give-double-the-donation.js',
+			['give-double-the-donation-script'],
+			GIVE_DTD_VERSION,
+			true
+		);
 	}
 }
diff --git a/src/DoubleTheDonation/DonationForm.php b/src/DoubleTheDonation/DonationForm.php
@@ -25,24 +25,21 @@ public function employerMatchField( $form_id ) {
 		}
 
 		// Do not handle legacy donation form.
-		$labelStyle = ! FormUtils::isLegacyForm() ? 'style="display: block !important; font-size: 14px;"'  : '';
-		$divStyle = ! FormUtils::isLegacyForm() ? 'style="margin: 0 0 20px;"'  : '';
-
+		$isLegacyForm = FormUtils::isLegacyForm();
+		$labelStyle = ! $isLegacyForm ? 'style="display: block !important; font-size: 14px;"'  : '';
+		$divStyle = ! $isLegacyForm ? 'style="margin: 0 0 20px;"'  : '';
 
 		$dtdLabel = give_get_meta( $form_id, 'give_dtd_label', true, esc_html__( 'See if your company will match your donation!', 'give-double-the-donation' ) );
 		?>
 
 		<div class="give-double-the-donation-wrap form-row form-row-wide" <?php echo $divStyle; ?>>
+			<label class="give-label" for="give-first" <?php echo $labelStyle ?>><?php echo $dtdLabel; ?></label>
+			<div class="dd-company-name-input"></div>
 			<script>
 				if ( window.doublethedonation ) {
 					var DDCONF = { 'API_KEY': '<?php echo $dtdPublicKey; ?>' };
-					document.addEventListener( 'give_gateway_loaded', ( e ) => {
-						doublethedonation.plugin.load_streamlined_input();
-					} );
 				}
 			</script>
-			<label class="give-label" for="give-first" <?php echo $labelStyle ?>><?php echo $dtdLabel; ?></label>
-			<div id="dd-company-name-input"></div>
 		</div>
 		<?php
 	}

diff --git a/src/DoubleTheDonation/resources/js/frontend/give-double-the-donation.js b/src/DoubleTheDonation/resources/js/frontend/give-double-the-donation.js
@@ -0,0 +1,13 @@
+if ( window.doublethedonation ) {
+	function initializePlugin() {
+		document.querySelectorAll( '.dd-company-name-input' ).forEach( ( input ) => {
+			if ( ! input.hasAttribute( 'data-doublethedonation-widget-id' ) ) {
+				window.doublethedonation.plugin.load_streamlined_input( input );
+			}
+		} );
+	}
+
+	document.addEventListener( 'give_gateway_loaded', initializePlugin );
+
+	initializePlugin();
+}