Permalink
Browse files

MINOR Better redrawing of panels loaded via ajax in CMS (no jslayout/…

…tabset glitches, loading overlay)
  • Loading branch information...
1 parent 475e055 commit 6d26a8844276cb89d208e8f64cdae5cb77b4fd26 @chillu chillu committed Jul 15, 2011
@@ -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);
@@ -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
*/
@@ -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');
- this.trigger('beforestatechange', {state: state});
- contentEl.beforeLoad(state.url);
+ var selector = state.data.selector || '.cms-content', contentEl = $(selector);
+ this.trigger('beforestatechange', {state: state, element: contentEl});
+
+ 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);
View
@@ -518,6 +518,10 @@ form.cms-batch-actions {
width: 10px;
}
+ .cms-preview-overlay {
+
+ }
+
iframe {
width: 100%;
height: 100%;
View
@@ -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();
},
/**

0 comments on commit 6d26a88

Please sign in to comment.