(function($) {
$.entwine('ss', function($){
/**
* 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.
*/
$('.cms-content').entwine({
onmatch: function() {
var self = this;
// Listen to tree selection events
this.find('.cms-tree').bind('select_node.jstree', function(e, data) {
var node = data.rslt.obj, loadedNodeID = self.find(':input[name=ID]').val(), origEvent = data.args[2];
// Don't trigger unless coming from a click event.
// Avoids problems with automated section switches from tree to detail view
// when JSTree auto-selects elements on first load.
if(!origEvent) return false;
// Don't allow checking disabled nodes
if($(node).hasClass('disabled')) return false;
// Don't allow reloading of currently selected node,
// mainly to avoid doing an ajax request on initial page load
if($(node).data('id') == loadedNodeID) return;
var url = $(node).find('a:first').attr('href');
if(url && url != '#') {
window.History.pushState({}, '', url);
} else {
self.removeForm();
}
});
// Force initialization of tabsets to avoid layout glitches
this.find('.ss-tabset').redraw();
this._super();
},
redraw: function() {
this.layout();
},
/**
* Function: loadForm
*
* See $('.cms-container').handleStateChange() on a frequently used alternative
* to direct ajax loading of content, with support for the window.History object.
*
* Parameters:
* (String) url - ..
* (Function) callback - (Optional) Called after the form content as been loaded
* (Object) ajaxOptions - Object literal merged into the jQuery.ajax() call (Optional)
*
* Returns:
* (XMLHTTPRequest)
*/
loadForm: function(url, form, callback, ajaxOptions) {
var self = this;
if(!form || !form.length) {
var form = $('.cms-content-fields form:first', self);
if(form.length == 0) form = $('.cms-content-fields').parents("form").eq(0);
}
// Alert when unsaved changes are present
if(form._checkChangeTracker(true) == false) return false;
// hide existing form - shown again through _loadResponse()
form.addClass('loading');
this.trigger('loadform', {form: form, url: url});
return jQuery.ajax(jQuery.extend({
url: url,
// Ensure that form view is loaded (rather than whole "Content" template)
data: {'cms-view-form': 1},
complete: function(xmlhttp, status) {
self.loadForm_responseHandler(form, xmlhttp.responseText, status, xmlhttp);
if(callback) callback.apply(self, arguments);
},
dataType: 'html'
}, ajaxOptions));
},
/**
* Function: loadForm_responseHandler
*
* Loads the response into the DOM provided. Assumes oldForm is contains
* the form tag to replace. If oldForm isn't present in the DOM, such as
* if this form is only shown after click, append the whole form.
*
* Parameters:
* (String) oldForm - HTML or eval'd javascript
* (String) html - HTML to replace oldForm
* (String) status
* (XMLHTTPRequest) xmlhttp
*/
loadForm_responseHandler: function(oldForm, html, status, xmlhttp) {
if(oldForm.length > 0) {
oldForm.replaceWith(html); // triggers onmatch() on form
}
else {
$('.cms-content').append(html);
}
// redraw the layout.
jQuery('.cms-container').entwine('ss').redraw();
// set status message based on response
var _statusMessage = (xmlhttp.getResponseHeader('X-Status')) ? xmlhttp.getResponseHeader('X-Status') : xmlhttp.statusText;
},
/**
* Function: ajaxSubmit
*
* Parameters:
* {DOMElement} button - The pressed button (optional)
* {Function} callback - Called in complete() handler of jQuery.ajax()
* {Object} ajaxOptions - Object literal to merge into $.ajax() call
* {boolean} loadResponse - Render response through _loadResponse() (Default: true)
*
* Returns:
* (boolean)
*/
submitForm: function(form, button, callback, ajaxOptions, loadResponse) {
var self = this;
// look for save button
if(!button) button = this.find('.Actions :submit[name=action_save]');
// default to first button if none given - simulates browser behaviour
if(!button) button = this.find('.Actions :submit:first');
this.trigger('submitform', {form: form, button: button});
// set button to "submitting" state
$(button).addClass('loading');
// @todo TinyMCE coupling
if(typeof tinyMCE != 'undefined') tinyMCE.triggerSave();
// validate if required
if(!form.validate()) {
// TODO Automatically switch to the tab/position of the first error
statusMessage("Validation failed.", "bad");
$(button).removeClass('loading');
return false;
}
// save tab selections in order to reconstruct them later
var selectedTabs = [];
form.find('.ss-tabset').each(function(i, el) {
if($(el).attr('id')) selectedTabs.push({id:$(el).attr('id'), selected:$(el).tabs('option', 'selected')});
});
// get all data from the form
var formData = form.serializeArray();
// add button action
formData.push({name: $(button).attr('name'), value:'1'});
jQuery.ajax(jQuery.extend({
url: form.attr('action'),
data: formData,
type: 'POST',
complete: function(xmlhttp, status) {
$(button).removeClass('loading');
// TODO This should be using the plugin API
form.removeClass('changed');
if(callback) callback(xmlhttp, status);
// pass along original form data to enable old/new comparisons
if(loadResponse !== false) {
self.submitForm_responseHandler(form, xmlhttp.responseText, status, xmlhttp, formData);
}
// Re-init tabs (in case the form tag itself is a tabset)
if(self.hasClass('ss-tabset')) self.removeClass('ss-tabset').addClass('ss-tabset');
// re-select previously saved tabs
$.each(selectedTabs, function(i, selectedTab) {
form.find('#' + selectedTab.id).tabs('select', selectedTab.selected);
});
},
dataType: 'html'
}, ajaxOptions));
return false;
},
/**
* Function: _loadResponse
*
* Parameters:
* {String} data - Either HTML for straight insertion, or eval'ed JavaScript.
* If passed as HTML, it is assumed that everying inside the