gridx-rails 1.1.0

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

@@ -0,0 +1,167 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/connect",
+	"../core/_Module",
+	"dojo/dom-class",
+	"dojo/keys",
+	"dojo/_base/event",
+	"dijit/registry",
+	"dijit/Menu"
+], function(declare, connect, _Module, domClass, keys, event, registry, Menu){
+
+/*=====
+	var Menu = declare(_Module, {
+		// context: __MenuContext
+		//		An object representing the current context when user triggers a context menu.
+		//		This property is updated everytime a menu of grid is popped up.
+		//		Users can refer to this in their menu action handlers by grid.menu.context.
+		context: null,
+
+		bind: function(menu, args){
+			// summary:
+			//		Bind a memu to grid, according to the provided args
+			// menu: dijit.Menu | ID
+			//		The menu to be binded.
+			// args: __MenuArgs
+			//		Indicates how to bind the menu
+		},
+
+		unbind: function(menu){
+			// summary:
+			//		Unbind a menu from grid.
+			// menu: dijit.Menu | ID
+			//		The menu to be unbinded.
+		}
+	});
+
+	Menu.__MenuArgs = declare([], {
+		// hookPoint: String?
+		//		Indicates from where the menu should occur.
+		//		One of "cell", "headercell", "row", "header", "body", "grid". If invalid, default to "grid".
+		hookPoint: '',
+
+		// selected: Boolean?
+		//		Indicates whether to bind this menu only to the selected items. Default is false.
+		selected: false
+	});
+
+	Menu.__MenuContext = declare([], {
+		// grid: Grid
+		//		This grid that triggers this menu.
+		grid: null,
+
+		// column: Column
+		//		The column that triggers this menu. Only valid for "headercell" hookpoint.
+		column: null,
+
+		// row: Row
+		//		The row that triggers this menu. Only valid for "row" hookpoint.
+		row: null,
+
+		// cell: Cell
+		//		The cell that triggers this menu. Only valid for "cell" hookpoint.
+		cell: null
+	});
+
+	return Menu;
+=====*/
+
+	return declare(_Module, {
+		name: 'menu',
+
+		constructor: function(){
+			this._menus = {};
+		},
+
+		//Public---------------------------------------------
+		context: null,
+
+		bind: function(/* dijit.Menu|ID */ menu, /* __MenuArgs? */ args){
+			args = args || {};
+			var t = this,
+				g = t.grid,
+				hookPoint = args.hookPoint && args.hookPoint.toLowerCase() || 'grid',
+				type = args.selected ? hookPoint + '-selected' : hookPoint,
+				evtName = t._evtMap[hookPoint],
+				m = t._menus[type] = t._menus[type] || {},
+				showMenu = function(evt){
+					t._showMenu(type, evt);
+				},
+				keyShowMenu = function(evt){
+					if(evt.keyCode == keys.F10 && evt.shiftKey){
+						t._showMenu(type, evt);
+					}
+				};
+			connect.disconnect(m.open);
+			connect.disconnect(m.keyopen);
+			connect.disconnect(m.close);
+			m.menu = registry.byId(menu);
+			if(evtName){
+				m.open = t.connect(g, evtName[0], showMenu);
+				m.keyopen = t.connect(g, evtName[1], keyShowMenu);
+			}else if(hookPoint == 'body'){
+				m.open = t.connect(g.bodyNode, 'oncontextmenu', showMenu);
+				m.keyopen = t.connect(g.bodyNode, 'onkeydown', keyShowMenu);
+			}else{
+				m.open = t.connect(g.domNode, 'oncontextmenu', showMenu);
+				m.keyopen = t.connect(g.domNode, 'onkeydown', keyShowMenu);
+			}
+			m.close = t.connect(m.menu, 'onClose', function(){
+				t._mutex = 0;
+			});
+		},
+
+		unbind: function(menu){
+			var type, menus = this._menus, m;
+			menu = registry.byId(menu);
+			for(type in menus){
+				m = menus[type];
+				if(m.menu == menu){
+					connect.disconnect(m.open);
+					connect.disconnect(m.keyopen);
+					connect.disconnect(m.close);
+					delete menus[type];
+					return;
+				}
+			}
+		},
+		
+		//[private]==
+		_evtMap: {
+			header: ['onHeaderContextMenu', 'onHeaderKeyDown'],
+			headercell: ['onHeaderCellContextMenu', 'onHeaderCellKeyDown'],
+			cell: ['onCellContextMenu', 'onCellKeyDown'],
+			row: ['onRowContextMenu', 'onRowKeyDown']
+		},
+
+		_showMenu: function(type, e){
+			var t = this, menus = t._menus;
+			if(!t._mutex && menus[type].menu){
+				var g = t.grid,
+					rid = e.rowId,
+					cid = e.columnId,
+					isRow = !type.indexOf('row'),
+					isCell = !type.indexOf('cell'),
+					isHeaderCell = !type.indexOf('headercell'),
+					isSelectedType = type.indexOf('-') > 0,
+					selected = !!((isCell && domClass.contains(e.cellNode, "gridxCellSelected")) ||
+						(isHeaderCell && domClass.contains(g.header.getHeaderNode(cid), "gridxColumnSelected")) ||
+						(isRow && domClass.contains(g.body.getRowNode({rowId: rid}), "gridxRowSelected")));
+				if(isSelectedType == selected || (!isSelectedType && selected && !menus[type + '-selected'])){
+					t.context = {
+						grid: g,
+						column: isHeaderCell && g.column(cid, 1),
+						row: isRow && g.row(rid, 1),
+						cell: isCell && g.cell(rid, cid, 1)
+					};
+					event.stop(e);
+					t._mutex = 1;
+					menus[type].menu._openMyself({
+						target: e.target, 
+						coords: e.keyCode != keys.F10 && "pageX" in e ? {x: e.pageX, y: e.pageY} : null
+					});
+				}
+			}
+		}
+	});
+});

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

@@ -0,0 +1,170 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/event",
+	"dojo/_base/sniff",
+	"dojo/dom-class",
+	"dojo/keys",
+	"dijit/a11y",
+	"../core/_Module"
+], function(declare, event, has, domClass, keys, a11y, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		This module allow the elements in grid cell be focusable.
+		// description:
+		//		When focus is on a cell, press F2 to focus the first focusable element in that cell.
+		//		TAB to move focus to the next focusable element in that cell.
+		//		If there's no more focusable elements in current cell, focus the focusable element in next cell.
+		//		If the current cell is the last cell in current view, move focus to the first cell.
+		//		SHIFT+TAB to move focus to the previous focusable element in that cell.
+		//		If there's no more focusable elements in current cell, focus the focusable element in the previous cell.
+		//		If the current cell is the first cell in current view, move focus to the last cell.
+		//		Press ESC to move focus back to the cell itself.
+	});
+=====*/
+
+	return _Module.register(
+	declare(_Module, {
+		name: 'navigableCell',
+
+		preload: function(){
+			var t = this,
+				focus = t.grid.focus;
+			focus.registerArea({
+				name: 'navigablecell',
+				priority: 1,
+				scope: t,
+				doFocus: t._doFocus,
+				doBlur: t._doBlur,
+				onFocus: t._onFocus,
+				onBlur: t._onBlur,
+				connects: [
+					t.connect(t.grid, 'onCellKeyDown', '_onKey')
+				]
+			});
+		},
+
+		_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;
+		},
+
+		_doBlur: function(evt, step){
+			if(evt){
+				var t = this,
+					m = t.model,
+					g = t.grid,
+					view = g.view,
+					body = g.body,
+					elems = t._navElems,
+					firstElem = elems.lowest || elems.first,
+					lastElem = elems.last || elems.highest || firstElem,
+					target = has('ie') ? evt.srcElement : evt.target;
+				if(target == (step > 0 ? lastElem : firstElem)){
+					event.stop(evt);
+					m.when({id: t._focusRowId}, function(){
+						var rowIndex = view.getRowInfo({
+								parentId: m.treePath(t._focusRowId).pop(), 
+								rowIndex: m.idToIndex(t._focusRowId)
+							}).visualIndex,
+							colIndex = g._columnsById[t._focusColId].index,
+							dir = step > 0 ? 1 : -1,
+							checker = function(r, c){
+								return t._isNavigable(g._columns[c].id);
+							};
+						body._nextCell(rowIndex, colIndex, dir, checker).then(function(obj){
+							t._focusColId = g._columns[obj.c].id;
+							//This kind of breaks the encapsulation...
+							var rowInfo = view.getRowInfo({visualIndex: obj.r});
+							t._focusRowId = m.indexToId(rowInfo.rowIndex, rowInfo.parentId);
+							body._focusCellCol = obj.c;
+							body._focusCellRow = obj.r;
+							t._beginNavigate(t._focusRowId, t._focusColId);
+							t._doFocus(null, step);
+						});
+					});
+				}
+				return false;
+			}else{
+				this._navigating = false;
+				return true;
+			}
+		},
+
+		_isNavigable: function(colId){
+			var col = this.grid._columnsById[colId];
+			return col && (col.navigable || col.navigable === undefined);
+		},
+
+		_beginNavigate: function(rowId, colId){
+			var t = this;
+			if(t._isNavigable(colId)){
+				t._focusColId = colId;
+				t._focusRowId = rowId;
+				var navElems = t._navElems = a11y._getTabNavigable(t.grid.body.getCellNode({
+					rowId: rowId,
+					colId: colId
+				}));
+				//Intentional assignment
+				return t._navigating = (navElems.highest || navElems.last) && (navElems.lowest || navElems.first);
+			}
+			return false;
+		},
+
+		_onBlur: function(){
+			this._navigating = false;
+			//FIXME: this breaks encapsulation.
+			if(this.grid.edit){
+				this.grid.edit._applyAll();
+			}
+		},
+
+		_onFocus: function(evt){
+			var node = evt.target, dn = this.grid.domNode;
+			while(node && node !== dn && !domClass.contains(node, 'gridxCell')){
+				node = node.parentNode;
+			}
+			if(node && node !== dn){
+				var cellNode = node,
+					colId = node.getAttribute('colid');
+				this.grid.hScroller.scrollToColumn(colId);
+				while(node && !domClass.contains(node, 'gridxRow')){
+					node = node.parentNode;
+				}
+				if(node){
+					var rowId = node.getAttribute('rowid');
+					return cellNode != evt.target && this._beginNavigate(rowId, colId);
+				}
+			}
+			return false;
+		},
+
+		_onKey: function(e){
+			var t = this, focus = t.grid.focus;
+			if(e.keyCode == keys.F2 && !t._navigating && focus.currentArea() == 'body'){
+				if(t._beginNavigate(e.rowId, e.columnId)){
+					event.stop(e);
+					focus.focusArea('navigablecell');
+				}
+			}else if(e.keyCode == keys.ESCAPE && t._navigating && focus.currentArea() == 'navigablecell'){
+				t._navigating = false;
+				focus.focusArea('body');
+			}
+		}
+	}));
+});

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

@@ -0,0 +1,280 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"dojo/_base/lang",
+	"dojo/_base/event",
+	"dojo/query",
+	"dojo/string",
+	"dojo/dom-class",
+	"dojo/dom-construct",
+	"dojo/keys",
+	"../core/_Module",
+	"../core/model/extensions/Sort",
+	"dojo/i18n",
+	"dojo/i18n!../nls/NestedSort",
+	"./HeaderRegions"
+], function(declare, array, lang, event, query, string, domClass, domConstruct, keys, _Module, Sort, i18n){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		Sort multiple columns in a nested way.
+
+		getSortData: function(){
+			// summary:
+			//		TODOC
+		},
+
+		sort: function(sortData){
+			// summary:
+			//		TODOC
+		},
+
+		isSorted: function(colId){
+			// summary:
+			//		TODOC
+		},
+
+		clear: function(){
+			// summary:
+			//	Clear the sorting state
+		},
+
+		isSortable: function(colId){
+			// summary:
+			//		TODOC
+		}
+	});
+=====*/
+	
+	var filter = array.filter,
+		indexOf = array.indexOf,
+		removeClass = domClass.remove,
+		addClass = domClass.add,
+		a11yText = {
+			'dojoxGridDescending': '<span class="gridxNestedSortBtnText">&#9662;</span>',
+			'dojoxGridAscending': '<span class="gridxNestedSortBtnText">&#9652;</span>',
+			'dojoxGridAscendingTip': '<span class="gridxNestedSortBtnText">&#1784;</span>',
+			'dojoxGridDescendingTip': '<span class="gridxNestedSortBtnText">&#1783;</span>',
+			'dojoxGridUnsortedTip': '<span class="gridxNestedSortBtnText">x</span>' //'&#10006;'
+		};
+
+	return declare(_Module, {
+		name: 'sort',
+
+		required: ['headerRegions'],
+
+		modelExtensions: [Sort],
+
+		preload: function(args){
+			var t = this,
+				g = t.grid;
+			t._nls = i18n.getLocalization('gridx', 'NestedSort', g.lang);
+			t._sortData = t.arg('initialOrder', []);
+			if(g.persist){
+				var d = g.persist.registerAndLoad('sort', function(){
+					return t._sortData;
+				});
+				if(d){
+					t._sortData = d;
+				}
+			}
+			t._sortData = filter(t._sortData, function(d){
+				return t.isSortable(d.colId);
+			});
+			if(t._sortData.length){
+				g.model.sort(t._sortData);
+			}
+			
+			t.connect(g.headerRegions, 'refresh', t._updateUI);
+
+			g.headerRegions.add(lang.hitch(t, t._createBtn, 1), 10, 1);
+			g.headerRegions.add(lang.hitch(t, t._createBtn, 0), 11, 1);
+		},
+
+		columnMixin: {
+			isSorted: function(){
+				return this.grid.sort.isSorted(this.id);
+			},
+			isSortable: function(){
+				return this.grid.sort.isSortable(this.id);
+			}
+		},
+
+		getSortData: function(){
+			return this._sortData;
+		},
+
+		sort: function(sortData){
+			var t = this;
+			t._sortData = filter(sortData, function(d){
+				return t.isSortable(d.colId);
+			});
+			t._doSort();
+		},
+
+		isSorted: function(colId){
+			var ret = 0;
+			array.some(this._sortData, function(d){
+				if(d.colId == colId){
+					ret = d.descending ? -1 : 1;
+					return 1;
+				}
+			});
+			return ret;
+		},
+
+		isSortable: function(colId){
+			var col = this.grid._columnsById[colId];
+			return col && (col.sortable || col.sortable === undefined);
+		},
+
+		clear: function(){
+			this._sortData.length = 0;
+			this._doSort();
+		},
+
+		//Private---------------------------------------------------------------------------
+		_createBtn: function(isSingle, col){
+			var t = this;
+			if(t.isSortable(col.id)){
+				var btn = domConstruct.create('div', {
+					'class': 'gridxSortBtn gridxSortBtn' + (isSingle ? 'Single' : 'Nested'),
+					tabIndex: -1,
+					title: isSingle ?
+						t._nls.singleSort + ' - ' + t._nls.ascending :
+						t._nls.nestedSort + ' - ' + t._nls.ascending,
+					innerHTML: isSingle ?
+						a11yText.dojoxGridAscendingTip + '&nbsp;' :
+						t._sortData.length + 1 + a11yText.dojoxGridAscendingTip
+				});
+				t.connect(btn, 'onmousedown', function(){
+					t._sort(col, btn, isSingle);
+				});
+				t.connect(btn, 'onkeydown', function(e){
+					if(e.keyCode == keys.ENTER){
+						event.stop(e);
+						t._sort(col, btn, isSingle);
+					}
+				});
+				return btn;
+			}
+		},
+
+		_sort: function(col, btn, isSingle){
+			var t = this, d,
+				sortData = t._sortData;
+			if(isSingle){
+				if(sortData.length > 1){
+					sortData.length = 0;
+				}
+				d = filter(sortData, function(data){
+					return data.colId === col.id;
+				})[0];
+				sortData.length = 0;
+				if(d){
+					sortData.push(d);
+				}
+			}else{
+				d = filter(sortData, function(d){
+					return d.colId === col.id;
+				})[0];
+			}
+			if(d){
+				if(d.descending){
+					sortData.splice(indexOf(sortData, d), 1);
+				}
+				d.descending = !d.descending;
+			}else{
+				d = {
+					colId: col.id,
+					descending: false
+				};
+				sortData.push(d);
+			}
+			t._doSort();
+		},
+
+		_doSort: function(){
+			var g = this.grid,
+				d = this._sortData;
+			this._updateUI();
+			g.model.sort(d.length ? d : null);
+			g.body.refresh();
+		},
+
+		_updateUI: function(){
+			var t = this,
+				nls = t._nls,
+				g = t.grid,
+				dn = g.domNode,
+				sortData = t._sortData;
+			removeClass(dn, 'gridxSingleSorted');
+			removeClass(dn, 'gridxNestedSorted');
+			if(sortData.length == 1){
+				addClass(dn, 'gridxSingleSorted');
+			}else if(sortData.length > 1){
+				addClass(dn, 'gridxNestedSorted');
+			}
+			query('.gridxCell', g.header.domNode).forEach(function(cell){
+				var colid = cell.getAttribute('colid');
+				if(t.isSortable(colid)){
+					array.forEach(['', 'Desc', 'Asc', 'Main'], function(s){
+						removeClass(cell, 'gridxCellSorted' + s);
+					});
+					var singleBtn = query('.gridxSortBtnSingle', cell)[0],
+						nestedBtn = query('.gridxSortBtnNested', cell)[0];
+					singleBtn.title = nls.singleSort + ' - ' + nls.ascending;
+					nestedBtn.title = nls.nestedSort + ' - ' + nls.ascending;
+					singleBtn.innerHTML = a11yText.dojoxGridAscendingTip + '&nbsp;';
+					nestedBtn.innerHTML = sortData.length + 1 + a11yText.dojoxGridAscendingTip;
+					var d = filter(sortData, function(data){
+						return data.colId === colid;
+					})[0];
+					t._setWaiState(cell, colid, d);
+					if(d){
+						nestedBtn.innerHTML = indexOf(sortData, d) + 1;
+						addClass(cell, 'gridxCellSorted');
+						if(d == sortData[0]){
+							addClass(cell, 'gridxCellSortedMain');
+						}
+						var len = sortData.length;
+						if(d.descending){
+							addClass(cell, 'gridxCellSortedDesc');
+							if(len == 1){
+								singleBtn.title = nls.singleSort + ' - ' + nls.unsorted;
+								singleBtn.innerHTML = a11yText.dojoxGridDescending + '&nbsp;';
+							}else{
+								nestedBtn.title = nls.nestedSort + ' - ' + nls.unsorted;
+								nestedBtn.innerHTML += a11yText.dojoxGridDescending;
+							}
+						}else{
+							addClass(cell, 'gridxCellSortedAsc');
+							if(len == 1){
+								singleBtn.title = nls.singleSort + ': ' + nls.descending;
+								singleBtn.innerHTML = a11yText.dojoxGridAscending + '&nbsp;';
+							}else{
+								nestedBtn.title = nls.nestedSort + ' - ' + nls.descending;
+								nestedBtn.innerHTML += a11yText.dojoxGridAscending;
+							}
+						}
+					}
+				}
+			});
+		},
+
+		_setWaiState: function(cell, colid, data){
+			var col = this.grid.column(colid),
+				columnInfo = 'Column ' + col.name(),
+				orderState = 'none', orderAction = 'ascending';
+			if(data){
+				orderState = data.descending ? 'descending' : 'ascending';
+				orderAction = data.descending ? 'none' : 'descending';
+			}
+			var a11ySingleLabel = string.substitute(this._nls.waiSingleSortLabel, [columnInfo, orderState, orderAction]),
+				a11yNestedLabel = string.substitute(this._nls.waiNestedSortLabel, [columnInfo, orderState, orderAction]);
+			query('.gridxSortBtnSingle', cell)[0].setAttribute("aria-label", a11ySingleLabel);
+			query('.gridxSortBtnNested', cell)[0].setAttribute("aria-label", a11yNestedLabel);
+		}
+	});
+});