copy shortcode using icon

Author: contactashish13

classes/Visualizer/Module/Admin.php

@@ -623,6 +623,7 @@ public function renderTemplates() {
 	 */
 	public function enqueueLibraryScripts( $suffix ) {
 		if ( $suffix === $this->_libraryPage ) {
+			wp_register_script( 'visualizer-clipboardjs', VISUALIZER_ABSURL . 'js/lib/clipboardjs/clipboard.min.js', array( 'jquery' ), Visualizer_Plugin::VERSION, true );
 			wp_enqueue_style( 'visualizer-library', VISUALIZER_ABSURL . 'css/library.css', array(), Visualizer_Plugin::VERSION );
 			$this->_addFilter( 'media_upload_tabs', 'setupVisualizerTab' );
 			wp_enqueue_media();
@@ -632,6 +633,7 @@ public function enqueueLibraryScripts( $suffix ) {
 				array(
 					'jquery',
 					'media-views',
+					'visualizer-clipboardjs',
 				),
 				Visualizer_Plugin::VERSION,
 				true
@@ -978,6 +980,9 @@ public function renderLibraryPage() {
 				),
 				'page_type' => 'library',
 				'is_front'  => false,
+				'i10n'          => array(
+					'copied'        => __( 'The shortcode has been copied to your clipboard. Hit Ctrl-V/Cmd-V to paste it.', 'visualizer' ),
+				),
 			)
 		);
 		// render library page

classes/Visualizer/Render/Library.php

@@ -252,9 +252,7 @@ private function _renderLibrary() {
 			echo '<span class="visualizer-chart-action visualizer-nochart-clone"></span>';
 			echo '<span class="visualizer-chart-action visualizer-nochart-edit"></span>';
 			echo '<span class="visualizer-chart-action visualizer-nochart-export"></span>';
-			echo '<span class="visualizer-chart-shortcode">';
-			echo '&nbsp;[visualizer]&nbsp;';
-			echo '</span>';
+			echo '<span class="visualizer-chart-action visualizer-nochart-shortcode"></span>';
 			echo '</div>';
 			echo '</div>';
 			$this->_renderSidebar();
@@ -327,6 +325,7 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
 			$chart_status['title'] = __( 'Click to view the error', 'visualizer' );
 		}
 
+		$shortcode = sprintf( '[visualizer id="%s" lazy="no" class=""]', $chart_id );
 		echo '<div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>';
 		echo '<div id="', $placeholder_id, '" class="visualizer-chart-canvas">';
 		echo '<img src="', VISUALIZER_ABSURL, 'images/ajax-loader.gif" class="loader">';
@@ -336,9 +335,8 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
 		echo '<a class="visualizer-chart-action visualizer-chart-clone" href="', $clone_url, '" title="', esc_attr__( 'Clone', 'visualizer' ), '"></a>';
 		echo '<a class="visualizer-chart-action visualizer-chart-edit" href="javascript:;" title="', esc_attr__( 'Edit', 'visualizer' ), '" data-chart="', $chart_id, '"></a>';
 		echo '<a class="visualizer-chart-action visualizer-chart-export" href="javascript:;" title="', esc_attr__( 'Export', 'visualizer' ), '" data-chart="', $export_link, '"></a>';
-		echo '<span class="visualizer-chart-shortcode" title="', esc_attr__( 'Click to select', 'visualizer' ), '">';
-		echo '&nbsp;[visualizer id=&quot;', $chart_id, '&quot;]&nbsp;';
-		echo '</span>';
+		echo '<a class="visualizer-chart-action visualizer-chart-shortcode" href="javascript:;" title="', esc_attr__( 'Click to copy shortcode', 'visualizer' ), '" data-clipboard-text="', esc_attr( $shortcode ), '"></a>';
+		echo '<span>&nbsp;</span>';
 		echo '<hr><div class="visualizer-chart-status"><span class="visualizer-date" title="' . __( 'Last Updated', 'visualizer' ) . '">' . $chart_status['date'] . '</span><span class="visualizer-error"><i class="dashicons ' . $chart_status['icon'] . '" data-viz-error="' . esc_attr( str_replace( '"', "'", $chart_status['error'] ) ) . '" title="' . esc_attr( $chart_status['title'] ) . '"></i></span></div>';
 		echo '</div>';
 		echo '</div>';

css/library.css

@@ -107,8 +107,16 @@
 	background-position: -46px -64px;
 }
 
+.visualizer-nochart-shortcode,
+.visualizer-chart-shortcode {
+    background-position: -143px -126px;
+    float: left;
+}
+
 .visualizer-nochart-clone,
 .visualizer-nochart-delete,
+.visualizer-nochart-shortcode,
+.visualizer-nochart-export,
 .visualizer-nochart-edit {
 	opacity: 0.5;