From c0b2f760cdf3e5bb83cfee727dbe219eba054456 Mon Sep 17 00:00:00 2001
From: Will Rossiter <will@silverstripe.com>
Date: Sat, 18 Apr 2009 02:49:46 +0000
Subject: [PATCH] BUGFIX: got drag and drop ordering of fields rewritten in
 jQuery

---
 code/editor/FieldEditor.php    |  6 ++++--
 css/FieldEditor.css            | 34 ++++++++++++++++++++++------------
 javascript/UserForm.js         | 24 +++++++++++++++++++++++-
 templates/EditableFormField.ss | 17 +++++++++--------
 templates/FieldEditor.ss       | 18 +++++++++---------
 5 files changed, 67 insertions(+), 32 deletions(-)

diff --git a/code/editor/FieldEditor.php b/code/editor/FieldEditor.php
index c5cf47b..6b8ed55 100755
--- a/code/editor/FieldEditor.php
+++ b/code/editor/FieldEditor.php
@@ -6,6 +6,8 @@
  */
 class FieldEditor extends FormField {
 	
+	protected $haveFormOptions = true;
+	
 	protected $readonly = false;
 	
 	function isReadonly() {
@@ -28,6 +30,8 @@ class FieldEditor extends FormField {
 	
 	function Fields() {
 		Requirements::css("userforms/css/FieldEditor.css");
+		Requirements::javascript("jsparty/jquery/ui/ui.core.js");
+		Requirements::javascript("jsparty/jquery/ui/ui.sortable.js");
 		Requirements::javascript("userforms/javascript/UserForm.js");
 		
 		$relationName = $this->name;
@@ -198,8 +202,6 @@ class FieldEditor extends FormField {
 		}
 		return false;
 	}
-
-	protected $haveFormOptions = true;
 	
 	function setHaveFormOptions($bool){
 		$this->haveFormOptions = $bool;
diff --git a/css/FieldEditor.css b/css/FieldEditor.css
index bf1a363..7e7b406 100755
--- a/css/FieldEditor.css
+++ b/css/FieldEditor.css
@@ -88,40 +88,50 @@ div.FieldEditor ul a:hover {
 /*********************************************************************
  * EditableFormField - Default class for all editable form fields
  ********************************************************************/
-
-div.EditableFormField {
-	padding: 3px;
-	border-top: 1px dashed #CCCCCC;
+#Fields_fields {
+	padding: 10px 0;
 }
-
-div.EditableFormField.mouseOver {
+.fieldHandler {
+	cursor: pointer;
+}
+.EditableFormField {
+	margin: 2px;
+	padding: 3px;
+	border-top: 1px dotted #CCCCCC;
+}
+.removed-form-field {
+	height: 40px;
+	display: block;
+	overflow: hidden;
+}
+.EditableFormField.mouseOver {
 	background-color: #f3ef9d;
 }
 
-	div.EditableFormField div.hidden {
+	.EditableFormField div.hidden {
 		display: none;
 		margin: 0px;
 	}
 
-	div.EditableFormField div.FieldInfo {
+	.EditableFormField div.FieldInfo {
 		margin: 0px;
 		padding-right: -3px;
 	}
 	
-		div.EditableFormField div.FieldInfo * {
+		.EditableFormField div.FieldInfo * {
 			display: inline;
 			margin-right: 3px;
 			margin-left: 0px;
 			vertical-align: middle;
 		}
 		
-		div.EditableFormField div.FieldInfo input,
-		div.EditableFormField div.FieldDefault input {
+		.EditableFormField div.FieldInfo input,
+		.EditableFormField div.FieldDefault input {
 			width: 250px;
 			margin-left: 0px;
 		}
 	
-	div.EditableFormField div.extraOptions {
+	.EditableFormField div.extraOptions {
 		display: none;
 		margin: 3px 0px 3px 57px;
 		background-color: #EEEEEE;
diff --git a/javascript/UserForm.js b/javascript/UserForm.js
index c0afbea..644a77a 100644
--- a/javascript/UserForm.js
+++ b/javascript/UserForm.js
@@ -42,7 +42,7 @@
 			// variables
 			var action = $("#Form_EditForm").attr("action") + '/field/Fields/addfield';
 			var length = $(".FieldInfo").length + 1;
-			var securityID = ($("#SecurityID")) ? '&SecurityID='+$("#SecurityID").attr("value") : '';
+			var securityID = ($("#SecurityID").length > 0) ? '&SecurityID='+$("#SecurityID").attr("value") : '';
 			var type = $(this).attr("ID");
 			
 			//send ajax request to the page
@@ -143,6 +143,28 @@
 			return false;
 		});
 		
+		
+		/**
+		 * Sort Fields in the Field List
+		 */
+		$("#Fields_fields").sortable({ 
+	    	handle : '.fieldHandler',
+			cursor: 'pointer',
+			items: 'li.EditableFormField',
+			placeholder: 'removed-form-field',
+			opacity: 0.6,
+			revert: true,
+			change : function (event, ui) {
+				$("#Fields_fields").sortable('refreshPositions');
+			},
+	    	update : function (event, ui) {
+	      		// get all the fields
+				var sort = 1;
+				$("li.EditableFormField").each(function() {
+					$(this).find(".sortHidden").val(sort++);
+				});
+	    	}
+		});
 	});
 })
 (jQuery);
\ No newline at end of file
diff --git a/templates/EditableFormField.ss b/templates/EditableFormField.ss
index 168597a..3b41b70 100755
--- a/templates/EditableFormField.ss
+++ b/templates/EditableFormField.ss
@@ -1,9 +1,9 @@
-<div class="$ClassName EditableFormField" id="$Name.Attr">
+<li class="$ClassName EditableFormField" id="$Name.Attr EditableItem_$Pos">
 	<div class="FieldInfo">
 		<% if isReadonly %>
-			<img class="handle" src="sapphire/images/drag_readonly.gif" alt="<% _t('LOCKED', 'These fields cannot be modified') %>" />
+			<img class="fieldHandler" src="sapphire/images/drag_readonly.gif" alt="<% _t('LOCKED', 'These fields cannot be modified') %>" />
 		<% else %>
-			<img class="handle" src="sapphire/images/drag.gif" alt="<% _t('DRAG', 'Drag to rearrange order of fields') %>" />
+			<img class="fieldHandler" src="sapphire/images/drag.gif" alt="<% _t('DRAG', 'Drag to rearrange order of fields') %>" />
 		<% end_if %>
 		
 		<img class="icon" src="userforms/images/{$ClassName.LowerCase}.png" alt="$ClassName" title="$singular_name" />
@@ -54,8 +54,9 @@
 		</div>
 	<% end_if %>
 	
-  	<input type="hidden" name="$Name.Attr[CanDelete]" value="$CanDelete" />
-  	<input type="hidden" name="$Name.Attr[CustomParameter]" value="$CustomParameter" />
-  	<input type="hidden" name="$Name.Attr[Type]" value="$ClassName" />   
-	<input type="hidden" name="$Name.Attr[Sort]" value="-1" />
-</div>
\ No newline at end of file
+	<!-- Hidden option Fields -->
+  	<input type="hidden" class="canDeleteHidden" name="$Name.Attr[CanDelete]" value="$CanDelete" />
+  	<input type="hidden" class="customParameterHidden" name="$Name.Attr[CustomParameter]" value="$CustomParameter" />
+  	<input type="hidden" class="typeHidden" name="$Name.Attr[Type]" value="$ClassName" />   
+	<input type="hidden" class="sortHidden" name="$Name.Attr[Sort]" value="-1" />
+</li>
\ No newline at end of file
diff --git a/templates/FieldEditor.ss b/templates/FieldEditor.ss
index 211c015..1bdc6d4 100755
--- a/templates/FieldEditor.ss
+++ b/templates/FieldEditor.ss
@@ -8,15 +8,15 @@
 		</ul>
 	</div>
 	<div class="FieldListHold">
-		<div class="FieldList" id="Fields_fields">
-		<% control Fields %>
-			<% if isReadonly %>
-				$ReadonlyEditSegment	
-			<% else %>
-				$EditSegment
-			<% end_if %>
-		<% end_control %>
-		</div>
+		<ul class="FieldList" id="Fields_fields">
+			<% control Fields %>
+				<% if isReadonly %>
+					$ReadonlyEditSegment	
+				<% else %>
+					$EditSegment
+				<% end_if %>
+			<% end_control %>
+		</ul>
 	</div>
 	<div class="MenuHolder">
 		<ul class="BottomMenu Menu">