Provide a fallback message if copying to the clipboard fails.

This commit is contained in:
Justin Shreve 2016-03-02 10:13:17 -08:00
parent 29141af873
commit 32eabbc685
4 changed files with 44 additions and 25 deletions

View File

@ -48,20 +48,28 @@
/**
* Init TipTip
*/
initTipTip: function() {
$( '.copy-key', this.el ).tipTip({
'attribute': 'data-tip',
'activation': 'click',
'fadeIn': 50,
'fadeOut': 50,
'delay': 0
});
initTipTip: function( css_class ) {
$( document.body ).on( 'aftercopy', css_class, function( e ) {
if ( true === e.success['text/plain'] ) {
$( '#copy-error' ).text( '' );
$( css_class ).tipTip( {
'attribute': 'data-tip',
'activation': 'focus',
'fadeIn': 50,
'fadeOut': 50,
'delay': 0
} ).focus();
} else {
$( css_class ).parent().find( 'input' ).focus().select();
$( '#copy-error' ).text( woocommerce_admin_api_keys.clipboard_failed );
}
} );
$( document.body ).on( 'copy', '.copy-key', function( e ) {
$( document.body ).on( 'copy', css_class, function( e ) {
e.clipboardData.clearData();
e.clipboardData.setData( 'text/plain', $.trim( $( this ).prev( 'code' ).html() ) );
e.clipboardData.setData( 'text/plain', $.trim( $( this ).prev( 'input' ).val() ) );
e.preventDefault();
});
} );
},
/**
@ -121,7 +129,8 @@
consumer_secret: data.consumer_secret
}) );
self.createQRCode( data.consumer_key, data.consumer_secret );
self.initTipTip();
self.initTipTip( '.copy-key' );
self.initTipTip( '.copy-secret' );
} else {
$( '#key_description', self.el ).val( data.description );
$( '#key_user', self.el ).val( data.user_id );

View File

@ -326,7 +326,8 @@ class WC_Admin_Assets {
'woocommerce_admin_api_keys',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'update_api_nonce' => wp_create_nonce( 'update-api-key' )
'update_api_nonce' => wp_create_nonce( 'update-api-key' ),
'clipboard_failed' => esc_html__( 'Copying to clipboard failed. Please press Ctrl/Cmd+C to copy.' ),
)
);
}

View File

@ -102,6 +102,7 @@ if ( ! defined( 'ABSPATH' ) ) {
</div>
<script type="text/template" id="tmpl-api-keys-template">
<p id="copy-error"></p>
<table class="form-table">
<tbody>
<tr valign="top">
@ -109,7 +110,7 @@ if ( ! defined( 'ABSPATH' ) ) {
<?php _e( 'Consumer Key', 'woocommerce' ); ?>
</th>
<td class="forminp">
<code id="key_consumer_key">{{ data.consumer_key }}</code> <button type="button" class="button-secondary copy-key" data-tip="<?php esc_attr_e( 'Copied!', 'woocommerce' ); ?>"><?php _e( 'Copy', 'woocommerce' ); ?></button>
<input id="key_consumer_key" value="{{ data.consumer_key }}" size="55" readonly="readonly"> <button type="button" class="button-secondary copy-key" data-tip="<?php esc_attr_e( 'Copied!', 'woocommerce' ); ?>"><?php _e( 'Copy', 'woocommerce' ); ?></button>
</td>
</tr>
<tr valign="top">
@ -117,7 +118,7 @@ if ( ! defined( 'ABSPATH' ) ) {
<?php _e( 'Consumer Secret', 'woocommerce' ); ?>
</th>
<td class="forminp">
<code id="key_consumer_secret">{{ data.consumer_secret }}</code> <button type="button" class="button-secondary copy-key" data-tip="<?php esc_attr_e( 'Copied!', 'woocommerce' ); ?>"><?php _e( 'Copy', 'woocommerce' ); ?></button>
<input id="key_consumer_secret" value="{{ data.consumer_secret }}" size="55" readonly="readonly"> <button type="button" class="button-secondary copy-secret" data-tip="<?php esc_attr_e( 'Copied!', 'woocommerce' ); ?>"><?php _e( 'Copy', 'woocommerce' ); ?></button>
</td>
</tr>
<tr valign="top">

View File

@ -15,6 +15,7 @@ if ( ! defined( 'ABSPATH' ) ) {
<div id="debug-report">
<textarea readonly="readonly"></textarea>
<p class="submit"><button id="copy-for-support" class="button-primary" href="#" data-tip="<?php esc_attr_e( 'Copied!', 'woocommerce' ); ?>"><?php _e( 'Copy for Support', 'woocommerce' ); ?></button></p>
<p id="copy-error"></p>
</div>
</div>
<table class="wc_status_table widefat" cellspacing="0" id="status">
@ -804,20 +805,27 @@ if ( ! defined( 'ABSPATH' ) ) {
});
jQuery( document ).ready( function( $ ) {
$( '#copy-for-support' ).tipTip({
'attribute': 'data-tip',
'activation': 'click',
'fadeIn': 50,
'fadeOut': 50,
'delay': 0
});
$( document.body ).on( 'copy', '#copy-for-support', function( e ) {
e.clipboardData.clearData();
e.clipboardData.setData( 'text/plain', $( '#debug-report' ).find( 'textarea' ).val() );
e.preventDefault();
});
} );
});
$( document.body ).on( 'aftercopy', '#copy-for-support', function( e ) {
if ( true === e.success['text/plain'] ) {
$( '#copy-error' ).text( '' );
$( '#copy-for-support' ).tipTip( {
'attribute': 'data-tip',
'activation': 'focus',
'fadeIn': 50,
'fadeOut': 50,
'delay': 0
} ).focus();
} else {
$( '#debug-report' ).find( 'textarea' ).focus().select();
$( '#copy-error' ).text( '<?php esc_html_e( 'Copying to clipboard failed. Please press Ctrl/Cmd+C to copy.', 'woocommerce' ); ?>' );
}
} );
} );
</script>