MINOR Better redrawing of panels loaded via ajax in CMS (no jslayout/tabset glitches, loading overlay)

admin/javascript/LeftAndMain.Content.js

@@ -2,35 +2,6 @@
 
 	$.entwine('ss', function($){
 		
-		$('.cms-content, .cms-content *').entwine({
-			/**
-			 * Triggered before a new URL is loaded, typically via ajax.
-			 * Loading itself is handled by $('.cms-container') and window.history.
-			 * 
-			 * @param {String}
-			 */
-			beforeLoad: function(url) {
-				this.addClass('loading');
-				this.cleanup();
-			},
-			
-			/**
-			 * Triggered after an ajax request with new HTML data.
-			 * 
-			 * @param {String}
-			 * @param {String}
-			 * @param {XMLHTTPRequest}
-			 */
-			afterLoad: function(data, status, xhr) {
-				this.removeClass('loading');
-				this.replaceWith(data);
-			},
-			
-			cleanup: function() {
-				this.empty();
-			}
-		});
-
 		/**
 		 * The "content" area contains all of the section specific UI (excluding the menu).
 		 * This area can be a form itself, as well as contain one or more forms.
@@ -66,6 +37,9 @@
 					}
 				});
 				
+				// Force initialization of tabsets to avoid layout glitches
+				this.find('.ss-tabset').redraw();
+				
 				this._super();
 			},
 			
@@ -263,4 +237,14 @@
 			}
 		});
 	});
+	
+	$('.cms-content.loading').entwine({
+		onmatch: function() {
+			this.append('<div class="cms-content-loading-overlay ui-widget-overlay"></div>');
+		},
+		onunmatch: function() {
+			this.find('.cms-content-loading-overlay').remove();
+		}
+	});
+	
 })(jQuery);

admin/javascript/LeftAndMain.EditForm.js

@@ -89,16 +89,6 @@
 				this._super();
 			},
 			
-			beforeLoad: function(url) {
-				this.addClass('loading');
-				this.cleanup();
-			},
-			
-			afterLoad: function(data, status, xhr) {
-				this.removeClass('loading');
-				this.replaceWith(data);
-			},
-		
 			/**
 			 * Function: _setupChangeTracker
 			 */

admin/javascript/LeftAndMain.js

@@ -80,7 +80,7 @@
 				// Not all edit forms are layouted
 				var editForm = $('.cms-edit-form[data-layout]').layout();
 				$('.cms-content').layout();
-				$('.cms-container').layout({resize: false})
+				$('.cms-container').layout({resize: false});
 			},
 			
 			/**
@@ -112,9 +112,10 @@
 				// Don't allow parallel loading to avoid edge cases
 				if(this.getCurrentXHR()) this.getCurrentXHR().abort();
 				
-				var contentEl = $(state.data.selector || '.cms-content');
+				var selector = state.data.selector || '.cms-content', contentEl = $(selector);
-				this.trigger('beforestatechange', {state: state});
+				this.trigger('beforestatechange', {state: state, element: contentEl});
-				contentEl.beforeLoad(state.url);
+
+				contentEl.addClass('loading');
 				
 				var xhr = $.ajax({
 					url: state.url,
@@ -124,10 +125,19 @@
 						if(title) document.title = title;
 						
 						// Update panels
-						contentEl.afterLoad(data, status, xhr);
+						jQuery.entwine.synchronous_mode(true);
+						var newContentEl = $(data);
+						newContentEl.addClass('loading');
+						contentEl.replaceWith(newContentEl);
+						contentEl.remove();
 						self.redraw();
+						newContentEl.removeClass('loading');
+						jQuery.entwine.synchronous_mode(false);
 						
-						self.trigger('afterstatechange', {data: data, status: status, xhr: xhr});
+						self.trigger('afterstatechange', {data: data, status: status, xhr: xhr, element: newContentEl});
+					},
+					error: function(xhr, status, e) {
+						contentEl.removeClass('loading');
 					}
 				});
 				this.setCurrentXHR(xhr);

admin/scss/_style.scss

@@ -518,6 +518,10 @@ form.cms-batch-actions {
 		width: 10px;
 	}
 	
+	.cms-preview-overlay {
+		
+	}
+	
 	iframe {
 		width: 100%;
 		height: 100%;

javascript/TabSet.js

@@ -9,14 +9,17 @@
 		 */
 		$('.ss-tabset').entwine({
 			onmatch: function() {
+				this.redraw();
+				this._super();
+			},
+			
+			redraw: function() {
 				this.rewriteHashlinks();
 
 				// Initialize jQuery UI tabs
 				this.tabs({
 					cookie: $.cookie ? { expires: 30, path: '/', name: 'ui-tabs-' + this.attr('id') } : false
 				});
-				
-				this._super();
 			},
 		
 			/**