preparing CTF for usage outside of CMS

BUGFIX: provide fallback for ajax-errors if not in CMS context
BUGFIX: re-added middle-alignment to greybox if not in CMS context
BUGFIX: added basic requirements to be independent of cms-inclusion
FEATURE: better transformation of save-button (replaced indicator with "saving..." label)
ENHANCEMENT: moved String-lib to prototype_improvements.js

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

css/ComplexTableField_popup.css

@@ -7,6 +7,11 @@ html,body {
 	background: #fff;	
 }
 
+#ComplexTableField_Popup_DetailForm input.loading {
+	background: #fff url(../../cms/images/network-save.gif) left center no-repeat;
+	padding-left:16px;
+}
+
 .PageControls {
 	padding: 5px;
 	width: 100%;
@@ -66,15 +71,9 @@ form fieldset {
 	clear: none;
 }
 
-.ComplexTableField_Popup input.action
-{
-    position: relative;
-    float: right;
-}
-
 /* Pagination */ 
 
-ComplexTableField_Pagination {
+#ComplexTableField_Pagination {
 	margin-top: 10px;
 	margin-left: auto;
 	margin-right: auto;

forms/TableListField.php

@@ -186,6 +186,10 @@ class TableListField extends FormField {
 
 		parent::__construct($name);
 		
+		Requirements::javascript('jsparty/prototype.js');
+		Requirements::javascript('jsparty/behaviour.js');
+		Requirements::javascript('jsparty/prototype_improvements.js');
+		Requirements::javascript('jsparty/scriptaculous/effects.js');
 		Requirements::javascript('sapphire/javascript/TableListField.js');
 		Requirements::css('sapphire/css/TableListField.css');
 	}

javascript/ComplexTableField.js

@@ -55,7 +55,7 @@ ComplexTableField.prototype = {
 							}
 						);
 					}.bind(this),
-					onFailure: ajaxErrorHandler
+					onFailure: this.ajaxErrorHandler
 				}
 			);
 		}
@@ -133,12 +133,4 @@ ComplexTableField.prototype = {
 	}
 }
 
-ComplexTableField.applyTo('#Form_EditForm div.ComplexTableField');
-
-/**
- * Get first letter as uppercase
- */
-String.prototype.ucfirst = function () {
-   var firstLetter = this.substr(0,1).toUpperCase()
-   return this.substr(0,1).toUpperCase() + this.substr(1,this.length);
-}
+ComplexTableField.applyTo('div.ComplexTableField');

javascript/ComplexTableField_popup.js

@@ -1,5 +1,8 @@
 ComplexTableFieldPopupForm = Class.create();
 ComplexTableFieldPopupForm.prototype = {
+	
+	errorMessage: "Error talking to server",
+	
 	initialize: function() {
 		Behaviour.register({
 			"form#ComplexTableField_Popup_DetailForm .Actions input.action": {
@@ -21,16 +24,19 @@ ComplexTableFieldPopupForm.prototype = {
 		if(window != top && parent.parent.GB_hide) {
 			var theForm = Event.findElement(e,"form");
 			var submitButton = document.getElementsBySelector("input.action",theForm)[0];
-			parent.parent.statusMessage('saving');
+			if(parent.parent.statusMessage != undefined) parent.parent.statusMessage('saving');
 			submitButton.setAttribute("disabled","true");
 
-			showIndicator('ComplexTableField_submitForm', submitButton.parentNode);
+			submitButton._oldValue = submitButton.value;
+			submitButton.value = ingize(submitButton.value);
+			Element.addClassName(submitButton,'loading');
 			
 			new parent.parent.Ajax.Request(
 				theForm.getAttribute("action"),
 				{
 					parameters: Form.serialize(theForm)+"&ajax=1",
-					onComplete: this.updateTableAfterSave.bind(this)
+					onComplete: this.updateTableAfterSave.bind(this),
+					onFailure: this.ajaxErrorHandler.bind(this)
 				}
 			);
 			Event.stop(e);
@@ -42,7 +48,7 @@ ComplexTableFieldPopupForm.prototype = {
 	
 	updateTableAfterSave : function(response) {
 		eval(response.responseText);
-		var theForm =document.getElementsByTagName("form")[0];
+		var theForm = document.getElementsByTagName("form")[0];
 
 		// don't update when validation is present and failed
 		if(!this.validate || (this.validate && !hasHadFormError())) {
@@ -56,33 +62,43 @@ ComplexTableFieldPopupForm.prototype = {
 		} else {
 			var submitbutton = document.getElementsBySelector("input.action",theForm)[0];
 			submitbutton.disabled = false;
-			hideIndicator('ComplexTableField_submitForm');
+			submitButton.value = submitButton._oldValue;
+			Element.removeClassName(submitButton,'loading');
 		}
 	},
 	
 	ajaxErrorHandler: function(response) {
-		var submitbutton = document.getElementsBySelector("input.action",theForm)[0];
-		submitbutton.disabled = false;
-		hideIndicator('ComplexTableField_submitForm');
+		var submitButton = document.getElementsBySelector("form input.action")[0];
+		submitButton.disabled = false;
+		submitButton.value = submitButton._oldValue;
+		Element.removeClassName(submitButton,'loading');
 		
-		// does not work due to sandbox-iframe restrictions?
-		parent.parent.ajaxErrorHandler();
+		// TODO does not work due to sandbox-iframe restrictions?
+		if(typeof(parent.parent.ajaxErrorHandler) == 'function') {
+			parent.parent.ajaxErrorHandler();
+		} else {
+			alert(this.errorMessage);
+		}
 	},
 	
 	updateAndHide: function(response) {
 		var theForm =document.getElementsByTagName("form")[0];
 		
-		var submitbutton = document.getElementsBySelector("input.action",theForm)[0];
-		submitbutton.disabled = false;
-		hideIndicator('ComplexTableField_submitForm');
+		var submitButton = document.getElementsBySelector("input.action",theForm)[0];
+		submitButton.disabled = false;
+		submitButton.value = submitButton._oldValue;
+		Element.removeClassName(submitButton,'loading');
 		
-		// apparently firefox doesn't remember its DOM after innerHTML, so we help out here...
-		var cachedObj = this.GB_OpenerObj;
-		var cachedParentObj = this.GB_OpenerObj.parentNode;
-		Element.replace(this.GB_OpenerObj, response.responseText);
-		this.Behaviour.apply(cachedParentObj);
-		cachedObj = null;
-		this.GB_OpenerObj = null;
+		// TODO Fix DOM-relation after pagination inside popup
+		if(this.GB_OpenerObj) {
+			// apparently firefox doesn't remember its DOM after innerHTML, so we help out here...
+			var cachedObj = this.GB_OpenerObj;
+			var cachedParentObj = this.GB_OpenerObj.parentNode;
+			Element.replace(this.GB_OpenerObj, response.responseText);
+			this.Behaviour.apply(cachedParentObj);
+			cachedObj = null;
+			this.GB_OpenerObj = null;
+		}
 		
 		// causes IE6 to go nuts
 		//this.GB_hide();

javascript/TableListField.js

@@ -3,6 +3,8 @@ TableListField.prototype = {
 	
 	deleteConfirmMessage: "Are you sure you want to delete this record?",
 	
+	errorMessage: "Error talking to server",
+	
 	initialize: function() {
 		var rules = {};
 		
@@ -22,7 +24,7 @@ TableListField.prototype = {
 			onmouseout: function(e) {
 				var sortLinks = $$('span.sortLinkHidden a', this);
 				if(sortLinks) Element.hide(sortLinks[0]);
-			},
+			}
 		};
 		
 		rules['#'+this.id+' div.PageControls a'] = {onclick: this.paginate.bind(this)};
@@ -36,6 +38,7 @@ TableListField.prototype = {
 		// initialize summary (if needed)
 		// TODO Breaks with nested divs
 		var summaryCols = $$('tfoot tr.summary td', this);
+		this._summaryDefs = [];
 		if(summaryCols) {
 			rules['#'+this.id+' table.data tbody input'] = {
 				onchange: function(e) {
@@ -55,7 +58,6 @@ TableListField.prototype = {
 					//root._summarise();
 				}.bind(this)
 			};
-			this._summaryDefs = [];
 		}
 		
 		Behaviour.register(rules);
@@ -85,7 +87,7 @@ TableListField.prototype = {
 					onComplete: function(){
 						Effect.Fade(row);
 					}.bind(this),
-					onFailure: ajaxErrorHandler
+					onFailure: this.ajaxErrorHandler.bind(this)
 				}
 			);
 		}
@@ -108,7 +110,8 @@ TableListField.prototype = {
 			el.href, 
 			{
 				postBody: 'update=1',
-				onComplete: Ajax.Evaluator
+				onComplete: Ajax.Evaluator,
+				onFailure: this.ajaxErrorHandler.bind(this)
 			}
 		);
 		
@@ -116,6 +119,14 @@ TableListField.prototype = {
 		return false;
 	},
 	
+	ajaxErrorHandler: function(response) {
+		if(typeof(window.ajaxErrorHandler) == 'function') {
+			window.ajaxErrorHandler();
+		} else {
+			alert(this.errorMessage);
+		}
+	},
+	
 	_getSummaryDefs: function(summaryCols) {
 		summaryCols.each(function(col, pos) {
 			if( col ) {
@@ -129,6 +140,8 @@ TableListField.prototype = {
 	
 	_summarise: function() {
 		var rows = $$('tbody tr', this);
+		if(!rows) return false;
+		
 		var columnData = [];
 		// prepare the array (gets js-errors otherwise)
 		var cols = $$('td', rows[0]);

templates/ComplexTableField_popup.ss

@@ -6,7 +6,6 @@
 	<body>
 		<div class="right $PopupClasses">
 			$DetailForm
-			<img src="cms/images/network-save.gif" class="ajaxloader" style="display: none" />
 		</div>
 		<% if IsAddMode %>
 		<% else %>