From c0b2f760cdf3e5bb83cfee727dbe219eba054456 Mon Sep 17 00:00:00 2001 From: Will Rossiter 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 @@ -
+
  • <% if isReadonly %> - <% _t('LOCKED', 'These fields cannot be modified') %> + <% _t('LOCKED', 'These fields cannot be modified') %> <% else %> - <% _t('DRAG', 'Drag to rearrange order of fields') %> + <% _t('DRAG', 'Drag to rearrange order of fields') %> <% end_if %> $ClassName @@ -54,8 +54,9 @@
    <% end_if %> - - - - -
  • \ No newline at end of file + + + + + + \ 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 @@
    -
    - <% control Fields %> - <% if isReadonly %> - $ReadonlyEditSegment - <% else %> - $EditSegment - <% end_if %> - <% end_control %> -
    +