silverstripe-cms/javascript/LeftAndMain.EditForm.js

338 lines
10 KiB
JavaScript
Raw Normal View History

(function($) {
/**
* @class Base edit form, provides ajaxified saving
* and reloading itself through the ajax return values.
* Takes care of resizing tabsets within the layout container.
* @name ss.Form_EditForm
* @require jquery.changetracker
*
* <h3>Events</h3>
* - ajaxsubmit: Form is about to be submitted through ajax
* - validate: Contains validation result
* - removeform: A form is about to be removed from the DOM
* - load: Form is about to be loaded through ajax
*/
$('#Form_EditForm').concrete('ss',function($){
return/** @lends ss.Form_EditForm */{
/**
* @type String HTML text to show when no form content is chosen.
* Will show inside the <form> tag.
*/
PlaceholderHtml: '',
/**
* @type Object
*/
ChangeTrackerOptions: {},
onmatch: function() {
var self = this;
this._setupChangeTracker();
this.bind('submit', function(e) {
return self._submit(e);
});
// Can't bind this through jQuery
window.onbeforeunload = function(e) {return self._checkChangeTracker(false);};
this._super();
},
_setupChangeTracker: function() {
// Don't bind any events here, as we dont replace the
// full <form> tag by any ajax updates they won't automatically reapply
this.changetracker(this.ChangeTrackerOptions());
},
/**
* Checks the jquery.changetracker plugin status for this form.
* Usually bound to window.onbeforeunload.
*
* @param {boolean} isUnloadEvent
* @return Either a string with a confirmation message, or the result of a confirm() dialog,
* based on the isUnloadEvent parameter.
*/
_checkChangeTracker: function(isUnloadEvent) {
var self = this;
// @todo TinyMCE coupling
if(typeof tinyMCE != 'undefined') tinyMCE.triggerSave();
// check for form changes
if(self.is('.changed')) {
// returned string will trigger a confirm() dialog,
// but only if the method is triggered by an event
if(isUnloadEvent) {
return confirm(ss.i18n._t('LeftAndMain.CONFIRMUNSAVED'));
} else {
return ss.i18n._t('LeftAndMain.CONFIRMUNSAVEDSHORT');
}
}
},
/**
* Suppress submission unless it is handled through ajaxSubmit().
*
* @param {Event} e
*/
_submit: function(e) {
this.ajaxSubmit();
return false;
},
/**
* @param {DOMElement} button The pressed button (optional)
* @param {Function} callback Called in complete() handler of jQuery.ajax()
* @param {Object} ajaxOptions Object literal to merge into $.ajax() call
* @param {boolean} loadResponse Render response through _loadResponse() (Default: true)
*/
ajaxSubmit: function(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('ajaxsubmit', {button: button});
// set button to "submitting" state
$(button).addClass('loading');
// @todo TinyMCE coupling
if(typeof tinyMCE != 'undefined') tinyMCE.triggerSave();
// validate if required
if(!this.validate()) {
// TODO Automatically switch to the tab/position of the first error
statusMessage("Validation failed.", "bad");
$(button).removeClass('loading');
return false;
}
// get all data from the form
var formData = this.serializeArray();
// add button action
formData.push({name: $(button).attr('name'), value:'1'});
jQuery.ajax(jQuery.extend({
url: this.attr('action'),
data: formData,
type: 'POST',
complete: function(xmlhttp, status) {
$(button).removeClass('loading');
// TODO This should be using the plugin API
self.removeClass('changed');
if(callback) callback(xmlhttp, status);
// pass along original form data to enable old/new comparisons
if(loadResponse !== false) {
self._loadResponse(xmlhttp.responseText, status, xmlhttp, formData);
}
},
dataType: 'html'
}, ajaxOptions));
return false;
},
/**
* Hook in (optional) validation routines.
* Currently clientside validation is not supported out of the box in the CMS.
*
* @todo Placeholder implementation
*
* @return {boolean}
*/
validate: function() {
var isValid = true;
this.trigger('validate', {isValid: isValid});
return isValid;
},
/**
* @param {String} url
* @param {Function} callback (Optional) Called after the form content as been loaded
* @param {ajaxOptions} Object literal merged into the jQuery.ajax() call (Optional)
*/
loadForm: function(url, callback, ajaxOptions) {
var self = this;
// Alert when unsaved changes are present
if(this._checkChangeTracker(true) == false) return false;
// hide existing form - shown again through _loadResponse()
this.addClass('loading');
this.trigger('load', {url: url});
this.cleanup();
return jQuery.ajax(jQuery.extend({
url: url,
complete: function(xmlhttp, status) {
// TODO This should be using the plugin API
self.removeClass('changed');
self._loadResponse(xmlhttp.responseText, status, xmlhttp);
self.removeClass('loading');
if(callback) callback.apply(self, arguments);
},
dataType: 'html'
}, ajaxOptions));
},
/**
* Remove everying inside the <form> tag
* with a custom HTML fragment. Useful e.g. for deleting a page in the CMS.
* Checks for unsaved changes before removing the form
*
* @param {String} placeholderHtml Short note why the form has been removed, displayed in <p> tags.
* Falls back to the default RemoveText() option (Optional)
*/
removeForm: function(placeholderHtml) {
if(!placeholderHtml) placeholderHtml = this.PlaceholderHtml();
// Alert when unsaved changes are present
if(this._checkChangeTracker(true) == false) return false;
this.trigger('removeform');
this.html(placeholderHtml);
// TODO This should be using the plugin API
this.removeClass('changed');
},
/**
* Remove all the currently active TinyMCE editors.
* Note: Everything that calls this externally has an inappropriate coupling to TinyMCE.
*/
cleanup: function() {
if((typeof tinymce != 'undefined') && tinymce.EditorManager) {
var id;
for(id in tinymce.EditorManager.editors) {
tinymce.EditorManager.editors[id].remove();
}
tinymce.EditorManager.editors = {};
}
},
/**
* @param {String} data Either HTML for straight insertion, or eval'ed JavaScript.
* If passed as HTML, it is assumed that everying inside the <form> tag is replaced,
* but the old <form> tag itself stays intact.
* @param {String} status
* @param {XMLHTTPRequest} xmlhttp
* @param {Array} origData The original submitted data, useful to do comparisons of changed
* values in new form output, e.g. to detect a URLSegment being changed on the serverside.
* Array in jQuery serializeArray() notation.
*/
_loadResponse: function(data, status, xmlhttp, origData) {
if(status == 'success') {
this.cleanup();
var html = data;
// Rewrite # links
html = html.replace(/(<a[^>]+href *= *")#/g, '$1' + window.location.href.replace(/#.*$/,'') + '#');
// Rewrite iframe links (for IE)
html = html.replace(/(<iframe[^>]*src=")([^"]+)("[^>]*>)/g, '$1' + $('base').attr('href') + '$2$3');
// Prepare iframes for removal, otherwise we get loading bugs
this.find('iframe').each(function() {
this.contentWindow.location.href = 'about:blank';
$(this).remove();
});
// update form content
if(html) {
this.html(html);
} else {
this.removeForm();
}
// @todo Coupling to avoid FOUC (concrete applies to late)
this.find('.ss-tabset').tabs();
this._setupChangeTracker();
// Optionally get the form attributes from embedded fields, see Form->formHtmlContent()
for(var overrideAttr in {'action':true,'method':true,'enctype':true,'name':true}) {
var el = this.find(':input[name='+ '_form_' + overrideAttr + ']');
if(el) {
this.attr(overrideAttr, el.val());
el.remove();
}
}
Behaviour.apply(); // refreshes ComplexTableField
// focus input on first form element
this.find(':input:visible:first').focus();
this.trigger('loadnewpage', {data: data, origData: origData});
}
// set status message based on response
var _statusMessage = (xmlhttp.getResponseHeader('X-Status')) ? xmlhttp.getResponseHeader('X-Status') : xmlhttp.statusText;
if(this.hasClass('validationerror')) {
// TODO validation shouldnt need a special case
statusMessage(ss.i18n._t('ModelAdmin.VALIDATIONERROR', 'Validation Error'), 'bad');
} else {
statusMessage(_statusMessage, (xmlhttp.status >= 400) ? 'bad' : 'good');
}
}
};
});
/**
* @class All buttons in the right CMS form go through here by default.
* We need this onclick overloading because we can't get to the
* clicked button from a form.onsubmit event.
* @name ss.Form_EditForm.Actions.submit
*/
$('#Form_EditForm .Actions :submit').concrete('ss', function($){
return/** @lends ss.Form_EditForm.Actions.submit */{
onmatch: function() {
this.bind('click', this._onclick);
this._super();
},
_onclick: function() {
jQuery('#Form_EditForm').concrete('ss').ajaxSubmit(this);
return false;
}
};
});
/**
* @class Add tinymce to HtmlEditorFields within the CMS.
* @name ss.Form_EditForm.textarea.htmleditor
*/
$('#Form_EditForm textarea.htmleditor').concrete('ss', function($){
return/** @lends ss.Form_EditForm.Actions.submit */{
onmatch : function() {
tinyMCE.execCommand("mceAddControl", true, this.attr('id'));
this.isChanged = function() {
return tinyMCE.getInstanceById(this.attr('id')).isDirty();
}
this.resetChanged = function() {
var inst = tinyMCE.getInstanceById(this.attr('id'));
if (inst) inst.startContent = tinymce.trim(inst.getContent({format : 'raw', no_events : 1}));
}
}
};
});
}(jQuery));