gridx-rails 1.1.0

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

@@ -0,0 +1,201 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/Deferred",
+	"dojo/_base/array",
+	"dojo/query",
+	"dojo/dom-construct",
+	"dojo/dom-class",
+	"dojo/dom-style",
+	"dojo/keys",
+	"dojo/_base/event",
+	"../core/_Module"
+], function(declare, Deferred, array, query, domConstruct, domClass, domStyle, keys, event, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		This module makes it easy to add custom contents to column header.
+		//		Other modules such as NestedSort or HeaderMenu can be based upon this module.
+
+		add: function(creater, priority, skipRefresh){
+			// summary:
+			//		Add a region to the header.
+			// creater: function(column)
+			//		A function returning a DOM node, which will be used as the region to be added to header.
+			// priority: Number
+			//		A priority value indicating where the region should appear in header.
+			//		The smaller the value, the closer it'll be from the right border of the header (left border if RTL).
+			// skipRefresh: Boolean
+			//		If true, the header won't be automatically refreshed immediately after this function,
+			//		so that user can add multiple regions all at once and then call the "refresh" method to show them all.
+		},
+
+		refresh: function(){
+			// summary:
+			//		Refresh the header so that changes to the regions can be reflected.
+		}
+	});
+=====*/
+
+return _Module.register(
+declare(_Module, {
+	name: 'headerRegions',
+
+	forced: ['header'],
+
+	constructor: function(){
+		this._regions = [];
+	},
+
+	load: function(){
+		var t = this;
+		t.refresh();
+		t._initFocus();
+		t.aspect(t.grid.header, 'onRender', 'refresh');
+		t.aspect(t.grid, 'onHeaderKeyDown', '_onKey');
+		t.loaded.callback();
+	},
+
+	add: function(creater, priority, skipRefresh){
+		this._regions.push({
+			c: creater,
+			p: priority || 0,
+			n: {}
+		});
+		if(!skipRefresh){
+			this.refresh();
+		}
+	},
+
+	refresh: function(){
+		var t = this,
+			g = t.grid,
+			regionNodes = t._regionNodes = [],
+			regions = t._regions;
+		if(regions.length){
+			array.forEach(t._regionCnnts || [], function(cnnt){
+				cnnt.remove();
+				t._cnnts.splice(array.indexOf(t._cnnts, cnnt), 1);
+			});
+			t._regionCnnts = [];
+			regions.sort(function(a, b){
+				return b.p - a.p;
+			});
+			query('.gridxCell', g.header.domNode).forEach(function(node){
+				var colId = node.getAttribute('colid'),
+					col = g.column(colId, 1),
+					nameNode = query('.gridxSortNode', node)[0];
+				regionNodes.push(nameNode);
+				nameNode.setAttribute('tabindex', -1);
+				t._regionCnnts.push(t.connect(nameNode, 'onblur', '_onRegionBlur'));
+				array.forEach(regions, function(region){
+					var regionNode = region.n[colId];
+					if(!regionNode){
+						regionNode = region.n[colId] = region.c(col);
+						if(regionNode){
+							regionNode.setAttribute('tabindex', -1);
+							domClass.add(regionNode, 'gridxHeaderRegion');
+							t.connect(regionNode, 'onblur', '_onRegionBlur');
+						}
+					}
+					if(regionNode){
+						domConstruct.place(regionNode, node, 'first');
+						regionNodes.push(regionNode);
+					}
+				});
+			});
+			if(!regionNodes[t._curRegionIdx]){
+				t._curRegionIdx = 0;
+			}
+		}
+	},
+
+	//Private-------------------------------------------------------------
+	_onRegionBlur: function(e){
+		var dn = this.grid.header.domNode;
+		query('.gridxHeaderRegionFocus', dn).removeClass('gridxHeaderRegionFocus');
+		domClass.remove(dn, 'gridxHeaderFocus');
+	},
+
+	_initFocus: function(){
+		var t = this,
+			g = t.grid;
+		g.focus.registerArea({
+			name: 'header',
+			priority: 0,
+			focusNode: g.header.domNode,
+			scope: t,
+			doFocus: t._doFocus,
+			onFocus: t._onFocus
+		});
+	},
+
+	_doFocus: function(e){
+		this._focusRegion(this._regionNodes[this._curRegionIdx]);
+		return true;
+	},
+
+	_onFocus: function(e){
+		var target = e.target,
+			header = this.grid.header.domNode,
+			i = array.indexOf(this._regionNodes, target),
+			n = i < 0 ? query(target, header).closest('.gridxSortNode')[0] : target;
+		n = n || query(target, header).closest('.gridxHeaderRegion')[0];
+		this._focusRegion(n);
+		return n;
+	},
+
+	_focusRegion: function(region){
+		if(region){
+			var t = this,
+				g = t.grid,
+				header = g.header.domNode,
+				headerCell = query(region).closest('.gridxCell', header)[0];
+			t._curRegionIdx = array.indexOf(t._regionNodes, region);
+			try{
+				region.focus();
+			}catch(e){
+				//In IE if region is hidden, this line will throw error.
+			}
+			setTimeout(function(){
+				query('.gridxHeaderRegionFocus', header).removeClass('gridxHeaderRegionFocus');
+				domClass.add(headerCell, 'gridxHeaderRegionFocus');
+				domClass.add(header, 'gridxHeaderFocus');
+				//make it asnyc so that IE will not lose focus
+				//firefox and ie will lose focus when region is invisible, focus it again.
+				region.focus();
+				if(g.hScroller){
+					g.hScroller.scrollToColumn(headerCell.getAttribute('colid'));
+				}
+			}, 0);
+		}
+	},
+
+	_onKey: function(e){
+		if(!e.ctrlKey && !e.shiftKey && !e.altKey){
+			var ltr = this.grid.isLeftToRight(),
+				nextKey = ltr ? keys.RIGHT_ARROW : keys.LEFT_ARROW,
+				prevKey = ltr ? keys.LEFT_ARROW : keys.RIGHT_ARROW;
+			if(e.keyCode == nextKey){
+				this._moveFocus(1);
+				event.stop(e);
+			}else if(e.keyCode == prevKey){
+				this._moveFocus(-1);
+				event.stop(e);
+			}
+		}
+	},
+
+	_moveFocus: function(dir){
+		var t = this,
+			i = t._curRegionIdx + dir,
+			regionNodes = t._regionNodes;
+		while(regionNodes[i] && domStyle.get(regionNodes[i], 'display') == 'none'){
+			i += dir;
+		}
+		if(regionNodes[i]){
+			t._focusRegion(regionNodes[i]);
+		}
+	}
+}));
+});

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

@@ -0,0 +1,274 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/Deferred",
+	"dojo/_base/array",
+	"dojo/query",
+	"../core/_Module"
+], function(declare, Deferred, array, query, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		module name: hiddenColumns.
+		//		Hide columns.
+		// description:
+		//		Hide columns and change the column array at the same time so that other grid features 
+		//		are not affected by hidden columns. That means, hidden columns can no longer be accessed 
+		//		through grid.columns() function.
+
+		// init: String[]
+		//		IDs of columns to be hidden when grid is initially created.
+		init: [],
+
+		add: function(colId){
+			// summary:
+			//		Hide all the given columns in arguments.
+			// colId: String|gridx.core.Column...
+			//		Column IDs can be provided directly as arguments.
+			//		gridx.core.Column object can also be provided.
+			// example:
+			//	|	//Hide columnA
+			//	|	grid.hiddenColumns.add("columnA");
+			//	|	//Hide columnB, columnC and columnD
+			//	|	grid.hiddenColumns.add("columnB", "columnC", "columnD");
+			//	|	//Column object is also acceptable.
+			//	|	var col = grid.column("columnA");
+			//	|	grid.hiddenColumns.add(col);
+		},
+
+		remove: function(colId){
+			// summary:
+			//		Show all the given columns in arguments.
+			// colId: String|gridx.core.Column...
+			//		Column IDs can be provided directly as arguments.
+			//		gridx.core.Column object can also be provided.
+			// example:
+			//	|	//show columnA
+			//	|	grid.hiddenColumns.remove("columnA");
+			//	|	//show columnB, columnC and columnD
+			//	|	grid.hiddenColumns.remove("columnB", "columnC", "columnD");
+			//	|	//Column object is also acceptable.
+			//	|	var col = { id: "columnA", ...};	//Can also be a column object retreived before it is hidden.
+			//	|	grid.hiddenColumns.remove(col);
+		},
+
+		clear: function(){
+			// summary:
+			//		Show all hidden columns.
+		},
+
+		get: function(){
+			// summary:
+			//		Get an array of current hidden column IDs.
+			// returns:
+			//		An array of current hidden column IDs.
+		}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'hiddenColumns',
+
+		load: function(args, startup){
+			var t = this,
+				g = t.grid,
+				ids = t.arg('init', []);
+			t._cols = g._columns.slice();
+			t.aspect(g, 'setColumns', function(){
+				t._cols = g._columns.slice();
+			});
+			if(g.move && g.move.column){
+				t.connect(g.move.column, 'onMoved', '_syncOrder');
+			}
+			if(g.persist){
+				ids = ids.concat(g.persist.registerAndLoad('hiddenColumns', function(){
+					return t.get();
+				}) || []);
+			}
+			if(ids.length){
+				startup.then(function(){
+					t.add.apply(t, ids);
+					t.loaded.callback();
+				});
+			}else{
+				t.loaded.callback();
+			}
+		},
+
+		add: function(){
+			var t = this,
+				g = t.grid,
+				columnsById = g._columnsById,
+				columns = g._columns,
+				columnLock = g.columnLock,
+				lockCount = 0,
+				hash = {},
+				cols = array.filter(array.map(arguments, function(id){
+					id = id && typeof id == "object" ? id.id : id;
+					return columnsById[id];
+				}), function(col){
+					return col && !col.ignore && (col.hidable === undefined || col.hidable);
+				});
+			//remove duplicated arguments.
+			for(var i = 0, len = cols.length; i < len; ++i){
+				hash[cols[i].id] = cols[i];
+			}
+			cols = [];
+			for(var arg in hash){
+				cols.push(hash[arg]);
+			}
+			if(columnLock){
+				lockCount = columnLock.count;
+				columnLock.unlock();
+			}
+			array.forEach(cols, function(col){
+				if(col.index < lockCount){
+					//If a locked column is hidden, should unlock it.
+					--lockCount;
+				}
+				col.hidden = true;
+				delete columnsById[col.id];
+				columns.splice(array.indexOf(columns, col), 1);
+				//Directly remove dom nodes instead of refreshing the whole body to make it faster.
+				query('[colid="' + g._escapeId(col.id) + '"].gridxCell', g.domNode).forEach(function(node){
+					node.parentNode.removeChild(node);
+				});
+			});
+			if(cols.length){
+				array.forEach(columns, function(col, i){
+					col.index = i;
+				});
+			}
+			g.columnWidth._adaptWidth();
+			query('.gridxCell', g.bodyNode).forEach(function(node){
+				var s = node.style,
+					w = s.width = s.minWidth = s.maxWidth = columnsById[node.getAttribute('colid')].width;
+			});
+			//FIXME: this seems ugly....
+			if(g.vScroller._doVirtualScroll){
+				g.body.onForcedScroll();
+			}
+			return t._refresh(0).then(function(){
+				if(columnLock && lockCount > 0){
+					columnLock.lock(lockCount);
+				}
+			});
+		},
+
+		remove: function(){
+			var t = this,
+				g = t.grid,
+				columns = g._columns,
+				columnLock = g.columnLock,
+				lockCount = 0,
+				changed;
+			if(columnLock){
+				lockCount = columnLock.count;
+				columnLock.unlock();
+			}
+			array.forEach(arguments, function(id){
+				id = id && typeof id == "object" ? id.id : id;
+				var c,
+					index = -1,
+					i = 0,
+					len = t._cols.length;
+				for(; i < len; ++i){
+					c = t._cols[i];
+					if(c.id == id && c.hidden){
+						delete c.hidden;
+						c.index = ++index;
+						break;
+					}else if(!c.hidden){
+						index = c.index;
+					}
+				}
+				if(i < len){
+					changed = 1;
+					t.grid._columnsById[id] = c;
+					columns.splice(index, 0, c);
+					for(i = index + 1; i < columns.length; ++i){
+						columns[i].index = i;
+					}
+				}
+			});
+			return t._refresh(changed).then(function(){
+				if(columnLock && lockCount > 0){
+					columnLock.lock(lockCount);
+				}
+			});
+		},
+
+		clear: function(){
+			var g = this.grid,
+				columnLock = g.columnLock,
+				lockCount = 0,
+				changed;
+			if(columnLock){
+				lockCount = columnLock.count;
+				columnLock.unlock();
+			}
+			g._columns = array.map(this._cols, function(col, i){
+				col.index = i;
+				if(col.hidden){
+					changed = 1;
+					delete col.hidden;
+					g._columnsById[col.id] = col;
+				}
+				return col;
+			});
+			return this._refresh(changed).then(function(){
+				if(columnLock && lockCount > 0){
+					columnLock.lock(lockCount);
+				}
+			});
+		},
+
+		get: function(){
+			var t = this,
+				res = [],
+				cols = t._cols,
+				i = 0;
+			for(; i < cols.length; ++i){
+				if(cols[i].hidden){
+					res.push(cols[i].id);
+				}
+			}
+			return res;
+		},
+
+		_syncOrder: function(){
+			var t = this,
+				cols = t._cols,
+				columns = t.grid._columns,
+				i = 0,
+				j = 0,
+				c, k;
+			//Sort the cached columns to have the same order as g._columns.
+			for(; i < columns.length && j < cols.length; ++i, ++j){
+				//j must not overflow here because t._cols and g._columns are synced up.
+				for(c = cols[j]; c.hidden; c = cols[j]){
+					++j;
+				}
+				if(columns[i] != c){
+					k = array.indexOf(cols, columns[i]);
+					cols[j] = cols[k];
+					cols[k] = c;
+				}
+			}
+		},
+
+		_refresh: function(changed){
+			var g = this.grid;
+			if(changed){
+				g.header.refresh();
+				g.columnWidth._adaptWidth();
+				return g.body.refresh();
+			}else{
+				var d = new Deferred();
+				g.header.onRender();
+				d.callback();
+				return d;
+			}
+		}
+	});
+});