API CHANGE Replaced addpageclass javascript functionality with concrete implementation in CMSMain_left.js

MINOR Renaming load() to loadForm() in LeftAndMain.EditForm.js, to avoid overloading jQuery's native methods
MINOR Triggering jQuery events on top of prototype's Observable for better handling with concrete, in SecurityAdmin.js

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92719 467b73ca-7a2a-4603-9d3b-597d59a354a9

javascript/AssetAdmin.js

@@ -10,7 +10,7 @@ SiteTreeHandlers.showRecord_url = 'admin/assets/show/';
 SiteTreeHandlers.controller_url = 'admin/assets';
 
 var _HANDLER_FORMS = {
-	addpage : 'addpage_options',
+	addpage : 'Form_AddPageOptionsForm',
 	deletepage : 'Form_DeleteItemsForm',
 	sortitems : 'sortitems_options'
 };
@@ -268,8 +268,8 @@ addfolder.prototype = {
 	form_submit : function() {
 		var st = $('sitetree');
 
-		$('addpage_options').elements.ParentID.value = st.getIdxOf(st.firstSelected());		
+		$('Form_AddPageOptionsForm').elements.ParentID.value = st.getIdxOf(st.firstSelected());		
-		Ajax.SubmitForm('addpage_options', null, {
+		Ajax.SubmitForm('Form_AddPageOptionsForm', null, {
 			onSuccess : this.onSuccess,
 			onFailure : this.showAddPageError
 		});

javascript/CMSMain.js

@@ -370,4 +370,109 @@ var ss_MainLayout;
 		};
 	});
 	
+	/**
+	 * @class Simple form with a page type dropdown
+	 * which creates a new page through #Form_EditForm and adds a new tree node.
+	 * @name ss.Form_AddPageOptionsForm
+	 * @requires ss.i18n
+	 * @requires ss.Form_EditForm
+	 */
+	$('#Form_AddPageOptionsForm').concrete(function($) {
+	  return/** @lends ss.Form_AddPageOptionsForm */{
+			/**
+			 * @type DOMElement
+			 */
+			Tree: null,
+			
+			/**
+			 * @type Array Internal counter to create unique page identifiers prior to ajax saving
+			 */
+			_NewPages: [],
+			
+			onmatch: function() {
+				var self = this;
+				
+				this.bind('submit', function(e) {
+				  return self._submit(e);
+				});
+				
+				Observable.applyTo(this[0]);
+				
+				var tree = jQuery('#sitetree')[0];
+				this.setTree(tree);
+				jQuery(tree).bind('selectionchanged', function(e, data) {self.treeSelectionChanged(e, data);});
+				
+				this.find(':input[name=PageType]').bind('change', this.typeDropdownChanged);
+			},
+			
+			_submit: function(e) {
+				var newPages = this._NewPages();
+				var tree = this.Tree();
+				var parentID = (tree.firstSelected()) ? tree.getIdxOf(tree.firstSelected()) : 0;
+
+				// TODO: Remove 'new-' code http://open.silverstripe.com/ticket/875
+				if(parentID && parentID.substr(0,3) == 'new') {
+					alert(ss.i18n._t('CMSMAIN.WARNINGSAVEPAGESBEFOREADDING'));
+				}
+				
+				if(tree.firstSelected() && jQuery(tree.firstSelected()).hasClass("nochildren")) {
+					alert(ss.i18n._t('CMSMAIN.CANTADDCHILDREN') );
+				} 
+				
+				// Optionally initalize the new pages tracker
+				if(!newPages[parentID] ) newPages[parentID] = 1;
+
+				// default to first button
+				var button = jQuery(this).find(':submit:first');
+				button.addClass('loading');
+				
+				// collect data and submit the form
+				var data = jQuery(this).serializeArray();
+				data.push({name:'Suffix',value:newPages[parentID]++});
+				data.push({name:button.attr('name'),value:button.val()});
+				jQuery('#Form_EditForm').concrete('ss').loadForm(
+					jQuery(this).attr('action'),
+					function() {
+						button.removeClass('loading');
+					},
+					{type: 'POST', data: data}
+				);
+				
+				this.set_NewPages(newPages);
+
+				return false;
+			},
+
+			treeSelectionChanged : function(e, data) {
+			  var selectedNode = data.node;
+			  
+				if(selectedNode.hints && selectedNode.hints.defaultChild) {
+					this.find(':input[name=PageType]').val(selectedNode.hints.defaultChild);
+				}
+				
+				var parentID = this.Tree().getIdxOf(selectedNode);
+				this.find(':input[name=ParentID]').val(parentID ? parentID : 0);
+			},
+
+			typeDropdownChanged : function() {
+			  var tree = this.Tree();
+			  
+				// Don't do anything if we're already on an appropriate node
+				var sel = tree.firstSelected();
+				if(sel && sel.hints && sel.hints.allowedChildren) {
+					var allowed = sel.hints.allowedChildren;
+					for(i=0;i<allowed.length;i++) {
+						if(allowed[i] == this.value) return;
+					}
+				}
+
+				// Otherwise move to the default parent for that.
+				if(siteTreeHints && siteTreeHints[this.value] ) {
+					var newNode = tree.getTreeNodeByIdx(siteTreeHints[this.value].defaultParent);
+					if(newNode) tree.changeCurrentTo(newNode);
+				}
+			}
+		};
+	});
+	
 })(jQuery);

javascript/CMSMain_left.js

@@ -4,98 +4,6 @@ SiteTreeHandlers.orderChanged_url = 'admin/ajaxupdatesort';
 SiteTreeHandlers.loadPage_url = 'admin/getitem';
 SiteTreeHandlers.loadTree_url = 'admin/getsubtree';
 
-_NEW_PAGES = new Array();
-
-/**
- * Add page action
- */
-addpageclass = Class.create();
-addpageclass.applyTo('#addpage');
-addpageclass.prototype = {
-	initialize: function () {
-		Observable.applyTo($(_HANDLER_FORMS[this.id]));
-		this.getElementsByTagName('button')[0].onclick = returnFalse;
-		$(_HANDLER_FORMS[this.id]).onsubmit = this.form_submit;
-	},
-	
-	onclick : function() {
-			if(treeactions.toggleSelection(this)) {
-			var selectedNode = $('sitetree').firstSelected();
-			if(selectedNode) {
-				while(selectedNode.parentTreeNode && !selectedNode.hints.defaultChild) {
-					$('sitetree').changeCurrentTo(selectedNode.parentTreeNode);
-					selectedNode = selectedNode.parentTreeNode;
-				}
-				
-				if( selectedNode.hints && selectedNode.hints.defaultChild )
-					$(_HANDLER_FORMS.addpage).elements.PageType.value = selectedNode.hints.defaultChild;
-			}
-						
-			this.o1 = $('sitetree').observeMethod('SelectionChanged', this.treeSelectionChanged.bind(this));
-			this.o2 = $(_HANDLER_FORMS[this.id]).observeMethod('Close', this.popupClosed.bind(this));
-
-			$(_HANDLER_FORMS[this.id]).elements.PageType.onchange = this.typeDropdown_change;
-		}
-		return false;
-	},
-	
-	treeSelectionChanged : function(selectedNode) {
-		$(_HANDLER_FORMS.addpage).elements.PageType.value = selectedNode.hints.defaultChild;
-	},
-	
-	popupClosed : function() {
-		$('sitetree').stopObserving(this.o1);
-		$(_HANDLER_FORMS.addpage).stopObserving(this.o2);
-	},
-	
-	typeDropdown_change : function() {
-		// Don't do anything if we're already on an appropriate node
-		var sel = $('sitetree').firstSelected();
-		if(sel && sel.hints && sel.hints.allowedChildren) {
-			var allowed = sel.hints.allowedChildren;
-			for(i=0;i<allowed.length;i++) if(allowed[i] == this.value) return;
-		}
-
-		if( typeof siteTreeHints == 'undefined' )
-			return;
-
-		// Otherwise move to the default parent for that.
-		if( siteTreeHints && siteTreeHints[this.value] ) {
-			var newNode = $('sitetree').getTreeNodeByIdx(siteTreeHints[this.value].defaultParent);
-			if(newNode) $('sitetree').changeCurrentTo(newNode);
-		}
-	},
-	
-	form_submit : function() {
-		var st = $('sitetree');
-		var parentID = st.getIdxOf(st.firstSelected());
-		// TODO: Remove 'new-' code http://open.silverstripe.com/ticket/875
-		if(parentID && parentID.substr(0,3) == 'new') {
-			alert(ss.i18n._t('CMSMAIN.WARNINGSAVEPAGESBEFOREADDING'));
-			
-		} else if( Element.hasClassName( st.firstSelected(), "nochildren" ) ) {
-			alert(ss.i18n._t('CMSMAIN.CANTADDCHILDREN') );
-		} else {
-			$(_HANDLER_FORMS.addpage).elements.ParentID.value = parentID ? parentID : 0;
-		
-			if( !_NEW_PAGES[parentID] )
-				_NEW_PAGES[parentID] = 1;
-		
-			var suffix = _NEW_PAGES[parentID]++;
-			Ajax.SubmitForm(_HANDLER_FORMS.addpage, "action_addpage", {
-				onSuccess : Ajax.Evaluator,
-				onFailure : this.showAddPageError,
-				extraData: '&Suffix=' + suffix
-			});
-		}
-		
-		return false;
-	},
-	
-	showAddPageError: function(response) {
-		errorMessage(ss.i18n._t('CMSMAIN.ERRORADDINGPAGE'), response);
-	}
-}
 SiteTreeFilter = Class.create();
 SiteTreeFilter.applyTo('#siteTreeFilterList');
 SiteTreeFilter.prototype = {

javascript/LeftAndMain_left.js

@@ -201,6 +201,7 @@ TreeNodeAPI.prototype = {
 	selectTreeNode : function() {
 		var url = jQuery(this).find('a').attr('href');
 		if(url && url != '#') {
+		  jQuery('#sitetree').trigger('selectionchanged', {node: this});
 			if($('sitetree').notify('SelectionChanged', this)) {
 		    this.getPageFromServer();
 			}
@@ -211,7 +212,7 @@ TreeNodeAPI.prototype = {
 		
 	getPageFromServer : function() {
 		var self = this;
-		var xmlhttp = jQuery('#Form_EditForm').concrete('ss').load(
+		var xmlhttp = jQuery('#Form_EditForm').concrete('ss').loadForm(
 			jQuery(this).find('a').attr('href'),
 			function(response) {
 				self.removeNodeClass('loading');
@@ -348,6 +349,10 @@ SiteTree.prototype = {
 		this.loadingNode = newLoadingNode;
 	},
 	
+	/**
+	 * Assumes to be triggered by a form element with the following input fields:
+	 * ID, ParentID, TreeTitle (or Title), ClassName
+	 */
 	onLoadNewPage: function(e, eventData) {
 		// finds a certain value in an array generated by jQuery.serializeArray()
 		var findInSerializedArray = function(arr, name) {
@@ -361,12 +366,7 @@ SiteTree.prototype = {
 
 		// check if a form with a valid ID exists
 		if(id) {
-			// set current tree element
-			this.setCurrentByIdx(id);
-
-			// set correct parent (only if it has changed)
 			var parentID = jQuery(e.target.ParentID).val();
-			if(parentID) this.setNodeParentID(id, jQuery(e.target.ParentID).val());
 
 			// set title (either from TreeTitle or from Title fields)
 			// Treetitle has special HTML formatting to denote the status changes.
@@ -377,6 +377,19 @@ SiteTree.prototype = {
 			var className = jQuery(e.target.ClassName).val();
 			if(className) this.setNodeIcon(id, className);
 			
+			// check if node exists, might have been created instead
+			if(!this.getTreeNodeByIdx(id)) {
+				var newNode = $('sitetree').createTreeNode(id, title, className);
+				var parentNode = $('sitetree').getTreeNodeByIdx(parentID); 
+				if(parentNode) parentNode.appendTreeNode(newNode);
+				//newNode.selectTreeNode();
+			}
+			
+			// set correct parent (only if it has changed)
+			if(parentID) this.setNodeParentID(id, jQuery(e.target.ParentID).val());
+			
+			// set current tree element
+			this.setCurrentByIdx(id);
 		} else {
 			if(typeof eventData.origData != 'undefined') {
 				var node = this.getTreeNodeByIdx(eventData.origData.ID);

javascript/ReportAdmin_left.js

@@ -23,6 +23,7 @@ SiteTree.prototype = {
 
 SiteTreeNode.prototype.onselect = function() {
 	$('sitetree').changeCurrentTo(this);
+	jQuery('#sitetree').trigger('selectionchanged');
 	if($('sitetree').notify('SelectionChanged', this)) {
 		this.getPageFromServer();
 	}