Skip to content

Commit

Permalink
Added ArrayListField
Browse files Browse the repository at this point in the history
  • Loading branch information
Zauberfisch committed Aug 25, 2017
1 parent cd45bb2 commit 7984c22
Show file tree
Hide file tree
Showing 8 changed files with 532 additions and 10 deletions.
51 changes: 51 additions & 0 deletions css/ArrayListField.scss.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField > label.left {
display: block;
float: none;
padding-bottom: 10px; }

.zauberfisch\\SerializedDataObject\\Form\\ArrayListField > .middleColumn {
margin-left: 0; }

.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.field {
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0;
padding: 0 0 5px; }

.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list {
border-radius: 3px;
border: 1px solid #CDCCD0;
background: rgba(0, 0, 0, 0.05);
margin: 0 0 10px; }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record {
padding: 20px 10px 10px;
border-bottom: 1px solid #CDCCD0;
position: relative; }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record:last-child {
border-bottom: 0; }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record.pre-delete {
background: rgba(255, 0, 0, 0.05); }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls {
position: absolute;
right: 5px;
top: 10px; }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls > * {
display: block;
float: left;
margin: 0 5px 0 0; }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-handle {
height: 22px;
width: 16px;
cursor: move;
background: center center no-repeat url("../images/orderable-handle.png"); }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .delete-record {
padding: 2px; }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .delete-record:before {
margin: 0; }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .delete-record span {
display: none; }
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .delete-record:hover {
background: transparent;
opacity: .6; }
18 changes: 8 additions & 10 deletions css/SortableUploadField.scss.css
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
.ui-sortable .preview img {
cursor: move;
}
cursor: move; }

.zauberfisch\\serializeddataobject\\form\\sortableupload .ui-sortable-helper {
background-color: #fff !important;
border: 1px solid #b3b3b3 !important;
border-left: 0 !important;
border-right: 0 !important;
-webkit-box-shadow: 0px 9px 5px -5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 9px 5px -5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 9px 5px -5px rgba(0, 0, 0, 0.3);
}
background-color: #fff !important;
border: 1px solid #b3b3b3 !important;
border-left: 0 !important;
border-right: 0 !important;
-webkit-box-shadow: 0px 9px 5px -5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 9px 5px -5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 9px 5px -5px rgba(0, 0, 0, 0.3); }
Binary file added images/orderable-handle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 69 additions & 0 deletions javascript/ArrayListField.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
(function ($) {
$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField').entwine({
getRecordList: function () {
return this.find('.record-list');
}
});
$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField *').entwine({
getRootForm: function () {
return this.closest('form');
},
getContainerField: function () {
return this.closest('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField');
}
});
$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField.orderable .record-list').entwine({
onmatch: function () {
// enable sorting functionality
var self = this,
rootForm = this.closest('form');
self.sortable({
handle: ".orderable-handle",
axis: "y"
});
this._super();
},
onunmatch: function () {
try {
$(this).sortable("destroy");
} catch (e) {
}
this._super();
}
});
$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField .add-record').entwine({
onclick: function () {
var field = this.getContainerField(),
recordList = field.getRecordList(),
_this = this,
newIndex = recordList.find('.record').length,
url = field.data('add-record-url') + '?index=' + newIndex;
this.addClass('loading');
this.getRootForm().addClass('changed');
$.get(url, function (content) {
recordList.append(content);
_this.removeClass('loading');
_this.blur();
});
return false;
}
});
$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField .delete-record').entwine({
onclick: function () {
var container = this.closest('.record'),
_this = this;
container.addClass('pre-delete');
setTimeout(function () {
if (confirm(_this.data('confirm'))) {
container.fadeOut(function () {
container.remove();
});
}
container.removeClass('pre-delete');
}, 100);
this.blur();
return false;
}
});
})
(jQuery);
69 changes: 69 additions & 0 deletions scss/ArrayListField.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
.zauberfisch\\SerializedDataObject\\Form\\ArrayListField {
> label.left {
display: block;
float: none;
padding-bottom: 10px;
}
> .middleColumn {
margin-left: 0;
}
div.field {
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0;
padding: 0 0 5px;
}
div.record-list {
border-radius: 3px;
border: 1px solid #CDCCD0;
background: rgba(#000, .05);
margin: 0 0 10px;

.record {
padding: 20px 10px 10px;
border-bottom: 1px solid #CDCCD0;
position: relative;

&:last-child {
border-bottom: 0;
}
&.pre-delete {
background: rgba(red, .05);
}
.controls {
position: absolute;
right: 5px;
top: 10px;

> * {
display: block;
float: left;
margin: 0 5px 0 0;
}

.orderable-handle {
height: 22px;
width: 16px;
cursor: move;
background: center center no-repeat url('../images/orderable-handle.png');
}
.delete-record {
padding: 2px;

&:before {
margin: 0;
}
span {
display: none;
}
&:hover {
background: transparent;
opacity: .6;
}
}
}
}
}
}
Loading

0 comments on commit 7984c22

Please sign in to comment.