Merge pull request #72 from 10up/fix-error-on-copy-clipboard-new

Fix: JS error on copy clipboard

assets/js/main.js

@@ -1,16 +1,27 @@
+/* global ClipboardJS */
+
 wp.domReady(() => {
-	const copyBtn = document.querySelector('.ep-copy-button');
-	const successMessage = document.querySelector('.ep-copy-button-wrapper__success');
-	const request = copyBtn.getAttribute('data-request');
+	const copyBtn = document.querySelectorAll('.ep-copy-button');
+	const clipboard = new ClipboardJS(copyBtn);
 
-	copyBtn.addEventListener('click', function () {
-		navigator.clipboard.writeText(request).then(function () {
-			successMessage.style.display = 'inline-block';
-			setTimeout(() => {
-				successMessage.style.display = 'none';
-			}, 3000);
-		});
-	});
+	/**
+	 * Handle successful copy.
+	 *
+	 * @param {Event} event Copy event.
+	 * @returns {void}
+	 */
+	const onSuccess = (event) => {
+		event.trigger.nextElementSibling.style.display = 'initial';
+		setTimeout(() => {
+			event.trigger.nextElementSibling.style.display = 'none';
+		}, 3000);
+		event.clearSelection();
+	};
+
+	/**
+	 * Bind copy button events.
+	 */
+	clipboard.on('success', onSuccess);
 
 	let queries = document.querySelectorAll('.ep-queries-debug');
 
@@ -77,14 +88,6 @@ wp.domReady(() => {
 						}
 					}
 
-					break;
-				} else if (
-					queryWrapper.nodeName === 'A' &&
-					queryWrapper.classList.contains('copy-curl')
-				) {
-					navigator.clipboard.writeText(
-						queryWrapper.getAttribute('data-request').replace(/\\"/g, '"'),
-					);
 					break;
 				} else {
 					queryWrapper = queryWrapper.parentNode;

classes/EP_Debug_Bar_ElasticPress.php

@@ -42,7 +42,7 @@ public function enqueue_scripts_styles() {
 			return;
 		}
 
-		wp_enqueue_script( 'debug-bar-elasticpress', EP_DEBUG_URL . 'assets/js/main.js', array( 'wp-dom-ready' ), EP_DEBUG_VERSION, true );
+		wp_enqueue_script( 'debug-bar-elasticpress', EP_DEBUG_URL . 'assets/js/main.js', array( 'wp-dom-ready', 'clipboard' ), EP_DEBUG_VERSION, true );
 		wp_enqueue_style( 'debug-bar-elasticpress', EP_DEBUG_URL . 'assets/css/main.css', array(), EP_DEBUG_VERSION );
 	}
 

classes/QueryOutput.php

@@ -52,7 +52,7 @@ public function render_buttons() {
 			<a download="debug-bar-elasticpress-report.txt" href="data:text/plain;charset=utf-8,<?php echo rawurlencode( $copy_paste_output ); ?>"  class="button button-primary" id="ep-download-requests-info">
 				<?php esc_html_e( 'Download Requests Info', 'debug-bar-elasticpress' ); ?>
 			</a>
-			<button class="ep-copy-button button qm-button" data-request="<?php echo esc_attr( $copy_paste_output ); ?>">
+			<button class="ep-copy-button button qm-button" data-clipboard-text="<?php echo esc_attr( $copy_paste_output ); ?>">
 				<?php esc_html_e( 'Copy Requests Info to Clipboard', 'debug-bar-elasticpress' ); ?>
 			</button>
 			<span class="ep-copy-button-wrapper__success" style="display: none;">
@@ -240,7 +240,12 @@ public function render_query( $query, $type = '' ) {
 					<strong><?php esc_html_e( 'Query Response Code:', 'debug-bar-elasticpress' ); ?></strong> <?php esc_html_e( 'Request Error', 'debug-bar-elasticpress' ); ?>
 				</div>
 			<?php endif; ?>
-			<a class="copy-curl" data-request="<?php echo esc_attr( addcslashes( $curl_request, '"' ) ); ?>">Copy cURL Request</a>
+			<a class="copy-curl ep-copy-button" data-clipboard-text="<?php echo esc_attr( addcslashes( $curl_request, '"' ) ); ?>">
+				<?php esc_html_e( 'Copy cURL Request', 'debug-bar-elasticpress' ); ?>
+			</a>
+			<span class="ep-copy-button-wrapper__success" style="display: none;">
+				<?php esc_html_e( 'Copied!', 'debug-bar-elasticpress' ); ?>
+			</span>
 		</li>
 		<?php
 	}