gridx-rails 1.1.0

data/app/assets/javascripts/gridx/modules/VLayout.js

@@ -0,0 +1,152 @@
+define([
+	"dojo/_base/declare",
+	"dojo/DeferredList",
+	"../core/_Module"
+], function(declare, DeferredList, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		This module manages the vertical layout of all the grid UI parts.
+		// description:
+		//		When user creates a grid with a given height, it means the height of the whole grid,
+		//		which includes grid body, toobar, pagination bar, headerbar, horizontal scrollerbar, etc.
+		//		So the height of the grid body must be calculated out so as to layout the grid properly.
+		//		This module calculates grid body height by collecting height from all the registered
+		//		grid UI parts. The reLayout function in this module will be called everytime the
+		//		grid size is changed.
+
+		register: function(mod, nodeName, hookPoint, priority, deferReady){
+			// summary:
+			//		When the 'mod' is loaded or "ready", hook 'mod'['nodeName'] to grid['hookPoint'] with priority 'priority'
+			// mod: Object
+			//		The module object
+			// nodeName: String
+			//		The name of the node to be hooked. Must be able to be accessed by mod[nodeName]
+			// hookPoint: String
+			//		The name of a hook point in grid.
+			// priority: Number?
+			//		The priority of the hook node. If less than 0, then it's above the base node, larger than 0, below the base node.
+		},
+
+		reLayout: function(){
+			// summary:
+			//		Virtically re-layout all the grid UI parts.
+		}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'vLayout',
+
+		preload: function(){
+			var t = this,
+				g = t.grid;
+			t.connect(g, '_onResizeEnd', function(changeSize, ds){
+				var d, dl = [];
+				for(d in ds){
+					dl.push(ds[d]);
+				}
+				new DeferredList(dl).then(function(){
+					t.reLayout();
+				});
+			});
+			if(g.autoHeight){
+				t.connect(g.body, 'onRender', 'reLayout');
+				t.connect(g.body, 'onEmpty', 'reLayout');
+			}else{
+				t.connect(g, 'setColumns', function(){
+					setTimeout(function(){
+						t.reLayout();
+					}, 0);
+				});
+			}
+		},
+	
+		load: function(args, startup){
+			var t = this;
+			startup.then(function(){
+				if(t._defs && t._mods){
+					new DeferredList(t._defs).then(function(){
+						t._layout();
+						t.loaded.callback();
+					});
+				}else{
+					t.loaded.callback();
+				}
+			});
+		},
+	
+		//Public ---------------------------------------------------------------------
+		register: function(mod, nodeName, hookPoint, priority, deferReady){
+			var t = this;
+			t._defs = t._defs || [];
+			t._mods = t._mods || {};
+			t._mods[hookPoint] = t._mods[hookPoint] || [];
+			t._defs.push(deferReady || mod.loaded);
+			t._mods[hookPoint].push({
+				p: priority || 0,
+				mod: mod,
+				nodeName: nodeName
+			});
+		},
+		
+		reLayout: function(){
+			var t = this,
+				freeHeight = 0,
+				hookPoint, n;
+			for(hookPoint in t._mods){
+				n = t.grid[hookPoint];
+				if(n){
+					freeHeight += n.offsetHeight;
+				}
+			}
+			t._updateHeight(freeHeight);
+		},
+
+		//Private-------------------------------------------------------------------------------
+		_layout: function(){
+			var freeHeight = 0,
+				t = this,
+				mods = t._mods,
+				hookPoint, n, i, hp, mod, nodeName;
+			for(hookPoint in mods){
+				n = t.grid[hookPoint];
+				if(n){
+					hp = mods[hookPoint];
+					hp.sort(function(a, b){
+						return a.p - b.p;
+					});
+					for(i = 0; i < hp.length; ++i){
+						mod = hp[i].mod;
+						nodeName = hp[i].nodeName;
+						if(mod && mod[nodeName]){
+							n.appendChild(mod[nodeName]);
+						}
+					}
+					freeHeight += n.offsetHeight;
+				}
+			}
+			t._updateHeight(freeHeight);
+		},
+
+		_updateHeight: function(freeHeight){
+			var g = this.grid,
+				dn = g.domNode,
+				ms = g.mainNode.style;
+			if(g.autoHeight){
+				function update(){
+					var lastRow = g.bodyNode.lastChild,
+						bodyHeight = lastRow ? lastRow.offsetTop + lastRow.offsetHeight : g.emptyNode.offsetHeight;
+					dn.style.height = (bodyHeight + freeHeight) + 'px';
+					ms.height = bodyHeight + "px";
+				}
+				update();
+				g.vScroller.loaded.then(update);
+			}else if(dn.clientHeight > freeHeight){
+				//If grid height is smaller than freeHeight, IE will throw errer.
+				ms.height = (dn.clientHeight - freeHeight) + "px";
+			}
+		}
+	});
+});

data/app/assets/javascripts/gridx/modules/VScroller.js

@@ -0,0 +1,342 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/Deferred",
+	"dojo/_base/event",
+	"dojo/_base/sniff",
+	"dojo/query",
+	"dojo/dom-geometry",
+	"dojo/dom-class",
+	"dojo/dom-style",
+	"dojo/keys",
+	"dojox/html/metrics",
+	"../core/_Module"
+], function(declare, Deferred, event, has, query, domGeo, domClass, domStyle, keys, metrics, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		This module provides basic vertical scrolling logic for grid.
+		// description:
+		//		This module will make the grid body render all rows without paging.
+		//		So it is very fast for small client side store, and might be extremely slow
+		//		for large server side store.
+
+		scrollToRow: function(rowVisualIndex, toTop){
+			// summary:
+			//		Scroll the grid until the required row is in view.
+			// description:
+			//		This job will be an asynchronous one if the lazy-loading and lazy-rendering are used.
+			// rowVisualIndex: Integer
+			//		The visual index of the row
+			// toTop: Boolean?
+			//		If set this to true, the grid will try to scroll the required row to the top of the view.
+			//		Otherwise, the grid will stop scrolling as soon as the row is visible.
+			// returns:
+			//		A deferred object indicating when the scrolling process is finished. This will be useful
+			//		when using lazy-loading and lazy-rendering.
+		}
+	});
+=====*/
+
+	var st = 'scrollTop';
+
+	return declare(_Module, {
+		name: 'vScroller',
+
+		forced: ['view', 'body', 'vLayout', 'columnWidth'],
+
+		optional: ['pagination'],
+	
+		constructor: function(){
+			var t = this,
+				g = t.grid,
+				dn = t.domNode = g.vScrollerNode;
+			t.stubNode = dn.firstChild;
+			if(g.autoHeight){
+				dn.style.display = 'none';
+				if(has('ie') < 8){
+					dn.style.width = '0px';
+				}
+			}else{
+				var w = metrics.getScrollbar().w,
+					ltr = g.isLeftToRight();
+				dn.style.width = w + 'px';
+				dn.style[ltr ? 'right' : 'left'] = -w + 'px';
+				if(has('ie') < 8){
+					t.stubNode.style.width = (w + 1) + 'px';
+				}
+			}
+			if(has('mac')){
+				domClass.add(g.domNode, 'gridxMac');
+			}
+		},
+
+		preload: function(args){
+			this.grid.hLayout.register(null, this.domNode, 1);
+		},
+
+		load: function(args, startup){
+			var t = this,
+				g = t.grid,
+				bd = g.body,
+				dn = t.domNode,
+				bn = g.bodyNode;
+			t.batchConnect(
+				[t.domNode, 'onscroll', '_doScroll'],
+				[bn, 'onmousewheel', '_onMouseWheel'],
+				[g.mainNode, 'onkeypress', '_onKeyScroll'],
+				has('ff') && [bn, 'DOMMouseScroll', '_onMouseWheel']);
+			t.aspect(g, '_onResizeEnd', '_onBodyChange');
+			t.aspect(bd, 'onForcedScroll', '_onForcedScroll');
+			t.aspect(bd, 'onRender', '_onBodyChange');
+			t.aspect(g.header, 'onRender', '_onBodyChange');
+			if(!g.autoHeight){
+				t.aspect(bd, 'onEmpty', function(){
+					var ds = dn.style;
+					ds.display = 'none';
+					ds.width = '';
+					if(has('ie') < 8){
+						ds.width = t.stubNode.style.width = '0px';
+					}
+					g.hLayout.reLayout();
+					g.hScroller.refresh();
+				});
+			}
+			startup.then(function(){
+				t._updatePos();
+				Deferred.when(t._init(args), function(){
+					t.domNode.style.width = '';
+					t.loaded.callback();
+				});
+			});
+		},
+	
+		//Public ----------------------------------------------------
+		scrollToRow: function(rowVisualIndex, toTop){
+			var d = new Deferred(),
+				bn = this.grid.bodyNode,
+				dn = this.domNode,
+				dif = 0,
+				n = query('[visualindex="' + rowVisualIndex + '"]', bn)[0],
+				finish = function(success){
+					setTimeout(function(){
+						d.callback(success);
+					}, 5);
+				};
+			if(n){
+				var no = n.offsetTop,
+					bs = bn[st];
+				if(toTop){
+					dn[st] = no;
+					finish(true);
+					return d;
+				}else if(no < bs){
+					dif = no - bs;
+				}else if(no + n.offsetHeight > bs + bn.clientHeight){
+					dif = no + n.offsetHeight - bs - bn.clientHeight;
+				}else{
+					finish(true);
+					return d;
+				}
+				dn[st] += dif;
+			}
+			finish(!!n);
+			return d;
+		},
+	
+		//Protected -------------------------------------------------
+		_init: function(){
+			return this._onForcedScroll();
+		},
+
+		_update: function(){
+			var t = this,
+				g = t.grid;
+			if(!g.autoHeight){
+				var bd = g.body,
+					bn = g.bodyNode,
+					toShow = (bn.scrollHeight > bn.clientHeight) ||
+						//This is to fix some rare issue that vscroller missing. #10267
+						//Logically this should not happen because virtual scroller has buffers.
+						//And this logic should not be put in non-virtual scroller either.
+						//FIXME: need more investigation.
+						(bn.scrollHeight == bn.clientHeight && bd.renderCount < g.view.visualCount),
+					ds = t.domNode.style;
+					scrollBarWidth = metrics.getScrollbar().w + (has('webkit') ? 1 : 0);//Fix a chrome RTL defect
+				if(has('ie') < 8){
+					//In IE7 if the node is not wider than the scrollbar, 
+					//the scroll bar buttons and the empty space in the scroll bar won't be clickable.
+					//So add some extra px to make it wider. +1 is enough for classic theme. +2 is enough for XP theme.
+					var w = toShow ? (scrollBarWidth + 2) + 'px' : '0px';
+					t.stubNode.style.width = w;
+					ds.width = w;
+				}else{
+					ds.width = '';
+				}
+				var display = toShow ? '' : 'none';
+				var changed = display != domStyle.get(t.domNode, 'display');
+				ds.display = display;
+				if(changed){
+					t._updatePos();
+					g.hLayout.reLayout();
+				}
+			}
+		},
+
+		_updatePos: function(){
+			var g = this.grid,
+				dn = this.domNode,
+				ds = dn.style,
+				ltr = g.isLeftToRight(),
+				mainBorder = domGeo.getBorderExtents(g.mainNode);
+			ds[ltr ? 'right' : 'left'] = -(dn.offsetWidth + (ltr ? mainBorder.r : mainBorder.l)) + 'px';
+		},
+
+		_doScroll: function(){
+			this.grid.bodyNode[st] = this.domNode[st];
+		},
+
+		_onMouseWheel: function(e){
+			if(this.grid.vScrollerNode.style.display != 'none'){
+				var rolled = typeof e.wheelDelta === "number" ? e.wheelDelta / 3 : (-40 * e.detail); 
+				this.domNode[st] -= rolled;
+				event.stop(e);
+			}
+		},
+
+		_onBodyChange: function(){
+			var t = this,
+				g = t.grid;
+			t._update();
+			//IE7 Needs setTimeout
+			setTimeout(function(){
+				if(!g.bodyNode){
+					//fix FF10 - g.bodyNode will be undefined during a quick recreation
+					return;
+				}
+				t.stubNode.style.height = g.bodyNode.scrollHeight + 'px';
+				t._doScroll();
+				//FIX IE7 problem:
+				g.vScrollerNode[st] = g.vScrollerNode[st] || 0;
+			}, 0);
+		},
+
+		_onForcedScroll: function(){
+			var t = this,
+				view = t.grid.view,
+				body = t.grid.body;
+			return t.model.when({
+				start: view.rootStart,
+				count: view.rootCount
+			}, function(){
+				body.renderRows(0, view.visualCount);
+			});
+		},
+
+		_onKeyScroll: function(evt){
+			var t = this,
+				g = t.grid,
+				bd = g.body,
+				bn = g.bodyNode,
+				focus = g.focus,
+				sn = t.domNode,
+				rowNode;
+			if(bn.childNodes.length && (!focus || focus.currentArea() == 'body')){
+				if(evt.keyCode == keys.HOME && evt.ctrlKey){
+					sn[st] = 0;
+					rowNode = bn.firstChild;
+					bd._focusCellCol = 0;
+				}else if(evt.keyCode == keys.END && evt.ctrlKey){
+					sn[st] = sn.scrollHeight - sn.offsetHeight;
+					rowNode = bn.lastChild;
+					bd._focusCellCol = g._columns.length - 1;
+				}else if(evt.keyCode == keys.PAGE_UP){
+					if(!sn[st]){
+						rowNode = bn.firstChild;
+					}else{
+						sn[st] -= sn.offsetHeight;
+					}
+				}else if(evt.keyCode == keys.PAGE_DOWN){
+					if(sn[st] >= sn.scrollHeight - sn.offsetHeight){
+						rowNode = bn.lastChild;
+					}else{
+						sn[st] += sn.offsetHeight;
+					}
+				}else{
+					return;
+				}
+				if(focus){
+					if(rowNode){
+						bd._focusCellRow = parseInt(rowNode.getAttribute('visualindex'), 10);
+						focus.focusArea('body', 1);	//1 as true
+					}else{
+						setTimeout(function(){
+							var rowNodes = bn.childNodes,
+								start = 0,
+								end = rowNodes.length - 1,
+								containerPos = domGeo.position(bn),
+								i, p,
+								checkPos = function(idx){
+									var rn = rowNodes[idx],
+										pos = domGeo.position(rn);
+									if(evt.keyCode == keys.PAGE_DOWN){
+										var prev = rn.previousSibling;
+										if((!prev && pos.y >= containerPos.y) || pos.y == containerPos.y){
+											return 0;
+										}else if(!prev){
+											return -1;
+										}else{
+											var prevPos = domGeo.position(prev);
+											if(prevPos.y < containerPos.y && prevPos.y + prevPos.h >= containerPos.y){
+												return 0;
+											}else if(prevPos.y > containerPos.y){
+												return 1;
+											}else{
+												return -1;
+											}
+										}
+									}else{
+										var post = rn.nextSibling;
+										if((!post && pos.y + pos.h <= containerPos.y + containerPos.h) ||
+											pos.y + pos.h == containerPos.y + containerPos.h){
+											return 0;
+										}else if(!post){
+											return 1;
+										}else{
+											var postPos = domGeo.position(post);
+											if(postPos.y <= containerPos.y + containerPos.h &&
+													postPos.y + postPos.h > containerPos.y + containerPos.h){
+												return 0;
+											}else if(postPos.y > containerPos.y + containerPos.h){
+												return 1;
+											}else{
+												return -1;
+											}
+										}
+									}
+								};
+							//Binary search the row to focus
+							while(start <= end){
+								i = Math.floor((start + end) / 2);
+								p = checkPos(i);
+								if(p < 0){
+									start = i + 1;
+								}else if(p > 0){
+									end = i - 1;
+								}else{
+									rowNode = rowNodes[i];
+									break;
+								}
+							}
+							if(rowNode){
+								bd._focusCellRow = parseInt(rowNode.getAttribute('visualindex'), 10);
+								focus.focusArea('body', 1);	//1 as true
+							}
+						}, 0);
+					}
+				}
+				event.stop(evt);
+			}
+		}
+	});
+});