Support for sorting in lists and fields

Zauberfisch · Jan 16, 2018 · 0385942 · 0385942
1 parent 3ffc742
commit 0385942
Show file tree

Hide file tree

Showing 10 changed files with 171 additions and 76 deletions.
diff --git a/css/ArrayListField.scss.css b/css/ArrayListField.scss.css
@@ -40,12 +40,15 @@
         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 {
+      .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-up, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-down, .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 {
+        .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-up:before, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-down:before, .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 {
+        .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-up span, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-down span, .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 {
+        .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-up:hover, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .orderable-down:hover, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record .controls .delete-record:hover {
           background: transparent;
           opacity: .6; }
+    .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record:first-child .controls .orderable-up, .zauberfisch\\SerializedDataObject\\Form\\ArrayListField div.record-list .record:last-child .controls .orderable-down {
+      cursor: default;
+      opacity: .4 !important; }
diff --git a/javascript/ArrayListField.js b/javascript/ArrayListField.js
@@ -14,21 +14,25 @@
 	});
 	$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField.orderable .record-list').entwine({
 		onmatch: function () {
+			this.sortableEnable();
+			this._super();
+		},
+		onunmatch: function () {
+			this.sortableDisable();
+			this._super();
+		},
+		sortableEnable: function () {
 			// enable sorting functionality
-			var self = this,
-				rootForm = this.closest('form');
-			self.sortable({
+			this.sortable({
 				handle: ".orderable-handle",
 				axis: "y"
 			});
-			this._super();
 		},
-		onunmatch: function () {
+		sortableDisable: function () {
 			try {
-				$(this).sortable("destroy");
+				this.sortable("destroy");
 			} catch (e) {
 			}
-			this._super();
 		}
 	});
 	$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField .add-record').entwine({
@@ -65,5 +69,29 @@
 			return false;
 		}
 	});
+	$('.zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField .orderable-up, .zauberfisch\\\\SerializedDataObject\\\\Form\\\\ArrayListField .orderable-down').entwine({
+		onclick: function () {
+			var record = this.closest('.record'),
+				recordList = this.getContainerField().getRecordList(),
+				index = record.index();
+			console.log(index);
+			console.log(recordList.find('.record').length - 1);
+			if (
+				(index === 0 && this.hasClass('orderable-up')) ||
+				(index === recordList.find('.record').length - 1 && this.hasClass('orderable-down'))
+			) {
+				return false;
+			}
+			recordList.sortableDisable();
+			if (this.hasClass('orderable-up')) {
+				record.prev().insertAfter(record);
+			} else {
+				record.next().insertBefore(record);
+			}
+			recordList.sortableEnable();
+			this.blur();
+			return false;
+		}
+	});
 })
 (jQuery);
diff --git a/scss/ArrayListField.scss b/scss/ArrayListField.scss
@@ -20,12 +20,12 @@
 		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;
 			}
@@ -36,22 +36,22 @@
 				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 {
+				.orderable-up, .orderable-down, .delete-record {
 					padding: 2px;
-					
+
 					&:before {
 						margin: 0;
 					}
@@ -64,6 +64,10 @@
 					}
 				}
 			}
+			&:first-child .controls .orderable-up, &:last-child .controls .orderable-down {
+				cursor: default;
+				opacity: .4 !important;
+			}
 		}
 	}
 }
diff --git a/src/DBField/AbstractField.php b/src/DBField/AbstractField.php
@@ -27,7 +27,7 @@ function getValue() {
 	}
 
 	/**
-	 * @param AbstractList|AbstractDataObject|AbstractField|array|null|string $value
+	 * @param AbstractList|AbstractDataObject|AbstractField|null|string $value
 	 * @param null $record
 	 * @param bool|true $markAsChanged
 	 */

diff --git a/src/DBField/AbstractListField.php b/src/DBField/AbstractListField.php
@@ -2,8 +2,6 @@
 
 namespace zauberfisch\SerializedDataObject\DBField;
 
-use zauberfisch\SerializedDataObject\ArrayList;
-
 /**
  * @author Zauberfisch
  */

diff --git a/src/DBField/SortedDataListField.php b/src/DBField/SortedDataListField.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace zauberfisch\SerializedDataObject\DBField;
+
+use zauberfisch\SerializedDataObject\SortedDataList;
+
+/**
+ * @author Zauberfisch
+ */
+class SortedDataListField extends DataListField {
+	public function nullValue() {
+		return new SortedDataList();
+	}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,8 +2,6 @@ @@
     namespace zauberfisch\SerializedDataObject\DBField;
-    use zauberfisch\SerializedDataObject\ArrayList;
     /**
      * @author Zauberfisch
      */
@@ Expand Down @@