MINOR Clearer CSS classes in CMS controller templates. Fixed JS loading of ModelAdmin panels. Added $BaseCSSClasses to content templates in order to support partial template loads through ajax (instead of relying on stale CSS classes on the <body> tag). Leaving $BaseCSSClasses in LeftAndMain.ss base template for legacy reasons.

This commit is contained in:
Ingo Schommer 2011-07-05 11:34:37 +02:00
parent 1dc9457048
commit 19b9edb170
7 changed files with 54 additions and 23 deletions

View File

@ -2,6 +2,41 @@
$.entwine('ss', function($){ $.entwine('ss', function($){
$('.LeftAndMain .cms-content, .LeftAndMain .cms-content *').entwine({
/**
* Triggered before a new URL is loaded, typically via ajax.
* Loading itself is handled by .LeftAndMain 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.
* For example, a page edit form might fill the whole area,
* while a ModelAdmin layout shows a search form on the left, and edit form on the right.
*/
$('.LeftAndMain .cms-content').entwine({ $('.LeftAndMain .cms-content').entwine({
onmatch: function() { onmatch: function() {
@ -33,20 +68,6 @@
this._super(); this._super();
}, },
beforeLoad: function(url) {
this.addClass('loading');
this.cleanup();
},
afterLoad: function(data, status, xhr) {
this.removeClass('loading');
this.replaceWith(data);
},
cleanup: function() {
this.empty();
},
/** /**
* Function: loadForm * Function: loadForm
* *
@ -60,7 +81,7 @@
*/ */
loadForm: function(url, form, callback, ajaxOptions) { loadForm: function(url, form, callback, ajaxOptions) {
var self = this; var self = this;
if(!form || !form.length) var form = $('.cms-content-form form:first'); if(!form || !form.length) var form = $('.cms-content-fields form:first');
// Alert when unsaved changes are present // Alert when unsaved changes are present
if(form._checkChangeTracker(true) == false) return false; if(form._checkChangeTracker(true) == false) return false;

View File

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

View File

@ -137,7 +137,7 @@
var firstLink = this.find('a[href]'); var firstLink = this.find('a[href]');
if(!firstLink) return; if(!firstLink) return;
window.History.pushState({selector: '.cms-edit-form'}, '', firstLink.attr('href')); window.History.pushState({selector: '.cms-content-fields form:first'}, '', firstLink.attr('href'));
return false; return false;
} }
}); });

View File

@ -51,7 +51,7 @@ body .ui-widget {
.cms-content, .cms-content,
.cms-content-header, .cms-content-header,
.cms-content-tools, .cms-content-tools,
.cms-content-form, .cms-content-fields,
.cms-edit-form { .cms-edit-form {
@include inline-block; @include inline-block;
} }
@ -412,7 +412,7 @@ form.member-profile-form {
} }
.cms-content-form { .cms-content-fields {
overflow: auto; overflow: auto;
} }

View File

@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<div class="cms-content-form center"> <div class="cms-content-fields center">
<!-- <div class="cms-content-tools west"> <!-- <div class="cms-content-tools west">
$Left $Left

View File

@ -1,4 +1,4 @@
<div class="cms-content center" data-layout="{type: 'border'}"> <div class="cms-content center $BaseCSSClasses" data-layout="{type: 'border'}">
<div class="cms-content-header north"> <div class="cms-content-header north">
<div> <div>
@ -41,7 +41,7 @@
</div> </div>
<div class="cms-content-form center ui-widget-content"> <div class="cms-content-fields center ui-widget-content">
$EditForm $EditForm
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="cms-content center" data-layout="{type: 'border'}"> <div class="cms-content center $BaseCSSClasses" data-layout="{type: 'border'}">
<div class="cms-content-header north"> <div class="cms-content-header north">
<div> <div>
@ -31,7 +31,7 @@
</div> </div>
<div class="cms-content-form center ui-widget-content"> <div class="cms-content-fields center ui-widget-content">
$EditForm $EditForm
</div> </div>