From b7b59bd91686770c3a1d6d78e930cc8f9f0b4aaf Mon Sep 17 00:00:00 2001 From: Sam Minnee Date: Thu, 11 Sep 2008 23:18:21 +0000 Subject: [PATCH] Reorganised ModelAdmin javascript to be better structured git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@62278 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- javascript/ModelAdmin.js | 277 +++++++++++++++++++++------------------ 1 file changed, 153 insertions(+), 124 deletions(-) diff --git a/javascript/ModelAdmin.js b/javascript/ModelAdmin.js index 740e24df..46a54ad6 100644 --- a/javascript/ModelAdmin.js +++ b/javascript/ModelAdmin.js @@ -9,126 +9,20 @@ * @todo alias the $ function instead of literal jQuery */ jQuery(document).ready(function() { + /** + * Attach tabs plugin to the set of search filter and edit forms + */ + jQuery('ul.tabstrip').tabs(); + + ////////////////////////////////////////////////////////////////// + // Search form + ////////////////////////////////////////////////////////////////// + /** * Stores a jQuery reference to the last submitted search form. */ __lastSearch = null; - /** - * GET a fragment of HTML to display in the right panel - */ - function showRecord(uri) { - jQuery.get(uri, function(result){ - jQuery('#right #ModelAdminPanel').html(result); - jQuery('#SearchForm_holder').tabs(); - - Behaviour.apply(); // refreshes ComplexTableField - jQuery('#right ul.tabstrip').tabs(); - }); - } - - jQuery('#Form_EditForm_action_goBack').livequery('click', function() { - if(__lastSearch) __lastSearch.trigger('submit'); - return false; - }); - - /** - * POST a hash of form submitted data to the given endpoint - */ - function saveRecord(uri, data) { - jQuery.post(uri, data, function(result){ - jQuery('#right #ModelAdminPanel').html(result); - - statusMessage("Saved"); - - // TODO/SAM: It seems a bit of a hack to have to list all the little updaters here. - // Is livequery a solution? - Behaviour.apply(); // refreshes ComplexTableField - jQuery('#right ul.tabstrip').tabs(); - }); - } - - /** - * POST a hash of form submitted data to the given endpoint - */ - function deleteRecord(uri, data) { - jQuery.post(uri, data, function(result){ - jQuery('#right #ModelAdminPanel').html(result); - - statusMessage("Deleted"); - - // TODO/SAM: It seems a bit of a hack to have to list all the little updaters here. - // Is livequery a solution? - Behaviour.apply(); // refreshes ComplexTableField - jQuery('#right ul.tabstrip').tabs(); - }); - } - - /** - * Returns a flattened array of data from each field - * of the given form - */ - function formData(scope) { - var data = {}; - jQuery('*[name]', scope).each(function(){ - var t = jQuery(this); - if(t.attr('type') != 'checkbox' || t.attr('checked') == true) { - data[t.attr('name')] = t.val(); - } - }); - return data; - } - - /** - * Find the selected data object and load its create form - */ - jQuery('#Form_ManagedModelsSelect').submit(function(){ - className = jQuery('select option:selected', this).val(); - requestPath = jQuery(this).attr('action').replace('ManagedModelsSelect', className + '/add'); - showRecord(requestPath); - return false; - }); - - /** - * attach generic action handler to all forms displayed in the #right panel - */ - jQuery('#right #form_actions_right input[name=action_doSave]').livequery('click', function(){ - var form = jQuery('#right form'); - var formAction = form.attr('action') + '?' + jQuery(this).fieldSerialize(); - saveRecord(formAction, formData(form)); - return false; - }); - - /** - * attach generic action handler to all forms displayed in the #right panel - */ - jQuery('#right #form_actions_right input[name=action_doDelete]').livequery('click', function(){ - var confirmed = confirm("Do you really want to delete?"); - if(!confirmed) return false; - - var form = jQuery('#right form'); - var formAction = form.attr('action') + '?' + jQuery(this).fieldSerialize(); - deleteRecord(formAction, formData(form)); - return false; - }); - - jQuery('#right #Form_ResultsForm tbody td a').livequery('click', function(){ - var el = jQuery(this); - showRecord(el.attr('href')); - //el.parent().parent().find('td').removeClass('active'); - //el.addClass('active').siblings().addClass('active'); - return false; - }).hover(function(){ - jQuery(this).addClass('over').siblings().addClass('over') - }, function(){ - jQuery(this).removeClass('over').siblings().removeClass('over') - }); - - /** - * Attach tabs plugin to the set of search filter and edit forms - */ - jQuery('ul.tabstrip').tabs(); - /** * Submits a search filter query and attaches event handlers * to the response table @@ -148,21 +42,18 @@ jQuery(document).ready(function() { return false; }); - + /** - * Toggle import specifications + * Clear search button */ - jQuery('#Form_ImportForm_holder .spec .details').hide(); - jQuery('#Form_ImportForm_holder .spec a.detailsLink').click(function() { - jQuery('#' + jQuery(this).attr('href').replace(/.*#/,'')).toggle(); - return false; - }); - jQuery('#SearchForm_holder button[name=action_clearsearch]').click(function(e) { jQuery(this.form).clearForm(); return false; }); - + + /** + * Column selection in search form + */ jQuery('a.form_frontend_function.toggle_result_assembly').click(function(){ var toggleElement = jQuery(this).next(); toggleElement.toggle(); @@ -180,7 +71,145 @@ jQuery(document).ready(function() { resultAssembly.removeAttr('checked'); return false; }); + + ////////////////////////////////////////////////////////////////// + // Results list + ////////////////////////////////////////////////////////////////// + /** + * Table record handler for search result record + */ + jQuery('#right #Form_ResultsForm tbody td a') + .livequery('click', function(){ + var el = jQuery(this); + showRecord(el.attr('href')); + return false; + }) + .hover( + function(){ + jQuery(this).addClass('over').siblings().addClass('over') + }, + function(){ + jQuery(this).removeClass('over').siblings().removeClass('over') + } + ); + + ////////////////////////////////////////////////////////////////// + // RHS detail form + ////////////////////////////////////////////////////////////////// + + /** + * RHS panel Back button + */ + jQuery('#Form_EditForm_action_goBack').livequery('click', function() { + if(__lastSearch) __lastSearch.trigger('submit'); + return false; + }); + + /** + * RHS panel Save button + */ + jQuery('#right #form_actions_right input[name=action_doSave]').livequery('click', function(){ + var form = jQuery('#right form'); + var formAction = form.attr('action') + '?' + jQuery(this).fieldSerialize(); + + // Post the data to save + jQuery.post(formAction, formData(form), function(result){ + jQuery('#right #ModelAdminPanel').html(result); + + statusMessage("Saved"); + + // TODO/SAM: It seems a bit of a hack to have to list all the little updaters here. + // Is livequery a solution? + Behaviour.apply(); // refreshes ComplexTableField + jQuery('#right ul.tabstrip').tabs(); + }); + + return false; + }); + + /** + * RHS panel Delete button + */ + jQuery('#right #form_actions_right input[name=action_doDelete]').livequery('click', function(){ + var confirmed = confirm("Do you really want to delete?"); + if(!confirmed) return false; + + var form = jQuery('#right form'); + var formAction = form.attr('action') + '?' + jQuery(this).fieldSerialize(); + + // The POST actually handles the delete + jQuery.post(formAction, formData(form), function(result){ + // On success, the panel is refreshed and a status message shown. + jQuery('#right #ModelAdminPanel').html(result); + + statusMessage("Deleted"); + + // TODO/SAM: It seems a bit of a hack to have to list all the little updaters here. + // Is livequery a solution? + Behaviour.apply(); // refreshes ComplexTableField + jQuery('#right ul.tabstrip').tabs(); + }); + + return false; + }); + + + ////////////////////////////////////////////////////////////////// + // Import/Add form + ////////////////////////////////////////////////////////////////// + + /** + * Add object button + */ + jQuery('#Form_ManagedModelsSelect').submit(function(){ + className = jQuery('select option:selected', this).val(); + requestPath = jQuery(this).attr('action').replace('ManagedModelsSelect', className + '/add'); + showRecord(requestPath); + return false; + }); + + /** + * Toggle import specifications + */ + jQuery('#Form_ImportForm_holder .spec .details').hide(); + jQuery('#Form_ImportForm_holder .spec a.detailsLink').click(function() { + jQuery('#' + jQuery(this).attr('href').replace(/.*#/,'')).toggle(); + return false; + }); + + ////////////////////////////////////////////////////////////////// + // Helper functions + ////////////////////////////////////////////////////////////////// + + /** + * GET a fragment of HTML to display in the right panel + * @todo Should this be turned into a method on the #Form_EditForm using effen or something? + */ + function showRecord(uri) { + jQuery.get(uri, function(result){ + jQuery('#right #ModelAdminPanel').html(result); + jQuery('#SearchForm_holder').tabs(); + + Behaviour.apply(); // refreshes ComplexTableField + jQuery('#right ul.tabstrip').tabs(); + }); + } + + /** + * Returns a flattened array of data from each field of the given form. + * @todo Surely jQuery has a built-in version of this? + */ + function formData(scope) { + var data = {}; + jQuery('*[name]', scope).each(function(){ + var t = jQuery(this); + if(t.attr('type') != 'checkbox' || t.attr('checked') == true) { + data[t.attr('name')] = t.val(); + } + }); + return data; + } }); /**