gridx-rails 1.2.1 → 1.3.0.pre.alpha

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

@@ -1,18 +1,20 @@
 define([
 	"dojo/_base/declare",
+	"dojo/_base/Deferred",
 	"dojo/_base/window",
+	"dojo/query",
 	"dojo/dom-geometry",
 	"../core/_Module"
-], function(declare, win, domGeometry, _Module){
+], function(declare, Deferred, win, query, domGeometry, _Module){
 
 /*=====
 	return declare(_Module, {
 		// summary:
+		//		module name: autoScroll.
 		//		Automatically scroll the grid body when mouse is on the edge of grid.
 		//		Useful for extended selection or drag and drop.
 		//		This is a registered module, so if it is depended by other modules, no need to declare it when creating grid.
 
-		name: 'autoScroll',
 		enabled: false,
 		vertical: true,
 		horizontal: true,
@@ -36,15 +38,15 @@ define([
 
 		horizontal: true,
 
-		margin: 20,
+		margin: 30,
 
-		//Private ---------------------------------------------------------------------
+		rowStep: 1,
 
-		_timeout: 100,
+		columnStep: 1,
 
-		_step: 10,
+		//Private ---------------------------------------------------------------------
 
-		_maxMargin: 100,
+		_timeout: 300,
 
 		_onMouseMove: function(e){
 			var t = this;
@@ -70,31 +72,98 @@ define([
 		_scroll: function(){
 			var t = this;
 			if(t.arg('enabled')){
-				var dir, a, needScroll, g = t.grid,
-					m = t._maxMargin, s = t._step,
-					v = t._vdir, h = t._hdir;
+				var dir,
+					needScroll,
+					g = t.grid,
+					v = t._vdir,
+					h = t._hdir;
 				if(t.arg('vertical') && v){
 					dir = v > 0 ? 1 : -1;
-					a = Math.min(m, Math.abs(v)) / s;
-					a = (a < 1 ? 1 : a) * s * dir;
-					g.vScroller.domNode.scrollTop += a;
-					needScroll = 1;
+					var rowNode = t._findNode(g.bodyNode.childNodes, function(node){
+						if(dir > 0){
+							if(node.offsetTop >= g.bodyNode.scrollTop + g.bodyNode.offsetHeight){
+								return -1;
+							}else if(node.offsetTop + node.offsetHeight < g.bodyNode.scrollTop + g.bodyNode.offsetHeight){
+								return 1;
+							}
+							return 0;
+						}else{
+							if(node.offsetTop > g.bodyNode.scrollTop){
+								return -1;
+							}else if(node.offsetTop + node.offsetHeight <= g.bodyNode.scrollTop){
+								return 1;
+							}
+							return 0;
+						}
+					});
+					if(rowNode){
+						var vidx = parseInt(rowNode.getAttribute('visualindex'), 10);
+						needScroll = g.vScroller.scrollToRow(vidx + dir * t.arg('rowStep'));
+					}
 				}
 				if(t.arg('horizontal') && h){
 					dir = h > 0 ? 1 : -1;
-					a = Math.min(m, Math.abs(h)) / s;
-					a = (a < 1 ? 1 : a) * s * dir;
-					g.hScroller.domNode.scrollLeft += a;
-					needScroll = 1;
+					var headerNode = t._findNode(query('.gridxCell', g.header.domNode), function(node){
+						if(dir > 0){
+							if(node.offsetLeft >= g.hScrollerNode.scrollLeft + g.hScrollerNode.offsetWidth){
+								return -1;
+							}else if(node.offsetLeft + node.offsetWidth < g.hScrollerNode.scrollLeft + g.hScrollerNode.offsetWidth){
+								return 1;
+							}
+							return 0;
+						}else{
+							if(node.offsetLeft > g.hScrollerNode.scrollLeft){
+								return -1;
+							}else if(node.offsetLeft + node.offsetHeight <= g.vScrollerNode.scrollLeft){
+								return 1;
+							}
+							return 0;
+						}
+					});
+					if(headerNode){
+						var col = g._columnsById[headerNode.getAttribute('colid')];
+						var colIdx = col.index + dir * t.arg('columnStep');
+						if(colIdx >= g._columns.length){
+							colIdx = g._columns.length - 1;
+						}else if(colIdx < 0){
+							colIdx = 0;
+						}
+						var nextCol = g._columns[colIdx];
+						g.hScroller.scrollToColumn(nextCol.id);
+						needScroll = needScroll || 1;
+					}
 				}
+				t._handler = needScroll;
 				if(needScroll){
-					t._handler = setTimeout(function(){
-						t._scroll();
-					}, t._timeout);
-					return;
+					//scroll to row can be async
+					Deferred.when(needScroll, function(){
+						t._handler = setTimeout(function(){
+							t._scroll();
+						}, t._timeout);
+					});
+				}
+			}else{
+				delete t._handler;
+			}
+		},
+
+		_findNode: function(nodes, checker){
+			var start = 0,
+				end = nodes.length,
+				idx = Math.floor((start + end) / 2);
+			while(start < end && start != idx){
+				var dir = checker(nodes[idx]);
+				if(dir < 0){
+					end = idx;
+					idx = Math.floor((start + end) / 2);
+				}else if(dir > 0){
+					start = idx;
+					idx = Math.floor((start + end) / 2);
+				}else{
+					break;
 				}
 			}
-			delete t._handler;
+			return nodes[idx];
 		}
 	}));
 });

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

@@ -229,6 +229,9 @@ define([
 					}catch(e){
 						console.error(e);
 					}
+					if(def.hookPoint && def.hookName){
+						def.hookPoint[def.hookName] = plugin || td;
+					}
 					pluginRow.push(plugin || td);
 					tr.appendChild(td);
 				}
@@ -307,6 +310,7 @@ define([
 			this.grid.focus.stopEvent(evt);
 			var elems = a11y._getTabNavigable(node),
 				n = elems[step < 0 ? 'last' : 'first'];
+
 			if(n){
 				n.focus();
 			}
@@ -314,8 +318,17 @@ define([
 		},
 
 		_doBlur: function(node, evt, step){
+			function isChild(child, parent){
+				if(!child || !parent){ return false; }
+				var n = child;
+				while(n && n != parent){
+					n = n.parentNode;
+				}
+				return !!n;
+			}
 			var elems = a11y._getTabNavigable(node);
-			return evt ? evt.target == (step < 0 ? elems.first : elems.last) : true;
+			return evt ? (evt.target == (step < 0 ? elems.first : elems.last) 
+						|| isChild(evt.target, step < 0 ? elems.first : elems.last)) : true;
 		}
 	}));
 });

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

@@ -2,7 +2,8 @@ define([
 /*====="../core/Row",=====*/
 /*====="../core/Cell",=====*/
 	"dojo/_base/declare",
-	"dojo/query",
+	// "dojo/query",
+	'gridx/support/query',
 	"dojo/_base/array",
 	"dojo/_base/lang",
 	"dojo/_base/json",
@@ -11,12 +12,10 @@ define([
 	"dojo/_base/Deferred",
 	"dojo/_base/sniff",
 	"dojo/keys",
-	"../core/_Module",
-	"dojo/i18n",
-	"dojo/i18n!../nls/Body"
+	"../core/_Module"
 //    "dojo/NodeList-dom",
 //    "dojo/NodeList-traverse"
-], function(/*=====Row, Cell, =====*/declare, query, array, lang, json, domConstruct, domClass, Deferred, has, keys, _Module, i18n){
+], function(/*=====Row, Cell, =====*/declare, query, array, lang, json, domConstruct, domClass, Deferred, has, keys, _Module){
 
 /*=====
 	Row.node = function(){
@@ -235,22 +234,24 @@ define([
 				g = t.grid,
 				dn = t.domNode = g.bodyNode;
 			t._cellCls = {};
-			t._nls = i18n.getLocalization('gridx', 'Body', g.lang);
 			if(t.arg('rowHoverEffect')){
 				domClass.add(dn, 'gridxBodyRowHoverEffect');
 			}
-			g.emptyNode.innerHTML = t.arg('loadingInfo', t._nls.loadingInfo);
+			g.emptyNode.innerHTML = t.arg('loadingInfo', g.nls.loadingInfo);
 			g._connectEvents(dn, '_onMouseEvent', t);
+			t.aspect(t.model, 'onDelete', '_onDelete');
 			t.aspect(t.model, 'onSet', '_onSet');
-			t.aspect(g, 'onRowMouseOver', '_onRowMouseOver');
-			t.connect(g.mainNode, 'onmouseleave', function(){
-				query('> .gridxRowOver', t.domNode).removeClass('gridxRowOver');
-			});
-			t.connect(g.mainNode, 'onmouseover', function(e){
-				if(e.target == g.bodyNode){
+			if(!g.touch){
+				t.aspect(g, 'onRowMouseOver', '_onRowMouseOver');
+				t.connect(g.mainNode, 'onmouseleave', function(){
 					query('> .gridxRowOver', t.domNode).removeClass('gridxRowOver');
-				}
-			});
+				});
+				t.connect(g.mainNode, 'onmouseover', function(e){
+					if(e.target == g.bodyNode){
+						query('> .gridxRowOver', t.domNode).removeClass('gridxRowOver');
+					}
+				});
+			}
 			t.aspect(g.model, 'setStore', function(){
 				t.refresh();
 			});
@@ -376,9 +377,10 @@ define([
 				loadingNode = t.grid.loadingNode,
 				d = new Deferred();
 			delete t._err;
-			domClass.add(loadingNode, 'gridxLoading');
+			clearTimeout(t._sizeChangeHandler);
 			domClass.toggle(t.domNode, 'gridxBodyRowHoverEffect', t.arg('rowHoverEffect'));
-
+			
+			domClass.add(loadingNode, 'gridxLoading');
 			t.grid.view.updateVisualCount().then(function(){
 				try{
 					var rs = t.renderStart,
@@ -501,13 +503,13 @@ define([
 				renderedRows = [],
 				n = t.domNode,
 				en = g.emptyNode,
-				emptyInfo = t.arg('emptyInfo', t._nls.emptyInfo),
+				emptyInfo = t.arg('emptyInfo', g.nls.emptyInfo),
 				finalInfo = '';
 			if(t._err){
 				return;
 			}
 			if(count > 0){
-				en.innerHTML = t.arg('loadingInfo', t._nls.loadingInfo);
+				en.innerHTML = t.arg('loadingInfo', g.nls.loadingInfo);
 				en.style.zIndex = '';
 				if(position != 'top' && position != 'bottom'){
 					t.model.free();
@@ -589,17 +591,21 @@ define([
 				if(preOrPost == 'post'){
 					for(; i < count && bn.lastChild; ++i){
 						id = bn.lastChild.getAttribute('rowid');
-						m.free(id);
-						t.onUnrender(id);
+						if(m.isId(id)){
+							m.free(id);
+							t.onUnrender(id);
+						}
 						domConstruct.destroy(bn.lastChild);
 					}
 				}else{
 					var tp = bn.scrollTop;
 					for(; i < count && bn.firstChild; ++i){
 						id = bn.firstChild.getAttribute('rowid');
-						m.free(id);
 						tp -= bn.firstChild.offsetHeight;
-						t.onUnrender(id);
+						if(m.isId(id)){
+							m.free(id);
+							t.onUnrender(id);
+						}
 						domConstruct.destroy(bn.firstChild);
 					}
 					t.renderStart += i;
@@ -668,7 +674,7 @@ define([
 		_loadFail: function(e){
 			console.error(e);
 			var en = this.grid.emptyNode;
-			en.innerHTML = this.arg('loadFailInfo', this._nls.loadFailInfo);
+			en.innerHTML = this.arg('loadFailInfo', this.grid.nls.loadFailInfo);
 			en.style.zIndex = 1;
 			this.domNode.innerHTML = '';
 			this._err = e;
@@ -831,18 +837,29 @@ define([
 		},
 
 		_decorateEvent: function(e){
+			//clean decorates from bubble
+			//need to re-decorate the event when bubbling
+			var atrs = ['rowId', 'columnId', 'rowIndex', 'visualIndex', 'columnIndex', 'parentId', 'cellNode'];
+			array.forEach(atrs, function(atr){
+				if(atr in e){ 
+					delete e[atr]; 
+				}
+			});
+			
 			var n = e.target || e.originalTarget,
 				g = this.grid,
 				tag;
 			for(; n && n != g.bodyNode; n = n.parentNode){
 				tag = n.tagName && n.tagName.toLowerCase();
-				if(tag == 'td' && domClass.contains(n, 'gridxCell')){
+				if(tag == 'td' && domClass.contains(n, 'gridxCell') && 
+					n.parentNode.parentNode.parentNode.parentNode.parentNode === g.bodyNode){
+						
 					var col = g._columnsById[n.getAttribute('colid')];
 					e.cellNode = n;
 					e.columnId = col.id;
 					e.columnIndex = col.index;
 				}
-				if(tag == 'div' && domClass.contains(n, 'gridxRow')){
+				if(tag == 'div' && domClass.contains(n, 'gridxRow') && n.parentNode === g.bodyNode){
 					e.rowId = n.getAttribute('rowid');
 					e.parentId = n.getAttribute('parentid');
 					e.rowIndex = parseInt(n.getAttribute('rowindex'), 10);
@@ -853,6 +870,14 @@ define([
 		},
 
 		//Store Notification-------------------------------------------------------------------
+		_onDelete: function(id, index, treePath){
+			var t = this;
+			//only necessary for child row deletion.
+			if(treePath && treePath.length > 1){
+				t.lazyRefresh();
+			}
+		},
+
 		_onSet: function(id, index, rowCache, oldCache){
 			var t = this;
 			if(t.autoUpdate && rowCache){
@@ -905,6 +930,14 @@ define([
 				}
 			}
 		},
+		//GridInGrid-------------------------------------------------------------------------------------
+		_isDescendantRowNode: function(node){
+			return node.parentNode === this.grid.bodyNode;
+		},
+		
+		_isDescendantCellNode: function(node){
+			return node.parentNode.parentNode.parentNode.parentNode.parentNode === this.grid.bodyNode;
+		},
 
 		//Focus------------------------------------------------------------------------------------------
 		_focusCellCol: 0,
@@ -1010,7 +1043,9 @@ define([
 					t = this,
 					g = t.grid, 
 					columnCount = g._columns.length,
-					vc = g.view.visualCount;
+					vc = g.view.visualCount,
+					//IE8 will destroy this event object after setTimeout
+					e = has('ie') < 9 ? lang.mixin({}, evt) : evt;
 				g.focus.stopEvent(evt); //Prevent scrolling the whole page.
 				r = t._focusCellRow + rowStep;
 				r = r < 0 ? 0 : (r >= vc ? vc - 1 : r);
@@ -1018,7 +1053,7 @@ define([
 				c = c < 0 ? 0 : (c >= columnCount ? columnCount - 1 : c);
 				g.vScroller.scrollToRow(r).then(function(){
 					t._focusCell(0, r, c);
-					t.onMoveToCell(r, c, evt);
+					t.onMoveToCell(r, c, e);
 				});
 			}
 		},
@@ -1056,7 +1091,7 @@ define([
 		_onFocus: function(evt){
 			var bn = this.domNode,
 				nl = query(evt.target).closest('.gridxCell', bn);
-			if(nl[0]){
+			if(nl[0] && this._isDescendantCellNode(nl[0])){
 				var colIndex = this.grid._columnsById[nl[0].getAttribute('colid')].index,
 					visualIndex = parseInt(nl.closest('.gridxRow', bn)[0].getAttribute('visualindex'), 10);
 				return this._focusCell(0, visualIndex, colIndex);

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

@@ -267,7 +267,6 @@ define([
 							}
 						}
 					});
-					// console.log('lazy is: ', lazyData);
 					if(t.setCellValue){
 						t.setCellValue(gridData, storeData, t, isInit);
 					}
@@ -525,10 +524,14 @@ define([
 				if(cellDec){
 					if(!cellDec.widget && cellDec.decorator){
 						try{
-							cellDec.widget = new CellWidget({
+							var widget = cellDec.widget = new CellWidget({
 								content: cellDec.decorator(cell.data(), cell.row.id, cell.row.visualIndex(), cell),
 								setCellValue: cellDec.setCellValue
 							});
+							this.onCellWidgetCreated(widget, cell.column);
+							if(cell.column.onCellWidgetCreated){
+								cell.column.onCellWidgetCreated(widget, cell.column);
+							}
 						}catch(e){
 							console.error('Edit:', e);
 						}

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

@@ -67,6 +67,7 @@ define([
 					});
 					_this.connect(g.columnWidth, 'onUpdate', '_updateHeader');
 					_this.connect(g.header, 'onRender', '_updateHeader');
+					_this.connect(g.body, 'onRender', '_updateBody');
 					if(g.columnResizer){
 						//make it compatible with column resizer
 						_this.connect(g.columnResizer, 'onResize', '_updateHeader');
@@ -95,7 +96,6 @@ define([
 		lock: function(/*Integer*/count){
 			if(this.grid.columnWidth && this.grid.columnWidth.arg('autoResize'))return;
 			if(count >= this.grid._columns.length){
-				this.count = 0;
 				console.warn('Warning: lock count is larger than columns count, do nothing.');
 				return;
 			}
@@ -148,7 +148,6 @@ define([
 			// summary:
 			//	Lock columns for one row
 			if(!this.count || this.count >= this.grid._columns.length){
-				this.count = 0;
 				return;
 			}
 			

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

@@ -2,7 +2,8 @@ define([
 	"dojo/_base/declare",
 	"dojo/_base/array",
 	"dojo/_base/Deferred",
-	"dojo/query",
+	// "dojo/query",
+	'gridx/support/query',
 	"dojo/_base/sniff",
 	"dojo/dom-geometry",
 	"dojo/dom-class",
@@ -315,6 +316,8 @@ define([
 				g.tree._initExpandLevel();
 			}
 			g.body.refresh();
+			//Now header and body are matched, so we can fire onRender.
+			g.header.onRender();
 		}
 	});
 });