From 23ea67d9374ace0d3991e399e61f925860581eb4 Mon Sep 17 00:00:00 2001 From: Henning Jacobs Date: Wed, 21 Jul 2021 15:12:52 +0200 Subject: [PATCH 1/2] changes running grunt with latest version v0.4.5 --- js/sortable.js | 13 ++++++++----- js/sortable.min.js | 2 +- package.json | 12 ++++++------ 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/js/sortable.js b/js/sortable.js index cb3e293..35be5db 100644 --- a/js/sortable.js +++ b/js/sortable.js @@ -59,15 +59,18 @@ return table; }, setupClickableTH: function(table, th, i) { - var eventName, onClick, type, _i, _len, _results; + var eventHandled, eventName, onClick, type, _i, _len, _results; type = sortable.getColumnType(table, i); + eventHandled = false; onClick = function(e) { var compare, item, newSortedDirection, position, row, rowArray, sorted, sortedDirection, tBody, ths, value, _compare, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _m, _ref, _ref1; - if (e.handled !== true) { - e.handled = true; - } else { - return false; + if (eventHandled) { + return; } + eventHandled = true; + setTimeout(function() { + return eventHandled = false; + }, 0); sorted = this.getAttribute('data-sorted') === 'true'; sortedDirection = this.getAttribute('data-sorted-direction'); if (sorted) { diff --git a/js/sortable.min.js b/js/sortable.min.js index 8278f50..f670c1a 100644 --- a/js/sortable.min.js +++ b/js/sortable.min.js @@ -1,2 +1,2 @@ /*! sortable.js 0.8.0 */ -(function(){var a,b,c,d,e,f,g;a="table[data-sortable]",d=/^-?[£$¤]?[\d,.]+%?$/,g=/^\s+|\s+$/g,c=["click"],f="ontouchstart"in document.documentElement,f&&c.push("touchstart"),b=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent("on"+b,c)},e={init:function(b){var c,d,f,g,h;for(null==b&&(b={}),null==b.selector&&(b.selector=a),d=document.querySelectorAll(b.selector),h=[],f=0,g=d.length;g>f;f++)c=d[f],h.push(e.initTable(c));return h},initTable:function(a){var b,c,d,f,g,h;if(1===(null!=(h=a.tHead)?h.rows.length:void 0)&&"true"!==a.getAttribute("data-sortable-initialized")){for(a.setAttribute("data-sortable-initialized","true"),d=a.querySelectorAll("th"),b=f=0,g=d.length;g>f;b=++f)c=d[b],"false"!==c.getAttribute("data-sortable")&&e.setupClickableTH(a,c,b);return a}},setupClickableTH:function(a,d,f){var g,h,i,j,k,l;for(i=e.getColumnType(a,f),h=function(b){var c,g,h,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D;if(b.handled===!0)return!1;for(b.handled=!0,m="true"===this.getAttribute("data-sorted"),n=this.getAttribute("data-sorted-direction"),h=m?"ascending"===n?"descending":"ascending":i.defaultSortDirection,p=this.parentNode.querySelectorAll("th"),s=0,w=p.length;w>s;s++)d=p[s],d.setAttribute("data-sorted","false"),d.removeAttribute("data-sorted-direction");if(this.setAttribute("data-sorted","true"),this.setAttribute("data-sorted-direction",h),o=a.tBodies[0],l=[],m){for(D=o.rows,v=0,z=D.length;z>v;v++)g=D[v],l.push(g);for(l.reverse(),B=0,A=l.length;A>B;B++)k=l[B],o.appendChild(k)}else{for(r=null!=i.compare?i.compare:function(a,b){return b-a},c=function(a,b){return a[0]===b[0]?a[2]-b[2]:i.reverse?r(b[0],a[0]):r(a[0],b[0])},C=o.rows,j=t=0,x=C.length;x>t;j=++t)k=C[j],q=e.getNodeValue(k.cells[f]),null!=i.comparator&&(q=i.comparator(q)),l.push([q,k,j]);for(l.sort(c),u=0,y=l.length;y>u;u++)k=l[u],o.appendChild(k[1])}return"function"==typeof window.CustomEvent&&"function"==typeof a.dispatchEvent?a.dispatchEvent(new CustomEvent("Sortable.sorted",{bubbles:!0})):void 0},l=[],j=0,k=c.length;k>j;j++)g=c[j],l.push(b(d,g,h));return l},getColumnType:function(a,b){var c,d,f,g,h,i,j,k,l,m,n;if(d=null!=(l=a.querySelectorAll("th")[b])?l.getAttribute("data-sortable-type"):void 0,null!=d)return e.typesObject[d];for(m=a.tBodies[0].rows,h=0,j=m.length;j>h;h++)for(c=m[h],f=e.getNodeValue(c.cells[b]),n=e.types,i=0,k=n.length;k>i;i++)if(g=n[i],g.match(f))return g;return e.typesObject.alpha},getNodeValue:function(a){var b;return a?(b=a.getAttribute("data-value"),null!==b?b:"undefined"!=typeof a.innerText?a.innerText.replace(g,""):a.textContent.replace(g,"")):""},setupTypes:function(a){var b,c,d,f;for(e.types=a,e.typesObject={},f=[],c=0,d=a.length;d>c;c++)b=a[c],f.push(e.typesObject[b.name]=b);return f}},e.setupTypes([{name:"numeric",defaultSortDirection:"descending",match:function(a){return a.match(d)},comparator:function(a){return parseFloat(a.replace(/[^0-9.-]/g,""),10)||0}},{name:"date",defaultSortDirection:"ascending",reverse:!0,match:function(a){return!isNaN(Date.parse(a))},comparator:function(a){return Date.parse(a)||0}},{name:"alpha",defaultSortDirection:"ascending",match:function(){return!0},compare:function(a,b){return a.localeCompare(b)}}]),setTimeout(e.init,0),"function"==typeof define&&define.amd?define(function(){return e}):"undefined"!=typeof exports?module.exports=e:window.Sortable=e}).call(this); \ No newline at end of file +(function(){var a,b,c,d,e,f,g;a="table[data-sortable]",d=/^-?[£$¤]?[\d,.]+%?$/,g=/^\s+|\s+$/g,c=["click"],f="ontouchstart"in document.documentElement,f&&c.push("touchstart"),b=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent("on"+b,c)},e={init:function(b){var c,d,f,g,h;for(null==b&&(b={}),null==b.selector&&(b.selector=a),d=document.querySelectorAll(b.selector),h=[],f=0,g=d.length;g>f;f++)c=d[f],h.push(e.initTable(c));return h},initTable:function(a){var b,c,d,f,g,h;if(1===(null!=(h=a.tHead)?h.rows.length:void 0)&&"true"!==a.getAttribute("data-sortable-initialized")){for(a.setAttribute("data-sortable-initialized","true"),d=a.querySelectorAll("th"),b=f=0,g=d.length;g>f;b=++f)c=d[b],"false"!==c.getAttribute("data-sortable")&&e.setupClickableTH(a,c,b);return a}},setupClickableTH:function(a,d,f){var g,h,i,j,k,l,m;for(j=e.getColumnType(a,f),g=!1,i=function(b){var c,h,i,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E;if(!g){for(g=!0,setTimeout(function(){return g=!1},0),n="true"===this.getAttribute("data-sorted"),o=this.getAttribute("data-sorted-direction"),i=n?"ascending"===o?"descending":"ascending":j.defaultSortDirection,q=this.parentNode.querySelectorAll("th"),t=0,x=q.length;x>t;t++)d=q[t],d.setAttribute("data-sorted","false"),d.removeAttribute("data-sorted-direction");if(this.setAttribute("data-sorted","true"),this.setAttribute("data-sorted-direction",i),p=a.tBodies[0],m=[],n){for(E=p.rows,w=0,A=E.length;A>w;w++)h=E[w],m.push(h);for(m.reverse(),C=0,B=m.length;B>C;C++)l=m[C],p.appendChild(l)}else{for(s=null!=j.compare?j.compare:function(a,b){return b-a},c=function(a,b){return a[0]===b[0]?a[2]-b[2]:j.reverse?s(b[0],a[0]):s(a[0],b[0])},D=p.rows,k=u=0,y=D.length;y>u;k=++u)l=D[k],r=e.getNodeValue(l.cells[f]),null!=j.comparator&&(r=j.comparator(r)),m.push([r,l,k]);for(m.sort(c),v=0,z=m.length;z>v;v++)l=m[v],p.appendChild(l[1])}return"function"==typeof window.CustomEvent&&"function"==typeof a.dispatchEvent?a.dispatchEvent(new CustomEvent("Sortable.sorted",{bubbles:!0})):void 0}},m=[],k=0,l=c.length;l>k;k++)h=c[k],m.push(b(d,h,i));return m},getColumnType:function(a,b){var c,d,f,g,h,i,j,k,l,m,n;if(d=null!=(l=a.querySelectorAll("th")[b])?l.getAttribute("data-sortable-type"):void 0,null!=d)return e.typesObject[d];for(m=a.tBodies[0].rows,h=0,j=m.length;j>h;h++)for(c=m[h],f=e.getNodeValue(c.cells[b]),n=e.types,i=0,k=n.length;k>i;i++)if(g=n[i],g.match(f))return g;return e.typesObject.alpha},getNodeValue:function(a){var b;return a?(b=a.getAttribute("data-value"),null!==b?b:"undefined"!=typeof a.innerText?a.innerText.replace(g,""):a.textContent.replace(g,"")):""},setupTypes:function(a){var b,c,d,f;for(e.types=a,e.typesObject={},f=[],c=0,d=a.length;d>c;c++)b=a[c],f.push(e.typesObject[b.name]=b);return f}},e.setupTypes([{name:"numeric",defaultSortDirection:"descending",match:function(a){return a.match(d)},comparator:function(a){return parseFloat(a.replace(/[^0-9.-]/g,""),10)||0}},{name:"date",defaultSortDirection:"ascending",reverse:!0,match:function(a){return!isNaN(Date.parse(a))},comparator:function(a){return Date.parse(a)||0}},{name:"alpha",defaultSortDirection:"ascending",match:function(){return!0},compare:function(a,b){return a.localeCompare(b)}}]),setTimeout(e.init,0),"function"==typeof define&&define.amd?define(function(){return e}):"undefined"!=typeof exports?module.exports=e:window.Sortable=e}).call(this); \ No newline at end of file diff --git a/package.json b/package.json index 453fc89..9051ce2 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,12 @@ "author": "Adam Schwartz ", "license": "MIT", "devDependencies": { - "grunt-contrib-coffee": "~0.7.0", "coffee-script": "~1.6.3", - "grunt-contrib-uglify": "~0.2.4", + "grunt": "^0.4.5", "grunt-cli": "~0.1.9", - "grunt": "~0.4.1", - "grunt-contrib-watch": "~0.5.3", - "grunt-contrib-compass": "~0.5.0" + "grunt-contrib-coffee": "^0.7.0", + "grunt-contrib-compass": "^0.5.0", + "grunt-contrib-uglify": "^0.2.7", + "grunt-contrib-watch": "^0.5.3" } -} \ No newline at end of file +} From de7dae93ccbdfa78095e82122ba094436814884b Mon Sep 17 00:00:00 2001 From: Henning Jacobs Date: Wed, 21 Jul 2021 15:17:30 +0200 Subject: [PATCH 2/2] use document fragment to increase performance for large tables --- coffee/sortable.coffee | 12 ++++++++++-- js/sortable.js | 10 +++++++--- js/sortable.min.js | 2 +- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/coffee/sortable.coffee b/coffee/sortable.coffee index c8bca86..513b288 100644 --- a/coffee/sortable.coffee +++ b/coffee/sortable.coffee @@ -91,11 +91,19 @@ sortable = rowArray.push [value, row, position] rowArray.sort compare - tBody.appendChild row[1] for row in rowArray + # use document fragment for performance + # when sorting large tables (avoid recalculating styles) + fragment = document.createDocumentFragment() + fragment.appendChild row[1] for row in rowArray + tBody.appendChild fragment else rowArray.push item for item in tBody.rows rowArray.reverse() - tBody.appendChild row for row in rowArray + # use document fragment for performance + # when sorting large tables (avoid recalculating styles) + fragment = document.createDocumentFragment() + fragment.appendChild row for row in rowArray + tBody.appendChild fragment if typeof window['CustomEvent'] is 'function' table.dispatchEvent?(new CustomEvent 'Sortable.sorted', { bubbles: true }) diff --git a/js/sortable.js b/js/sortable.js index 35be5db..92d9e52 100644 --- a/js/sortable.js +++ b/js/sortable.js @@ -63,7 +63,7 @@ type = sortable.getColumnType(table, i); eventHandled = false; onClick = function(e) { - var compare, item, newSortedDirection, position, row, rowArray, sorted, sortedDirection, tBody, ths, value, _compare, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _m, _ref, _ref1; + var compare, fragment, item, newSortedDirection, position, row, rowArray, sorted, sortedDirection, tBody, ths, value, _compare, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _m, _ref, _ref1; if (eventHandled) { return; } @@ -116,10 +116,12 @@ rowArray.push([value, row, position]); } rowArray.sort(compare); + fragment = document.createDocumentFragment(); for (_k = 0, _len2 = rowArray.length; _k < _len2; _k++) { row = rowArray[_k]; - tBody.appendChild(row[1]); + fragment.appendChild(row[1]); } + tBody.appendChild(fragment); } else { _ref1 = tBody.rows; for (_l = 0, _len3 = _ref1.length; _l < _len3; _l++) { @@ -127,10 +129,12 @@ rowArray.push(item); } rowArray.reverse(); + fragment = document.createDocumentFragment(); for (_m = 0, _len4 = rowArray.length; _m < _len4; _m++) { row = rowArray[_m]; - tBody.appendChild(row); + fragment.appendChild(row); } + tBody.appendChild(fragment); } if (typeof window['CustomEvent'] === 'function') { return typeof table.dispatchEvent === "function" ? table.dispatchEvent(new CustomEvent('Sortable.sorted', { diff --git a/js/sortable.min.js b/js/sortable.min.js index f670c1a..8a73359 100644 --- a/js/sortable.min.js +++ b/js/sortable.min.js @@ -1,2 +1,2 @@ /*! sortable.js 0.8.0 */ -(function(){var a,b,c,d,e,f,g;a="table[data-sortable]",d=/^-?[£$¤]?[\d,.]+%?$/,g=/^\s+|\s+$/g,c=["click"],f="ontouchstart"in document.documentElement,f&&c.push("touchstart"),b=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent("on"+b,c)},e={init:function(b){var c,d,f,g,h;for(null==b&&(b={}),null==b.selector&&(b.selector=a),d=document.querySelectorAll(b.selector),h=[],f=0,g=d.length;g>f;f++)c=d[f],h.push(e.initTable(c));return h},initTable:function(a){var b,c,d,f,g,h;if(1===(null!=(h=a.tHead)?h.rows.length:void 0)&&"true"!==a.getAttribute("data-sortable-initialized")){for(a.setAttribute("data-sortable-initialized","true"),d=a.querySelectorAll("th"),b=f=0,g=d.length;g>f;b=++f)c=d[b],"false"!==c.getAttribute("data-sortable")&&e.setupClickableTH(a,c,b);return a}},setupClickableTH:function(a,d,f){var g,h,i,j,k,l,m;for(j=e.getColumnType(a,f),g=!1,i=function(b){var c,h,i,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E;if(!g){for(g=!0,setTimeout(function(){return g=!1},0),n="true"===this.getAttribute("data-sorted"),o=this.getAttribute("data-sorted-direction"),i=n?"ascending"===o?"descending":"ascending":j.defaultSortDirection,q=this.parentNode.querySelectorAll("th"),t=0,x=q.length;x>t;t++)d=q[t],d.setAttribute("data-sorted","false"),d.removeAttribute("data-sorted-direction");if(this.setAttribute("data-sorted","true"),this.setAttribute("data-sorted-direction",i),p=a.tBodies[0],m=[],n){for(E=p.rows,w=0,A=E.length;A>w;w++)h=E[w],m.push(h);for(m.reverse(),C=0,B=m.length;B>C;C++)l=m[C],p.appendChild(l)}else{for(s=null!=j.compare?j.compare:function(a,b){return b-a},c=function(a,b){return a[0]===b[0]?a[2]-b[2]:j.reverse?s(b[0],a[0]):s(a[0],b[0])},D=p.rows,k=u=0,y=D.length;y>u;k=++u)l=D[k],r=e.getNodeValue(l.cells[f]),null!=j.comparator&&(r=j.comparator(r)),m.push([r,l,k]);for(m.sort(c),v=0,z=m.length;z>v;v++)l=m[v],p.appendChild(l[1])}return"function"==typeof window.CustomEvent&&"function"==typeof a.dispatchEvent?a.dispatchEvent(new CustomEvent("Sortable.sorted",{bubbles:!0})):void 0}},m=[],k=0,l=c.length;l>k;k++)h=c[k],m.push(b(d,h,i));return m},getColumnType:function(a,b){var c,d,f,g,h,i,j,k,l,m,n;if(d=null!=(l=a.querySelectorAll("th")[b])?l.getAttribute("data-sortable-type"):void 0,null!=d)return e.typesObject[d];for(m=a.tBodies[0].rows,h=0,j=m.length;j>h;h++)for(c=m[h],f=e.getNodeValue(c.cells[b]),n=e.types,i=0,k=n.length;k>i;i++)if(g=n[i],g.match(f))return g;return e.typesObject.alpha},getNodeValue:function(a){var b;return a?(b=a.getAttribute("data-value"),null!==b?b:"undefined"!=typeof a.innerText?a.innerText.replace(g,""):a.textContent.replace(g,"")):""},setupTypes:function(a){var b,c,d,f;for(e.types=a,e.typesObject={},f=[],c=0,d=a.length;d>c;c++)b=a[c],f.push(e.typesObject[b.name]=b);return f}},e.setupTypes([{name:"numeric",defaultSortDirection:"descending",match:function(a){return a.match(d)},comparator:function(a){return parseFloat(a.replace(/[^0-9.-]/g,""),10)||0}},{name:"date",defaultSortDirection:"ascending",reverse:!0,match:function(a){return!isNaN(Date.parse(a))},comparator:function(a){return Date.parse(a)||0}},{name:"alpha",defaultSortDirection:"ascending",match:function(){return!0},compare:function(a,b){return a.localeCompare(b)}}]),setTimeout(e.init,0),"function"==typeof define&&define.amd?define(function(){return e}):"undefined"!=typeof exports?module.exports=e:window.Sortable=e}).call(this); \ No newline at end of file +(function(){var a,b,c,d,e,f,g;a="table[data-sortable]",d=/^-?[£$¤]?[\d,.]+%?$/,g=/^\s+|\s+$/g,c=["click"],f="ontouchstart"in document.documentElement,f&&c.push("touchstart"),b=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent("on"+b,c)},e={init:function(b){var c,d,f,g,h;for(null==b&&(b={}),null==b.selector&&(b.selector=a),d=document.querySelectorAll(b.selector),h=[],f=0,g=d.length;g>f;f++)c=d[f],h.push(e.initTable(c));return h},initTable:function(a){var b,c,d,f,g,h;if(1===(null!=(h=a.tHead)?h.rows.length:void 0)&&"true"!==a.getAttribute("data-sortable-initialized")){for(a.setAttribute("data-sortable-initialized","true"),d=a.querySelectorAll("th"),b=f=0,g=d.length;g>f;b=++f)c=d[b],"false"!==c.getAttribute("data-sortable")&&e.setupClickableTH(a,c,b);return a}},setupClickableTH:function(a,d,f){var g,h,i,j,k,l,m;for(j=e.getColumnType(a,f),g=!1,i=function(b){var c,h,i,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F;if(!g){for(g=!0,setTimeout(function(){return g=!1},0),o="true"===this.getAttribute("data-sorted"),p=this.getAttribute("data-sorted-direction"),k=o?"ascending"===p?"descending":"ascending":j.defaultSortDirection,r=this.parentNode.querySelectorAll("th"),u=0,y=r.length;y>u;u++)d=r[u],d.setAttribute("data-sorted","false"),d.removeAttribute("data-sorted-direction");if(this.setAttribute("data-sorted","true"),this.setAttribute("data-sorted-direction",k),q=a.tBodies[0],n=[],o){for(F=q.rows,x=0,B=F.length;B>x;x++)i=F[x],n.push(i);for(n.reverse(),h=document.createDocumentFragment(),D=0,C=n.length;C>D;D++)m=n[D],h.appendChild(m);q.appendChild(h)}else{for(t=null!=j.compare?j.compare:function(a,b){return b-a},c=function(a,b){return a[0]===b[0]?a[2]-b[2]:j.reverse?t(b[0],a[0]):t(a[0],b[0])},E=q.rows,l=v=0,z=E.length;z>v;l=++v)m=E[l],s=e.getNodeValue(m.cells[f]),null!=j.comparator&&(s=j.comparator(s)),n.push([s,m,l]);for(n.sort(c),h=document.createDocumentFragment(),w=0,A=n.length;A>w;w++)m=n[w],h.appendChild(m[1]);q.appendChild(h)}return"function"==typeof window.CustomEvent&&"function"==typeof a.dispatchEvent?a.dispatchEvent(new CustomEvent("Sortable.sorted",{bubbles:!0})):void 0}},m=[],k=0,l=c.length;l>k;k++)h=c[k],m.push(b(d,h,i));return m},getColumnType:function(a,b){var c,d,f,g,h,i,j,k,l,m,n;if(d=null!=(l=a.querySelectorAll("th")[b])?l.getAttribute("data-sortable-type"):void 0,null!=d)return e.typesObject[d];for(m=a.tBodies[0].rows,h=0,j=m.length;j>h;h++)for(c=m[h],f=e.getNodeValue(c.cells[b]),n=e.types,i=0,k=n.length;k>i;i++)if(g=n[i],g.match(f))return g;return e.typesObject.alpha},getNodeValue:function(a){var b;return a?(b=a.getAttribute("data-value"),null!==b?b:"undefined"!=typeof a.innerText?a.innerText.replace(g,""):a.textContent.replace(g,"")):""},setupTypes:function(a){var b,c,d,f;for(e.types=a,e.typesObject={},f=[],c=0,d=a.length;d>c;c++)b=a[c],f.push(e.typesObject[b.name]=b);return f}},e.setupTypes([{name:"numeric",defaultSortDirection:"descending",match:function(a){return a.match(d)},comparator:function(a){return parseFloat(a.replace(/[^0-9.-]/g,""),10)||0}},{name:"date",defaultSortDirection:"ascending",reverse:!0,match:function(a){return!isNaN(Date.parse(a))},comparator:function(a){return Date.parse(a)||0}},{name:"alpha",defaultSortDirection:"ascending",match:function(){return!0},compare:function(a,b){return a.localeCompare(b)}}]),setTimeout(e.init,0),"function"==typeof define&&define.amd?define(function(){return e}):"undefined"!=typeof exports?module.exports=e:window.Sortable=e}).call(this); \ No newline at end of file