tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-09-27 20:06:14 +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 {
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;

34
css/FieldEditor.css
View File

@ -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;

24
javascript/UserForm.js
View File

@ -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);

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">
<% 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>
<!-- 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>

18
templates/FieldEditor.ss
View File

@ -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">