Merge pull request #3426 from WordImpress/issue/2602v2

feat(admin-form): copy form shortcode to clipboard via button #2602

assets/src/css/admin/give-admin.scss

@@ -37,4 +37,5 @@
 @import 'chosen';
 @import 'importer';
 @import 'export';
-@import 'goals';
+@import 'goals';
+@import 'tooltip';

assets/src/css/admin/tooltip.scss

@@ -0,0 +1,30 @@
+$give-shortcode-space: 20px;
+$give-shortcode-space-half: $give-shortcode-space * 0.5;
+$hintPrefix: "give-shortcode-tooltip--";
+$hintFontSize: 12px;
+$hintFontFamily: inherit;
+$hintVerticalPadding: $give-shortcode-space-half;
+$hintHorizontalPadding: $give-shortcode-space-half;
+$hintSizeSmall: $give-shortcode-space * 4;
+$hintSizeMedium: $give-shortcode-space * 7;
+$hintSizeLarge: $give-shortcode-space *14;
+$hintDefaultColor: #141414;
+$hintTransitionDuration: 0;
+
+@import "~hint.css/src/hint.scss";
+
+.give-shortcode-tooltip {
+	font-weight: normal;
+	cursor: help;
+
+	&:after {
+		box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
+		text-shadow: none;
+	}
+
+	& .dashicons {
+		font-size: 16px;
+		vertical-align: middle;
+		margin-right: 2px;
+	}
+}

assets/src/js/admin/admin-scripts.js

@@ -7,6 +7,7 @@
  * @license:     http://opensource.org/licenses/gpl-2.0.php GNU Public License
  */
 import {GiveWarningAlert, GiveErrorAlert, GiveConfirmModal} from '../plugins/modal';
+import {GiveShortcodeButton} from './shortcode-button.js';
 
 jQuery.noConflict();
 
@@ -2996,6 +2997,19 @@ var give_setting_edit = false;
 		}
 	};
 
+	var GiveShortcodeButtonObj = {
+		init: function() {
+			// Run scripts for shortcode buttons.
+			const shorcodeButtonEls = document.querySelectorAll( '.js-give-shortcode-button' );
+			if ( shorcodeButtonEls ) {
+				for ( const buttonEl of shorcodeButtonEls ) {
+					const shortcodeButton = new GiveShortcodeButton( buttonEl );
+					shortcodeButton.init();
+				}
+			}
+		}
+	};
+
 	// On DOM Ready.
 	$(function () {
 
@@ -3015,6 +3029,7 @@ var give_setting_edit = false;
 		Give_Upgrades.init();
 		Edit_Form_Screen.init();
 		GivePaymentHistory.init();
+		GiveShortcodeButtonObj.init();
 
 		// Footer.
 		$('a.give-rating-link').click(function () {

assets/src/js/admin/admin.js

@@ -18,3 +18,4 @@ import './admin-export';
 import './admin-widgets';
 import './admin-scripts';
 import './admin-importer';
+import './shortcode-button';

assets/src/js/admin/button.js

@@ -0,0 +1,60 @@
+class GiveButton {
+	constructor( element ) {
+		this.root          = element;
+		this.buttonText    = this.root.textContent.trim();
+		this.iconPosition  = 'before';
+
+		const icon = this.root.querySelector( '.dashicons' );
+
+		if ( icon ) {
+			this.iconClassName = icon.className;
+		}
+	}
+
+	enable() {
+		this.root.disabled = false;
+	}
+
+	disable() {
+		this.root.disabled = true;
+	}
+
+	setBusyState() {
+		const busyIcon      = '<span class="dashicons dashicons-marker"></span>';
+		this.root.innerHTML = `${busyIcon} ${this.buttonText}`;
+		this.disable();
+	}
+
+	removeBusyState() {
+		this.enable();
+
+		if ( this.iconClassName ) {
+			this.updateIcon( this.iconClassName );
+		}
+	}
+
+	updateIcon( className, position = 'before' ) {
+		const icon = `<span class="${className}"></span>`;
+
+		if ( 'after' === position ) {
+			this.root.innerHTML = `${this.buttonText} ${icon}`;
+		} else {
+			this.root.innerHTML = `${icon} ${this.buttonText}`;
+		}
+
+		this.iconClassName = className;
+		this.iconPosition  = position;
+	}
+
+	updateButtonText( text ) {
+		this.buttonText = text;
+
+		if ( this.iconClassName ) {
+			this.updateIcon( this.iconClassName, this.iconPosition );
+		} else {
+			this.root.textContent = text;
+		}
+	}
+}
+
+export default GiveButton;

assets/src/js/admin/shortcode-button.js

@@ -0,0 +1,43 @@
+import GiveButton from './button';
+import ClipboardJS from 'clipboard';
+
+class GiveShortcodeButton extends GiveButton {
+	constructor( element ) {
+		super( element );
+		this.shortcode = this.root.dataset.giveShortcode;
+		this.clipboard = new ClipboardJS( this.root, {
+			text: function( trigger ) {
+				return trigger.dataset.giveShortcode;
+			}
+		});
+		this.reset = this.reset.bind( this );
+	}
+
+	init() {
+		this.registerEventHandlers();
+	}
+
+	registerEventHandlers() {
+		this.clipboard.on( 'success', () => this.handleSuccessClick() );
+		this.clipboard.on( 'error', () => this.handleErrorClick() );
+	}
+
+	handleSuccessClick( event ) {
+		this.updateIcon( 'dashicons dashicons-yes' );
+		this.root.setAttribute( 'aria-label', give_vars.copied );
+		this.root.addEventListener( 'mouseout', this.reset );
+	}
+
+	handleErrorClick( event ) {
+		this.updateIcon( 'dashicons dashicons-warning' );
+		this.root.setAttribute( 'aria-label', 'Shortcode could not be copied.' );
+	}
+
+	reset( event ) {
+		this.updateIcon( 'dashicons dashicons-admin-page' );
+		this.root.setAttribute( 'aria-label', this.shortcode );
+		this.root.removeEventListener( 'mouseout', this.reset );
+	}
+}
+
+export {GiveShortcodeButton};

includes/admin/forms/dashboard-columns.php

@@ -123,7 +123,13 @@ function give_render_form_columns( $column_name, $post_id ) {
 				}
 				break;
 			case 'shortcode':
-				printf( '<input onclick="this.setSelectionRange(0, this.value.length)" type="text" class="shortcode-input" readonly="" value="[give_form id=&#34;%s&#34;]"', absint( $post_id ) );
+				$shortcode = sprintf( '[give_form id="%s"]', absint( $post_id ) );
+				printf(
+					'<button type="button" class="button give-shortcode-tooltip give-shortcode-tooltip--top js-give-shortcode-button" aria-label="%1$s" data-give-shortcode="%2$s"><span class="dashicons dashicons-admin-page"></span>%3$s</button>',
+					esc_attr( $shortcode ),
+					esc_attr( $shortcode ),
+					esc_html__( 'Copy Shortcode', 'give' )
+				);
 				break;
 		}// End switch().
 	}// End if().

includes/admin/forms/metabox.php

@@ -30,9 +30,13 @@ function give_add_shortcode_to_publish_metabox() {
 	//Only enqueue scripts for CPT on post type screen
 	if ( 'give_forms' === $post->post_type ) {
 		//Shortcode column with select all input
-		$shortcode = htmlentities( '[give_form id="' . $post->ID . '"]' );
-		echo '<div class="shortcode-wrap box-sizing"><label for="shortcode-input">' . esc_html__( 'Give Form Shortcode:', 'give' ) . '</label><input onClick="this.setSelectionRange(0, this.value.length)" type="text" name="shortcode-input" id="shortcode-input" class="shortcode-input" readonly value="' . $shortcode . '"></div>';
-
+		$shortcode = sprintf( '[give_form id="%s"]', absint( $post->ID ) );
+		printf(
+			'<div class="misc-pub-section"><button type="button" class="button give-shortcode-tooltip give-shortcode-tooltip--top js-give-shortcode-button" aria-label="%1$s" data-give-shortcode="%2$s"><span class="dashicons dashicons-admin-page"></span>%3$s</button></div>',
+			esc_attr( $shortcode ),
+			esc_attr( $shortcode ),
+			esc_html__( 'Copy Shortcode', 'give' )
+		);
 	}
 
 }

includes/class-give-scripts.php

@@ -187,6 +187,8 @@ public function admin_localize_scripts() {
 			'cancel'                            => __( 'Cancel', 'give' ),
 			'close'                             => __( 'Close', 'give' ),
 			'confirm'                           => __( 'Confirm', 'give' ),
+			'copied'                            => __( 'Copied!', 'give' ),
+			'shortcode_not_copy'                => __( 'Shortcode could not be copied.', 'give' ),
 			'confirm_action'                    => __( 'Confirm Action', 'give' ),
 			'confirm_deletion'                  => __( 'Confirm Deletion', 'give' ),
 			'confirm_delete_donation'           => __( 'Confirm Delete Donation', 'give' ),