gridx-rails 1.1.0

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

@@ -0,0 +1,320 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"dojo/_base/Deferred",
+	"dojo/query",
+	"dojo/_base/sniff",
+	"dojo/dom-geometry",
+	"dojo/dom-class",
+	"dojo/dom-style",
+	"dojo/keys",
+	"../core/_Module"
+], function(declare, array, Deferred, query, has, domGeometry, domClass, domStyle, keys, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		module name: columnWidth.
+		//		Manages column width distribution, allow grid autoWidth and column autoResize.
+
+		// default: Number
+		//		Default column width. Applied when it's not possible to decide accurate column width from user's config.
+		'default': 60,
+
+		// autoResize: Boolean
+		//		If set to true, the column width should be set to auto or percentage values,
+		//		so that the column can automatically resize when the grid width is changed.
+		//		(This is the default behavior of an	HTML table).
+		autoResize: false,
+
+		onUpdate: function(){
+			// summary:
+			//		Fired when column widths are updated.
+		}
+	});
+=====*/
+
+	var needHackPadBorder = has('safari') < 6 || (!has('safari') && has('webkit') && has('ios'));
+
+	function calcAutoWidth(autoCols, freeWidth, padBorder){
+		autoCols.sort(function(c1, c2){
+			return (c1.minWidth || 0) - (c2.minWidth || 0);
+		});
+		var i = autoCols.length - 1, c;
+		for(; i >= 0; --i){
+			c = autoCols[i];
+			if(c.minWidth && (c.minWidth + padBorder) * (i + 1) > freeWidth){
+				c.width = c.minWidth + 'px';
+				freeWidth -= c.minWidth + padBorder;
+			}else{
+				break;
+			}
+		}
+		var len = i + 1;
+		if(len){
+			var w = Math.floor(freeWidth / len - padBorder);
+			var ww = freeWidth - (w + padBorder) * (len - 1) - padBorder;
+			if(w < 0){
+				w = 0;
+			}
+			if(ww < 0){
+				ww = 0;
+			}
+			for(i = 0; i < len; ++i){
+				c = autoCols[i];
+				c.width = (i ? w : ww) + 'px';
+			}
+		}
+	}
+
+	return declare(_Module, {
+		name: 'columnWidth',
+
+		forced: ['hLayout'],
+
+		constructor: function(){
+			this._init();
+		},
+
+		load: function(){
+			var t = this,
+				g = t.grid;
+			t.aspect(g.hLayout, 'onUpdateWidth', '_onUpdateWidth');
+			t.aspect(g, 'setColumns', '_onSetColumns');
+			t._adaptWidth();
+			t.loaded.callback();
+		},
+
+		//Public-----------------------------------------------------------------------------
+		'default': 60,
+
+		autoResize: false,
+
+		onUpdate: function(){},
+
+		//Private-----------------------------------------------------------------------------
+		_init: function(){
+			var t = this,
+				g = t.grid,
+				autoResize = t.arg('autoResize'),
+				defaultWidth = t.arg('default') + 'px';
+			array.forEach(g._columns, function(col){
+				if(!col.hasOwnProperty('declaredWidth')){
+					col.declaredWidth = col.width = col.width || 'auto';
+				}
+				if(g.autoWidth && (col.declaredWidth == 'auto' || /%$/.test(col.declaredWidth))){
+					//If minWidth exists, check it
+					col.width = t['default'] < col.minWidth ? col.minWidth + 'px' : defaultWidth;
+				}else if(autoResize && !(/%$/).test(col.declaredWidth)){
+					col.width = 'auto';
+				}
+			});
+			if(autoResize){
+				domClass.add(g.domNode, 'gridxPercentColumnWidth');
+			}
+		},
+
+		_onUpdateWidth: function(){
+			var t = this,
+				g = t.grid;
+			if(g.autoWidth){
+				t._adaptWidth();
+			}else{
+				var noHScroller = g.hScrollerNode.style.display == 'none',
+					autoResize = t.autoResize;
+				t._adaptWidth(!noHScroller, 1);	//1 as true
+				if(!autoResize && noHScroller){
+					query('.gridxCell', g.bodyNode).forEach(function(cellNode){
+						var col = g._columnsById[cellNode.getAttribute('colId')],
+							declaredWidth = col.declaredWidth;
+						if(autoResize || !declaredWidth || declaredWidth == 'auto' || (/%$/).test(declaredWidth)){
+							var s = cellNode.style,
+								w = col.width;
+							s.width = w;
+							s.minWidth = w;
+							s.maxWidth = w;
+						}
+					});
+				}
+				t.onUpdate();
+			}
+		},
+
+		_adaptWidth: function(skip, noEvent){
+			var t = this,
+				g = t.grid,
+				dn = g.domNode,
+				header = g.header,
+				ltr = g.isLeftToRight(),
+				marginLead = ltr ? 'marginLeft' : 'marginRight',
+				marginTail = ltr ? 'marginRight' : 'marginLeft',
+				lead = g.hLayout.lead,
+				tail = g.hLayout.tail,
+				innerNode = header.innerNode,
+				bs = g.bodyNode.style,
+				hs = innerNode.style,
+				headerBorder = domGeometry.getBorderExtents(header.domNode).w,
+				tailBorder = headerBorder,
+				mainBorder = 0,
+				bodyWidth = (dn.clientWidth || domStyle.get(dn, 'width')) - lead - tail - headerBorder,
+				refNode = query('.gridxCell', innerNode)[0],
+				padBorder = refNode ? domGeometry.getMarginBox(refNode).w - domGeometry.getContentBox(refNode).w : 0,
+				isGroupHeader = g.header.arg('groups'),
+				isGridHidden = !dn.offsetHeight;
+			t._padBorder = padBorder;
+			//FIXME: this is theme dependent. Any better way to do this?
+			if(tailBorder === 0){
+				tailBorder = 1;
+			}else{
+				mainBorder = 2;
+			}
+			hs[marginLead] = lead + 'px';
+			hs[marginTail] = (tail > tailBorder ? tail - tailBorder : 0)  + 'px';
+			g.mainNode.style[marginLead] = lead + 'px';
+			g.mainNode.style[marginTail] = tail + 'px';
+			bodyWidth = bodyWidth < 0 ? 0 : bodyWidth;
+			if(skip){
+				t.onUpdate();
+				return;
+			}
+			if(!t.arg('autoResize')){
+				if(needHackPadBorder){
+					query('.gridxCell', innerNode).forEach(function(node){
+						var c = g._columnsById[node.getAttribute('colid')];
+						if(/px$/.test(c.declaredWidth)){
+							var w = parseInt(c.declaredWidth, 10) + padBorder;
+							w = c.width = w + 'px';
+							node.style.width = w;
+							node.style.minWidth = w;
+							node.style.maxWidth = w;
+						}
+					});
+				}
+			}
+			if(g.autoWidth){
+				var headers = query('.gridxCell', innerNode),
+					totalWidth = 0;
+				headers.forEach(function(node){
+					var c = g._columnsById[node.getAttribute('colid')];
+					var w = domStyle.get(node, 'width');
+					if(isGroupHeader || !needHackPadBorder || !isGridHidden){
+						w += padBorder;
+					}
+					if(w < c.minWidth){
+						w = c.minWidth;
+					}
+					totalWidth += w;
+					if(c.width == 'auto' || (/%$/).test(c.width)){
+						node.style.width = c.width = w + 'px';
+						node.style.minWidth = c.width;
+						node.style.maxWidth = c.width;
+					}
+				});
+				bs.width = totalWidth + 'px';
+				dn.style.width = (lead + tail + totalWidth + mainBorder) + 'px';
+			}else if(t.arg('autoResize')){
+				hs.borderWidth = g.vScrollerNode.style.display == 'none' ? 0 : '';
+			}else{
+				var autoCols = [],
+					cols = g._columns,
+					fixedWidth = 0;
+				if(!isGroupHeader && needHackPadBorder){
+					padBorder = 0;
+				}
+				array.forEach(cols, function(c){
+					if(c.declaredWidth == 'auto'){
+						autoCols.push(c);
+					}else if(/%$/.test(c.declaredWidth)){
+						var w = parseInt(bodyWidth * parseFloat(c.declaredWidth, 10) / 100 - padBorder, 10);
+						//Check if less than zero, prevent error in IE.
+						if(w < 0){
+							w = 0;
+						}
+						if(typeof c.minWidth == 'number' && w < c.minWidth){
+							w = c.minWidth;
+						}
+						var node = header.getHeaderNode(c.id);
+						node.style.width = c.width = w + 'px';
+						node.style.minWidth = c.width;
+						node.style.maxWidth = c.width;
+					}
+				});
+				array.forEach(cols, function(c){
+					if(c.declaredWidth != 'auto'){
+						var headerNode = header.getHeaderNode(c.id),
+							w = !isGroupHeader && needHackPadBorder ? parseFloat(headerNode.style.width, 10) :
+								headerNode.offsetWidth || (domStyle.get(headerNode, 'width') + padBorder);
+						if(/%$/.test(c.declaredWidth)){
+							c.width = (w > padBorder ? w - padBorder : 0) + 'px';
+						}
+						fixedWidth += w;
+					}
+				});
+				if(autoCols.length){
+					var freeWidth = bodyWidth - fixedWidth;
+					if(freeWidth > 0){
+						calcAutoWidth(autoCols, freeWidth, padBorder);
+					}else{
+						var w = t.arg('default');
+						array.forEach(autoCols, function(c, i){
+							var cw = w;
+							if(typeof c.minWidth == 'number' && cw < c.minWidth){
+								cw = c.minWidth;
+							}
+							c.width = cw + 'px';
+						});
+					}
+					array.forEach(autoCols, function(c, i){
+						var node = header.getHeaderNode(c.id);
+						node.style.width = c.width;
+						node.style.minWidth = c.width;
+						node.style.maxWidth = c.width;
+					});
+				}
+			}
+			if(isGroupHeader){
+				// If group header is used, the column width might not be set properly 
+				// (min-width/max-width not working when colspan cells exist).
+				// So the actual width of the node is honored.
+				query('.gridxCell', header.innerNode).forEach(function(node){
+					var col = g._columnsById[node.getAttribute('colid')];
+					if(/px$/.test(col.width)){
+						var width = node.clientWidth - domGeometry.getPadExtents(node).w;
+						if(parseInt(col.width, 10) != width){
+							col.width = width = width + 'px';
+							node.style.width = width;
+							node.style.minWidth = width;
+							node.style.maxWidth = width;
+						}
+					}
+				});
+			}
+			g.hScroller.scroll(0);
+			header._onHScroll(0);
+			g.vLayout.reLayout();
+			if(!noEvent){
+				t.onUpdate();
+			}
+		},
+
+		_onSetColumns: function(){
+			var t = this,
+				g = t.grid;
+			t._init();
+			//Now header and body can be different, so we should not trigger any onRender event at this inconsistent stage,
+			g.header._build();
+			t._adaptWidth();
+			//FIXME: Is there any more elegant way to do this?
+			if(g.cellWidget){
+				g.cellWidget._init();
+				if(g.edit){
+					g.edit._init();
+				}
+			}
+			if(g.tree){
+				g.tree._initExpandLevel();
+			}
+			g.body.refresh();
+		}
+	});
+});

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

@@ -0,0 +1,368 @@
+define([
+	"dojo/_base/kernel",
+	"dojo/dom-construct",
+	"dojo/dom-style",
+	"dojo/dom-class",
+	"dojo/dom-geometry",
+	"dojo/_base/lang",
+	"dojo/_base/Deferred",
+	"../core/_Module",
+	"dojo/_base/declare",
+	"dojo/_base/fx",
+	"dojo/fx",
+	"dojo/query"
+], function(kernel, domConstruct, domStyle, domClass, domGeometry, lang, Deferred, _Module, declare, baseFx, fx, query){
+	kernel.experimental('gridx/modules/Dod');
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		Details on demand.
+
+		// useAnimation: Boolean
+		//		Indicates whether to use animation (slide) when showing/hiding the detail part.
+		useAnimation: true,
+
+		// duration: Number
+		//		The time used to play the animation.
+		duration: 750,
+		
+		defaultShow: false,
+
+		showExpando: true,
+
+		show: function(row){
+			// summary:
+			//		Show the detail part of a row, if this row has a detail part.
+			//		Use animation (slide the detail part out) if useAnimation is true.
+			//		Nothing happens if rowId is not valid or the row does not has a detail part.
+			// rowId: String
+			//		The ID of a row.
+			// return: dojo.Deferred.
+			//		A deferred object indicating when the detail is completely shown.
+		},
+
+		hide: function(row){
+			// summary:
+			//		Hide the detail part of a row, if this row has a detail part.
+			//		Use animation (slide the detail part in) if useAnimation is true.
+			//		Nothing happens if rowId is not valid or the row does not has a detail part.
+			// rowId: String
+			//		The ID of a row.
+			// return: dojo.Deferred.
+			//		A deferred object indicating when the detail is completely hidden.
+		},
+
+		toggle: function(row){
+		},
+
+		refresh: function(row){
+		},
+
+		isShown: function(row){
+		},
+
+		onShow: function(row){},
+		onHide: function(row){}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'dod',
+		required: ['body'],
+		useAnimation: true,
+		duration: 750,
+		defaultShow: false,
+		showExpando: true,
+		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');
+			if(this.grid.columnResizer){
+				this.connect(this.grid.columnResizer, 'onResize', '_onColumnResize');
+			}
+			this.loaded.callback();
+			
+		},
+		rowMixin: {
+			showDetail: function(){
+				this.grid.dod.show(this);
+			},
+			hideDetail: function(){
+				this.grid.dod.hide(this);
+			},
+			toggleDetail: function(){
+				this.grid.dod.toggle(this);
+			},
+			refreshDetail: function(){
+				this.grid.dod.refreshDetail(this);
+			},
+			isDetailShown: function(){
+				return this.grid.dod.isShown(this);
+			}
+		},
+		
+		show: function(row){
+			var _row = this._row(row);
+			if(_row.dodShown || _row.inAnim || !row.node()){return;}
+			
+			_row.dodShown = true;
+			var expando = this._getExpando(row);
+			if(expando){expando.firstChild.innerHTML = '-';}
+			
+			var node = row.node(), w = node.scrollWidth;
+			if(!_row.dodLoadingNode){
+				_row.dodLoadingNode = domConstruct.create('div', {
+					className: 'gridxDodLoadNode', 
+					innerHTML: 'Loading...'
+				});
+			}
+			if(!_row.dodNode){
+				_row.dodNode = domConstruct.create('div', {className: 'gridxDodNode'});
+			}
+			domConstruct.place(_row.dodLoadingNode, node, 'last');
+			domConstruct.place(_row.dodNode, node, 'last');
+			domStyle.set(_row.dodLoadingNode, 'width', w + 'px');
+			domStyle.set(_row.dodNode, 'width', w + 'px');
+			
+			domClass.add(node, 'gridxDodShown');
+			domStyle.set(_row.dodNode, 'display', 'none');
+			
+			if(_row.dodLoaded){
+				this._detailLoadComplete(row);
+				return;
+			}else{
+				domStyle.set(_row.dodLoadingNode, 'display', 'block');
+			}
+			
+			if(this.grid.rowHeader){
+				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');
+			}
+			
+			var df = new Deferred(), _this = this;
+			if(this.arg('detailProvider')){
+				this.detailProvider(this.grid, row.id, _row.dodNode, df);
+			}else{
+				df.callback();
+			}
+			df.then(
+				lang.hitch(this, '_detailLoadComplete', row), 
+				lang.hitch(this, '_detailLoadError', row)
+			);
+
+		},
+		
+		hide: function(row){
+			var _row = this._row(row), g = this.grid, escapeId = g._escapeId;
+			if(!_row.dodShown || _row.inAnim || !row.node()){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');
+				//TODO: 1 is the border for claro theme, will fix
+			}
+			var expando = this._getExpando(row);
+			if(expando){expando.firstChild.innerHTML = '+';}
+
+			if(this.arg('useAnimation')){
+				_row.inAnim = true;
+				fx.wipeOut({
+					node: _row.dodNode,
+					duration: this.arg('duration'),
+					onEnd: function(){
+						_row.dodShown = false;
+						_row.inAnim = false;
+						g.body.onRender();
+					}
+				}).play();
+				if(this.grid.rowHeader){
+					var rowHeaderNode = query('[rowid="' + escapeId(row.id) + '"].gridxRowHeaderRow', this.grid.rowHeader.bodyNode)[0];
+					baseFx.animateProperty({ node: rowHeaderNode.firstChild, 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';
+				}
+				
+			}
+			
+			_row.defaultShow = false;
+		},
+		
+		toggle: function(row){
+			if(this.isShown(row)){
+				this.hide(row);
+			}else{
+				this.show(row);
+			}
+		},
+		refresh: function(row){
+			var _row = this._row(row);
+			_row.dodLoaded = false;
+			this.show(row);
+		},
+		
+		isShown: function(row){
+			var _row = this._row(row);
+			return !!_row.dodShown;
+		},
+		
+		onShow: function(row){},
+		onHide: function(row){},
+		
+		//private
+		_rowMap: null,
+		_lastOpen: null, //only useful when autoClose is true.
+		_row: function(/*id|obj*/row){
+			var id = row;
+			if(typeof row === 'object'){
+				id = row.id;
+			}
+			return this._rowMap[id] || (this._rowMap[id] = {});
+		},
+		
+		_onBodyClick: function(e){
+			if(!domClass.contains(e.target, 'gridxDodExpando') && !domClass.contains(e.target, 'gridxDodExpandoText')){return;}
+			var node = e.target;
+			while(node && !domClass.contains(node, 'gridxRow')){
+				node = node.parentNode;
+			}
+			var idx = node.getAttribute('rowindex');
+			this.toggle(this.grid.row(parseInt(idx)));
+		},
+		
+		_onAfterRow: function(row){
+
+			var _row = this._row(row);
+			if(this.arg('showExpando')){
+				var tbl = query('table', row.node())[0];
+				var cell = tbl.rows[0].cells[0];
+				var span = domConstruct.create('span', {
+					className: 'gridxDodExpando',
+					innerHTML: '<span class="gridxDodExpandoText">' 
+						+ (this.arg('defaultShow') ? '-' : '+') + '</span>'
+				}, cell, 'first');
+			}
+			
+			if(this.isShown(row) || (this.arg('defaultShow') && _row.dodShown === undefined)){
+				_row.dodShown = false;
+				_row.defaultShow = true;
+				this.show(row);
+			}
+			
+		},
+
+		_onBodyUnrender: function(row){
+			// Remove the cache for the row when it is destroyed, so that dod recreates
+			// necessary dom nodes when the row is rendered again.
+			if(!row){return;}
+			var _row = this._row(row);
+			if(!_row){return;}
+
+			function _removeNode(node){
+				if(node && node.parentNode){
+					node.parentNode.removeChild(node);
+				}
+			}
+
+			_removeNode(_row.dodNode);
+			_removeNode(_row.dodLoadingNode);
+		},
+
+		_onAfterCell: function(cell){
+			//when the first cell's content is changed, update the expando
+			if(this.arg('showExpando') && cell.node().cellIndex == 0){
+				this._onAfterRow(cell.row);
+			}
+		},
+		
+		_onColumnResize: function(){
+			query('.gridxDodNode', this.grid.bodyNode).forEach(function(node){
+				domStyle.set(node, 'width', node.parentNode.firstChild.offsetWidth + 'px');
+			});
+		},
+		
+		_detailLoadComplete: function(row){
+			var _row = this._row(row), g = this.grid, escapeId = g._escapeId;
+			if(!this.isShown(row)){return;}
+			_row.dodLoaded = true;
+			
+			if(_row.defaultShow){
+				domStyle.set(_row.dodNode, 'display', 'block');
+				g.body.onRender();
+			}else{
+				if(domStyle.get(_row.dodLoadingNode, 'display') == 'block'){
+					domGeometry.setMarginBox(_row.dodNode, {h: domGeometry.getMarginBox(_row.dodLoadingNode).h});
+					domStyle.set(_row.dodNode, 'display', 'block');
+				}
+
+				if(this.arg('useAnimation')){
+					_row.inAnim = true;
+					fx.wipeIn({
+						node: _row.dodNode,
+						duration: this.arg('duration'),
+						onEnd: function(){
+							_row.inAnim = false;
+							g.body.onRender();
+						}
+					}).play();
+					
+					if(this.grid.rowHeader){
+						var rowHeaderNode = query('[rowid="' + escapeId(row.id) + '"].gridxRowHeaderRow', this.grid.rowHeader.bodyNode)[0];
+						baseFx.animateProperty({ node: rowHeaderNode.firstChild, 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';
+					_row.dodNode.style.height = 'auto';
+					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';
+					}
+					
+				}
+			}
+			domStyle.set(_row.dodLoadingNode, 'display', 'none');
+		},
+		_detailLoadError: function(row){
+			var _row = this._row(row);
+			_row.dodLoaded = false;
+			if(!this.isShown(row)){return;}
+			_row.dodLoadingNode.innerHTML = 'Error: failed to load detail.';
+		},
+		_showLoading: function(row){
+			var _row = this._row(row);
+			var node = _row.dodLoadingNode;
+			node.innerHTML = 'Loading...';
+		},
+		_getExpando: function(row){
+			if(!this.showExpando)return null;
+			var tbl = query('table', row.node())[0];
+			var cell = tbl.rows[0].cells[0];
+			return cell.firstChild;
+		},
+		
+		
+		//Focus
+		
+		endFunc: function(){}
+	});
+});