Add copy on click for short code hint.

GravityKit · Feb 6, 2024 · 086b534 · 086b534
1 parent 2a7f903
commit 086b534
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 3 deletions.
diff --git a/assets/css/admin-views.css b/assets/css/admin-views.css
diff --git a/assets/css/scss/admin-views.scss b/assets/css/scss/admin-views.scss
@@ -1919,14 +1919,33 @@ $dialog-button-padding: 5px;
 		left: -1px;
 		font-size: 20px;
 		line-height: 1;
+
 		html[dir=rtl] & {
 			left: auto;
 			right: -1px;
 		}
 	}
+
 	html[dir=rtl] & .code.widefat {
 		text-align: right;
 	}
+
+	position: relative;
+
+	input.code {
+		cursor: pointer;
+	}
+
+	span.copied {
+		display: none;
+		position: absolute;
+		top: 0;
+		right: 10px;
+		background-color: #000;
+		color: #FFF;
+		padding: 2px 5px;
+		border-radius: 5px;
+	}
 }
 
 /** The "Direct Access" section in the Publish metabox */

diff --git a/assets/js/admin-views.js b/assets/js/admin-views.js
@@ -2802,4 +2802,19 @@
 		$( document.body ).trigger( 'gravityview/loaded' );
 	} );
 
+	$( document ).on( 'ready', function () {
+		new ClipboardJS( '.gv-shortcode input.code', {
+			text: function ( trigger ) {
+				return $( trigger ).val();
+			}
+		} );
+
+		$('.gv-shortcode input.code').on('click', function () {
+			var $el = $(this).closest('.gv-shortcode').find('.copied');
+			$el.show();
+			setTimeout(function () {
+				$el.fadeOut();
+			}, 1000);
+		});
+	} );
 }(jQuery));
diff --git a/assets/js/admin-views.min.js b/assets/js/admin-views.min.js
diff --git a/includes/admin/metaboxes/views/shortcode-hint.php b/includes/admin/metaboxes/views/shortcode-hint.php
@@ -22,5 +22,6 @@
 	<div>
 		<input type="text" readonly="readonly" value="<?php echo esc_attr($shortcode) ?>" class="code widefat" />
 		<span class="howto"><?php esc_html_e( 'Add this shortcode to a post or page to embed this view.', 'gk-gravityview' ); ?></span>
+		<span class="copied"><?php esc_html_e( 'Copied!', 'gk-gravityview' ); ?></span>
 	</div>
 </div>
diff --git a/includes/class-admin-views.php b/includes/class-admin-views.php
@@ -1445,7 +1445,23 @@ static function add_scripts_and_styles( $hook ) {
 		wp_enqueue_style( 'gravityview_views_datepicker', plugins_url( 'assets/css/admin-datepicker.css', GRAVITYVIEW_FILE ), \GV\Plugin::$version );
 
 		// Enqueue scripts
-		wp_enqueue_script( 'gravityview_views_scripts', plugins_url( 'assets/js/admin-views' . $script_debug . '.js', GRAVITYVIEW_FILE ), array( 'jquery-ui-tabs', 'jquery-ui-draggable', 'jquery-ui-droppable', 'jquery-ui-sortable', 'jquery-ui-tooltip', 'jquery-ui-dialog', 'gravityview-jquery-cookie', 'jquery-ui-datepicker', 'underscore' ), \GV\Plugin::$version );
+		wp_enqueue_script(
+			'gravityview_views_scripts',
+			plugins_url( 'assets/js/admin-views' . $script_debug . '.js', GRAVITYVIEW_FILE ),
+			[
+				'jquery-ui-tabs',
+				'jquery-ui-draggable',
+				'jquery-ui-droppable',
+				'jquery-ui-sortable',
+				'jquery-ui-tooltip',
+				'jquery-ui-dialog',
+				'gravityview-jquery-cookie',
+				'jquery-ui-datepicker',
+				'underscore',
+				'clipboard'
+			],
+			\GV\Plugin::$version
+		);
 
 		wp_localize_script(
 			'gravityview_views_scripts',