From fae85f04c134d5acfa4831aaf2b10bc1d4e40157 Mon Sep 17 00:00:00 2001 From: Ed Chipman Date: Sun, 6 Sep 2015 20:45:00 -0300 Subject: [PATCH] First pass of new page sort method issue #72 --- code/forms/GridFieldSortableRows.php | 14 +- css/GridFieldSortableRows.css | 107 +++++++++++- images/pagination-arrows-drop.gif | Bin 4079 -> 0 bytes javascript/GridFieldSortableRows.js | 159 ++++++++++++------ lang/en.yml | 2 + .../GridFieldSortableRows_paginator.ss | 7 + 6 files changed, 231 insertions(+), 58 deletions(-) delete mode 100644 images/pagination-arrows-drop.gif create mode 100644 templates/Includes/GridFieldSortableRows_paginator.ss 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 10e716df7f940c43c052c99eb202a2ca9f8dfda9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4079 zcmbVOd0bOh8jVE-u`ac()&&f~T_6bv0Td7+5f=m@idwfof zSlxNNva@&nJK7^>&bFUE*K+Fo)kiU!-6j#-1+4X!O6b1TThSO`+3`$d!gMoo;`b}vmI)`@#yHSAIdI10H5`J z()W1Nhqr|%Z=b#YWuOAVogqkmA*nGs@%fa>qV@J?a`FsK1cAEw_t7K`OY^<^*_bcQdT>Fdp8 z1^f91GZ<9+4-K9s;U@>jMRM$C!A~Ky6qzg|m`=~m&i2Xn^ASt7(3wF&K?uXw*Bd_J zEzK3lcsbr8siy-WQXox|2s30tv51Ngd5PjoSqKd>?JprcBRcvyut@4d7UYv8PN(Pa zGU!Yn20c9;)kQunmBk5O&=~Y-DK|GmK#vnh#hH>M0esxk@iOe)%MU^iLN>uM5+NK4 zFD+7>l$kCN$(BTh(BOZ3_(Fbg5GR7=%UKk_=7clYOeQnjm*dBt=jR*12?%0E_(wW0 z27A|^!HQ&XB7(x1et}FTo4F`3kj3^3U*ym9V@C!=upRF%5lLk{QIf!Mt`MGUe>d=@ z?*>Om1U#8o!WE0t914g{5zEBV6mbSMBHo{xAQbV%*-|u|{#qji5@D8r&yk4JsbqJ9 zg@c?P&iK2k``_jNKOLh(GIS)3KS{;$71SU4^SSWhhv(K2h@f92&=^CW{rg}4{NwlE z{_*QCKmYXf$0v_}`2Nwu?;hO0cen4(?OQj$y>b1UYgfO%^3~-_7cZPYclOIKKL6~~ zGpA2|a`ME-AAR^i@B7D(9euCoNOxCf$KgW<+uIJb?%!wI+tS?B*ic_rTVu7DP1WyK z87mEXT}63WX^B>&F5a`dsE|9k6RfVvm$!=vZYI+7IWB<5sShXhJ}VKm>(Pz$O`a> zQi7)R@%EZKXZEa_Gp0}Tqh2j&N}vK5VGd zD==O>ej7T>i2^8IFli`g2~eEZzXRloT}lie;f5C}-A3%zXiG{JP6a+?m`{O|q1uGM z;*^cYUiIDAsqtxRH}~kf-dEBO)Y%Tvdr$51`uN~duhVB0 zyyIpc-Z}Zs7Y9zH457GFoZ*2%@Ia@0Ifkoo<@zMBT5m9x zSXP7K`kG4pa9rJ7YsKqZiGzcq1wu41T>;VLN{qQFGLq2Z>P<}f5C~^94B2IIDxHX_`O7({KtY#rU$pj_DqbG)7FEO*G&eHJ!;9fzZVnCp~&d_>m5 z_gikU)~K46gDgu6VaZZV)3xp8Ov4lRbz#dB2eNexo`sNQcD7>{EP!l_$0)WItF;E* zR^YDF8#E?&utjIl>b79TjaD;OyHC|NaO?vn)JqNO!r0Ra&mPeQJp+lKGC=zub7BW<#yoQsRKDWaKj(On3dAkmEgwI6 z(IQm+Xcr(_kIJ{M2P>>KwW{V7Kw{lXSS6UQ-PVHb@9G)6rwDb#8dCB~!ebkuR&Vpb zT|h*H#(?SY%@ERH+6-2i%ocUSDlo^?q%qCG(yCesT^g~sL)9~Q4>-@c5`YCJ6{?kx z>x^+xQ5ubI+zc>ws4HxPE@~)N&dD@aPquh`ORvId+%B(BFBtxyyFbSVh(NZ2Vh461^D_rT1 z_fz#pVfZ4O0+2-C=%B+lCeJ##{Qq8ZjF5?nP6>ybc|!O(NIYBkV6?d z)|DKJ>*N?Tl$go=Lvj7fp}=$pERRVf)kz*KA}R_ghj1+~H9+ZzVyd*21~Zgmm9<7g z!4vdN@M>RJ*LrYp>7XzgLE4c3Qn0OG;x411aWteGp>+&}7HAzZjG%Q;7|l_p!7z$Q z!>7V9S~Yc`!X5RKMt8AW(i<9GP4ULZ17vh)N#t^a3A&uLBy>5lqy(FYEIIKdmL!dC zkB>J2iX~`CmoYGxU{}YC2Yyo^u-ZBWaLKN6K{D!U^54V5%F4Js7-` zAf}t-zWvt+-|6J_K|LJZ9)<@fEUoxqjHm9vrt=2EI^2&gOd#K$ByQw|30Kc{lcO7x h(Eu+@=#FDqEjQGZG}7f>>ZaO-UaI=mgRu7b{{g&paC-m% 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 --%>