diff --git a/code/forms/GridFieldSortableRows.php b/code/forms/GridFieldSortableRows.php index 635961c..60cbb50 100644 --- a/code/forms/GridFieldSortableRows.php +++ b/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; } /** @@ -348,7 +356,7 @@ class GridFieldSortableRows implements GridField_HTMLProvider, GridField_ActionP }else { //Find table containing the sort column $table=false; - $class=$gridField->getModelClass(); + $class=$gridField->getModelClass(); $db = Config::inst()->get($class, "db", CONFIG::UNINHERITED); if(!empty($db) && array_key_exists($sortColumn, $db)) { $table=$class; diff --git a/css/GridFieldSortableRows.css b/css/GridFieldSortableRows.css index 27ac4c8..3f433f5 100644 --- a/css/GridFieldSortableRows.css +++ b/css/GridFieldSortableRows.css @@ -14,10 +14,109 @@ display: none; } -.cms table.ss-gridfield-table.dragSorting tbody tr td { - cursor: move; +.cms .ss-gridfield { + position: relative; } -.cms table.ss-gridfield-table .datagrid-pagination button.sortablerows-droptarget { - background-image: url(./../images/pagination-arrows-drop.gif) !important; +.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; } \ No newline at end of file diff --git a/images/pagination-arrows-drop.gif b/images/pagination-arrows-drop.gif deleted file mode 100644 index 10e716d..0000000 Binary files a/images/pagination-arrows-drop.gif and /dev/null differ diff --git a/javascript/GridFieldSortableRows.js b/javascript/GridFieldSortableRows.js index adfe365..86edeab 100644 --- a/javascript/GridFieldSortableRows.js +++ b/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) { - 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 +
+ <%t GridFieldSortableRows.PREVIOUS '_Move to Previous Page' %> + + <%t GridFieldSortableRows.NEXT '_Move to Next Page' %> +
+<%-- end_if --%>