gridx-rails 1.1.0

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

@@ -0,0 +1,412 @@
+define([
+	"dojo/_base/declare",
+	"dojo/query",
+	"dojo/_base/lang",
+	"dojo/_base/sniff",
+	"dojo/aspect",
+	"dojo/dom-construct",
+	"dojo/dom-class",
+	"dojo/dom-style",
+	"dojo/dom-geometry",
+	"dojo/keys",
+	"../core/_Module"
+], function(declare, query, lang, has, aspect, domConstruct, domClass, domStyle, domGeo, keys, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		This modules provides a header before each row.
+		// description:
+		//		Row header can be used as a UI handler for row selection, especially when
+		//		cell selection is turned on and selectRowTriggerOnCell is turned off.
+		//		It can also be used as a place to hold the checkbox/radiobutton for IndirectSelect
+
+		// width: String
+		//		The width (CSS value) of a row header.
+		width: '20px',
+
+		onMoveToRowHeaderCell: function(){
+			// summary:
+			//		Fired when focus is moved to a row header using keyboard.
+			// tags:
+			//		private callback
+		},
+
+		// headerProvider: Function
+		//		A functionn that returns an HTML string to fill the header cell of row headers.
+		headerProvider: null,
+
+		// cellProvider: Function
+		//		A function that returns an HTML string to fill the body cells of row headers.
+		cellProvider: null
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'rowHeader',
+
+		constructor: function(){
+			this.headerNode = domConstruct.create('div', {
+				'class': 'gridxRowHeaderHeader',
+				role: 'row',
+				innerHTML: ['<table role="presentation" border="0" cellspacing="0" cellpadding="0" style="width: ', 
+					this.arg('width'), 
+					';"><tr><td class="gridxRowHeaderHeaderCell" role="rowheader" tabindex="-1"></td></tr></table>'
+				].join('')
+			});
+			this.bodyNode = domConstruct.create('div', {
+				'class': 'gridxRowHeaderBody'
+			});
+		},
+
+		destroy: function(){
+			this.inherited(arguments);
+			domConstruct.destroy(this.headerNode);
+			domConstruct.destroy(this.bodyNode);
+		},
+
+		preload: function(){
+			var t = this,
+				rhhn = t.headerNode,
+				rhbn = t.bodyNode,
+				g = t.grid,
+				body = g.body,
+				w = t.arg('width');
+			//register events
+			g._initEvents(['RowHeaderHeader', 'RowHeaderCell'], g._eventNames);
+			//modify header
+			g.header.domNode.appendChild(rhhn);
+			rhhn.style.width = w;
+			t.headerCellNode = query('td', rhhn)[0];
+			g._connectEvents(rhhn, '_onHeaderMouseEvent', t);
+			//modify body
+			g.mainNode.appendChild(rhbn);
+			rhbn.style.width = w;
+			g.hLayout.register(null, rhbn);
+			
+			t.batchConnect(
+				[body, 'onRender', '_onRendered'],
+				[body, 'onAfterRow', '_onAfterRow'],
+				[body, 'onAfterCell', '_onAfterCell'],
+				[body, 'onUnrender', '_onUnrender'],
+				[body, 'onEmpty', function(){
+					rhbn.innerHTML = '';
+				}],
+				[g.bodyNode, 'onscroll', '_onScroll'],
+				[g, 'onRowMouseOver', '_onRowMouseOver'],
+				[g, 'onRowMouseOut', '_onRowMouseOver'],
+				[g, '_onResizeEnd', '_onResize'],
+				g.columnWidth && [g.columnWidth, 'onUpdate', '_onResize'],
+				g.columnResizer && [g.columnResizer, 'onResize', '_onResize'],
+				[g, 'onRowHeaderCellMouseOver', '_onCellMouseOver'],
+				[g, 'onRowHeaderCellMouseOut', '_onCellMouseOver'],
+				[t.model, 'onSizeChange', '_onSizeChange']);
+			//TODO: need to organize this into connect/disconnect system
+			t._cnnts.push(
+				aspect.before(body, 'renderRows', lang.hitch(t, t._onRenderRows), true),
+				aspect.before(body, '_onDelete', lang.hitch(t, t._onDelete), true));
+
+			g._connectEvents(rhbn, '_onBodyMouseEvent', t);
+			t._initFocus();
+		},
+
+		load: function(args, startup){
+			var t = this,
+				g = t.grid,
+				bn = t.bodyNode;
+			startup.then(function(){
+				var w = bn.offsetWidth || domStyle.get(bn, 'width'),
+					ltr = g.isLeftToRight(),
+					mainBorder = domGeo.getBorderExtents(g.mainNode);
+				bn.style[ltr ? 'left' : 'right'] = -(w + (ltr ? mainBorder.l : mainBorder.r)) + 'px';
+				t.loaded.callback();
+			});
+		},
+
+		//Public--------------------------------------------------------------------------
+		width: '20px',
+
+		onMoveToRowHeaderCell: function(){},
+
+		//Private-------------------------------------------------------
+		_onRenderRows: function(start, count, position){
+			var nd = this.bodyNode;
+			if(count > 0){
+				var str = this._buildRows(start, count);
+				if(position == 'top'){
+					domConstruct.place(str, nd, 'first');
+				}else if(position == 'bottom'){
+					domConstruct.place(str, nd, 'last');
+				}else{
+					nd.innerHTML = str;
+					nd.scrollTop = 0;
+				}
+			}else if(position != 'top' && position != 'bottom'){
+				nd.innerHTML = '';
+			}
+		},
+
+		_onAfterRow: function(row){
+			var t = this,
+				visualIndex = row.visualIndex(),
+				n = query('[visualindex="' + visualIndex + '"].gridxRowHeaderRow', t.bodyNode)[0],
+				bn = t.grid.dod? query('[visualindex="' + visualIndex + '"].gridxRow', t.grid.bodyNode)[0] : query('[visualindex="' + visualIndex + '"].gridxRow .gridxRowTable', t.grid.bodyNode)[0],
+				nt = n.firstChild,
+				cp = t.arg('cellProvider');
+			n.setAttribute('rowid', row.id);
+			n.setAttribute('rowindex', row.index());
+			n.setAttribute('parentid', t.model.treePath(row.id).pop() || '');
+			if(cp){
+				nt.firstChild.firstChild.firstChild.innerHTML = cp.call(t, row);
+			}
+			t._syncRowHeight(nt, bn);
+		},
+
+		_onAfterCell: function(cell){
+			//This is to ensure the rowHeader get correct height for editable cells
+			var t = this,
+				visualIndex = cell.row.visualIndex(),
+				n = query('[visualindex="' + visualIndex + '"].gridxRowHeaderRow', t.bodyNode)[0],
+				bn = query('[visualindex="' + visualIndex + '"].gridxRow .gridxRowTable', t.grid.bodyNode)[0];
+			t._syncRowHeight(n.firstChild, bn);
+		},
+
+		_syncRowHeight: function(rowHeaderNode, bodyNode){
+			//Check if the table is collasped.
+			var t = this;
+			if(t._isCollapse === undefined){
+				var refNode = query('.gridxCell', t.grid.header.innerNode)[0];
+				t._isCollapse = refNode && domStyle.get(refNode, 'borderCollapse') == 'collapse';
+			}
+			//Use setTimeout to ensure the row header height correct reflects the body row height.
+			//FIXME: This is tricky and may not be working in some special cases.
+			function getHeight(){
+				return has('ie') <= 8 || t._isCollapse ? bodyNode.offsetHeight + 'px' : domStyle.getComputedStyle(bodyNode).height;
+			}
+			rowHeaderNode.style.height = getHeight();
+			setTimeout(function(){
+				rowHeaderNode.style.height = getHeight();
+			}, 0);
+		},
+
+		_onRendered: function(start, count){
+			var t = this,
+				hp = t.arg('headerProvider');
+			if(hp){
+				t.headerCellNode.innerHTML = hp();
+			}
+			t._onScroll();
+		},
+		
+		_onSizeChange: function(size, oldSize){
+			var t = this,
+				g = t.grid,
+				hp = this.arg('headerProvider');
+			if(!size && hp){
+				t.headerCellNode.innerHTML = '';
+			}
+			t._onScroll();
+		},
+
+		_onDelete: function(id){
+			var nodes = this.model.isId(id) && query('[rowid="' + this.grid._escapeId(id) + '"].gridxRowHeaderRow', this.bodyNode);
+			if(nodes && nodes.length){
+				var node = nodes[nodes.length - 1],
+					pid = node.getAttribute('parentid'),
+					pids = {},
+					toDeleteC = 1;
+				pids[id] = 1;
+				for(sn = node.nextSibling; sn && pids[sn.getAttribute('parentid')]; sn = sn.nextSibling){
+					rid = sn.getAttribute('rowid');
+					toDeleteC++;
+					pids[rid] = 1;
+				}
+				for(; sn; sn = sn.nextSibling){
+					if(sn.getAttribute('parentid') == pid){
+						sn.setAttribute('rowindex', parseInt(sn.getAttribute('rowindex'), 10) - 1);
+					}
+					var vidx = parseInt(sn.getAttribute('visualindex'), 10);
+					sn.setAttribute('visualindex', vidx - toDeleteC);
+				}
+			}
+		},
+		
+		_onUnrender: function(id, refresh){
+			//If this is fired in partial refresh, don't destroy the row header, save if for later use.
+			if(refresh != 'refresh'){
+				var nodes = this.model.isId(id) && query('[rowid="' + this.grid._escapeId(id) + '"].gridxRowHeaderRow', this.bodyNode);
+				if(nodes && nodes.length){
+					//remove the last node instead of the first, because when refreshing, there'll be 2 nodes with same id.
+					domConstruct.destroy(nodes[nodes.length - 1]);
+				}
+			}
+		},
+
+		_onScroll: function(){
+			this.bodyNode.scrollTop = this.grid.bodyNode.scrollTop;
+		},
+
+		_onResize: function(){
+			var ie = has('ie');
+			for(var brn = this.grid.bodyNode.firstChild, n = this.bodyNode.firstChild;
+				brn && n;
+				brn = brn.nextSibling, n = n.nextSibling){
+					var bn = this.grid.dod? brn : brn.firstChild;
+					n.firstChild.style.height = ie > 8? domStyle.getComputedStyle(bn).height : bn.offsetHeight + 'px';
+					
+					// n.firstChild.style.height = ie > 8? domStyle.getComputedStyle(brn.firstChild).height : brn.firstChild.offsetHeight + 'px';
+			}
+			var t = this,
+				g = t.grid,
+				bn = t.bodyNode,
+				w = bn.offsetWidth || domStyle.get(bn, 'width'),
+				ltr = g.isLeftToRight(),
+				mainBorder = domGeo.getBorderExtents(g.mainNode);
+			bn.style[ltr ? 'left' : 'right'] = -(w + (ltr ? mainBorder.l : mainBorder.r)) + 'px';
+		},
+
+		_buildRows: function(start, count){
+			var sb = [];
+			for(var i = 0; i < count; ++i){
+				sb.push('<div class="gridxRowHeaderRow" role="row" visualindex="', start + i,
+					'"><table role="presentation" border="0" cellspacing="0" cellpadding="0" style="height: 24px;"><tr><td class="gridxRowHeaderCell" role="rowheader" tabindex="-1"></td></tr></table></div>');
+			}
+			return sb.join('');
+		},
+
+		//Events
+		_onHeaderMouseEvent: function(eventName, e){
+			var g = this.grid,
+				evtCell = 'onRowHeaderHeader' + eventName;
+			if(g._isConnected(evtCell)){
+				g[evtCell](e);
+			}
+		},
+
+		_onBodyMouseEvent: function(eventName, e){
+			var g = this.grid,
+				evtCell = 'onRowHeaderCell' + eventName,
+				evtRow = 'onRow' + eventName,
+				cellConnected = g._isConnected(evtCell),
+				rowConnected = g._isConnected(evtRow);
+			if(cellConnected || rowConnected){
+				this._decorateBodyEvent(e);
+				if(e.rowIndex >= 0){
+					if(e.isRowHeader && cellConnected){
+						g[evtCell](e);
+					}
+					if(rowConnected){
+						g[evtRow](e);
+					}
+				}
+			}
+		},
+
+		_decorateBodyEvent: function(e){
+			var node = e.target || e.originalTarget;
+			while(node && node != this.bodyNode){
+				if(domClass.contains(node, 'gridxRowHeaderCell')){
+					e.isRowHeader = true;
+					e.rowHeaderCellNode = node;
+				}else if(node.tagName.toLowerCase() === 'div' && domClass.contains(node, 'gridxRowHeaderRow')){
+					e.rowId = node.getAttribute('rowid');
+					e.parentId = node.getAttribute('parentid');
+					e.rowIndex = parseInt(node.getAttribute('rowindex'), 10);
+					e.visualIndex = parseInt(node.getAttribute('visualindex'), 10);
+					return;
+				}
+				node = node.parentNode;
+			}
+		},
+
+		_onRowMouseOver: function(e){
+			var rowNode = query('> [rowid="' + this.grid._escapeId(e.rowId) + '"].gridxRowHeaderRow', this.bodyNode)[0];
+			if(rowNode){
+				domClass.toggle(rowNode, "gridxRowOver", e.type.toLowerCase() == 'mouseover');
+			}
+		},
+
+		_onCellMouseOver: function(e){
+			var cellNode = query('> [rowid="' + this.grid._escapeId(e.rowId) + '"].gridxRowHeaderRow .gridxRowHeaderCell', this.bodyNode)[0];
+			if(cellNode){
+				domClass.toggle(cellNode, "gridxRowHeaderCellOver", e.type.toLowerCase() == 'mouseover');
+			}
+		},
+
+		//Focus--------------------------------------------------------
+		_initFocus: function(){
+			var t = this,
+				focus = t.grid.focus;
+			if(focus){
+				focus.registerArea({
+					name: 'rowHeader',
+					priority: 0.9,
+					focusNode: t.bodyNode,
+					scope: t,
+					doFocus: t._doFocus,
+					onFocus: t._onFocus,
+					doBlur: t._blur,
+					onBlur: t._blur,
+					connects: [
+						t.connect(t.bodyNode, 'onkeydown', '_onKeyDown')
+					]
+				});
+			}
+		},
+
+		_doFocus: function(evt){
+			if(this._focusRow(this.grid.body._focusCellRow)){
+				this.grid.focus.stopEvent(evt);
+				return true;
+			}
+		},
+
+		_onFocus: function(evt){
+			var t = this,
+				node = evt.target;
+			while(node != t.bodyNode){
+				if(domClass.contains(node, 'gridxRowHeaderRow')){
+					var r = t.grid.body._focusCellRow = parseInt(node.getAttribute('visualindex'), 10);
+					t._focusRow(r);
+					return true;
+				}
+				node = node.parentNode;
+			}
+		},
+
+		_focusRow: function(visIndex){
+			var t = this,
+				node = query('[visualindex="' + visIndex + '"] .gridxRowHeaderCell', t.bodyNode)[0];
+			t._blur();
+			node = node || t.bodyNode.firstChild;
+			if(node){
+				domClass.add(node, 'gridxCellFocus');
+				node.focus();
+			}
+			return node;
+		},
+
+		_blur: function(){
+			query('.gridxCellFocus', this.bodyNode).forEach(function(node){
+				domClass.remove(node, 'gridxCellFocus');
+			});
+			return true;
+		},
+
+		_onKeyDown: function(evt){
+			var t = this, g = t.grid;
+			if(g.focus.currentArea() == 'rowHeader' && 
+					evt.keyCode == keys.UP_ARROW || evt.keyCode == keys.DOWN_ARROW){
+				g.focus.stopEvent(evt);
+				var step = evt.keyCode == keys.UP_ARROW ? -1 : 1,
+					body = g.body,
+					r = body._focusCellRow + step;
+				body._focusCellRow = r = r < 0 ? 0 : (r >= g.view.visualCount ? g.view.visualCount - 1 : r);
+				g.vScroller.scrollToRow(r).then(function(){
+					t._focusRow(r);
+					t.onMoveToRowHeaderCell(r, evt);
+				});
+			}
+		}
+	});
+});

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

@@ -0,0 +1,143 @@
+define([
+	"dojo/_base/kernel",
+	"dojo/_base/lang",
+	"../core/_Module",
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"dojo/dom-class",
+	'dojo/aspect',
+	"dojo/query"
+], function(kernel, lang, _Module, declare, array, domClass, aspect, query){
+	kernel.experimental('gridx/modules/RowLock');
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		Lock up some rows at the top of the grid body, so that they don't scroll vertically.
+		// description:
+		//		This module is not compatible with VirtualVScroller.
+
+		lock: function(count){
+			// summary:
+			//		TODOC
+		},
+
+		unlock: function(){
+			// summary:
+			//		TODOC
+		}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'rowLock',
+		required: ['vLayout'],
+		forced: ['hLayout', 'body'],
+		count: 0,
+		load: function(args, deferStartup){
+			this.count = this.arg('count');
+			var _this = this, 
+				g = this.grid;
+			
+			deferStartup.then(function(){
+				
+				if(_this.grid.vScroller)_this.connect(g.vScrollerNode, 'onscroll', function(){
+					_this._updatePosition();
+				});
+				
+				_this.lock(_this.count);
+				_this.loaded.callback();
+			});
+			aspect.before(g.body, 'refresh', function(){
+				_this.grid.bodyNode.style.paddingTop = '0px';
+			});
+			
+			this.connect(g.body, 'refresh', function(){
+				//FIX ME
+				//the lock can't run before vscroll._doScroll()
+				_this.grid.bodyNode.style.paddingTop = '0px';
+				setTimeout(function(){
+					_this.lock(_this.count);
+				}, 0);
+			});
+		},
+		
+		lock: function(count){
+			this.unlock();
+			this.count = count;
+			this._foreachLockedRows(function(node){
+				node.style.position = 'absolute';
+				domClass.add(node, 'gridxLockedRow');
+			}, function(rowHeaderNode){
+				rowHeaderNode.style.position = 'absolute';
+			});
+			
+			this._adjustBody();
+			this._updatePosition();
+		},
+		
+		unlock: function(){
+			this._foreachLockedRows(function(node){
+				node.style.position = 'static';
+				domClass.remove(node, 'gridxLockedRow');
+			}, function(rowHeaderNode){
+				rowHeaderNode.style.position = 'static';
+			});
+			this.grid.bodyNode.style.paddingTop = '0px';
+			if(this.grid.rowHeader){
+				this.grid.rowHeader.bodyNode.style.paddingTop = '0px';
+			}
+			this.count = 0;
+			
+		},
+		
+		_adjustBody: function(){
+			// summary:
+			//	Called after content is changed or column width is resized, which
+			//	may cause row height change of locked rows.
+			var h = 0;
+			this._foreachLockedRows(function(node){
+				h += node.offsetHeight;
+			}, function(rowHeaderNode){
+				
+			});
+			this.grid.bodyNode.style.paddingTop = h + 'px';
+			if(this.grid.rowHeader){
+				this.grid.rowHeader.bodyNode.style.paddingTop = h + 'px';			
+			} 
+		},
+		
+		_updatePosition: function(){
+			// summary:
+			//	Update position of locked rows so that they look like locked.
+			if(!this.count){return;}
+			var t = this.grid.bodyNode.scrollTop, h = 0, _this = this;
+			this._foreachLockedRows(function(node){
+				node.style.top = t + h + 'px';
+				h += node.offsetHeight;
+			}, function(rowHeaderNode){
+				rowHeaderNode.style.top = t + h + 'px';
+			});
+		},
+		
+		_foreachLockedRows: function(callback, rowHeaderCallback){
+			rowHeaderCallback = rowHeaderCallback? rowHeaderCallback : callback;
+			var nodes = this.grid.bodyNode.childNodes;
+			var rowHeaderNodes = this.grid.rowHeader? this.grid.rowHeader.bodyNode.childNodes : [];
+			for(var i = 0; i < this.count; i++){
+				if(rowHeaderNodes[i]){
+					rowHeaderCallback(rowHeaderNodes[i]);
+				}
+				if(nodes[i]){
+					callback(nodes[i]);
+				}
+			}
+		},
+		
+		_restoreLock: function(){
+			console.log('restore lock')
+			this.lock(this.count);
+		}
+		
+	});
+});