From 1863bb00db764ef4a1695273816a8110c8f64ab9 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Thu, 10 May 2012 14:18:22 +0200 Subject: [PATCH] ENHANCEMENT Refactored SiteTreeURLSegmentField JS to a more selector based approach (future proof field for reusability e.g. in ModelAdmin with custom DataObject URL previews) --- code/controllers/CMSMain.php | 3 +- code/forms/SiteTreeURLSegmentField.php | 7 +- code/model/SiteTree.php | 11 +- css/screen.css | 12 +- javascript/CMSMain.EditForm.js | 223 +-------------------- javascript/SiteTreeURLSegmentField.js | 208 +++++++++++++++++++ lang/en.yml | 2 +- scss/_CMSMain.scss | 31 ++- templates/forms/SiteTreeURLSegmentField.ss | 2 +- 9 files changed, 247 insertions(+), 252 deletions(-) create mode 100644 javascript/SiteTreeURLSegmentField.js diff --git a/code/controllers/CMSMain.php b/code/controllers/CMSMain.php index a79d71aa..312db801 100644 --- a/code/controllers/CMSMain.php +++ b/code/controllers/CMSMain.php @@ -67,7 +67,8 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr CMS_DIR . '/javascript/CMSMain.AddForm.js', CMS_DIR . '/javascript/CMSPageHistoryController.js', CMS_DIR . '/javascript/CMSMain.Tree.js', - CMS_DIR . '/javascript/SilverStripeNavigator.js' + CMS_DIR . '/javascript/SilverStripeNavigator.js', + CMS_DIR . '/javascript/SiteTreeURLSegmentField.js' ), Requirements::add_i18n_javascript(CMS_DIR . '/javascript/lang', true, true) ) diff --git a/code/forms/SiteTreeURLSegmentField.php b/code/forms/SiteTreeURLSegmentField.php index 6fcac58c..40283f9d 100644 --- a/code/forms/SiteTreeURLSegmentField.php +++ b/code/forms/SiteTreeURLSegmentField.php @@ -20,6 +20,11 @@ class SiteTreeURLSegmentField extends TextField { static $allowed_actions = array( 'suggest' ); + + function Field($properties = array()) { + Requirements::javascript(CMS_DIR . '/javascript/SiteTreeURLSegmentField.js'); + return parent::Field($properties); + } function suggest($request) { if(!$request->getVar('value')) return $this->httpError(405); @@ -76,7 +81,7 @@ class SiteTreeURLSegmentField extends TextField { function Type() { - return 'text sitetreeurlsegment'; + return 'text urlsegment'; } } diff --git a/code/model/SiteTree.php b/code/model/SiteTree.php index 3c6eac83..6de3debb 100644 --- a/code/model/SiteTree.php +++ b/code/model/SiteTree.php @@ -168,6 +168,10 @@ class SiteTree extends DataObject implements PermissionProvider,i18nEntityProvid 'Title', 'Content', ); + + static $field_labels = array( + 'URLSegment' => 'URL' + ); /** * @see SiteTree::nested_urls() @@ -1829,7 +1833,12 @@ class SiteTree extends DataObject implements PermissionProvider,i18nEntityProvid $url = (strlen($baseLink) > 36) ? "..." .substr($baseLink, -32) : $baseLink; $urlsegment = new SiteTreeURLSegmentField("URLSegment", $this->fieldLabel('URLSegment')); $urlsegment->setURLPrefix($url); - $urlsegment->setHelpText(self::nested_urls() && count($this->Children()) ? $this->fieldLabel('LinkChangeNote'): false); + $helpText = (self::nested_urls() && count($this->Children())) ? $this->fieldLabel('LinkChangeNote') : ''; + if(!URLSegmentFilter::$default_allow_multibyte) { + $helpText .= $helpText ? '
' : ''; + $helpText .= _t('SiteTreeURLSegmentField.HelpChars', ' Special characters are automatically converted or removed.'); + } + $urlsegment->setHelpText($helpText); $fields = new FieldList( $rootTab = new TabSet("Root", diff --git a/css/screen.css b/css/screen.css index ea953bc6..110222d5 100644 --- a/css/screen.css +++ b/css/screen.css @@ -21,14 +21,10 @@ .cms-content-tools #cms-content-treeview .cms-tree .badge, .cms-content-tools #cms-content-treeview .cms-tree a > .jstree-icon { display: none; } /** ------------------------------------------------------------------ URLSegment field ----------------------------------------------------------------- */ -.URLPrefix, .URLSegmentHolder { padding-top: 8px; display: inline-block; } - -.URLPrefix { color: #777; } - -#Form_EditForm_URLSegment { margin-left: 7px; } -#Form_EditForm_URLSegment.disabled { color: #444; padding-left: 0px; margin-left: 0px; background: none; border-color: transparent; } - -#Form_EditForm_URLSegment_Cancel, #Form_EditForm_URLSegment_Update, #Form_EditForm_URLSegment_Edit { margin-left: 7px; } +.field.urlsegment.disabled { color: #444; padding-left: 0px; margin-left: 0px; background: none; border-color: transparent; } +.field.urlsegment .prefix, .field.urlsegment .preview { padding-top: 8px; display: inline-block; } +.field.urlsegment .prefix { color: #777; } +.field.urlsegment .cancel, .field.urlsegment .update, .field.urlsegment .edit { margin-left: 7px; } .cms .AssetAdmin .cms-content-fields { overflow: hidden; } .cms .AssetAdmin .cms-content-fields .cms-edit-form.AssetAdmin { overflow-y: auto; } diff --git a/javascript/CMSMain.EditForm.js b/javascript/CMSMain.EditForm.js index f7728291..d2594962 100644 --- a/javascript/CMSMain.EditForm.js +++ b/javascript/CMSMain.EditForm.js @@ -15,227 +15,6 @@ } }); - /** - * Class: .cms-edit-form input[name=URLSegment] - * - * Input validation on the URLSegment field - */ - $('.cms-edit-form input[name=URLSegment]').entwine({ - - /** - * Constructor: onmatch - */ - onmatch : function() { - var self = this; - - // add elements and actions for editing - self._addActions(); - // toggle - self.edit(); - // set width of input field - self._autoInputWidth(); - - this._super(); - }, - - /** - * Function: edit - * - * Toggles the edit state of the field - * - * Return URLSegemnt val() - * - * Parameters: - * (Bool) external (optional) - */ - edit: function(external) { - - var self = this, - holder = $('#URLSegmentHolder'), - edit = $('#Form_EditForm_URLSegment_Edit'), - update = $('#Form_EditForm_URLSegment_Update'), - cancel = $('#Form_EditForm_URLSegment_Cancel'); - - // transfer current value to holder - holder.text(self.val()); - - // toggle elements - if (self.is(':visible')) { - update.hide(); - cancel.hide(); - self.hide(); - holder.show(); - edit.show(); - } else { - edit.hide(); - holder.hide(); - self.show(); - update.show(); - cancel.show(); - } - - // field updated from another fields value - // reset to original state - if (external) { - self.edit(); - } - - return self.val(); - }, - - /** - * Function: update - * - * Commits the change of the URLSegment to the field - * Optional: pass in another element to use its value - * to update the URLSegment (ex. from Title) - * - * Parameters: - * (jQuery Wrapped DOM element) field (optional) - */ - update: function(field) { - - var self = this, - holder = $('#URLSegmentHolder'), - currentVal = holder.text(), - updateVal, - external = null; - - if (field && field.val() != "") { - updateVal = field.val(); - external = true; - } else { - updateVal = self.val(); - } - - if (currentVal != updateVal) { - - self.suggest(updateVal, function(data) { - var newVal = decodeURIComponent(data.value); - self.val(newVal); - self.edit(external); - }); - - } else { - - self.edit(); - } - }, - - /** - * Function: cancel - * - * Cancels any changes to the field - * - * Return URLSegemnt val() - * - */ - cancel: function() { - - var self = this, - holder = $('#URLSegmentHolder'); - self.val(holder.text()); - self.edit(); - - return self.val(); - }, - - /** - * Function: suggest - * - * Return a value matching the criteria. - * - * Parameters: - * (String) val - * (Function) callback - */ - suggest: function(val, callback) { - - $.get( - this.parents('form:first').attr('action') + - '/field/URLSegment/suggest/?value=' + encodeURIComponent(val), - function(data) { - callback.apply(this, arguments); - } - ); - - }, - - /** - * Function: _addActions - * - * Utility to add edit buttons and actions - * - */ - _addActions: function() { - - var self = this, - holder, - editAction, - updateAction, - cancelAction; - - // element to display non-editable text - holder = $('', { - 'id': 'URLSegmentHolder' - }); - - // edit button - editAction = $('