tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-10-22 17:05:42 +02:00
Code Issues Projects Releases Wiki Activity

BUGFIX: got drag and drop ordering of fields rewritten in jQuery

Browse Source
This commit is contained in:
Will Rossiter 2009-04-18 02:49:46 +00:00
parent 08b06b581c
commit c0b2f760cd
5 changed files with 67 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
code/editor/FieldEditor.php
View File

@ -6,6 +6,8 @@
*/ */
class FieldEditor extends FormField { class FieldEditor extends FormField {
protected $haveFormOptions = true;
protected $readonly = false; protected $readonly = false;
function isReadonly() { function isReadonly() {
@ -28,6 +30,8 @@ class FieldEditor extends FormField {
function Fields() { function Fields() {
Requirements::css("userforms/css/FieldEditor.css"); 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"); Requirements::javascript("userforms/javascript/UserForm.js");
$relationName = $this->name; $relationName = $this->name;
@ -198,8 +202,6 @@ class FieldEditor extends FormField {
} }
return false; return false;
} }
protected $haveFormOptions = true;
function setHaveFormOptions($bool){ function setHaveFormOptions($bool){
$this->haveFormOptions = $bool; $this->haveFormOptions = $bool;

34
css/FieldEditor.css
View File

@ -88,40 +88,50 @@ div.FieldEditor ul a:hover {
/********************************************************************* /*********************************************************************
* EditableFormField - Default class for all editable form fields * EditableFormField - Default class for all editable form fields
********************************************************************/ ********************************************************************/
#Fields_fields {
div.EditableFormField { padding: 10px 0;
padding: 3px;
border-top: 1px dashed #CCCCCC;
} }
.fieldHandler {
div.EditableFormField.mouseOver { 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; background-color: #f3ef9d;
} }
div.EditableFormField div.hidden { .EditableFormField div.hidden {
display: none; display: none;
margin: 0px; margin: 0px;
} }
div.EditableFormField div.FieldInfo { .EditableFormField div.FieldInfo {
margin: 0px; margin: 0px;
padding-right: -3px; padding-right: -3px;
} }
div.EditableFormField div.FieldInfo * { .EditableFormField div.FieldInfo * {
display: inline; display: inline;
margin-right: 3px; margin-right: 3px;
margin-left: 0px; margin-left: 0px;
vertical-align: middle; vertical-align: middle;
} }
div.EditableFormField div.FieldInfo input, .EditableFormField div.FieldInfo input,
div.EditableFormField div.FieldDefault input { .EditableFormField div.FieldDefault input {
width: 250px; width: 250px;
margin-left: 0px; margin-left: 0px;
} }
div.EditableFormField div.extraOptions { .EditableFormField div.extraOptions {
display: none; display: none;
margin: 3px 0px 3px 57px; margin: 3px 0px 3px 57px;
background-color: #EEEEEE; background-color: #EEEEEE;

24
javascript/UserForm.js
View File

@ -42,7 +42,7 @@
// variables // variables
var action = $("#Form_EditForm").attr("action") + '/field/Fields/addfield'; var action = $("#Form_EditForm").attr("action") + '/field/Fields/addfield';
var length = $(".FieldInfo").length + 1; 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"); var type = $(this).attr("ID");
//send ajax request to the page //send ajax request to the page
@ -143,6 +143,28 @@
return false; 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); (jQuery);

17
templates/EditableFormField.ss
View File

@ -1,9 +1,9 @@
<div class="$ClassName EditableFormField" id="$Name.Attr"> <li class="$ClassName EditableFormField" id="$Name.Attr EditableItem_$Pos">
<div class="FieldInfo"> <div class="FieldInfo">
<% if isReadonly %> <% 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 %> <% 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 %> <% end_if %>
<img class="icon" src="userforms/images/{$ClassName.LowerCase}.png" alt="$ClassName" title="$singular_name" /> <img class="icon" src="userforms/images/{$ClassName.LowerCase}.png" alt="$ClassName" title="$singular_name" />
@ -54,8 +54,9 @@
</div> </div>
<% end_if %> <% end_if %>
<input type="hidden" name="$Name.Attr[CanDelete]" value="$CanDelete" /> <!-- Hidden option Fields -->
<input type="hidden" name="$Name.Attr[CustomParameter]" value="$CustomParameter" /> <input type="hidden" class="canDeleteHidden" name="$Name.Attr[CanDelete]" value="$CanDelete" />
<input type="hidden" name="$Name.Attr[Type]" value="$ClassName" /> <input type="hidden" class="customParameterHidden" name="$Name.Attr[CustomParameter]" value="$CustomParameter" />
<input type="hidden" name="$Name.Attr[Sort]" value="-1" /> <input type="hidden" class="typeHidden" name="$Name.Attr[Type]" value="$ClassName" />
</div> <input type="hidden" class="sortHidden" name="$Name.Attr[Sort]" value="-1" />
</li>

18
templates/FieldEditor.ss
View File

@ -8,15 +8,15 @@
</ul> </ul>
</div> </div>
<div class="FieldListHold"> <div class="FieldListHold">
<div class="FieldList" id="Fields_fields"> <ul class="FieldList" id="Fields_fields">
<% control Fields %> <% control Fields %>
<% if isReadonly %> <% if isReadonly %>
$ReadonlyEditSegment $ReadonlyEditSegment
<% else %> <% else %>
$EditSegment $EditSegment
<% end_if %> <% end_if %>
<% end_control %> <% end_control %>
</div> </ul>
</div> </div>
<div class="MenuHolder"> <div class="MenuHolder">
<ul class="BottomMenu Menu"> <ul class="BottomMenu Menu">