Merge pull request #237 from contactashish13/issue-236

add insert button in media popup

Author: selul

classes/Visualizer/Module/Admin.php

@@ -157,6 +157,13 @@ public function enqueueMediaScripts() {
 			wp_enqueue_script( 'visualizer-media-collection', VISUALIZER_ABSURL . 'js/media/collection.js', array( 'visualizer-media-model' ), Visualizer_Plugin::VERSION, true );
 			wp_enqueue_script( 'visualizer-media-controller', VISUALIZER_ABSURL . 'js/media/controller.js', array( 'visualizer-media-collection' ), Visualizer_Plugin::VERSION, true );
 			wp_enqueue_script( 'visualizer-media-view', VISUALIZER_ABSURL . 'js/media/view.js', array( 'visualizer-media-controller' ), Visualizer_Plugin::VERSION, true );
+			wp_localize_script(
+				'visualizer-media-view', 'visualizer', array(
+					'i10n' => array(
+						'insert'    => __( 'Insert', 'visualizer' ),
+					),
+				)
+			);
 			wp_enqueue_script( 'visualizer-media-toolbar', VISUALIZER_ABSURL . 'js/media/toolbar.js', array( 'visualizer-media-view' ), Visualizer_Plugin::VERSION, true );
 			wp_enqueue_script( 'visualizer-media', VISUALIZER_ABSURL . 'js/media.js', array( 'visualizer-media-toolbar' ), Visualizer_Plugin::VERSION, true );
 		}

classes/Visualizer/Render/Templates.php

@@ -64,10 +64,7 @@ private function _renderTemplate( $id, $callback ) {
 	 * @access protected
 	 */
 	protected function _renderLibraryChart() {
-		echo '<div class="visualizer-library-chart-footer visualizer-clearfix">';
-			echo '<a class="visualizer-library-chart-action visualizer-library-chart-delete" href="javascript:;" title="', esc_attr__( 'Delete', 'visualizer' ), '"></a>';
-			echo '<a class="visualizer-library-chart-action visualizer-library-chart-insert" href="javascript:;" title="', esc_attr__( 'Insert', 'visualizer' ), '"></a>';
-
+		echo '<div class="visualizer-library-chart-footer visualizer-clearfix visualizer-library-media-popup">';
 			echo '<span class="visualizer-library-chart-shortcode" title="', esc_attr__( 'Click to select', 'visualizer' ), '">&nbsp;[visualizer id=&quot;{{data.id}}&quot;]&nbsp;</span>';
 		echo '</div>';
 	}

css/media.css

@@ -171,4 +171,35 @@ i.mce-i-visualizer-icon:before {
     -webkit-font-smoothing: antialiased;
     font: 400 20px/1 dashicons;
     vertical-align: top;
+}
+
+.visualizer-chart-bg, .visualizer-chart-insert-bg {
+	display: none;
+}
+
+.visualizer-library-chart:hover .visualizer-chart-bg {
+	display: block;
+	position: absolute;
+    background: #000000;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.3;
+}
+
+.visualizer-library-chart:hover .visualizer-chart-bg ~ .visualizer-chart-insert-bg {
+	display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99999;
+}
+
+button.visualizer-library-chart-insert{
+    position: absolute;
+    top: 45%;
+    left: 45%;
 }

js/media/view.js

@@ -2,7 +2,7 @@
 /* global google */
 /* global visualizer */
 /* global showNotice */
-(function($, wpm) {
+(function($, wpm, visualizer) {
 	var libraryWidth, libraryHeight, wpmv, wpmV, wpmvv, wpmvvl, wpmvvb, l10n;
 
 	wpmv = wpm.view;
@@ -269,6 +269,18 @@
 						}
 
 						self.renderCollection();
+                        $('.visualizer-library-chart').css('position', 'relative')
+                            .append($(
+                                // jshint ignore:start
+                                '<div class="visualizer-chart-bg"></div>'
+                                + '<div class="visualizer-chart-insert-bg">'
+                                + '<button class="button button-primary visualizer-library-chart-insert">' + visualizer.i10n.insert + '</button>'
+                                + '</div>'
+                                // jshint ignore:end
+                            ))
+                            .on('mouseover', function(){
+                                $(this).addClass('hover');
+                            });
 						content.unlock();
 					}
 				}
@@ -464,7 +476,7 @@
 			this.controller.trigger('visualizer:library:page', $(e.target).data('page'));
 		}
 	});
-})(jQuery, wp.media);
+})(jQuery, wp.media, visualizer);
 
 (function($) {
     $.fn.lock = function() {