gridx-rails 1.1.0

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

@@ -0,0 +1,172 @@
+define([
+	"dojo/_base/declare",
+	"dojo/dom-style",
+	"dojo/_base/sniff",
+	"dojo/_base/Deferred",
+	"dojo/query",
+	"dojox/html/metrics",
+	"../core/_Module"
+], function(declare, domStyle, has, Deferred, query, metrics, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		This module provides basic horizontal scrolling for grid
+
+		scrollToColumn: function(colId){
+			// summary:
+			//	Scroll the grid to make a column fully visible.
+		},
+
+		refresh: function(){
+			// summary:
+			//		Refresh scroller itself to match grid body
+		},
+
+		scroll: function(left){
+			// summary:
+			//		Scroll the grid horizontally
+			// tags:
+			//		private
+			// left: Number
+			//		The scrollLeft value
+		}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'hScroller',
+
+		constructor: function(){
+			var t = this,
+				g = t.grid,
+				n = t.domNode = g.hScrollerNode;
+			g._initEvents(['H'], ['Scroll']);
+			t.container = n.parentNode;
+			t.stubNode = n.firstChild;
+		},
+
+		preload: function(){
+			var t = this,
+				g = t.grid,
+				n = g.hScrollerNode;
+			if(!g.autoWidth){
+				g.vLayout.register(t, 'container', 'footerNode', 0);
+				n.style.display = 'block';
+				t.aspect(g.columnWidth, 'onUpdate', 'refresh');
+				t.connect(n, 'onscroll', '_onScroll');
+				if(has('ie')){
+					//In IE8 the horizontal scroller bar will disappear when grid.domNode's css classes are changed.
+					//In IE6 this.domNode will become a bit taller than usual, still don't know why.
+					n.style.height = (metrics.getScrollbar().h + 2) + 'px';
+				}
+			}
+		},
+		
+		//Public API-----------------------------------------------------------
+		scroll: function(left){
+			var dn = this.domNode;
+			if((has('webkit') || has('ie') < 8) && !this.grid.isLeftToRight()){
+				left = dn.scrollWidth - dn.offsetWidth - left;
+			}
+			if((has('ff')) && !this.grid.isLeftToRight() && left > 0){
+				left = -left;
+			}
+			dn.scrollLeft = left;
+		},
+		
+		scrollToColumn: function(colId, rowDiv){
+			//when rowDiv has value, it's caused by move focus in Body.js
+			//It's used only for column lock module
+
+			var hNode = this.grid.header.innerNode,
+				cells = query('.gridxCell', hNode),
+				left = 0,
+				right = 0,
+				ltr = this.grid.isLeftToRight(),
+				scrollLeft = this.domNode.scrollLeft;
+			if(!ltr && (has('webkit') || has('ie') < 8)){
+				scrollLeft = this.domNode.scrollWidth - scrollLeft - hNode.offsetWidth;//the value relative to col 0
+			}
+
+			if(rowDiv && this.grid.columnLock && this.grid.columnLock.count){
+				//for column lock, row scrolls separately
+				scrollLeft = rowDiv.scrollLeft;
+				if(scrollLeft != this.domNode.scrollLeft){
+					this.scroll(scrollLeft);
+					return;
+				}
+			}
+
+			scrollLeft = Math.abs(scrollLeft);
+			//get cell's left border and right border position
+			for(var i = 0; i < cells.length; i++){
+				left = cells[i].offsetLeft;
+				right = left + cells[i].offsetWidth;
+				if(cells[i].getAttribute('colid') == colId){
+					break;
+				}
+			}
+
+			//if the cell is not visible, scroll to it
+			if(ltr && left < scrollLeft){
+				this.scroll(left);
+			}else if(ltr && right > scrollLeft + hNode.offsetWidth){
+				this.scroll(right - hNode.offsetWidth);
+			}else if(!ltr && right > hNode.scrollWidth - scrollLeft){
+				this.scroll(right - hNode.scrollWidth);
+			}else if(!ltr && left + scrollLeft < hNode.scrollWidth - hNode.offsetWidth){
+				this.scroll(hNode.scrollWidth - hNode.offsetWidth - left);
+			}
+		},
+		
+		refresh: function(){
+			var t = this,
+				g = t.grid,
+				ltr = g.isLeftToRight(),
+				lead = g.hLayout.lead,
+				tail = g.hLayout.tail,
+				w = (g.domNode.clientWidth || domStyle.get(g.domNode, 'width')) - lead - tail,
+				bn = g.header.innerNode,
+				pl = domStyle.get(bn, ltr ? 'paddingLeft' : 'paddingRight') || 0,	//TODO: It is special for column lock now.
+				s = t.domNode.style,
+				sw = bn.firstChild.offsetWidth + pl,
+				oldDisplay = s.display,
+				newDisplay = (sw <= w) ? 'none' : 'block';
+				
+			s[ltr ? 'marginLeft' : 'marginRight'] = lead + pl + 'px';
+			s[ltr ? 'marginRight' : 'marginLeft'] = tail + 'px';
+			//Ensure IE does not throw error...
+			s.width = (w - pl < 0 ? 0 : w - pl) + 'px';
+			t.stubNode.style.width = (sw - pl < 0 ? 0 : sw - pl) + 'px';
+			s.display = newDisplay;
+			if(oldDisplay != newDisplay){
+				g.vLayout.reLayout();
+			}
+		},
+		
+		//Private-----------------------------------------------------------
+		_lastLeft: 0,
+
+		_onScroll: function(e){
+			//	Fired by h-scroller's scrolling event
+			var t = this,
+				s = t.domNode.scrollLeft;
+			if((has('webkit') || has('ie') < 8) && !t.grid.isLeftToRight()){
+				s = t.domNode.scrollWidth - t.domNode.offsetWidth - s;
+			}
+			if(t._lastLeft != s){
+				t._lastLeft = s;
+				t._doScroll();
+			}
+		},
+
+		_doScroll: function(rowNode){
+			//	Sync the grid body with the scroller.
+			var t = this,
+				g = t.grid;
+			g.bodyNode.scrollLeft = t.domNode.scrollLeft;
+			g.onHScroll(t._lastLeft);
+		}
+	});
+});

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

@@ -0,0 +1,289 @@
+define([
+/*====="../core/Column", =====*/
+	"dojo/_base/declare",
+	"dojo/_base/lang",
+	"dojo/_base/array",
+	"dojo/dom-construct",
+	"dojo/dom-class",
+	"dojo/dom-geometry",
+	"dojo/query",
+	"dojo/_base/sniff",
+	"dojo/keys",
+	"../core/_Module"
+], function(/*=====Column, =====*/declare, lang, array, domConstruct, domClass, domGeometry, query, has, keys, _Module){
+
+/*=====
+	Column.headerNode = function(){
+		// summary:
+		//		Get header node of the column.
+		// returns:
+		//		The header node of this column.
+	};
+
+	return declare(_Module, {
+		// summary:
+		//		The header UI of grid
+		// description:
+		//		This module is in charge of the rendering of the grid header. But it should not manage column width,
+		//		which is the responsibility of ColumnWidth module.
+
+		// hidden: Boolean
+		//		Whether the header UI should be hidden.
+		hidden: false,
+
+		getHeaderNode: function(id){
+			// summary:
+			//		Get the header DOM node by column ID.
+			// id: String
+			//		The column ID
+			// returns:
+			//		The header DOM node
+		},
+
+		refresh: function(){
+			// summary:
+			//		Re-build the header UI.
+		},
+
+		onRender: function(){
+			// summary:
+			//		Fired when the header is rendered.
+			// tags:
+			//		callback
+		},
+
+		onMoveToHeaderCell: function(){
+			// summary:
+			//		Fired when the focus is moved to a header cell by keyboard.
+			// tags:
+			//		callback
+		}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'header',
+
+		constructor: function(){
+			var t = this,
+				dn = t.domNode = domConstruct.create('div', {
+					'class': 'gridxHeaderRow',
+					role: 'presentation'
+				}),
+				inner = t.innerNode = domConstruct.create('div', {
+					'class': 'gridxHeaderRowInner',
+					role: 'row'
+				});
+			t.grid._connectEvents(dn, '_onMouseEvent', t);
+		},
+
+		preload: function(args){
+			var t = this,
+				g = t.grid;
+			t.domNode.appendChild(t.innerNode);
+			t._build();
+			g.headerNode.appendChild(t.domNode);
+			//Add this.domNode to be a part of the grid header
+			g.vLayout.register(t, 'domNode', 'headerNode');
+			t.aspect(g, 'onHScroll', '_onHScroll');
+			//FIXME: sometimes FF will remember the scroll position of the header row, so force aligned with body.
+			//Does not occur in any other browsers.
+			if(has('ff')){
+				t.aspect(g, 'onModulesLoaded', function(){
+					t._onHScroll(t._scrollLeft);
+				});
+			}
+			if(g.columnResizer){
+				t.aspect(g.columnResizer, 'onResize', function(){
+					if(g.hScrollerNode.style.display == 'none'){
+						t._onHScroll(0);
+					}
+				});
+			}
+			t.aspect(g, 'onHeaderCellMouseOver', function(){
+				g.vLayout.reLayout();
+			});
+			t.aspect(g, 'onHeaderCellMouseOut', function(){
+				g.vLayout.reLayout();
+			});
+			t._initFocus();
+		},
+
+		destroy: function(){
+			this.inherited(arguments);
+			domConstruct.destroy(this.domNode);
+		},
+
+		columnMixin: {
+			headerNode: function(){
+				return this.grid.header.getHeaderNode(this.id);
+			}
+		},
+
+		//Public-----------------------------------------------------------------------------
+		hidden: false,
+
+		getHeaderNode: function(id){
+			return query("[colid='" + this.grid._escapeId(id) + "']", this.domNode)[0];
+		},
+
+		refresh: function(){
+			this._build();
+			this._onHScroll(this._scrollLeft);
+			this.grid.vLayout.reLayout();
+			this.onRender();
+		},
+
+		onRender: function(){},
+
+		onMoveToHeaderCell: function(){},
+		
+		//Private-----------------------------------------------------------------------------
+		_scrollLeft: 0,
+
+		_build: function(){
+			var t = this,
+				g = t.grid,
+				f = g.focus,
+				sb = ['<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr>'];
+			array.forEach(g._columns, function(col){
+				col._domId = (g.id + '-' + col.id).replace(/\s+/, '');
+				sb.push('<td id="', col._domId,
+					'" role="columnheader" aria-readonly="true" tabindex="-1" colid="', col.id,
+					'" class="gridxCell ',
+					f && f.currentArea() == 'header' && col.id == t._focusHeaderId ? t._focusClass : '',
+					(lang.isFunction(col.headerClass) ? col.headerClass(col) : col.headerClass) || '',
+					'" style="width:', col.width, ';min-width:', col.width, ';',
+					g.getTextDirStyle(col.id, col.name),
+					(lang.isFunction(col.headerStyle) ? col.headerStyle(col) : col.headerStyle) || '',
+					'"><div class="gridxSortNode">',
+					col.name || '',
+					'</div></td>');
+			});
+			sb.push('</tr></table>');
+			t.innerNode.innerHTML = sb.join('');
+			domClass.toggle(t.domNode, 'gridxHeaderRowHidden', t.arg('hidden'));
+		},
+
+		_onHScroll: function(left){
+			if((has('webkit') || has('ie') < 8) && !this.grid.isLeftToRight()){
+				left = this.innerNode.scrollWidth - this.innerNode.offsetWidth - left;
+			}
+			this.innerNode.scrollLeft = this._scrollLeft = left;
+		},
+
+		_onMouseEvent: function(eventName, e){
+			var g = this.grid,
+				evtCell = 'onHeaderCell' + eventName,
+				evtRow = 'onHeader' + eventName;
+			if(g._isConnected(evtCell) || g._isConnected(evtRow)){
+				this._decorateEvent(e);
+				if(e.columnIndex >= 0){
+					g[evtCell](e);
+				}
+				g[evtRow](e);
+			}
+		},
+
+		_decorateEvent: function(e){
+			var n = query(e.target).closest('.gridxCell', this.domNode)[0],
+				c = n && this.grid._columnsById[n.getAttribute('colid')];
+			if(c){
+				e.headerCellNode = n;
+				e.columnId = c.id;
+				e.columnIndex = c.index;
+			}
+		},
+
+		// Focus
+		_focusHeaderId: null,
+
+		_focusClass: "gridxHeaderCellFocus",
+
+		_initFocus: function(){
+			var t = this, g = t.grid;
+			if(g.focus){
+				g.focus.registerArea({
+					name: 'header',
+					priority: 0,
+					focusNode: t.innerNode,
+					scope: t,
+					doFocus: t._doFocus,
+					doBlur: t._blurNode,
+					onBlur: t._blurNode,
+					connects: [
+						t.connect(g, 'onHeaderCellKeyDown', '_onKeyDown'),
+						t.connect(g, 'onHeaderCellMouseDown', function(evt){
+							t._focusNode(t.getHeaderNode(evt.columnId));
+						})
+					]
+				});
+			}
+		},
+
+		_doFocus: function(evt, step){
+			var t = this, 
+				n = t._focusHeaderId && t.getHeaderNode(t._focusHeaderId),
+				r = t._focusNode(n || query('.gridxCell', t.domNode)[0]);
+			t.grid.focus.stopEvent(r && evt);
+			return r;
+		},
+		
+		_focusNode: function(node){
+			if(node){
+				var t = this, g = t.grid,
+					fid = t._focusHeaderId = node.getAttribute('colid');
+				if(fid){
+					t._blurNode();
+					
+					g.body._focusCellCol = g._columnsById[fid].index;
+
+					domClass.add(node, t._focusClass);
+					//If no timeout, the header and body may be mismatch.
+					setTimeout(function(){
+						//For webkit browsers, when moving column using keyboard, the header cell will lose this focus class,
+						//although it was set correctly before this setTimeout. So re-add it here.
+						if(has('webkit')){
+							domClass.add(node, t._focusClass);
+						}
+						node.focus();
+						if(has('ie') < 8){
+							t.innerNode.scrollLeft = t._scrollLeft;
+						}
+						if(g.hScroller){
+							g.hScroller.scrollToColumn(fid, t.innerNode);
+						}
+					}, 0);
+
+					return true;
+				}
+			}
+			return false;
+		},
+
+		_blurNode: function(){
+			var t = this, n = query('.' + t._focusClass, t.innerNode)[0];
+			if(n){
+				domClass.remove(n, t._focusClass);
+			}
+			return true;
+		},
+
+		_onKeyDown: function(evt){
+			var t = this, g = t.grid, col,
+				dir = g.isLeftToRight() ? 1 : -1,
+				delta = evt.keyCode == keys.LEFT_ARROW ? -dir : dir;
+			if(t._focusHeaderId && !evt.ctrlKey && !evt.altKey &&
+				(evt.keyCode == keys.LEFT_ARROW || evt.keyCode == keys.RIGHT_ARROW)){
+				//Prevent scrolling the whole page.
+				g.focus.stopEvent(evt);
+				col = g._columnsById[t._focusHeaderId];
+				col = g._columns[col.index + delta];
+				if(col){
+					t._focusNode(t.getHeaderNode(col.id));
+					t.onMoveToHeaderCell(col.id, evt);
+				}
+			}
+		}
+	});
+});

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

@@ -0,0 +1,63 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/event",
+	"dijit/registry",
+	"dojo/dom-construct",
+	"dojo/dom-class",
+	"dojo/keys",
+	"../core/_Module",
+	"./HeaderRegions"
+], function(declare, event, registry, domConstruct, domClass, keys, _Module){
+
+/*=====
+	var HeaderMenu = declare(_Module, {
+		// summary:
+		//		Add a dropdown menu button on header cell.
+		// description:
+		//		Add a dropdown menu button on the header of any column that has a "menu" defined in structure.
+		//		The "menu" is a dijit/Menu widget or its ID. It can provide a "bindGrid" function with signature of
+		//		function(grid, column), so that some initialization work can be done when this menu is bound to grid.
+	});
+
+	HeaderMenu.__ColumnDefinition = declare([], {
+		// menu: String|dijit.Menu
+		//		Any dijit.Menu widget or its ID.
+		menu: null
+	});
+
+	return HeaderMenu;
+=====*/
+
+	return declare(_Module, {
+		name: 'headerMenu',
+
+		forced: ['headerRegions'],
+
+		preload: function(){
+			var t = this,
+				grid = t.grid;
+			grid.headerRegions.add(function(col){
+				var menu = col.menu && registry.byId(col.menu);
+				if(menu){
+					var btn = domConstruct.create('div', {
+						className: 'gridxHeaderMenuBtn',
+						tabIndex: -1,
+						innerHTML: '<span class="gridxHeaderMenuBtnInner">&#9662;</span>&nbsp;'
+					});
+					domClass.add(menu.domNode, 'gridxHeaderMenu');
+					menu.bindDomNode(btn);
+					t.connect(btn, 'onkeydown', function(e){
+						if(e.keyCode == keys.ENTER){
+							event.stop(e);
+							menu._scheduleOpen(btn);
+						}
+					});
+					if(menu.bindGrid){
+						menu.bindGrid(grid, col);
+					}
+					return btn;
+				}
+			}, 0, 1);
+		}
+	});
+});