silverstripe-framework/admin/javascript/LeftAndMain.EditForm.js

236 lines
6.8 KiB
JavaScript
Raw Normal View History

/**
* File: LeftAndMain.EditForm.js
*/
(function($) {
$.entwine('ss', function($){
/**
* Class: .cms-edit-form
*
* 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
*
* Events:
* 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
*/
$('.cms-edit-form').entwine(/** @lends ss.Form_EditForm */{
/**
* Variable: PlaceholderHtml
* (String_ HTML text to show when no form content is chosen.
* Will show inside the <form> tag.
*/
PlaceholderHtml: '',
/**
* Variable: ChangeTrackerOptions
* (Object)
*/
ChangeTrackerOptions: {},
/**
* Constructor: onmatch
*/
onmatch: function() {
var self = this;
this._setupChangeTracker();
// Can't bind this through jQuery
window.onbeforeunload = function(e) {return self._checkChangeTracker(false);};
// focus input on first form element
this.find(':input:visible:not(:submit):first').focus();
// 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();
}
}
// TODO
// // 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');
// Show validation errors if necessary
if(this.hasClass('validationerror')) {
// TODO validation shouldnt need a special case
statusMessage(ss.i18n._t('ModelAdmin.VALIDATIONERROR', 'Validation Error'), 'bad');
}
// Move navigator to preview if one is available.
// If not, just leave the links in the form.
var previewEl = $('.cms-preview');
if(previewEl.length) {
// TODO Relies on DOM element order (the second .cms-navigator is the "old" one)
previewEl.find('.cms-preview-controls').html(this.find('.cms-navigator').detach());
}
this._super();
},
redraw: function() {
// TODO Manually set container height before resizing - shouldn't be necessary'
this.find('.cms-content-actions').height(this.find('.cms-content-actions .Actions').height());
this.layout();
},
/**
* Function: _setupChangeTracker
*/
_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.getChangeTrackerOptions());
},
/**
* Function: _checkChangeTracker
*
* Checks the jquery.changetracker plugin status for this form.
* Usually bound to window.onbeforeunload.
*
* Parameters:
* {boolean} isUnloadEvent - ..
*
* Returns:
* (String) 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');
}
}
},
/**
* Function: onsubmit
*
* Suppress submission unless it is handled through ajaxSubmit().
*/
onsubmit: function(e) {
this.parents('.cms-content').submitForm(this);
return false;
},
/**
* Function: validate
*
* Hook in (optional) validation routines.
* Currently clientside validation is not supported out of the box in the CMS.
*
* Todo:
* Placeholder implementation
*
* Returns:
* {boolean}
*/
validate: function() {
var isValid = true;
this.trigger('validate', {isValid: isValid});
return isValid;
}
});
/**
* Class: .cms-edit-form .Actions :submit
*
* 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.
*/
$('.cms-edit-form .Actions input, .cms-edit-form .Actions button').entwine({
/**
* Function: onclick
*/
onclick: function(e) {
$('.cms-content').submitForm(this.parents('form'), this);
return false;
}
});
/**
* Class: .cms-edit-form textarea.htmleditor
*
* Add tinymce to HtmlEditorFields within the CMS. Works in combination
* with a TinyMCE.init() call which is prepopulated with the used HTMLEditorConfig settings,
* and included in the page as an inline <script> tag.
*/
$('.cms-edit-form textarea.htmleditor').entwine({
/**
* Constructor: onmatch
*/
onmatch : function() {
// Only works after TinyMCE.init() has been invoked, see $(window).bind() call below for details.
this.redraw();
this._super();
},
redraw: function() {
// Using a global config (generated through HTMLEditorConfig PHP logic)
var config = ssTinyMceConfig, self = this;
// Avoid flicker (also set in CSS to apply as early as possible)
self.css('visibility', '');
// Create editor instance and render it.
// Similar logic to adapter/jquery/jquery.tinymce.js, but doesn't rely on monkey-patching
// jQuery methods, and avoids replicate the script lazyloading which is already in place with jQuery.ondemand.
var ed = new tinymce.Editor(this.attr('id'), config);
ed.onInit.add(function() {
self.css('visibility', 'visible');
});
ed.render();
this._super();
},
isChanged: function() {
return tinyMCE.getInstanceById(this.attr('id')).isDirty();
},
resetChanged: function() {
var inst = tinyMCE.getInstanceById(this.attr('id'));
if (inst) inst.startContent = tinymce.trim(inst.getContent({format : 'raw', no_events : 1}));
},
onunmatch: function() {
// TODO Throws exceptions in Firefox, most likely due to the element being removed from the DOM at this point
// var ed = tinyMCE.get(this.attr('id'));
// if(ed) ed.remove();
this._super();
}
});
});
}(jQuery));