fix(ui): enhance UI for sorting, add footer to gridfields

flxlabs · Mar 4, 2018 · ed5fadc · ed5fadc
1 parent 1a98fca
commit ed5fadc
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 41 deletions.
diff --git a/code/GridFieldPageSectionsExtension.php b/code/GridFieldPageSectionsExtension.php
@@ -20,8 +20,9 @@ class GridFieldPageSectionsExtension implements
 	);
 
 
-	public function __construct($page, $sortField = "SortOrder") {
+	public function __construct($page, $allowedElementsOnPage = array(), $sortField = "SortOrder") {
 		$this->page = $page;
+		$this->allowedElementsOnPage = $allowedElementsOnPage;
 		$this->sortField = $sortField;
 	}
 
@@ -81,12 +82,13 @@ public function augmentColumns($gridField, &$columns) {
 		if (!isset($state->open)) {
 			$state->open = array();
 
-			// Open all elements by default
+			// Open all elements by default if has children
 			$list = array();
 			$newList = $gridField->getManipulatedList();
 			while (count($list) < count($newList)) {
 				foreach ($newList as $item) {
-					if ($item->isOpenByDefault()) {
+					//var_dump($item->Children());die;
+					if ($item->isOpenByDefault() && $item->Children()->Count) {
 						$this->openElement($state, $item);
 					}
 				}
@@ -125,12 +127,23 @@ public function getColumnAttributes($gridField, $record, $columnName) {
 				$elems[$class] = $class::$singular_name;
 			}
 
+			// if element has no parent we need to
+			// know the allowed elements of the page
+			if (!$record->_Parent) {
+				$pageClasses = $this->allowedElementsOnPage;
+				$pageElems = array();
+				foreach ($pageClasses as $class) {
+					$pageElems[$class] = $class::$singular_name;
+				}
+			}
+
 			return array(
-				"class" => "col-treenav",
-				"data-class" => $record->ClassName,
-				"data-level" => strval($record->_Level),
-				"data-parent" => $record->_Parent ? strval($record->_Parent->ID) : "",
-				"data-allowed-elements" => json_encode($elems, JSON_UNESCAPED_UNICODE),
+				"class"                      => "col-treenav",
+				"data-class"                 => $record->ClassName,
+				"data-level"                 => strval($record->_Level),
+				"data-parent"                => $record->_Parent ? strval($record->_Parent->ID) : "",
+				"data-allowed-page-elements" => !$record->_Parent ? json_encode($pageElems, JSON_UNESCAPED_UNICODE) : "",
+				"data-allowed-elements"      => json_encode($elems, JSON_UNESCAPED_UNICODE),
 			);
 		}
 

diff --git a/code/PageElement.php b/code/PageElement.php
@@ -63,8 +63,9 @@ public function onBeforeWrite() {
 	}
 
 	public function getChildrenGridField() {
+		$allowedElements = $this->getAllowedPageElements();
 		$addNewButton = new GridFieldAddNewMultiClass();
-		$addNewButton->setClasses($this->getAllowedPageElements());
+		$addNewButton->setClasses($allowedElements);
 
 		$autoCompl = new GridFieldAddExistingAutocompleter('buttons-before-right');
 		$autoCompl->setResultsFormat('$Title ($ID)');
@@ -77,7 +78,8 @@ public function getChildrenGridField() {
 			->addComponent($autoCompl)
 			->addComponent($addNewButton)
 			->addComponent(new GridFieldPageSectionsExtension($this->owner))
-			->addComponent(new GridFieldDetailForm());
+			->addComponent(new GridFieldDetailForm())
+			->addComponent(new GridFieldFooter());
 		$dataColumns->setFieldCasting(array('GridFieldPreview' => 'HTMLText->RAW'));
 
 		return new GridField("Children", "Children", $this->Children(), $config);

diff --git a/code/PageSectionsExtension.php b/code/PageSectionsExtension.php
@@ -28,7 +28,7 @@ public function extraStatics($class = null, $extensionClass = null) {
 		return array();
 	}
 
-	public static function getAllowedPageElements() {
+	public static function getAllowedPageElements($sectionName = "Main") {
 		$classes = array_values(ClassInfo::subclassesFor("PageElement"));
 		$classes = array_diff($classes, ["PageElement"]);
 		return $classes;
@@ -61,8 +61,9 @@ public function updateCMSFields(FieldList $fields) {
 			$fields->removeByName($name);
 
 			if ($this->owner->ID) {
+				$allowedElements = $this->owner->getAllowedPageElements($section);
 				$addNewButton = new GridFieldAddNewMultiClass();
-				$addNewButton->setClasses($this->owner->getAllowedPageElements());
+				$addNewButton->setClasses($allowedElements);
 
 				$autoCompl = new GridFieldAddExistingAutocompleter('buttons-before-right');
 				$autoCompl->setResultsFormat('$Title ($ID)');
@@ -73,8 +74,9 @@ public function updateCMSFields(FieldList $fields) {
 					->addComponent($dataColumns = new GridFieldDataColumns())
 					->addComponent($autoCompl)
 					->addComponent($addNewButton)
-					->addComponent(new GridFieldPageSectionsExtension($this->owner))
-					->addComponent(new GridFieldDetailForm());
+					->addComponent(new GridFieldPageSectionsExtension($this->owner, $allowedElements))
+					->addComponent(new GridFieldDetailForm())
+					->addComponent(new GridFieldFooter());
 				$dataColumns = $config->getComponentByType('GridFieldDataColumns');
 				$dataColumns->setFieldCasting(array('GridFieldPreview' => 'HTMLText->RAW'));
 

diff --git a/css/GridFieldPageSectionsExtension.css b/css/GridFieldPageSectionsExtension.css
@@ -112,6 +112,10 @@
 	box-shadow: 0 0 1px #ccc;
 }
 
+.col-treenav__draggable.state-active {
+	border: 1px solid #417505;
+}
+
 .col-treenav__draggable:before {
 	position: absolute;
 	content: "";
@@ -124,10 +128,6 @@
 	box-sizing: border-box;
 }
 
-.col-treenav__draggable.state-hover {
-	background: #A8CB7F;
-}
-
 .ss-gridfield-pagesections thead tr th.col-Reorder span {
 	padding: 0 !important;
 	margin-left: 8px;
@@ -162,7 +162,7 @@
 .ss-gridfield-pagesections .col-reorder .ui-droppable {
 	position: absolute;
 	left: 100%;
-	width: 500%;
+	width: 100vw;
 	z-index: 100;
 	display: none;
 }
@@ -181,8 +181,7 @@
 
 .ss-gridfield-pagesections .col-reorder .ui-droppable.before {
 	top: 0;
-	height: 25%;
-	background-color: rgba(0, 100, 0, 0.4);
+	height: 50%;
 }
 
 .ss-gridfield-pagesections .col-reorder .ui-droppable.before svg {
@@ -194,7 +193,6 @@
 	right: 0;
 	top: 0;
 	height: 100%;
-	background-color: rgba(0, 0, 100, 0.4);
 }
 
 .ss-gridfield-pagesections .col-reorder .ui-droppable.middle svg {
@@ -204,17 +202,16 @@
 }
 
 .ss-gridfield-pagesections .col-reorder .ui-droppable.after {
-	bottom: 0;
-	height: 25%;
-	background-color: rgba(0, 100, 0, 0.4);
+	bottom: -1px;
+	height: 50%;
 }
 
 .ss-gridfield-pagesections .col-reorder .ui-droppable.after svg {
 	top: 100%;
+	margin-top: -1px;
 }
 
 .ss-gridfield-pagesections .col-reorder .ui-droppable.state-active {
-	background: pink !important;
 	z-index: 200;
 }
 

diff --git a/javascript/GridFieldPageSectionsExtension.js b/javascript/GridFieldPageSectionsExtension.js
@@ -170,6 +170,11 @@
 								var newParent = type === "child" ? $this.data("id") : $treenav.data("parent");
 								var sort = type === "child" ? childOrder : $reorder.data("sort");
 
+								// we alter the state of the published / saved buttons
+								$('.cms-edit-form .Actions #Form_EditForm_action_publish').button({
+									showingAlternate: true
+								});
+
 								grid.reload({
 									url: grid.data("url-reorder"),
 									data: [{
@@ -193,36 +198,73 @@
 						});
 					});
 
-
-
 					$this.draggable({
 						revert: "invalid",
 						cursor: "crosshair",
 						cursorAt: { top: -15, left: -15 },
-						activeClass: "state-hover",
+						activeClass: "state-active",
+						hoverClass: "state-active",
+						tolerance: "pointer",
+						greedy: true,
 						helper: function() {
-							var $helper =  $("<div class='col-treenav__draggable'>" + $this.find(".col-treenav__title").text() + "</div>")
-							//var clone = $this.clone().css("z-index", 200).find(".ui-droppable").remove().end();
-							// Timeout is needed otherwise the draggable position is messed up
-							setTimeout(function() {
-								hideRow($this);
-							}, 1);
+							var $tr = $this.parents("tr.ss-gridfield-item");
+							var $helper =  $(
+								"<div class='col-treenav__draggable'>" +
+								$this.find(".col-treenav__title").text() +
+								"</div>"
+							)
+							$this.css("opacity", 0.6)
+
 							return $helper;
 						},
 						start: function() {
 							var element = $this.data("class");
 							$(".ui-droppable").each(function() {
 								var $drop = $(this);
 								var $treenav = $drop.parent().siblings(".col-treenav");
+								var isOpen = $treenav.find("button").hasClass("is-open");
+								var $tr = $drop.parents("tr.ss-gridfield-item");
 
 								// Check if we're allowed to drop the element on the specified drop point.
+									// dont enable dropping on itself
+								if ($tr.data("id") == $this.data("id")) return
+
+								// dont enable dropping on .before of itself
+								if ($drop.hasClass("before") && $tr.prev().data("id") == $this.data("id")) return
 								// Depending on where we drop it (before, middle or after) we have to either
+								// don't show middle if open
+								if (
+									$drop.hasClass("middle") &&
+									isOpen
+								) {
+									return;
+								}
+								// let's handle level 0 if not open
+								else if (
+									$treenav.data("level") == 0 &&
+									(
+										$drop.hasClass("before") ||
+										(
+											$drop.hasClass("after") &&
+											!isOpen
+										)
+									)
+								) {
+									var allowed = $treenav.data("allowed-page-elements");
+									console.log(allowed, element, $treenav)
+									if (!allowed[element]) return;
+								}
 								// check our allowed children, or the allowed children of our parent row.
-								if ($drop.hasClass("before") ||
-										($drop.hasClass("after") && !$treenav.find("button").hasClass("is-open"))) {
-
-									var $parent = $treenav.parent().siblings("[data-id=" +
-										$treenav.data("parent") + "]").first();
+								else if (
+									$drop.hasClass("before") ||
+									(
+										$drop.hasClass("after") &&
+										!isOpen
+									)
+								) {
+									var $parent = $treenav.parent().siblings(
+										"[data-id=" + $treenav.data("parent") + "]"
+									).first();
 
 									var allowed = $parent.find(".col-treenav").data("allowed-elements");
 									if (allowed && !allowed[element]) return;
@@ -239,7 +281,7 @@
 							// Show the previous elements. If the user made an invalid movement then
 							// we want this to show anyways. If he did something valid the grid will
 							// refresh so we don't care if it's visible behind the loading icon.
-							$("tr.ss-gridfield-item").show();
+							$("tr.ss-gridfield-item").css("opacity", "")
 						},
 					});
 				});