BUGFIX Updating tree state (after adding/renaming nodes, changing par…

…ent). Deselecting nodes when switching to edit view (fixes #7389, #7336, #7309)
silverstripe · Jun 3, 2012 · c18c29f · c18c29f
1 parent 9898cd9
commit c18c29f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 34 deletions.
diff --git a/admin/javascript/LeftAndMain.Content.js b/admin/javascript/LeftAndMain.Content.js
@@ -226,6 +226,9 @@
 
 					var url = $(node).find('a:first').attr('href');
 					if(url && url != '#') {
+						// Deselect all nodes (will be reselected after load according to form state)
+						self.jstree('deselect_all');
+						self.jstree('uncheck_all');
 
 						// Ensure URL is absolute (important for IE)
 						if($.path.isExternal($(node).find('a:first'))) url = url = $.path.makeUrlAbsolute(url, $('base').attr('href'));

diff --git a/admin/javascript/LeftAndMain.Tree.js b/admin/javascript/LeftAndMain.Tree.js
@@ -44,6 +44,7 @@
 					this
 						.jstree(this.getTreeConfig())
 						.bind('loaded.jstree', function(e, data) {
+							self.updateFromEditForm();
 							self.css('visibility', 'visible');
 							// Add ajax settings after init period to avoid unnecessary initial ajax load
 							// of existing tree in DOM - see load_node_html()
@@ -96,11 +97,16 @@
 							});
 						});
 
-					this.parents('.cms-container').bind('afterstatechange', function(e, data) {
+					$('.cms-container').bind('afterstatechange.tree', function(e, data) {
-						self._onLoadNewPage(e, data);
+						self.updateFromEditForm(e.origData);
+					});
+					$('.cms-content').bind('reloadeditform.tree', function(e, data) {
+						self.updateFromEditForm(e.origData);
 					});
 			},
 			onunmatch: function() {
+				$('.cms-container').unbind('afterstatechange.tree');
+				$('.cms-content').unbind('reloadeditform.tree');
 				this._super();
 			},
 
@@ -204,48 +210,43 @@
 			 * Assumes to be triggered by a form element with the following input fields:
 			 * ID, ParentID, TreeTitle (or Title), ClassName
 			 */
-			_onLoadNewPage: function(e, eventData) {
+			updateFromEditForm: function(origData) {
-				var self = this;
+				var self = this, 
-
+					form = $('.cms-edit-form').get(0),
-				// finds a certain value in an array generated by jQuery.serializeArray()
+					id = form ? $(form.ID).val() : null;
-				var findInSerializedArray = function(arr, name) {
-					for(var i=0; i<arr.length; i++) {
-						if(arr[i].name == name) return arr[i].value;
-					};
-					return false;
-				};
-
-				var handledform = $(e.target).is('.cms-edit-form') ? $(e.target)[0] : $(e.target).find('.cms-edit-form')[0];
-				var id = handledform ? $(handledform.ID).val() : null;
 
 				// check if a form with a valid ID exists
 				if(id) {
-					var parentID = $(handledform.ParentID).val(), 
+					var parentID = $(form.ParentID).val(), 
 						parentNode = this.find('li[data-id='+parentID+']');
 						node = this.find('li[data-id='+id+']'),
-						title = $((handledform.TreeTitle) ? handledform.TreeTitle : handledform.Title).val(),
+						title = $((form.TreeTitle) ? form.TreeTitle : form.Title).val(),
-						className = $(handledform.ClassName).val();
+						className = $(form.ClassName).val();
 
 					// set title (either from TreeTitle or from Title fields)
 					// Treetitle has special HTML formatting to denote the status changes.
 					if(title) this.jstree('rename_node', node, title);
 
-					// TODO Fix node icon setting
-					// // update icon (only if it has changed)
-					// if(className) this.setNodeIcon(id, className);
-
 					// check if node exists, might have been created instead
 					if(!node.length) {
 						this.jstree(
 							'create_node', 
 							parentNode, 
 							'inside', 
-							{data: '', attr: {'class': className, 'data-id': id}},
+							{
+								data: '', 
+								attr: {
+									'data-class': className, 
+									'class': 'class-' + className, 
+									'data-id': id
+								}
+							},
 							function() {
 								var newNode = self.find('li[data-id='+id+']');
-								// TODO Fix hardcoded link
 								// TODO Fix replacement of jstree-icon inside <a> tag
-								newNode.find('a:first').html(title).attr('href', 'admin/show/'+id);
+								newNode.find('a:first').html(title).attr('href', ss.i18n.sprintf(
+									self.data('urlEditpage'), id
+								));
 								self.jstree('deselect_node', parentNode);
 								self.jstree('select_node', newNode);
 							}
@@ -254,17 +255,20 @@
 						this.jstree('select_node', node);
 					}
 
-					// TODO Fix node parent setting
+					// set correct parent (only if it has changed)
-					// // set correct parent (only if it has changed)
+					if(parentID && parentID != node.parents('li:first').data('id')) {
-					// if(parentID) this.setNodeParentID(id, jQuery(e.target.ParentID).val());
+						this.jstree('move_node', node, parentNode.length ? parentNode : -1, 'last');
+					}
 
-					// TODO Fix doubleup when replacing page form with root form, reloads the old form over the root
+					this.jstree('select_node', node);
-					// set current tree element regardless of wether the item was new
-					// this.jstree('select_node', node);
 				} else {
-					if(typeof eventData.origData != 'undefined') {
+					// If no ID exists in a form view, we're displaying the tree on its own,
-						var node = this.find('li[data-id='+eventData.origData.ID+']');
+					// hence to page should show as active
-						if(node && node.data('id') != 0) this.jstree('delete_node', node);
+					this.jstree('deselect_all');
+
+					if(typeof origData != 'undefined') {
+						var node = this.find('li[data-id='+origData.ID+']');
+						if(node && node.data('id') !== 0) this.jstree('delete_node', node);
 					}
 				}