ENHANCEMENT Update URLSegment from Title (closes #6981)

css/screen.css

@@ -26,6 +26,8 @@
 .field.urlsegment .prefix { color: #777; }
 .field.urlsegment .cancel, .field.urlsegment .update, .field.urlsegment .edit { margin-left: 7px; }
 
+#Form_EditForm #Title .update { margin-left: 7px; }
+
 .cms .AssetAdmin .cms-content-fields { overflow: hidden; }
 .cms .AssetAdmin .cms-content-fields .cms-edit-form.AssetAdmin { overflow-y: auto; }
 .cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content { overflow: hidden; }

javascript/CMSMain.EditForm.js

@@ -25,31 +25,92 @@
 			onmatch : function() {
 				var self = this;
 				
-				var URLSegment = $('.cms-edit-form input[name=URLSegment]');
+				var form = self.parents('form');
-				var LiveURLSegment = $('.cms-edit-form input[name=LiveURLSegment]');
+				var url_segment = $('.field.urlsegment', form).find(':text');
+				var live_url_segment = $('input[name=LiveURLSegment]', form);
+				
+				self._addActions();
 		
 				this.bind('change', function(e) {
+					var title = self.val();
 					// Criteria for defining a "new" page
-					if ( (URLSegment.val().indexOf("new") == 0) && LiveURLSegment.val() == "" ) {
+					if ( (url_segment.val().indexOf("new") == 0) && live_url_segment.val() == "" ) {
-						self.updatePageTitleHeading();
+						self.updateRelatedFields(title);
-						self.parents('form').find('input[name=MetaTitle], input[name=MenuTitle]').val(self.val());
+						self.updateURLSegment(title);
-						// update the URLSegment
-						URLSegment.closest('.field.urlsegment').update(self);
 					} else {
-						return;
+						$('.update', self.parent()).show();
 					}
+					self.updatePanelLabels(title);
 				});
 				
 				this._super();
 			},
 			
 			/**
-			 * Function: updatePageTitleHeading
+			 * Function: updateRelatedFields
 			 * 
-			 * Update the page title heading when page title changes
+			 * Update the related fields
+			 * (String) title
 			 */
-			updatePageTitleHeading: function() {
+			updateRelatedFields: function(title) {
-				$('#page-title-heading').text(this.val());
+				var form = this.parents('form');
+				form.find('input[name=MetaTitle], input[name=MenuTitle]').val(title);
+			},
+			
+			/**
+			 * Function: updateURLSegment
+			 * 
+			 * Update the URLSegment
+			 * (String) title
+			 */
+			updateURLSegment: function(title) {
+				var url_segment_field = $('.field.urlsegment', this.parents('form'));
+				var updateURLFromTitle = $('.update', this.parent());
+				url_segment_field.update(title);
+				if (updateURLFromTitle.is(':visible')) {
+					updateURLFromTitle.hide();
+				}
+			},
+			
+			/**
+			 * Function: updatePanelLabels
+			 * 
+			 * Update the breadcrumb and tree
+			 * (String) title
+			 */
+			updatePanelLabels: function(title) {
+				var pageID = $('.cms-edit-form input[name=ID]').val();
+				var panelCrumb = $('span.cms-panel-link.crumb');
+				var treeItem = $('.item', $('.cms-tree').find("[data-id='" + pageID + "']"));
+				if (title && title != "") {
+					panelCrumb.text(title);
+					treeItem.text(title);
+				}
+			},
+			
+			/**
+			 * Function: _addActions
+			 *  
+			 * Utility to add update from title action
+			 * 
+			 */
+			_addActions: function() {
+				var self = this;
+				var	updateURLFromTitle;
+				
+				// update button
+				updateURLFromTitle = $('<button />', {
+					'class': 'update ss-ui-button-small',
+					'text': 'Update URL',
+					'click': function(e) {
+						e.preventDefault();
+						self.updateURLSegment(self.val());
+					}
+				});
+				
+				// insert elements
+				updateURLFromTitle.insertAfter(self);
+				updateURLFromTitle.hide();
 			}
 		});
 	

javascript/SiteTreeURLSegmentField.js

@@ -26,9 +26,9 @@
 			 * Return URLSegemnt val()
 			 * 
 			 * Parameters:
-			 *  (DOMElement) other (optional)
+			 *  (Bool) auto (optional, triggers a second toggle)
 			 */
-			edit: function(other) {
+			edit: function(auto) {
 				
 				var field = this.find(':text'),
 					holder = this.find('.preview'),
@@ -59,7 +59,7 @@
 				
 				// field updated from another fields value
 				// reset to original state
-				if (other) this.edit();
+				if (auto) this.edit();
 				
 				return field.val();
 			},
@@ -68,8 +68,8 @@
 			 * Function: update
 			 *  
 			 * Commits the change of the URLSegment to the field
-			 * Optional: pass in another element to use its value
+			 * Optional: pass in (String)
-			 * to update the URLSegment (ex. from Title)
+			 * to update the URLSegment
 			 */
 			update: function() {
 				
@@ -78,10 +78,10 @@
 					holder = this.find('.preview'),
 					currentVal = holder.text(),
 					updateVal,
-					other = arguments[0];
+					title = arguments[0];
 				
-				if (other && other.val() !== "") {
+				if (title && title !== "") {
-					updateVal = other.val();
+					updateVal = title;
 				} else {
 					updateVal = field.val();
 				}
@@ -90,7 +90,7 @@
 					self.suggest(updateVal, function(data) {
 						var newVal = decodeURIComponent(data.value);
 						field.val(newVal);
-						self.edit(other);
+						self.edit(title);
 					});
 				} else {
 					self.edit();

scss/_CMSMain.scss

@@ -113,4 +113,8 @@
 	.cancel, .update, .edit {
 		margin-left: 7px;
 	}
+}
+
+#Form_EditForm #Title .update {
+	margin-left: 7px;
 }