Merge pull request #109 from richtabor/add-content-import-progress-bar

Add Content Import Progress Bar 🎉
richtabor · Jun 27, 2018 · 6914913 · 6914913
2 parents aa9d5fc + 96ab3c2
commit 6914913
Show file tree

Hide file tree

Showing 11 changed files with 359 additions and 88 deletions.
diff --git a/assets/css/merlin.css b/assets/css/merlin.css
@@ -2578,3 +2578,41 @@ body.loaded .merlin__content__footer--fullwidth {
 body.exiting .merlin__content--content .merlin__content__footer {
 	opacity: 0;
 }
+
+.merlin__progress-bar {
+	cursor: default;
+	height: 100%;
+}
+
+.merlin__progress-bar .js-merlin-progress-bar {
+	background-color: #daf1dc;
+	border-radius: 0;
+	bottom: 0;
+	display: block;
+	height: 100%;
+	left: 0;
+	overflow: hidden;
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 0;
+}
+
+.js-merlin-progress-bar-percentage {
+	bottom: 0;
+	color: #46b450;
+	display: none !important;
+	left: 0;
+	line-height: 38px;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
+.merlin__button--loading .js-merlin-progress-bar-percentage {
+	display: block !important;
+}
+
+.merlin__button--next[data-callback="install_content"] {
+	background: #f1f1f1;
+}
diff --git a/assets/css/merlin.min.css b/assets/css/merlin.min.css
diff --git a/assets/js/merlin.js b/assets/js/merlin.js
@@ -233,18 +233,9 @@ function ActivateLicense() {
         }
     }
 
+function PluginManager(){
 
-
-
-
-
-
-
-
-
-    function PluginManager(){
-
-    	var body 				= $('.merlin__body');
+    	var body = $('.merlin__body');
         var complete;
         var items_completed 	= 0;
         var current_item 		= "";
@@ -346,7 +337,6 @@ function ActivateLicense() {
             }
         }
     }
-
     function ContentManager(){
 
     	var body 				= $('.merlin__body');
@@ -355,11 +345,20 @@ function ActivateLicense() {
         var current_item 		= "";
         var $current_node;
         var current_item_hash 	= "";
+        var current_content_import_items = 1;
+        var total_content_import_items = 0;
+        var progress_bar_interval;
 
         function ajax_callback(response) {
             var currentSpan = $current_node.find("label");
             if(typeof response == "object" && typeof response.message !== "undefined"){
                 currentSpan.addClass(response.message.toLowerCase());
+
+                if( typeof response.num_of_imported_posts !== "undefined" && 0 < total_content_import_items ) {
+                    current_content_import_items = 'all' === response.num_of_imported_posts ? total_content_import_items : response.num_of_imported_posts;
+                    update_progress_bar();
+                }
+
                 if(typeof response.url !== "undefined"){
                     // we have an ajax url action to perform.
                     if(response.hash === current_item_hash){
@@ -383,6 +382,7 @@ function ActivateLicense() {
                     find_next();
                 }
             }else{
+                console.log(response);
                 // error - try again with next plugin
                 currentSpan.addClass("status--error");
                 find_next();
@@ -432,17 +432,61 @@ function ActivateLicense() {
             }
         }
 
+        function init_content_import_progress_bar() {
+            if( ! $(".merlin__drawer--import-content__list-item .checkbox-content").is( ':checked' ) ) {
+                return false;
+            }
+
+            jQuery.post(merlin_params.ajaxurl, {
+                action: "merlin_get_total_content_import_items",
+                wpnonce: merlin_params.wpnonce,
+                selected_index: $( '.js-merlin-demo-import-select' ).val() || 0
+            }, function( response ) {
+                total_content_import_items = response.data;
+
+                if ( 0 < total_content_import_items ) {
+                    update_progress_bar();
+
+                    // Change the value of the progress bar constantly for a small amount (0,2% per sec), to improve UX.
+                    progress_bar_interval = setInterval( function() {
+                        current_content_import_items = current_content_import_items + total_content_import_items/500;
+                        update_progress_bar();
+                    }, 1000 );
+                }
+            } );
+        }
+
+        function valBetween(v, min, max) {
+            return (Math.min(max, Math.max(min, v)));
+        }
+
+        function update_progress_bar() {
+            $('.js-merlin-progress-bar').css( 'width', (current_content_import_items/total_content_import_items) * 100 + '%' );
+
+            var $percentage = valBetween( ((current_content_import_items/total_content_import_items) * 100) , 0, 99);
+
+            $('.js-merlin-progress-bar-percentage').html( Math.round( $percentage ) + '%' );
+
+            if ( 1 === current_content_import_items/total_content_import_items ) {
+                clearInterval( progress_bar_interval );
+            }
+        }
+
         return {
             init: function(btn){
                 $(".merlin__drawer--import-content").addClass("installing");
                 $(".merlin__drawer--import-content").find("input").prop("disabled", true);
                 complete = function(){
 
-									$.post(merlin_params.ajaxurl, {
-										action: "merlin_import_finished",
-										wpnonce: merlin_params.wpnonce,
-										selected_index: $( '.js-merlin-demo-import-select' ).val() || 0
-									});
+			$.post(merlin_params.ajaxurl, {
+				action: "merlin_import_finished",
+				wpnonce: merlin_params.wpnonce,
+				selected_index: $( '.js-merlin-demo-import-select' ).val() || 0
+			});
+
+			setTimeout(function(){
+				$('.js-merlin-progress-bar-percentage').html( '100%' );
+			},100);
 
                 	setTimeout(function(){
 				       body.removeClass( drawer_opened );
@@ -460,6 +504,7 @@ function ActivateLicense() {
 				        window.location.href=btn.href;
 				    },4000);
                 };
+                init_content_import_progress_bar();
                 find_next();
             }
         }

diff --git a/assets/js/merlin.min.js b/assets/js/merlin.min.js
diff --git a/assets/scss/merlin.scss b/assets/scss/merlin.scss
@@ -145,4 +145,6 @@ p.success {
 
 @import "modules/checkmark";
 
-@import "modules/footer";
+@import "modules/footer";
+
+@import "modules/progress-bar";
diff --git a/assets/scss/modules/_progress-bar.scss b/assets/scss/modules/_progress-bar.scss
@@ -0,0 +1,41 @@
+.merlin {
+
+	&__progress-bar {
+		height: 100%;
+		cursor: default;
+
+		.js-merlin-progress-bar {
+			border-radius: 0;
+			display: block;
+			height: 100%;
+			width: 0%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background-color: lighten( $green, 41% );
+			overflow: hidden;
+		}
+	}
+}
+
+.js-merlin-progress-bar-percentage {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	line-height: 38px;
+	color: $green;
+	display: none !important;
+
+	.merlin__button--loading & {
+		display: block !important;
+	}
+}
+
+
+.merlin__button--next[data-callback="install_content"] {
+	background: $background;
+}