First pass of new page sort method issue #72

code/forms/GridFieldSortableRows.php

@@ -73,7 +73,8 @@ class GridFieldSortableRows implements GridField_HTMLProvider, GridField_ActionP
 		$data = array('SortableToggle' => $sortOrderToggle,
 					'SortOrderSave' => $sortOrderSave,
 					'SortToPage' => $sortToPage,
-					'Checked' => ($state->sortableToggle == true ? ' checked = "checked"':''));
+					'Checked' => ($state->sortableToggle == true ? ' checked = "checked"':''),
+					'List' => $dataList);
 		
 		$forTemplate = new ArrayData($data);
 		
@@ -88,7 +89,14 @@ class GridFieldSortableRows implements GridField_HTMLProvider, GridField_ActionP
 		
 		$args = array('Colspan' => count($gridField->getColumns()), 'ID' => $gridField->ID(), 'DisableSelection' => $this->disable_selection);
 		
-		return array('header' => $forTemplate->renderWith('GridFieldSortableRows', $args));
+		
+		$fragments=array('header' => $forTemplate->renderWith('GridFieldSortableRows', $args));
+		
+		if($gridField->getConfig()->getComponentByType('GridFieldPaginator')) {
+			$fragments['after']=$forTemplate->renderWith('GridFieldSortableRows_paginator');
+		}
+		
+		return $fragments;
 	}
 	
 	/**

css/GridFieldSortableRows.css

@@ -14,10 +14,109 @@
 	display: none;
 }
 
+.cms .ss-gridfield {
+	position: relative;
+}
+
+.cms .ss-gridfield .gridfield-sortablerows-movepage .sortablerows-psort-arrow {
+	background: #98AAB6;
+	
+	display: none;
+	
+	font-weight: bold;
+	color: #FFFFFF;
+	
+	position: absolute;
+	
+	width: 40px;
+	
+	opacity: 0.3;
+	
+	text-align: center;
+	
+	line-height: normal;
+	
+	overflow: hidden;
+	
+	z-index: 2000;
+}
+
+.cms .ss-gridfield .gridfield-sortablerows-movepage .sortablerows-psort-arrow i {
+    display: block;
+    
+    position: relative;
+    
+    position: absolute;
+    top: 50%;
+    
+    white-space: nowrap;
+}
+
+.cms .ss-gridfield .gridfield-sortablerows-movepage .sortablerows-psort-arrow i:before {
+	display: block;
+	
+	content: " ";
+    
+    position: absolute;
+    top: -30px;
+    left: 50%;
+	
+	height: 0;
+	width: 0;
+	
+	border: solid transparent;
+	border-width: 14px;
+    border-bottom-color: #FFFFFF;
+	
+	margin-left: -8px;
+}
+
+.cms .ss-gridfield .gridfield-sortablerows-movepage .sortablerows-psort-arrow:hover {
+	opacity: 0.7;
+	
+	text-decoration: none;
+}
+
+.cms .ss-gridfield .gridfield-sortablerows-movepage .sortablerows-prev-page {
+	left: 0;
+}
+
+.cms .ss-gridfield .gridfield-sortablerows-movepage .sortablerows-prev-page i {
+    left: 20px;
+    
+    -o-transform: rotate(270deg) translateX(-50%);
+    -ms-transform: rotate(270deg) translateX(-50%);
+    -moz-transform: rotate(270deg) translateX(-50%);
+    -webkit-transform: rotate(270deg) translateX(-50%);
+    transform: rotate(270deg) translateX(-50%);
+    
+    -o-transform-origin: top left;
+    -ms-transform-origin: top left;
+    -moz-transform-origin: top left;
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+}
+
+.cms .ss-gridfield .gridfield-sortablerows-movepage .sortablerows-next-page {
+	right: 0;
+}
+
+.cms .ss-gridfield .gridfield-sortablerows-movepage .sortablerows-next-page i {
+    right: 36px;
+    
+    -moz-transform: rotate(90deg) translateX(50%);
+    -o-transform: rotate(90deg) translateX(50%);
+    -ms-transform: rotate(90deg) translateX(50%);
+    -webkit-transform: rotate(90deg) translateX(50%);
+    transform: rotate(90deg) translateX(50%);
+    
+    -o-transform-origin: bottom right;
+    -ms-transform-origin: bottom right;
+    -moz-transform-origin: bottom right;
+    -webkit-transform-origin: bottom right;
+    transform-origin: bottom right;
+}
+
 .cms table.ss-gridfield-table.dragSorting tbody tr td {
 	cursor: move;
 }
-
-.cms table.ss-gridfield-table .datagrid-pagination button.sortablerows-droptarget {
-	background-image: url(./../images/pagination-arrows-drop.gif) !important;
-}

javascript/GridFieldSortableRows.js

@@ -1,12 +1,14 @@
 (function($) {
 	$.entwine('ss', function($) {
 		$('.ss-gridfield .gridfield-sortablerows input').entwine({
+			PageSort: false,
+			
 			onmatch: function() {
 				var self=this;
 				var refCheckbox=$(this);
 				var gridField=this.getGridField();
 				var form=gridField.closest('form');
-				var pageSort=false;
+				var pageArrows=gridField.find('.gridfield-sortablerows-movepage .sortablerows-psort-arrow');
 				
 				if($(this).is(':checked')) {
 					gridField.find('table').addClass('dragSorting');
@@ -19,15 +21,26 @@
 												disabled: ($(this).is(':checked')==false),
 												helper: function(e, ui) {
 													//Maintains width of the columns
-													ui.children().each(function() {
+													ui.children().each(function(index) {
 														$(this).width($(this).width());
 													});
 													
 													return ui;
 												},
+												start: function(event, ui) {
+												    pageArrows.show();
+													pageArrows.startMoveTracking();
+												},
+												stop: function(event, ui) {
+													pageArrows.stopMoveTracking();
+													pageArrows.hide();
+												},
+												sort: function(event, ui) {
+												    pageArrows.moveTracking(event, ui);
+												},
 												update: function(event, ui) {
-													if(pageSort) {
+													if(self.getPageSort()) {
-														pageSort=false;
+														self.setPageSort(false);
 														return;
 													}
 													
@@ -61,51 +74,7 @@
 																				form.removeClass('loading');
 																			});
 												}
-											});
+											}).disableSelection();
-
-				if(refCheckbox.hasClass('gridfield-sortablerows-noselection')){
-					gridField.find('tbody').disableSelection();
-				}
-				
-				gridField.find('.datagrid-pagination .ss-gridfield-previouspage, .datagrid-pagination .ss-gridfield-nextpage').each(function() {
-																$(this).droppable({
-																			disabled: $(this).is(':disabled'),
-																			accept: 'tr.ss-gridfield-item',
-																			activeClass: 'sortablerows-droptarget',
-																			tolerance: 'pointer',
-																			drop: function(event, ui) {
-																				pageSort=true;
-																				
-																				var button=refCheckbox.parent().find('.sortablerows-sorttopage');
-																				var itemID=$(ui.draggable).data('id');
-																				var target='';
-																				
-																				
-																				if($(this).hasClass('ss-gridfield-previouspage')) {
-																					target='previouspage';
-																				}else if($(this).hasClass('ss-gridfield-nextpage')) {
-																					target='nextpage';
-																				}
-																				
-																				
-																				//Move and Reload the grid
-																				gridField.reload({data: [
-																											{
-																												name: button.attr('name'),
-																												value: button.val()
-																											},
-																											{
-																												name: 'ItemID',
-																												value: itemID
-																											},
-																											{
-																												name: 'Target',
-																												value: target
-																											}
-																										]});
-																			}
-																		});
-															});
 			},
 			
 			onchange: function(e) {
@@ -120,8 +89,7 @@
 			
 			_makeRequest: function(ajaxOpts, callback) {
 				var gridField=this.getGridField();
-				var form = gridField.closest('form'), 
+				var form = gridField.closest('form');
-					focusedElName = gridField.find(':input:focus').attr('name'); // Save focused element for restoring after refresh
 				
 				form.addClass('loading');
 				
@@ -145,5 +113,94 @@
 				}, ajaxOpts));
 			}
 		});
+		
+		$('.ss-gridfield .gridfield-sortablerows-movepage .sortablerows-psort-arrow').entwine({
+			ArrowIcon: null,
+			
+			onmatch: function() {
+				var gridField=this.getGridField();
+				var sortableCheckbox=gridField.find('.gridfield-sortablerows input');
+				var self=$(this);
+				
+				/*if($(this).hasClass('sortablerows-prev-page') && gridField.find('.ss-gridfield-previouspage').is(':disabled')) {
+					$(this).remove();
+					return;
+				}else if($(this).hasClass('sortablerows-next-page') && gridField.find('.ss-gridfield-nextpage').is(':disabled')) {
+					$(this).remove();
+					return;
+				}*/
+				
+				$(this).droppable({
+									disabled: $(this).is(':disabled'),
+									accept: 'tr.ss-gridfield-item',
+									activeClass: 'sortablerows-droptarget',
+									tolerance: 'pointer',
+									drop: function(event, ui) {
+										self.stopMoveTracking();
+										
+										sortableCheckbox.setPageSort(true);
+										sortableCheckbox.setPageArrows(null);
+										
+										var button=gridField.find('.gridfield-sortablerows .sortablerows-sorttopage');
+										var itemID=$(ui.draggable).data('id');
+										var target='';
+										
+										if($(this).hasClass('sortablerows-prev-page')) {
+											target='previouspage';
+										}else if($(this).hasClass('sortablerows-next-page')) {
+											target='nextpage';
+										}
+										
+										
+										//Move and Reload the grid
+										gridField.reload({data: [
+																	{
+																		name: button.attr('name'),
+																		value: button.val()
+																	},
+																	{
+																		name: 'ItemID',
+																		value: itemID
+																	},
+																	{
+																		name: 'Target',
+																		value: target
+																	}
+																]});
+									}
 								});
+				
+				this.redraw();
+			},
+			redraw: function() {
+				var gridField=this.getGridField();
+				var tbody=gridField.find('tbody');
+				var tbodyPos=tbody.position();
+				
+				$(this).css('top', tbodyPos.top+'px').height(tbody.height());
+			},
+			startMoveTracking: function() {
+				var self=$(this);
+				self.setArrowIcon(self.find('i'));
+			},
+			stopMoveTracking: function() {
+			    $(this).setArrowIcon(null);
+			},
+			moveTracking: function(e, ui) {
+			    var self=$(this);
+				var arrowIcon=self.getArrowIcon();
+				if(arrowIcon) {
+				    var selfOffset=self.offset().top;
+				    var arrowIconHeight=arrowIcon.width()+10;
+				    var railHeight=self.height()-arrowIconHeight;
+				    var helperPos=ui.helper.offset().top;
+				    
+				    if(helperPos>selfOffset+10 && helperPos<selfOffset+railHeight) {
+				        arrowIcon.css('top', ((helperPos-selfOffset)+arrowIconHeight/2)+'px');
+				    }
+				}
+			}
+		});
+	});
+	
 })(jQuery);

lang/en.yml

@@ -2,3 +2,5 @@ en:
   GridFieldSortableRows:
     ALLOW_DRAG_DROP: 'Allow drag and drop re-ordering'
     EditPermissionsFailure: 'No edit permissions'
+    NEXT: 'Move to Next Page'
+    PREVIOUS: 'Move to Previous Page'

templates/Includes/GridFieldSortableRows_paginator.ss

@@ -0,0 +1,7 @@
+<%-- if $Checked --%>
+	<div class="gridfield-sortablerows-movepage" colspan="$Colspan">
+		<a href="" class="sortablerows-psort-arrow sortablerows-prev-page"><i><%t GridFieldSortableRows.PREVIOUS '_Move to Previous Page' %></i></a>
+		
+		<a href="" class="sortablerows-psort-arrow sortablerows-next-page"><i><%t GridFieldSortableRows.NEXT '_Move to Next Page' %></i></a>
+	</div>
+<%-- end_if --%>