datatables.net-colreorder
Version:
ColReorder for DataTables
4 lines • 11.6 kB
JavaScript
/*! ColReorder 3.0.0 for DataTables
* Copyright (c) SpryMedia Ltd - datatables.net/license
*/
import DataTable,{util,Dom,Api}from"datatables.net";function arrayMove(e,t,r,o){var s=e.splice(t,r);s.unshift(0),s.unshift(o<t?o:o-r+1),e.splice.apply(e,s)}function finalise(e){e.rows().invalidate("data"),e.column(0).visible(e.column(0).visible()),e.columns.adjust();var t=e.colReorder.order();e.trigger("columns-reordered",[{order:t,mapping:invertKeyValues(t)}])}function getOrder(e){return e.settings()[0].columns.map(function(e){return e._crOriginalIdx})}function headerUpdate(t,r,o,s){var n=[];for(let e=0;e<t.length;e++){var i=t[e];arrayMove(i,o[0],o.length,s);for(let e=0;e<i.length;e++){var l,a=i[e].cell;n.includes(a)||(l=a.getAttribute("data-dt-column").split(",").map(function(e){return r[e]}).join(","),a.setAttribute("data-dt-column",l),n.push(a))}}}function init(e){e.columns().iterator("column",function(e,t){e=e.columns;void 0===e[t]._crOriginalIdx&&(e[t]._crOriginalIdx=t)})}function invertKeyValues(t){var r=[];for(let e=0;e<t.length;e++)r[t[e]]=e;return r}function transposeArray(t,r){for(let e=0;e<t.length;e++)t[e]=r[t[e]];return t.sort(),t}function move(e,t,r){let s,n,i=e.settings()[0];var l=i.columns,a=l.map(function(e,t){return t});if(!t.includes(r)){arrayMove(a,t[0],t.length,r);let o=invertKeyValues(a);for(arrayMove(l,t[0],t.length,r),s=0;s<i.data.length;s++){var d=i.data[s];if(d){var c=d.cells;if(c)for(arrayMove(c,t[0],t.length,r),n=0;n<c.length;n++)d.tr&&c[n]&&l[n].visible&&d.tr.appendChild(c[n]),c[n]&&c[n]._DT_CellIndex&&(c[n]._DT_CellIndex.column=n)}}for(s=0;s<l.length;s++){var u=l[s];transposeArray(u.orderData,o),u.idx=o[u.idx],u.visible&&i.colgroup.append(u.colEl)}headerUpdate(i.header,o,t,r),headerUpdate(i.footer,o,t,r),util.object.each(i.searches,(e,t)=>{var r=transposeArray(t.columns,o);"*"!==e&&(i.searches[r.join(",")+"-transposed"]=t,delete i.searches[e])}),util.object.each(i.searches,(e,t)=>{e.includes("-transposed")&&(i.searches[e.replace("-transposed","")]=t,delete i.searches[e])}),util.object.each(i.searchesFixed,(e,t)=>{util.object.each(i.searchesFixed[e],(e,t)=>{transposeArray(t.columns,o)}),"*"!==e&&(i.searchesFixed[e+"-transposed"]=i.searchesFixed[e],delete i.searchesFixed[e])}),util.object.each(i.searchesFixed,(e,t)=>{var r;e.includes("-transposed")&&(r=t[Object.keys(t)[0]],i.searchesFixed[r.columns.join(",")]=t,delete i.searchesFixed[e])}),orderingIndexes(o,i.order),Array.isArray(i.orderFixed)?orderingIndexes(o,i.orderFixed):(i.orderFixed.pre||i.orderFixed.post)&&orderingIndexes(o,i.orderFixed.pre),i.lastOrder.forEach(function(e){e.src=o[e.src]}),e.trigger("column-reorder",[e.settings()[0],{from:t,to:r,mapping:o}])}}function orderingIndexes(t,r){if(r)for(let e=0;e<r.length;e++){var o=r[e];"number"==typeof o?r[e]=t[o]:util.is.plainObject(o)&&void 0!==o.idx?o.idx=t[o.idx]:Array.isArray(o)&&"number"==typeof o[0]&&(o[0]=t[o[0]])}}function setOrder(e,t,r){let o=!1,s;if(t.length!==e.columns().count())e.error("ColReorder - column count mismatch");else{var n=invertKeyValues(t=r?transpose(e,t,"toCurrent"):t);for(s=0;s<n.length;s++){var i=n.indexOf(s);s!==i&&(arrayMove(n,i,1,s),move(e,[i],s),o=!0)}o&&finalise(e)}}function structureFill(e){var s=[];for(let o=0;o<e.length;o++){s.push([]);for(let r=0;r<e[o].length;r++){var n=e[o][r];if(n)for(let t=0;t<n.rowspan;t++){s[o+t]||(s[o+t]=[]);for(let e=0;e<n.colspan;e++)s[o+t][r+e]=n.cell}}}return s}function transpose(e,t,r){var o=e.colReorder.order(),s=e.settings()[0].columns;return"toCurrent"===r||"fromOriginal"===r?Array.isArray(t)?t.map(function(e){return o.indexOf(e)}):o.indexOf(t):Array.isArray(t)?t.map(function(e){return s[e]._crOriginalIdx}):s[t]._crOriginalIdx}function validateMove(e,t,r){var o=e.columns().count();return!(t[0]<r&&r<t[t.length]||t[0]<0&&t[t.length-1]>o||r<0&&o<r||!t.includes(r)&&(!validateStructureMove(e.table().header.structure(),t,r)||!validateStructureMove(e.table().footer.structure(),t,r)))}function validateStructureMove(e,t,r){var o=structureFill(e);let s;for(s=0;s<o.length;s++)arrayMove(o[s],t[0],t.length,r);for(s=0;s<o.length;s++){var n=[];for(let e=0;e<o[s].length;e++){var i=o[s][e];if(n.includes(i)){if(n[n.length-1]!==i)return!1}else n.push(i)}}return!0}if(!DataTable.versionCheck("3"))throw"Warning: ColReorder requires DataTables 3 or newer";class ColReorder{disable(){return this.c.enable=!1,this}enable(e=!0){return!1===e?this.disable():(this.c.enable=!0,this)}constructor(o,t){this.dom={drag:null},this.c={columns:null,enable:null,headerRows:null,order:null},this.s={dropZones:[],mouse:{absLeft:-1,offset:{x:-1,y:-1},start:{x:-1,y:-1},target:null,targets:[]},scrollInterval:null};var r=o.settings()[0];if(!r._colReorder){(o.settings()[0]._colReorder=this).dt=o,util.object.assign(this.c,ColReorder.defaults,t),init(o),o.on("stateSaveParams",function(e,t,r){r.colReorder=getOrder(o)}),o.on("destroy",function(){o.off(".colReorder"),o.colReorder.reset()});r=o.state.loaded();let e=this.c.order;(e=r&&r.colReorder&&o.columns().count()===r.colReorder.length?r.colReorder:e)&&o.ready(function(){setOrder(o,e,!0)}),o.table().header.structure().forEach((t,r)=>{var o=this.c.headerRows;for(let e=0;e<t.length;e++)o&&!o.includes(r)||t[e]&&t[e].cell&&this._addListener(t[e].cell)})}}_addListener(e){let r=this;Dom.s(e).on("selectstart.colReorder",function(){return!1}).on("mousedown.colReorder touchstart.colReorder",function(e){var t;"mousedown"===e.type&&1!==e.which||!r.c.enable||(t=Dom.s(this).find("button.dtcc-button_reorder")).count()&&e.target!==t.get(0)&&0===t.find(e.target).count()||r._mouseDown(e,this)})}_createDragNode(){var e=this.s.mouse.target,t=e.parent(),r=t.parent(),o=r.parent(),s=e.clone();this.dom.drag=Dom.s(o.get(0).cloneNode(!1)).classAdd("dtcr-cloned").append(Dom.s(r.get(0).cloneNode(!1)).append(Dom.s(t.get(0).cloneNode(!1)).append(s.get(0)))).css({position:"absolute",top:"0",left:"0",width:e.width("outer")+"px",height:e.height("outer")+"px"}).appendTo("body")}_cursorPosition(e,t){return(-1!==e.type.indexOf("touch")?e.originalEvent.touches[0]:e)[t]}_mouseDown(e,t){var r=Dom.s(e.target).closest("th, td"),o=r.offset(),s=this.dt.columns(this.c.columns).indexes().toArray(),n=Dom.s(t).attr("data-dt-column").split(",").map(function(e){return parseInt(e,10)});for(let e=0;e<n.length;e++)if(!s.includes(n[e]))return!1;this.s.mouse.start.x=this._cursorPosition(e,"pageX"),this.s.mouse.start.y=this._cursorPosition(e,"pageY"),this.s.mouse.offset.x=this._cursorPosition(e,"pageX")-o.left,this.s.mouse.offset.y=this._cursorPosition(e,"pageY")-o.top,this.s.mouse.target=r,this.s.mouse.targets=n;for(let t=0;t<n.length;t++){var i=Dom.s(this.dt.cells(null,n[t],{page:"current"}).nodes().toArray());let e="dtcr-moving";0===t&&(e+=" dtcr-moving-first"),t===n.length-1&&(e+=" dtcr-moving-last"),i.classAdd(e)}this._regions(n),this._scrollRegions(),Dom.s(document).on("mousemove.colReorder touchmove.colReorder",e=>{this._mouseMove(e)}).on("mouseup.colReorder touchend.colReorder",e=>{this._mouseUp(e)})}_mouseMove(e){if(null===this.dom.drag){if(Math.pow(Math.pow(this._cursorPosition(e,"pageX")-this.s.mouse.start.x,2)+Math.pow(this._cursorPosition(e,"pageY")-this.s.mouse.start.y,2),.5)<5)return;Dom.s(document.body).classAdd("dtcr-dragging"),this._createDragNode()}this.dom.drag.css({left:this._cursorPosition(e,"pageX")-this.s.mouse.offset.x,top:this._cursorPosition(e,"pageY")-this.s.mouse.offset.y});var t=this.dt.table().node(),r=Dom.s(t).offset().left,r=this._cursorPosition(e,"pageX")-r;let o;o=this._isRtl()?t.clientWidth-r:r;t=this.s.dropZones.find(function(e){return e.inlineStart<=o&&o<=e.inlineStart+e.width});this.s.mouse.absLeft=this._cursorPosition(e,"pageX"),t&&!t.self&&this._move(t,o)}_mouseUp(e){Dom.s(document).off(".colReorder"),Dom.s(document.body).classRemove("dtcr-dragging"),this.dom.drag&&(this.dom.drag.remove(),this.dom.drag=null,this.s.mouse.target.on("click.dtcr",function(e){return!1}),setTimeout(()=>{this.s.mouse.target.off(".dtcr")},10)),this.s.scrollInterval&&clearInterval(this.s.scrollInterval),Dom.s(this.dt.cells(".dtcr-moving").nodes().toArray()).classRemove("dtcr-moving dtcr-moving-first dtcr-moving-last")}_move(e,t){let r=this,o=(this.dt.colReorder.move(this.s.mouse.targets,e.colIdx),this.s.mouse.targets=this.s.mouse.target.attr("data-dt-column").split(",").map(function(e){return parseInt(e,10)}),this._regions(this.s.mouse.targets),this.s.mouse.targets.filter(function(e){return r.dt.column(e).visible()})),s=this.s.dropZones.find(function(e){return e.colIdx===o[0]});var n,i,e=this.s.dropZones.indexOf(s);s.inlineStart>t&&(i=s.inlineStart-t,n=this.s.dropZones[e-1],s.inlineStart-=i,s.width+=i,n)&&(n.width-=i),(s=this.s.dropZones.find(function(e){return e.colIdx===o[o.length-1]})).inlineStart+s.width<t&&(n=t-(s.inlineStart+s.width),i=this.s.dropZones[e+1],s.width+=n,i)&&(i.inlineStart+=n,i.width-=n)}_regions(s){let n=this,i=[],l=0,a=0,d=this.dt.columns(this.c.columns).indexes().toArray(),c=this.dt.columns().widths();this.dt.columns().every(function(e,t,r){var o;this.visible()&&(o=c[e],d.includes(e)&&(validateMove(n.dt,s,e)?i.push({colIdx:e,inlineStart:l-a,self:s[0]<=e&&e<=s[s.length-1],width:o+a}):e<s[0]?i.length&&(i[i.length-1].width+=o):e>s[s.length-1]&&(a+=o)),l+=o)}),this.s.dropZones=i}_isScrolling(){return this.dt.table().body().parentNode!==this.dt.table().header().parentNode}_scrollRegions(){if(this._isScrolling()){let t=this,r=Dom.s(this.dt.table().container()).offset().left,o=Dom.s(this.dt.table().container()).width("outer"),s=this.dt.table().body().parentElement.parentElement;this.s.scrollInterval=setInterval(function(){var e=t.s.mouse.absLeft;-1!==e&&(e<r+75&&s.scrollLeft?s.scrollLeft-=5:e>r+o-75&&s.scrollLeft<s.scrollWidth&&(s.scrollLeft+=5))},25)}}_isRtl(){return"rtl"===Dom.s(this.dt.table().node()).css("direction")}}ColReorder.defaults={columns:"",enable:!0,headerRows:null,order:null},ColReorder.version="3.0.0",Api.register("colReorder.enable()",function(t){return this.iterator("table",function(e){e._colReorder&&e._colReorder.enable(t)})}),Api.register("colReorder.disable()",function(){return this.iterator("table",function(e){e._colReorder&&e._colReorder.disable()})}),Api.register("colReorder.move()",function(e,t){return init(this),validateMove(this,e=Array.isArray(e)?e:[e],t)?this.tables().every(function(){move(this,e,t),finalise(this)}):(this.error("ColReorder - invalid move"),this)}),Api.register("colReorder.order()",function(e,t){return init(this),e?this.tables().every(function(){setOrder(this,e,t)}):this.context.length?getOrder(this):null}),Api.register("colReorder.reset()",function(){return init(this),this.tables().every(function(){var e=this.columns().every(function(e){return e}).flatten().toArray();setOrder(this,e,!0)})}),Api.register("colReorder.transpose()",function(e,t){return init(this),transpose(this,e,t=t||"toCurrent")}),DataTable.ColReorder=ColReorder,Dom.s(document).on("stateLoadInit.dt",function(e,t,r){if("dt"===e.namespace){e=new Api(t);if(r.colReorder&&e.columns().count()===r.colReorder.length)if(e.ready())setOrder(e,r.colReorder,!0);else if(orderingIndexes(r.colReorder,r.order),r.columns){for(let e=0;e<r.columns.length;e++)r.columns[e]._cr_sort=r.colReorder[e];r.columns.sort(function(e,t){return e._cr_sort-t._cr_sort})}}}),Dom.s(document).on("preInit.dt",function(e,t){var r,o;"dt"===e.namespace&&(e=t.init.colReorder,o=DataTable.defaults.colReorder,e||o)&&(r={},util.is.plainObject(o)&&util.object.assign(r,o),util.is.plainObject(e)&&util.object.assign(r,e),!1!==e)&&(o=new DataTable.Api(t),new ColReorder(o,r))});export default DataTable;