From c50e2fce6b009a563045139202d505e38bbedf8f Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sat, 21 Nov 2009 03:16:03 +0000 Subject: [PATCH] MINOR Moved form related javascript from CMSMain.js to new CMSMain.EditForm.js git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92729 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- code/CMSMain.php | 2 +- javascript/CMSMain.EditForm.js | 212 ++++++++++++++++++++++++++++++++ javascript/CMSMain.js | 217 --------------------------------- 3 files changed, 213 insertions(+), 218 deletions(-) create mode 100644 javascript/CMSMain.EditForm.js diff --git a/code/CMSMain.php b/code/CMSMain.php index 8946e535..eb1bb5f7 100755 --- a/code/CMSMain.php +++ b/code/CMSMain.php @@ -83,7 +83,7 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr Requirements::javascript(CMS_DIR . '/javascript/CMSMain.js'); Requirements::javascript(CMS_DIR . '/javascript/CMSMain.Tree.js'); - + Requirements::javascript(CMS_DIR . '/javascript/CMSMain.EditForm.js'); Requirements::javascript(CMS_DIR . '/javascript/CMSMain.BatchActions.js'); Requirements::javascript(CMS_DIR . '/javascript/CMSMain.Translatable.js'); diff --git a/javascript/CMSMain.EditForm.js b/javascript/CMSMain.EditForm.js new file mode 100644 index 00000000..cbd84eb5 --- /dev/null +++ b/javascript/CMSMain.EditForm.js @@ -0,0 +1,212 @@ +(function($) { + /** + * @class CMS-specific form behaviour + * @name ss.EditForm + */ + $('.CMSMain #Form_EditForm').concrete('ss', function($){ + return/** @lends ss.EditForm */{ + onmatch: function() { + // Alert the user on change of page-type - this might have implications + // on the available form fields etc. + this.find(':input[name=ClassName]').bind('change', + function() { + alert('The page type will be updated after the page is saved'); + } + ); + + this._super(); + } + }; + }); + + /** + * @class Input validation on the URLSegment field + * @name ss.EditForm.URLSegment + */ + $('#Form_EditForm input[name=URLSegment]').concrete('ss', function($){ + return/** @lends ss.EditForm.URLSegment */{ + + FilterRegex: /[^A-Za-z0-9-]+/, + + ValidationMessage: 'URLs can only be made up of letters, digits and hyphens.', + + MaxLength: 50, + + onmatch : function() { + var self = this; + + // intercept change event, do our own writing + this.bind('change', function(e) { + if(!self.validate()) { + jQuery.noticeAdd(self.ValidationMessage()); + } + self.val(self.suggestValue(e.target.value)); + return false; + }); + }, + + /** + * Return a value matching the criteria. + * + * @param {String} val + * @return val + */ + suggestValue: function(val) { + // TODO Do we want to enforce lowercasing in URLs? + return val.substr(0, this.MaxLength()).replace(this.FilterRegex(), '').toLowerCase(); + }, + + validate: function() { + return ( + this.val().length > this.MaxLength() + || this.val().match(this.FilterRegex()) + ); + } + }; + }); + + /** + * @class Input validation on the Title field + * @name ss.EditForm.Title + */ + $('#Form_EditForm input[name=Title]').concrete('ss', function($){ + return/** @lends ss.EditForm.Title */{ + + onmatch : function() { + var self = this; + + this.bind('change', function(e) { + self.updateURLSegment(jQuery('#Form_EditForm input[name=URLSegment]')); + // TODO We should really user-confirm these changes + self.parents('form').find('input[name=MetaTitle], input[name=MenuTitle]').val(self.val()); + }); + }, + + updateURLSegment: function(field) { + if(!field || !field.length) return; + + // TODO language/logic coupling + var isNew = this.val().indexOf("new") == 0; + var suggestion = field.concrete('ss').suggestValue(this.val()); + var confirmMessage = ss.i18n.sprintf( + ss.i18n._t( + 'UPDATEURL.CONFIRM', + 'Would you like me to change the URL to:\n\n' + + '%s/\n\nClick Ok to change the URL, ' + + 'click Cancel to leave it as:\n\n%s' + ), + suggestion, + field.val() + ); + + // don't ask for replacement if record is considered 'new' as defined by its title + if(isNew || (suggestion != field.val() && confirm(confirmMessage))) { + field.val(suggestion); + } + } + }; + }); + + /** + * @class ParentID field combination - mostly toggling between + * the two radiobuttons and setting the hidden "ParentID" field + * @name ss.EditForm.parentTypeSelector + */ + $('#Form_EditForm .parentTypeSelector').concrete('ss', function($){ + return/** @lends ss.EditForm.parentTypeSelector */{ + onmatch : function() { + var self = this; + + this.find(':input[name=ParentType]').bind('click', function(e) {self._toggleSelection(e);}); + + this._toggleSelection(); + }, + + _toggleSelection: function(e) { + var selected = this.find(':input[name=ParentType]:checked').val(); + // reset parent id if 'root' radiobutton is selected + if(selected == 'root') this.find(':input[name=ParentID]').val(0); + // toggle tree dropdown based on selection + this.find('#ParentID').toggle(selected != 'root'); + } + }; + }); + + /** + * @class Toggle display of group dropdown in "access" tab, + * based on selection of radiobuttons. + * @name ss.Form_EditForm.Access + */ + $('#Form_EditForm #CanViewType, #Form_EditForm #CanEditType').concrete('ss', function($){ + return/** @lends ss.Form_EditForm.Access */{ + onmatch: function() { + // TODO Decouple + var dropdown; + if(this.attr('id') == 'CanViewType') dropdown = $('#ViewerGroups'); + else if(this.attr('id') == 'CanEditType') dropdown = $('#EditorGroups'); + + this.find('.optionset :input').bind('change', function(e) { + dropdown.toggle(e.target.value == 'OnlyTheseUsers'); + }); + + // initial state + var currentVal = this.find('input[name=' + this.attr('id') + ']:checked').val(); + dropdown.toggle(currentVal == 'OnlyTheseUsers'); + } + }; + }); + + /** + * @class Email containing the link to the archived version of the page. + * Visible on readonly older versions of a specific page at the moment. + * @name ss.Form_EditForm_action_email + */ + $('#Form_EditForm .Actions #Form_EditForm_action_email').concrete('ss', function($){ + return/** @lends ss.Form_EditForm_action_email */{ + onclick: function(e) { + window.open( + 'mailto:?subject=' + + $('input[name=ArchiveEmailSubject]', this[0].form).val() + + '&body=' + + $(':input[name=ArchiveEmailMessage]', this[0].form).val(), + 'archiveemail' + ); + + return false; + } + }; + }); + + /** + * @class Open a printable representation of the form in a new window. + * Used for readonly older versions of a specific page. + * @name ss.Form_EditForm_action_print + */ + $('#Form_EditForm .Actions #Form_EditForm_action_print').concrete('ss', function($){ + return/** @lends ss.Form_EditForm_action_print */{ + onclick: function(e) { + var printURL = $(this[0].form).attr('action').replace(/\?.*$/,'') + + '/printable/' + + $(':input[name=ID]',this[0].form).val(); + if(printURL.substr(0,7) != 'http://') printURL = $('base').attr('href') + printURL; + + window.open(printURL, 'printable'); + + return false; + } + }; + }); + + /** + * @class A "rollback" to a specific version needs user confirmation. + * @name ss.Form_EditForm_action_rollback + */ + $('#Form_EditForm .Actions #Form_EditForm_action_rollback').concrete('ss', function($){ + return/** @lends ss.Form_EditForm_action_rollback */{ + onclick: function(e) { + // @todo i18n + return confirm("Do you really want to copy the published content to the stage site?"); + } + }; + }); +}(jQuery)); \ No newline at end of file diff --git a/javascript/CMSMain.js b/javascript/CMSMain.js index 769d7b3f..0b8a5722 100644 --- a/javascript/CMSMain.js +++ b/javascript/CMSMain.js @@ -1,222 +1,5 @@ -/** - * @type jquery.layout Global variable so layout state management - * can pick it up. - */ -var ss_MainLayout; - (function($) { - /** - * @class CMS-specific form behaviour - * @name ss.EditForm - */ - $('.CMSMain #Form_EditForm').concrete('ss', function($){ - return/** @lends ss.EditForm */{ - onmatch: function() { - // Alert the user on change of page-type - this might have implications - // on the available form fields etc. - this.find(':input[name=ClassName]').bind('change', - function() { - alert('The page type will be updated after the page is saved'); - } - ); - - this._super(); - } - }; - }); - - /** - * @class Input validation on the URLSegment field - * @name ss.EditForm.URLSegment - */ - $('#Form_EditForm input[name=URLSegment]').concrete('ss', function($){ - return/** @lends ss.EditForm.URLSegment */{ - - FilterRegex: /[^A-Za-z0-9-]+/, - - ValidationMessage: 'URLs can only be made up of letters, digits and hyphens.', - - MaxLength: 50, - - onmatch : function() { - var self = this; - - // intercept change event, do our own writing - this.bind('change', function(e) { - if(!self.validate()) { - jQuery.noticeAdd(self.ValidationMessage()); - } - self.val(self.suggestValue(e.target.value)); - return false; - }); - }, - - /** - * Return a value matching the criteria. - * - * @param {String} val - * @return val - */ - suggestValue: function(val) { - // TODO Do we want to enforce lowercasing in URLs? - return val.substr(0, this.MaxLength()).replace(this.FilterRegex(), '').toLowerCase(); - }, - - validate: function() { - return ( - this.val().length > this.MaxLength() - || this.val().match(this.FilterRegex()) - ); - } - }; - }); - - /** - * @class Input validation on the Title field - * @name ss.EditForm.Title - */ - $('#Form_EditForm input[name=Title]').concrete('ss', function($){ - return/** @lends ss.EditForm.Title */{ - - onmatch : function() { - var self = this; - - this.bind('change', function(e) { - self.updateURLSegment(jQuery('#Form_EditForm input[name=URLSegment]')); - // TODO We should really user-confirm these changes - self.parents('form').find('input[name=MetaTitle], input[name=MenuTitle]').val(self.val()); - }); - }, - - updateURLSegment: function(field) { - if(!field || !field.length) return; - - // TODO language/logic coupling - var isNew = this.val().indexOf("new") == 0; - var suggestion = field.concrete('ss').suggestValue(this.val()); - var confirmMessage = ss.i18n.sprintf( - ss.i18n._t( - 'UPDATEURL.CONFIRM', - 'Would you like me to change the URL to:\n\n' - + '%s/\n\nClick Ok to change the URL, ' - + 'click Cancel to leave it as:\n\n%s' - ), - suggestion, - field.val() - ); - - // don't ask for replacement if record is considered 'new' as defined by its title - if(isNew || (suggestion != field.val() && confirm(confirmMessage))) { - field.val(suggestion); - } - } - }; - }); - - /** - * @class ParentID field combination - mostly toggling between - * the two radiobuttons and setting the hidden "ParentID" field - * @name ss.EditForm.parentTypeSelector - */ - $('#Form_EditForm .parentTypeSelector').concrete('ss', function($){ - return/** @lends ss.EditForm.parentTypeSelector */{ - onmatch : function() { - var self = this; - - this.find(':input[name=ParentType]').bind('click', function(e) {self._toggleSelection(e);}); - - this._toggleSelection(); - }, - - _toggleSelection: function(e) { - var selected = this.find(':input[name=ParentType]:checked').val(); - // reset parent id if 'root' radiobutton is selected - if(selected == 'root') this.find(':input[name=ParentID]').val(0); - // toggle tree dropdown based on selection - this.find('#ParentID').toggle(selected != 'root'); - } - }; - }); - - /** - * @class Toggle display of group dropdown in "access" tab, - * based on selection of radiobuttons. - * @name ss.Form_EditForm.Access - */ - $('#Form_EditForm #CanViewType, #Form_EditForm #CanEditType').concrete('ss', function($){ - return/** @lends ss.Form_EditForm.Access */{ - onmatch: function() { - // TODO Decouple - var dropdown; - if(this.attr('id') == 'CanViewType') dropdown = $('#ViewerGroups'); - else if(this.attr('id') == 'CanEditType') dropdown = $('#EditorGroups'); - - this.find('.optionset :input').bind('change', function(e) { - dropdown.toggle(e.target.value == 'OnlyTheseUsers'); - }); - - // initial state - var currentVal = this.find('input[name=' + this.attr('id') + ']:checked').val(); - dropdown.toggle(currentVal == 'OnlyTheseUsers'); - } - }; - }); - - /** - * @class Email containing the link to the archived version of the page. - * Visible on readonly older versions of a specific page at the moment. - * @name ss.Form_EditForm_action_email - */ - $('#Form_EditForm .Actions #Form_EditForm_action_email').concrete('ss', function($){ - return/** @lends ss.Form_EditForm_action_email */{ - onclick: function(e) { - window.open( - 'mailto:?subject=' - + $('input[name=ArchiveEmailSubject]', this[0].form).val() - + '&body=' - + $(':input[name=ArchiveEmailMessage]', this[0].form).val(), - 'archiveemail' - ); - - return false; - } - }; - }); - - /** - * @class Open a printable representation of the form in a new window. - * Used for readonly older versions of a specific page. - * @name ss.Form_EditForm_action_print - */ - $('#Form_EditForm .Actions #Form_EditForm_action_print').concrete('ss', function($){ - return/** @lends ss.Form_EditForm_action_print */{ - onclick: function(e) { - var printURL = $(this[0].form).attr('action').replace(/\?.*$/,'') - + '/printable/' - + $(':input[name=ID]',this[0].form).val(); - if(printURL.substr(0,7) != 'http://') printURL = $('base').attr('href') + printURL; - - window.open(printURL, 'printable'); - - return false; - } - }; - }); - - /** - * @class A "rollback" to a specific version needs user confirmation. - * @name ss.Form_EditForm_action_rollback - */ - $('#Form_EditForm .Actions #Form_EditForm_action_rollback').concrete('ss', function($){ - return/** @lends ss.Form_EditForm_action_rollback */{ - onclick: function(e) { - // @todo i18n - return confirm("Do you really want to copy the published content to the stage site?"); - } - }; - }); - /** * @class All forms in the right content panel should have closeable jQuery UI style titles. * @name ss.contentPanel.form