All: Fix the copy to clipboard button

The Clipboard.js library often doesn't really copy to clipboard despite
reporting it completed successfully. Instead, this commit switches from it
to a polyfill to a native clipboard async API that works (tested in Chrome 81,
Firefox 75 & Safari 13.1).

Fixes #49

Author: mgol

themes/codeorigin.jquery.com/page.php

@@ -3,7 +3,7 @@
 wp_enqueue_style('sri-modal', get_template_directory_uri() . '/css/sri-modal.css');
 
 wp_enqueue_script('jquery-ui', 'https://code.jquery.com/ui/1.11.4/jquery-ui.min.js');
-wp_enqueue_script('clipboard', get_template_directory_uri() . '/js/clipboard.1.5.5.min.js');
+wp_enqueue_script('clipboard-polyfill', get_template_directory_uri() . '/js/clipboard-polyfill.js');
 wp_enqueue_script('sri-modal', get_template_directory_uri() . '/js/sri-modal.js');
 ?>
 

themes/jquery/js/clipboard-polyfill.js

@@ -1,7 +1,6 @@
-$(document).ready(function() {
+$( function() {
 	// Store modal templates
-	var modalTemplate = $( "#sri-modal-template" )[ 0 ].outerHTML,
-		clipboard;
+	var modalTemplate = $( "#sri-modal-template" )[ 0 ].outerHTML;
 
 	// Show modal on click
 	$( "body" ).on( "click", ".open-sri-modal", function( event ) {
@@ -23,32 +22,34 @@ $(document).ready(function() {
 			}
 		} );
 
-		$('.sri-modal-copy-btn').tooltip();
+		$('.sri-modal-copy-btn')
+			.tooltip()
+			.on( "click", function() {
+				var buttonElem = $( this );
+				clipboard
+					.writeText( buttonElem.attr( "data-clipboard-text" ) )
+					.then( function() {
+						buttonElem
+							.tooltip( "option", "content", "Copied!" )
+							.one( "mouseout", function() {
+								buttonElem.tooltip( "option", "content", "Copy to clipboard!" );
+							} );
+					} )
+					.catch( function() {
+						buttonElem
+							.tooltip( "option", "content", "Copying to clipboard failed!" )
+							.one( "mouseout", function() {
+								buttonElem.tooltip( "option", "content", "Copy to clipboard!" );
+							} );
+					} );
+			} );
 		event.preventDefault();
 	} );
 
 	// Helper functions
 	function replace ( string, values ) {
 		return string.replace( /\{\{([^}]+)}}/g, function( _, key ) {
 			return values[key];
-		});
+		} );
 	}
-
-	clipboard = new Clipboard( "[data-clipboard-text]" );
-
-	clipboard.on( "success", function( e ) {
-		$( e.trigger )
-			.tooltip( "option", "content", "Copied!" )
-			.one( "mouseout", function() {
-				$( this ).tooltip( "option", "content", "Copy to clipboard!" );
-			} );
-	} );
-
-	clipboard.on( "error", function( e ) {
-		$( e.trigger )
-			.tooltip( "option", "content", "Press Ctrl+C to copy!" )
-			.one( "mouseout", function() {
-				$( this ).tooltip( "option", "content", "Copy to clipboard!" );
-			} );
-	} );
-});
+} );