tonyair/sortablegridfield
1
0
Fork 0
mirror of https://github.com/UndefinedOffset/SortableGridField.git synced 2024-10-22 17:05:38 +02:00
Code Issues Projects Releases Wiki Activity

First pass of new page sort method issue #72

Browse Source
This commit is contained in:
Ed Chipman 2015-09-06 20:45:00 -03:00
parent 282ea74a76
commit fae85f04c1
6 changed files with 231 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
code/forms/GridFieldSortableRows.php
View File

@ -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;
}
/**

107
css/GridFieldSortableRows.css
View File

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

BIN
images/pagination-arrows-drop.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

159
javascript/GridFieldSortableRows.js
View File

@ -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) {
pageSort=false;
if(self.getPageSort()) {
self.setPageSort(false);
return;
}
@ -61,51 +74,7 @@
form.removeClass('loading');
});
}
});
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
}
]});
}
});
});
}).disableSelection();
},
onchange: function(e) {
@ -120,8 +89,7 @@
_makeRequest: function(ajaxOpts, callback) {
var gridField=this.getGridField();
var form = gridField.closest('form'),
focusedElName = gridField.find(':input:focus').attr('name'); // Save focused element for restoring after refresh
var form = gridField.closest('form');
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);

2
lang/en.yml
View File

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

7
templates/Includes/GridFieldSortableRows_paginator.ss Normal file
View File

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