From d339fea2d92a230cbb459fb5a34aefddb949ea1a Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Sun, 27 May 2012 23:31:42 +0100 Subject: [PATCH] [#119,view/slickgrid][m]: first pass implementation of slickgrid view courtesy of @amercader. New setup supports: * Column hiding * Column reordering * Column sorting * Column resizing * Fit columns to the div width All these options are stored on the view state and applied when initializing the view if necessary. Now also utilize slickgrid view as default grid view. --- app/index.html | 16 +- app/js/app.js | 28 +- app/style/demo.css | 4 + css/slickgrid.css | 161 +++++ src/view-slickgrid.js | 297 +++++++++ test/index.html | 5 + test/view-slickgrid.test.js | 64 ++ vendor/slickgrid/2.0.1/MIT-LICENSE.txt | 20 + vendor/slickgrid/2.0.1/README.txt | 16 + vendor/slickgrid/2.0.1/images/sort-asc.gif | Bin 0 -> 830 bytes vendor/slickgrid/2.0.1/images/sort-desc.gif | Bin 0 -> 833 bytes .../2.0.1/jquery-ui-1.8.16.custom.min.js | 611 ++++++++++++++++++ .../2.0.1/jquery.event.drag-2.0.min.js | 6 + vendor/slickgrid/2.0.1/slick.grid.css | 158 +++++ vendor/slickgrid/2.0.1/slick.grid.min.js | 84 +++ 15 files changed, 1464 insertions(+), 6 deletions(-) create mode 100644 css/slickgrid.css create mode 100644 src/view-slickgrid.js create mode 100644 test/view-slickgrid.test.js create mode 100644 vendor/slickgrid/2.0.1/MIT-LICENSE.txt create mode 100644 vendor/slickgrid/2.0.1/README.txt create mode 100644 vendor/slickgrid/2.0.1/images/sort-asc.gif create mode 100644 vendor/slickgrid/2.0.1/images/sort-desc.gif create mode 100644 vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js create mode 100644 vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js create mode 100644 vendor/slickgrid/2.0.1/slick.grid.css create mode 100644 vendor/slickgrid/2.0.1/slick.grid.min.js diff --git a/app/index.html b/app/index.html index 818703a0..55dfcf5e 100644 --- a/app/index.html +++ b/app/index.html @@ -15,11 +15,13 @@ + + @@ -38,6 +40,9 @@ + + + @@ -51,9 +56,10 @@ - + + @@ -63,7 +69,7 @@ - +
@@ -141,7 +147,7 @@ ").css({position:"absolute",visibility:"visible",left:-f*(h/d),top:-e*(i/c)}).parent().addClass("ui-effects-explode").css({position:"absolute",overflow:"hidden",width:h/d,height:i/c,left:g.left+f*(h/d)+(a.options.mode=="show"?(f-Math.floor(d/2))*(h/d):0),top:g.top+e*(i/c)+(a.options.mode=="show"?(e-Math.floor(c/2))*(i/c):0),opacity:a.options.mode=="show"?0:1}).animate({left:g.left+f*(h/d)+(a.options.mode=="show"?0:(f-Math.floor(d/2))*(h/d)),top:g.top+ +e*(i/c)+(a.options.mode=="show"?0:(e-Math.floor(c/2))*(i/c)),opacity:a.options.mode=="show"?1:0},a.duration||500);setTimeout(function(){a.options.mode=="show"?b.css({visibility:"visible"}):b.css({visibility:"visible"}).hide();a.callback&&a.callback.apply(b[0]);b.dequeue();j("div.ui-effects-explode").remove()},a.duration||500)})}})(jQuery); +;/* + * jQuery UI Effects Fade 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Effects/Fade + * + * Depends: + * jquery.effects.core.js + */ +(function(b){b.effects.fade=function(a){return this.queue(function(){var c=b(this),d=b.effects.setMode(c,a.options.mode||"hide");c.animate({opacity:d},{queue:false,duration:a.duration,easing:a.options.easing,complete:function(){a.callback&&a.callback.apply(this,arguments);c.dequeue()}})})}})(jQuery); +;/* + * jQuery UI Effects Fold 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Effects/Fold + * + * Depends: + * jquery.effects.core.js + */ +(function(c){c.effects.fold=function(a){return this.queue(function(){var b=c(this),j=["position","top","bottom","left","right"],d=c.effects.setMode(b,a.options.mode||"hide"),g=a.options.size||15,h=!!a.options.horizFirst,k=a.duration?a.duration/2:c.fx.speeds._default/2;c.effects.save(b,j);b.show();var e=c.effects.createWrapper(b).css({overflow:"hidden"}),f=d=="show"!=h,l=f?["width","height"]:["height","width"];f=f?[e.width(),e.height()]:[e.height(),e.width()];var i=/([0-9]+)%/.exec(g);if(i)g=parseInt(i[1], +10)/100*f[d=="hide"?0:1];if(d=="show")e.css(h?{height:0,width:g}:{height:g,width:0});h={};i={};h[l[0]]=d=="show"?f[0]:g;i[l[1]]=d=="show"?f[1]:0;e.animate(h,k,a.options.easing).animate(i,k,a.options.easing,function(){d=="hide"&&b.hide();c.effects.restore(b,j);c.effects.removeWrapper(b);a.callback&&a.callback.apply(b[0],arguments);b.dequeue()})})}})(jQuery); +;/* + * jQuery UI Effects Highlight 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Effects/Highlight + * + * Depends: + * jquery.effects.core.js + */ +(function(b){b.effects.highlight=function(c){return this.queue(function(){var a=b(this),e=["backgroundImage","backgroundColor","opacity"],d=b.effects.setMode(a,c.options.mode||"show"),f={backgroundColor:a.css("backgroundColor")};if(d=="hide")f.opacity=0;b.effects.save(a,e);a.show().css({backgroundImage:"none",backgroundColor:c.options.color||"#ffff99"}).animate(f,{queue:false,duration:c.duration,easing:c.options.easing,complete:function(){d=="hide"&&a.hide();b.effects.restore(a,e);d=="show"&&!b.support.opacity&& +this.style.removeAttribute("filter");c.callback&&c.callback.apply(this,arguments);a.dequeue()}})})}})(jQuery); +;/* + * jQuery UI Effects Pulsate 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Effects/Pulsate + * + * Depends: + * jquery.effects.core.js + */ +(function(d){d.effects.pulsate=function(a){return this.queue(function(){var b=d(this),c=d.effects.setMode(b,a.options.mode||"show");times=(a.options.times||5)*2-1;duration=a.duration?a.duration/2:d.fx.speeds._default/2;isVisible=b.is(":visible");animateTo=0;if(!isVisible){b.css("opacity",0).show();animateTo=1}if(c=="hide"&&isVisible||c=="show"&&!isVisible)times--;for(c=0;c
').appendTo(document.body).addClass(a.options.className).css({top:d.top,left:d.left,height:b.innerHeight(),width:b.innerWidth(),position:"absolute"}).animate(c,a.duration,a.options.easing,function(){f.remove();a.callback&&a.callback.apply(b[0],arguments); +b.dequeue()})})}})(jQuery); +; \ No newline at end of file diff --git a/vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js b/vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js new file mode 100644 index 00000000..2cb7fee0 --- /dev/null +++ b/vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js @@ -0,0 +1,6 @@ +/*! + * jquery.event.drag - v 2.0.0 + * Copyright (c) 2010 Three Dub Media - http://threedubmedia.com + * Open Source MIT License - http://threedubmedia.com/code/license + */ +;(function(f){f.fn.drag=function(b,a,d){var e=typeof b=="string"?b:"",k=f.isFunction(b)?b:f.isFunction(a)?a:null;if(e.indexOf("drag")!==0)e="drag"+e;d=(b==k?a:d)||{};return k?this.bind(e,d,k):this.trigger(e)};var i=f.event,h=i.special,c=h.drag={defaults:{which:1,distance:0,not:":input",handle:null,relative:false,drop:true,click:false},datakey:"dragdata",livekey:"livedrag",add:function(b){var a=f.data(this,c.datakey),d=b.data||{};a.related+=1;if(!a.live&&b.selector){a.live=true;i.add(this,"draginit."+ c.livekey,c.delegate)}f.each(c.defaults,function(e){if(d[e]!==undefined)a[e]=d[e]})},remove:function(){f.data(this,c.datakey).related-=1},setup:function(){if(!f.data(this,c.datakey)){var b=f.extend({related:0},c.defaults);f.data(this,c.datakey,b);i.add(this,"mousedown",c.init,b);this.attachEvent&&this.attachEvent("ondragstart",c.dontstart)}},teardown:function(){if(!f.data(this,c.datakey).related){f.removeData(this,c.datakey);i.remove(this,"mousedown",c.init);i.remove(this,"draginit",c.delegate);c.textselect(true); this.detachEvent&&this.detachEvent("ondragstart",c.dontstart)}},init:function(b){var a=b.data,d;if(!(a.which>0&&b.which!=a.which))if(!f(b.target).is(a.not))if(!(a.handle&&!f(b.target).closest(a.handle,b.currentTarget).length)){a.propagates=1;a.interactions=[c.interaction(this,a)];a.target=b.target;a.pageX=b.pageX;a.pageY=b.pageY;a.dragging=null;d=c.hijack(b,"draginit",a);if(a.propagates){if((d=c.flatten(d))&&d.length){a.interactions=[];f.each(d,function(){a.interactions.push(c.interaction(this,a))})}a.propagates= a.interactions.length;a.drop!==false&&h.drop&&h.drop.handler(b,a);c.textselect(false);i.add(document,"mousemove mouseup",c.handler,a);return false}}},interaction:function(b,a){return{drag:b,callback:new c.callback,droppable:[],offset:f(b)[a.relative?"position":"offset"]()||{top:0,left:0}}},handler:function(b){var a=b.data;switch(b.type){case !a.dragging&&"mousemove":if(Math.pow(b.pageX-a.pageX,2)+Math.pow(b.pageY-a.pageY,2)=0;f--)d[f]===e&&d.splice(f,1)};this.notify=function(e,f,g){for(var f=f||new G,g=g||this,A,ma=0;ma=this.fromRow&&d<=this.toRow&&e>=this.fromCell&&e<=this.toCell};this.toString=function(){return this.isSingleCell()?"("+this.fromRow+":"+this.fromCell+")":"("+this.fromRow+":"+this.fromCell+" - "+this.toRow+":"+this.toCell+")"}},NonDataRow:A,Group:ba,GroupTotals:g,EditorLock:f,GlobalEditorLock:new f}});ba.prototype= +new A;ba.prototype.equals=function(d){return this.value===d.value&&this.count===d.count&&this.collapsed===d.collapsed};g.prototype=new A})(jQuery);/* + + (c) 2009-2012 Michael Leibman + michael{dot}leibman{at}gmail{dot}com + http://github.com/mleibman/slickgrid + + Distributed under MIT license. + All rights reserved. + + SlickGrid v2.0 + + NOTES: + Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods. + This increases the speed dramatically, but can only be done safely because there are no event handlers + or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy() + and do proper cleanup. +*/ +if("undefined"===typeof jQuery)throw"SlickGrid requires jquery module to be loaded";if(!jQuery.fn.drag)throw"SlickGrid requires jquery.event.drag module to be loaded";if("undefined"===typeof Slick)throw"slick.core.js not loaded"; +(function(e){e.extend(!0,window,{Slick:{Grid:function(ba,g,f,d){function fb(){if(!H){H=true;U=parseFloat(e.css(n[0],"width",true));Vb();ma(t);d.enableTextSelectionOnCells||v.bind("selectstart.ui",function(a){return e(a.target).is("input,textarea")});hb();Wb();ib();K();Xb();n.bind("resize.slickgrid",K);v.bind("scroll.slickgrid",jb);ca.bind("contextmenu.slickgrid",Yb).bind("click.slickgrid",Zb);Ka.bind("keydown.slickgrid",kb);B.bind("keydown.slickgrid",kb).bind("click.slickgrid",$b).bind("dblclick.slickgrid", +ac).bind("contextmenu.slickgrid",bc).bind("draginit",cc).bind("dragstart",dc).bind("drag",ec).bind("dragend",fc).delegate(".slick-cell","mouseenter",gc).delegate(".slick-cell","mouseleave",hc)}}function gb(a){for(var b=O.length;b>=0;b--)if(O[b]===a){O[b].destroy&&O[b].destroy();O.splice(b,1);break}}function Ub(){var a=e("
").appendTo("body"),b={width:a.width()-a[0].clientWidth,height:a.height()- +a[0].clientHeight};a.remove();return b}function Ja(a){for(var b=P,c=na?U-G.width:U,j=0,e=f.length;e--;)j=j+(f[e].width||La.width);P=d.fullWidthRows?Math.max(j,c):j;if(P!=b){B.width(P);da.width(P);lb=P>U-G.width}(P!=b||a)&&Ma()}function ma(a){a&&a.jquery&&a.attr("unselectable","on").css("MozUserSelect","none").bind("selectstart.ui",function(){return false})}function ic(){for(var a=1E6,b=e.browser.mozilla?5E6:1E9,c=e("
").appendTo(document.body);a<=b;){c.css("height",a+1E6); +if(c.height()!==a+1E6)break;else a=a+1E6}c.remove();return a}function Xb(){for(var a=B[0];(a=a.parentNode)!=document.body&&a!=null;)(a==v[0]||a.scrollWidth!=a.clientWidth||a.scrollHeight!=a.clientHeight)&&e(a).bind("scroll.slickgrid",mb)}function hb(){function a(){e(this).addClass("ui-state-hover")}function b(){e(this).removeClass("ui-state-hover")}t.empty();da.empty();I={};for(var c=0;c").html(""+j.name+"").width(j.width-V).attr("title",j.toolTip||j.name||"").data("fieldId",j.id).addClass(j.headerCssClass||"").appendTo(t);(d.enableColumnReorder||j.sortable)&&oa.hover(a,b);j.sortable&&oa.append("");d.showHeaderRow&&e("
").appendTo(da)}d.showHeaderRow&&e("
").appendTo(Q); +ta(r);nb();d.enableColumnReorder&&jc()}function Wb(){t.click(function(a){a.metaKey=a.metaKey||a.ctrlKey;if(!e(a.target).hasClass("slick-resizable-handle")){var b=e(a.target).closest(".slick-header-column");if(b.length){b=f[Na(b.data("fieldId"))];if(b.sortable&&p().commitCurrentEdit()){for(var c=null,j=0;j=g)){e(m);e("
").appendTo(m).bind("dragstart",function(g){if(!p().commitCurrentEdit())return false;c=g.pageX;e(this).parent().addClass("slick-header-column-active");var h=g=null;j.each(function(a,b){f[a].previousWidth=e(b).outerWidth()});if(d.forceFitColumns){h=g=0;for(a=k+1;a=0;a--){b=f[a];if(b.resizable){e=Math.max(b.minWidth||0,R);if(h&&b.previousWidth+h=0;a--){b=f[a];if(b.resizable)if(h&&b.maxWidth&&b.maxWidth-b.previousWidth
").appendTo(t);V=Pa=0;e.each(b,function(b,c){V=V+(parseFloat(a.css(c))||0)});e.each(c,function(b,c){Pa=Pa+(parseFloat(a.css(c))||0)});a.remove();var j=e("
").appendTo(B);a=e("").appendTo(j); +ua=va=0;e.each(b,function(b,c){ua=ua+(parseFloat(a.css(c))||0)});e.each(c,function(b,c){va=va+(parseFloat(a.css(c))||0)});j.remove();R=Math.max(V,ua)}function ib(){X=e("