tags. + * Falls back to the default RemoveText() option (Optional) + */ + removeForm: function(form, placeholderHtml) { + if(!placeholderHtml) placeholderHtml = this.getPlaceholderHtml(); + // Alert when unsaved changes are present + if(form._checkChangeTracker(true) == false) return; + this.trigger('removeform'); + this.html(placeholderHtml); + // TODO This should be using the plugin API + this.removeClass('changed'); } }); }); diff --git a/admin/javascript/LeftAndMain.EditForm.js b/admin/javascript/LeftAndMain.EditForm.js index de192dfb2..eac77c808 100755 --- a/admin/javascript/LeftAndMain.EditForm.js +++ b/admin/javascript/LeftAndMain.EditForm.js @@ -40,33 +40,47 @@ var self = this; this._setupChangeTracker(); - - $('.cms-tree').bind('select_node.jstree', function(e, data) { - var node = data.rslt.obj, loadedNodeID = self.find(':input[name=ID]').val() - - // 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 != '#') { - var xmlhttp = self.loadForm( - url, - function(response) {} - ); - } else { - self.removeForm(); - } - }); // Can't bind this through jQuery window.onbeforeunload = function(e) {return self._checkChangeTracker(false);}; + + // focus input on first form element + this.find(':input:visible: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(/(]+href *= *")#/g, '$1' + window.location.href.replace(/#.*$/,'') + '#'); + // + // // Rewrite iframe links (for IE) + // html = html.replace(/(]*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'); + } this._super(); }, + + onunmatch: function() { + // Prepare iframes for removal, otherwise we get loading bugs + this.find('iframe').each(function() { + this.contentWindow.location.href = 'about:blank'; + $(this).remove(); + }); + + this._super(); + }, /** * Function: _setupChangeTracker @@ -114,90 +128,11 @@ * Suppress submission unless it is handled through ajaxSubmit(). */ onsubmit: function(e) { - this.ajaxSubmit(); + this.parents('.cms-content').submitForm(this); return false; }, - /** - * 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) - */ - 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; - } - - // save tab selections in order to reconstruct them later - var selectedTabs = []; - this.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 = 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); - } - - // 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) { - self.find('#' + selectedTab.id).tabs('select', selectedTab.selected); - }); - }, - dataType: 'html' - }, ajaxOptions)); - - return false; - }, - /** * Function: validate * @@ -217,67 +152,6 @@ return isValid; }, - /** - * Function: loadForm - * - * 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, 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)); - }, - - /** - * Function: removeForm - * - * Remove everying inside the tag - * with a custom HTML fragment. Useful e.g. for deleting a page in the CMS. - * Checks for unsaved changes before removing the form - * - * Parameters: - * {String} placeholderHtml - Short note why the form has been removed, displayed in tags. - * Falls back to the default RemoveText() option (Optional) - */ - removeForm: function(placeholderHtml) { - if(!placeholderHtml) placeholderHtml = this.getPlaceholderHtml(); - // Alert when unsaved changes are present - if(this._checkChangeTracker(true) == false) return; - this.trigger('removeform'); - this.html(placeholderHtml); - // TODO This should be using the plugin API - this.removeClass('changed'); - }, - /** * Function: cleanup * @@ -287,79 +161,9 @@ cleanup: function() { if((typeof tinymce != 'undefined') && tinymce.editors) { $(tinymce.editors).each(function() { - if(typeof(this.remove) == 'function') { - this.remove(); - } + if(typeof(this.remove) == 'function') this.remove(); }); } - }, - - /** - * 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 tag is replaced, - * but the old tag itself stays intact. - * {String} status - * {XMLHTTPRequest} xmlhttp - .. - * {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(/(]+href *= *")#/g, '$1' + window.location.href.replace(/#.*$/,'') + '#'); - - // Rewrite iframe links (for IE) - html = html.replace(/(]*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(); - } - - // If the form itself is a tabset, force re-rendering - if(this.hasClass('ss-tabset')) this.tabs('destroy').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, xmlhttp: xmlhttp}); - } - - // 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'); - } } }); @@ -376,7 +180,7 @@ * Function: onclick */ onclick: function(e) { - jQuery('.cms-edit-form').entwine('ss').ajaxSubmit(this); + $('.cms-content').submitForm(this.parents('form'), this); return false; } }); diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js index 9576164d9..794a46bdf 100755 --- a/admin/javascript/LeftAndMain.js +++ b/admin/javascript/LeftAndMain.js @@ -73,6 +73,8 @@ }, redraw: function() { + // Not all edit forms are layouted + var editForm = this.find('.cms-edit-form[data-layout]').layout(); this.find('.cms-content').layout(); this.find('.cms-container').layout({resize: false}) } diff --git a/admin/javascript/ModelAdmin.js b/admin/javascript/ModelAdmin.js index 7f78fa66c..dcbad80ab 100755 --- a/admin/javascript/ModelAdmin.js +++ b/admin/javascript/ModelAdmin.js @@ -71,8 +71,9 @@ var btn = $(this[0].clickedButton); btn.addClass('loading'); - $('.cms-edit-form').loadForm( + $('.cms-content').loadForm( this.attr('action'), + null, function() { btn.removeClass('loading'); }, @@ -135,7 +136,8 @@ onclick: function(e) { var firstLink = this.find('a[href]'); if(!firstLink) return; - $('.cms-edit-form').loadForm(firstLink.attr('href')); + + window.History.pushState({selector: '.cms-edit-form'}, '', firstLink.attr('href')); return false; } }); @@ -153,8 +155,9 @@ className = $('select option:selected', this).val(); requestPath = this.attr('action').replace('ManagedModelsSelect', className + '/add'); var $button = $(':submit', this); - $('.cms-edit-form').loadForm( + $('.cms-content').loadForm( requestPath, + null, function() { $button.removeClass('loading'); $button = null; diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index c36c6411c..1665c48e0 100755 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -51,7 +51,8 @@ body .ui-widget { .cms-content, .cms-content-header, .cms-content-tools, -.cms-content-form { +.cms-content-form, +.cms-edit-form { @include inline-block; } diff --git a/admin/templates/Includes/LeftAndMain_Content.ss b/admin/templates/Includes/LeftAndMain_Content.ss index c74f54b0a..40443e046 100755 --- a/admin/templates/Includes/LeftAndMain_Content.ss +++ b/admin/templates/Includes/LeftAndMain_Content.ss @@ -1,3 +1 @@ - -$EditForm - \ No newline at end of file +$EditForm \ No newline at end of file diff --git a/admin/templates/Includes/LeftAndMain_EditForm.ss b/admin/templates/Includes/LeftAndMain_EditForm.ss index 93c09d44d..16a96631a 100755 --- a/admin/templates/Includes/LeftAndMain_EditForm.ss +++ b/admin/templates/Includes/LeftAndMain_EditForm.ss @@ -1,34 +1,32 @@ - - - My Page Title - <% if Fields.hasTabset %> - <% with Fields.fieldByName('Root') %> - - - <% control Tabs %> - $Title - <% end_control %> - - <% end_with %> - - <% end_if %> +<% if IncludeFormTag %> + +<% end_if %> + + + + My Page Title + <% if Fields.hasTabset %> + <% with Fields.fieldByName('Root') %> + + + <% control Tabs %> + $Title + <% end_control %> + + <% end_with %> + + <% end_if %> - + + - - + - <% if IncludeFormTag %> - - <% end_if %> + - - - - <% if Message %> $Message <% else %> @@ -55,8 +53,6 @@ <% end_if %> - <% if IncludeFormTag %> - - <% end_if %> - - \ No newline at end of file +<% if IncludeFormTag %> + +<% end_if %> \ No newline at end of file diff --git a/admin/templates/Includes/ModelAdmin.ss b/admin/templates/Includes/ModelAdmin.ss deleted file mode 100755 index e69de29bb..000000000
tags. - * Falls back to the default RemoveText() option (Optional) - */ - removeForm: function(placeholderHtml) { - if(!placeholderHtml) placeholderHtml = this.getPlaceholderHtml(); - // Alert when unsaved changes are present - if(this._checkChangeTracker(true) == false) return; - this.trigger('removeform'); - this.html(placeholderHtml); - // TODO This should be using the plugin API - this.removeClass('changed'); - }, - /** * Function: cleanup * @@ -287,79 +161,9 @@ cleanup: function() { if((typeof tinymce != 'undefined') && tinymce.editors) { $(tinymce.editors).each(function() { - if(typeof(this.remove) == 'function') { - this.remove(); - } + if(typeof(this.remove) == 'function') this.remove(); }); } - }, - - /** - * 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
$Message