gridx-rails 1.2.1 → 1.3.0.pre.alpha

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

@@ -10,14 +10,19 @@ define([
 	"dojo/_base/declare",
 	"dojo/_base/fx",
 	"dojo/fx",
-	"dojo/query"
-], function(kernel, domConstruct, domStyle, domClass, domGeometry, lang, Deferred, _Module, declare, baseFx, fx, query){
+	"dojo/keys",
+	// "dojo/query",
+	'gridx/support/query',
+	'dijit/a11y',
+	'dojo/_base/event',
+	'dojo/_base/sniff'
+], function(kernel, domConstruct, domStyle, domClass, domGeometry, lang, 
+			Deferred, _Module, declare, baseFx, fx, keys, query, a11y, event, has){
 	kernel.experimental('gridx/modules/Dod');
 
 /*=====
 	return declare(_Module, {
 		// summary:
-		//		module name: dod.
 		//		Details on demand.
 
 		// useAnimation: Boolean
@@ -75,18 +80,26 @@ define([
 		duration: 750,
 		defaultShow: false,
 		showExpando: true,
+		
+		preload: function(){
+			this.initFocus();
+		},
+		
 		load: function(args, deferStartup){
 			this._rowMap = {};
 			this.connect(this.grid.body, 'onAfterCell', '_onAfterCell');
 			this.connect(this.grid.body, 'onAfterRow', '_onAfterRow');
 			this.connect(this.grid.bodyNode, 'onclick', '_onBodyClick');
 			this.connect(this.grid.body, 'onUnrender', '_onBodyUnrender');
+			this.connect(this.grid, 'onCellKeyDown', '_onCellKeyDown');
+			this.connect(this.grid.body, '_onRowMouseOver', '_onRowMouseOver');
 			if(this.grid.columnResizer){
 				this.connect(this.grid.columnResizer, 'onResize', '_onColumnResize');
 			}
 			this.loaded.callback();
 			
 		},
+		
 		rowMixin: {
 			showDetail: function(){
 				this.grid.dod.show(this);
@@ -107,9 +120,12 @@ define([
 		
 		show: function(row){
 			var _row = this._row(row);
-			if(_row.dodShown || _row.inAnim || !row.node()){return;}
+			if(_row.dodShown || _row.inAnim){return;}
 			
 			_row.dodShown = true;
+			
+			if(!row.node()){ return; }
+
 			var expando = this._getExpando(row);
 			if(expando){expando.firstChild.innerHTML = '-';}
 			
@@ -117,7 +133,7 @@ define([
 			if(!_row.dodLoadingNode){
 				_row.dodLoadingNode = domConstruct.create('div', {
 					className: 'gridxDodLoadNode', 
-					innerHTML: 'Loading...'
+					innerHTML: this.grid.nls.loadingInfo
 				});
 			}
 			if(!_row.dodNode){
@@ -142,6 +158,7 @@ define([
 				var rowHeaderNode = query('[rowid="' + this.grid._escapeId(row.id) + '"].gridxRowHeaderRow', this.grid.rowHeader.bodyNode)[0];
 				//TODO: 1 is the border for claro theme, will fix
 				domStyle.set(rowHeaderNode.firstChild, 'height', domStyle.get(row.node(), 'height') + 'px');
+				domStyle.set(rowHeaderNode, 'height', domStyle.get(row.node(), 'height') + 'px');
 			}
 			
 			var df = new Deferred(), _this = this;
@@ -159,12 +176,19 @@ define([
 		
 		hide: function(row){
 			var _row = this._row(row), g = this.grid, escapeId = g._escapeId;
-			if(!_row.dodShown || _row.inAnim || !row.node()){return;}
+			if(!_row.dodShown || _row.inAnim){return;}
+			
+			if(!row.node()){
+				_row.dodShown = false;
+				return;
+			}
+			
 			domClass.remove(row.node(), 'gridxDodShown');
 			domStyle.set(_row.dodLoadingNode, 'display', 'none');
 			if(this.grid.rowHeader){
 				var rowHeaderNode = query('[rowid="' + escapeId(row.id) + '"].gridxRowHeaderRow', this.grid.rowHeader.bodyNode)[0];
 				domStyle.set(rowHeaderNode.firstChild, 'height', domStyle.get(row.node(), 'height') - 1 + 'px');
+				domStyle.set(rowHeaderNode, 'height', domStyle.get(row.node(), 'height') - 1 + 'px');
 				//TODO: 1 is the border for claro theme, will fix
 			}
 			var expando = this._getExpando(row);
@@ -188,16 +212,22 @@ define([
 							height: { start:rowHeaderNode.offsetHeight, end:rowHeaderNode.offsetHeight - _row.dodNode.scrollHeight, units:"px" }
 						}
 					}).play();
+					baseFx.animateProperty({ node: rowHeaderNode, duration:this.arg('duration'),
+						properties: {
+							height: { start:rowHeaderNode.offsetHeight, end:rowHeaderNode.offsetHeight - _row.dodNode.scrollHeight, units:"px" }
+						}
+					}).play();					
 				}
 			}else{
 				_row.dodShown = false;
 				_row.inAnim = false;
-				_row.dodNode.style.display = 'none';
-				g.body.onRender();
 				if(this.grid.rowHeader){
 					var rowHeaderNode = query('[rowid="' + escapeId(row.id) + '"].gridxRowHeaderRow', this.grid.rowHeader.bodyNode)[0];
 					rowHeaderNode.firstChild.style.height = rowHeaderNode.offsetHeight - _row.dodNode.scrollHeight + 'px';
+					rowHeaderNode.style.height = rowHeaderNode.offsetHeight - _row.dodNode.scrollHeight + 'px';
 				}
+				_row.dodNode.style.display = 'none';
+				g.body.onRender();
 				
 			}
 			
@@ -225,6 +255,24 @@ define([
 		onShow: function(row){},
 		onHide: function(row){},
 		
+		initFocus: function(){
+			var t = this,
+				focus = t.grid.focus;
+			focus.registerArea({
+				name: 'navigabledod',
+				priority: 1,
+				scope: t,
+				doFocus: t._doFocus,
+				doBlur: t._doBlur,
+				onFocus: t._onFocus,
+				onBlur: t._onBlur,
+				connects: [
+					t.connect(t.grid, 'onCellKeyDown', '_onCellKeyDown'),
+					t.connect(t.grid, 'onRowKeyDown', '_onRowKeyDown')
+				]
+			});	
+		},
+		
 		//private
 		_rowMap: null,
 		_lastOpen: null, //only useful when autoClose is true.
@@ -237,17 +285,37 @@ define([
 		},
 		
 		_onBodyClick: function(e){
-			if(!domClass.contains(e.target, 'gridxDodExpando') && !domClass.contains(e.target, 'gridxDodExpandoText')){return;}
+			if(!domClass.contains(e.target, 'gridxDodExpando') 
+			&& !domClass.contains(e.target, 'gridxDodExpandoText') 
+			|| this.grid.domNode != query(e.target).closest('.gridx')[0]){return;}
 			var node = e.target;
 			while(node && !domClass.contains(node, 'gridxRow')){
 				node = node.parentNode;
 			}
+			
+			// event.stop(e);
 			var idx = node.getAttribute('rowindex');
+			
+			
 			this.toggle(this.grid.row(parseInt(idx)));
 		},
 		
+		_onRowMouseOver: function(e){
+			var target = e.target;
+			var dodNode = this._rowMap[e.rowId]? this._rowMap[e.rowId].dodNode : undefined;
+			
+			if(dodNode){
+				while(target && target !== dodNode){
+					target = target.parentNode;
+				}
+				if(target){
+					domClass.remove(dodNode.parentNode, 'gridxRowOver');
+					event.stop(e);
+				}
+			}
+		},
+		
 		_onAfterRow: function(row){
-
 			var _row = this._row(row);
 			if(this.arg('showExpando')){
 				var tbl = query('table', row.node())[0];
@@ -305,6 +373,12 @@ define([
 			if(_row.defaultShow){
 				domStyle.set(_row.dodNode, 'display', 'block');
 				g.body.onRender();
+				if(this.grid.rowHeader){
+					var rowHeaderNode = query('[rowid="' + escapeId(row.id) + '"].gridxRowHeaderRow', this.grid.rowHeader.bodyNode)[0];
+					rowHeaderNode.firstChild.style.height = row.node().firstChild.offsetHeight + _row.dodNode.scrollHeight + 'px';
+					rowHeaderNode.style.height = row.node().firstChild.offsetHeight + _row.dodNode.scrollHeight + 'px';
+	
+				}
 			}else{
 				if(domStyle.get(_row.dodLoadingNode, 'display') == 'block'){
 					domGeometry.setMarginBox(_row.dodNode, {h: domGeometry.getMarginBox(_row.dodLoadingNode).h});
@@ -329,6 +403,11 @@ define([
 								height: { start:rowHeaderNode.offsetHeight, end:row.node().firstChild.offsetHeight + _row.dodNode.scrollHeight, units:"px" }
 							}
 						}).play();
+						baseFx.animateProperty({ node: rowHeaderNode, duration:this.arg('duration'),
+							properties: {
+								height: { start:rowHeaderNode.offsetHeight, end:row.node().firstChild.offsetHeight + _row.dodNode.scrollHeight, units:"px" }
+							}
+						}).play();						
 					}
 				}else{
 					_row.dodNode.style.display = 'block';
@@ -337,22 +416,42 @@ define([
 					if(this.grid.rowHeader){
 						var rowHeaderNode = query('[rowid="' + escapeId(row.id) + '"].gridxRowHeaderRow', this.grid.rowHeader.bodyNode)[0];
 						rowHeaderNode.firstChild.style.height = row.node().firstChild.offsetHeight + _row.dodNode.scrollHeight + 'px';
+						rowHeaderNode.style.height = row.node().firstChild.offsetHeight + _row.dodNode.scrollHeight + 'px';
+
 					}
 					
 				}
 			}
 			domStyle.set(_row.dodLoadingNode, 'display', 'none');
+			
+			//***for nested grid in grid ****
+			var gridNodes = dojo.query('.gridx', _row.dodNode);
+			
+			if(gridNodes.length){
+				query.isGridInGrid[this.grid.id] = true;
+			}
+			
+			var gs = this.grid._nestedGrids = this.grid._nestedGrids? this.grid._nestedGrids : [];
+			for(var i = 0; i < gridNodes.length; i++){
+				var gig = dijit.byNode(gridNodes[i]);
+				gs.push(gig);
+				if(!gig._refreshForDod){
+					gig._refreshForDod = true;
+					gig.body.refresh();
+				}
+			};
 		},
+		
 		_detailLoadError: function(row){
 			var _row = this._row(row);
 			_row.dodLoaded = false;
 			if(!this.isShown(row)){return;}
-			_row.dodLoadingNode.innerHTML = 'Error: failed to load detail.';
+			_row.dodLoadingNode.innerHTML = this.grid.nls.loadFailInfo;
 		},
 		_showLoading: function(row){
 			var _row = this._row(row);
 			var node = _row.dodLoadingNode;
-			node.innerHTML = 'Loading...';
+			node.innerHTML = this.grid.nls.loadingInfo;
 		},
 		_getExpando: function(row){
 			if(!this.showExpando)return null;
@@ -361,9 +460,114 @@ define([
 			return cell.firstChild;
 		},
 		
+		_onCellKeyDown: function(e){
+			var t = this,
+				grid = t.grid,
+				focus = grid.focus,
+				row = grid.row(e.rowId, 1);
+			if(e.keyCode == keys.DOWN_ARROW && e.ctrlKey){
+				t.show(row);
+				e.stopPropagation();
+			}else if(e.keyCode == keys.UP_ARROW && e.ctrlKey){
+				t.hide(row);
+				e.stopPropagation();
+			}
+		
+			if(e.keyCode == keys.F4 && !t._navigating && focus.currentArea() == 'body'){
+				if(t._beginNavigate(e.rowId, e.columnId)){
+					event.stop(e);
+					focus.focusArea('navigabledod');
+				}
+			}else if(e.keyCode == keys.ESCAPE && t._navigating && focus.currentArea() == 'navigabledod'){
+				t._navigating = false;
+				focus.focusArea('body');
+			}
+		},
 		
 		//Focus
+		_onRowKeyDown: function(e){
+			var t = this,
+				focus = t.grid.focus;
+
+			if(e.keyCode == keys.ESCAPE && t._navigating && focus.currentArea() == 'navigabledod'){
+				t._navigating = false;
+				focus.focusArea('body');
+			}
+		},
+		
+		_beginNavigate: function(rowId){
+			
+			var t = this,
+				row = t.grid.row(rowId, 1),
+				_row = t._row(rowId);
+			if(!_row.dodShown){
+				return false;
+			}
+			t._navigating = true;
+			// t._focusColId = colId;
+			t._focusRowId = rowId;
+			var navElems = t._navElems = a11y._getTabNavigable(row.node());
+			return (navElems.highest || navElems.last) && (navElems.lowest || navElems.first);
+			return false;
+			
+		},
 		
+		_doFocus: function(evt, step){
+			if(this._navigating){
+				var elems = this._navElems,
+					func = function(){
+						var toFocus = step < 0 ? (elems.highest || elems.last) : (elems.lowest || elems.first);
+						if(toFocus){
+							toFocus.focus();
+						}
+					};
+				if(has('webkit')){
+					func();
+				}else{
+					setTimeout(func, 5);
+				}
+				return true;
+			}
+			return false;
+		},
+		_onFocus: function(evt){
+			var node = evt.target, dn = this.grid.domNode;
+			while(node && node !== dn && !domClass.contains(node, 'gridxDodNode')){
+				node = node.parentNode;
+			}
+			if(node && node !== dn){
+				var dodNode = node,
+					rowNode = dodNode.parentNode;
+				// this.grid.hScroller.scrollToColumn(colId);
+				if(rowNode){
+					var rowId = rowNode.getAttribute('rowid');
+					return dodNode !== evt.target && this._beginNavigate(rowId);
+				}
+			}
+			return false;
+		},		
+		
+		_doBlur: function(evt, step){
+			if(evt){
+				var navElems = this._navElems,
+					firstElem = navElems.lowest || navElems.first,
+					lastElem = navElems.highest || navElems.last ||firstElem;
+					target = has('ie') ? evt.srcElement : evt.target;
+
+				if(target == (step > 0 ? lastElem : firstElem)){
+					event.stop(evt);
+				}
+				return false;
+			}else{
+				this._navigating = false;
+				return true;
+			}
+		},
+		
+		_onBlur: function(evt){
+			this._navigating = false;
+		},
+
 		endFunc: function(){}
 	});
 });