gridx-rails 1.2.1 → 1.3.0.pre.alpha

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

@@ -17,6 +17,10 @@ define([
 		//		This module controls the TAB sequence of all the UI modules.
 		//		But this module is (or at least can be) a non-UI module, because it does not handle the actual focus job.
 
+		// enabled: Boolean
+		//		Whether keyboar support is enabled for gridx. Default to true on desktop, false on touch device.
+		enabled: true,
+
 		registerArea: function(area){
 			// summary:
 			//		Register a new focus area, so this area will be included in the TAB sequence.
@@ -164,8 +168,6 @@ define([
 	return declare(_Module, {
 		name: 'focus',
 
-		enabled: !has('ios') && !has('android'),
-
 		constructor: function(){
 			var t = this,
 				g = t.grid;
@@ -180,6 +182,7 @@ define([
 					t._onFocus(evt);
 				}
 			};
+			t.arg('enabled', !g.touch);
 			t.batchConnect(
 				[g.domNode, 'onkeydown', '_onTabDown'],
 				[g.domNode, 'onfocus', '_focus'],
@@ -207,6 +210,9 @@ define([
 		},
 	
 		//Public----------------------------------------------------------
+
+		//enabled: true,
+
 		registerArea: function(/* __FocusArea */ area){
 			if(area && area.name && typeof area.priority == 'number'){
 				var t = this,
@@ -244,7 +250,7 @@ define([
 
 		focusArea: function(/* String */ areaName, forced){
 			var t = this, area = t._areas[areaName];
-			if(area){
+			if(area && t.arg('enabled')){
 				var curArea = t._areas[t.currentArea()];
 				if(curArea && curArea.name === areaName){
 					if(forced){

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

@@ -217,23 +217,33 @@ define([
 					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));
-						})
-					]
+					onBlur: t._blurNode
 				});
+				if(g.touch){
+					t.aspect(g, 'onHeaderCellTouchStart', function(evt){
+						domClass.add(evt.headerCellNode, t._focusClass);
+					});
+					t.aspect(g, 'onHeaderCellTouchEnd', function(evt){
+						domClass.remove(evt.headerCellNode, t._focusClass);
+					});
+				}else{
+					t.aspect(g, 'onHeaderCellKeyDown', '_onKeyDown');
+					t.aspect(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;
+			var t = this;
+			if(!t.hidden){
+				var n = t._focusHeaderId && t.getHeaderNode(t._focusHeaderId),
+					r = t._focusNode(n || query('.gridxCell', t.domNode)[0]);
+				t.grid.focus.stopEvent(r && evt);
+				return r;
+			}
+			return false;
 		},
 		
 		_focusNode: function(node){

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

@@ -57,10 +57,11 @@ declare(_Module, {
 		t.loaded.callback();
 	},
 
-	add: function(creater, priority, skipRefresh){
+	add: function(creater, priority, skipRefresh, skipFocus){
 		this._regions.push({
 			c: creater,
 			p: priority || 0,
+			f: !skipFocus,
 			n: {}
 		});
 		if(!skipRefresh){
@@ -83,27 +84,41 @@ declare(_Module, {
 				return b.p - a.p;
 			});
 			query('.gridxCell', g.header.domNode).forEach(function(node){
+				domClass.remove(node, 'gridxCellRegion');
 				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'));
+					tmpArr = [];
 				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(region.f){
+								domClass.add(regionNode, 'gridxHeaderRegionFocusable');
+								regionNode.setAttribute('tabindex', -1);
+								t.connect(regionNode, 'onblur', '_onRegionBlur');
+							}
 						}
 					}
 					if(regionNode){
 						domConstruct.place(regionNode, node, 'first');
-						regionNodes.push(regionNode);
+						if(region.f){
+							tmpArr.push(regionNode);
+						}
 					}
 				});
+				if(tmpArr.length){
+					var nameNode = query('.gridxSortNode', node)[0];
+					regionNodes.push(nameNode);
+					nameNode.setAttribute('tabindex', -1);
+					t._regionCnnts.push(t.connect(nameNode, 'onblur', '_onRegionBlur'));
+				}else{
+					regionNodes.push(node);
+					domClass.add(node, 'gridxCellRegion');
+					t._regionCnnts.push(t.connect(node, 'onblur', '_onRegionBlur'));
+				}
+				regionNodes.push.apply(regionNodes, tmpArr);
 			});
 			if(!regionNodes[t._curRegionIdx]){
 				t._curRegionIdx = 0;

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

@@ -8,10 +8,8 @@ define([
 	"dojo/_base/Deferred",
 	"dojo/keys",
 	"../core/_Module",
-	"dojo/i18n",
-	"dojo/i18n!../nls/Body",
 	"./RowHeader"
-], function(declare, array, event, query, lang, domClass, Deferred, keys, _Module, i18n){
+], function(declare, array, event, query, lang, domClass, Deferred, keys, _Module){
 
 /*=====
 	return declare(_Module, {
@@ -44,7 +42,6 @@ define([
 				focus = g.focus,
 				sr = g.select.row,
 				rowHeader = g.rowHeader;
-			t._nls = i18n.getLocalization('gridx', 'Body', g.lang);
 			rowHeader.cellProvider = lang.hitch(t, t._createSelector);
 			t.batchConnect(
 				[sr,'onHighlightChange', '_onHighlightChange' ],
@@ -112,7 +109,7 @@ define([
 
 		_createSelectAllBox: function(){
 			var allSelected = this._allSelected[this._getPageId()];
-			this.grid.rowHeader.headerCellNode.setAttribute('aria-label', allSelected ? this._nls.indirectDeselectAll : this._nls.indirectSelectAll);
+			this.grid.rowHeader.headerCellNode.setAttribute('aria-label', allSelected ? this.grid.nls.indirectDeselectAll : this.grid.nls.indirectSelectAll);
 			return this._createCheckBox(allSelected);
 		},
 
@@ -216,7 +213,7 @@ define([
 						domClass.toggle(node, t._getDijitClass() + 'Checked', allSelected);
 						node.setAttribute('aria-checked', allSelected ? 'true' : 'false');
 						t.grid.rowHeader.headerCellNode.setAttribute('aria-label',
-							allSelected ? t._nls.indirectDeselectAll : t._nls.indirectSelectAll);
+							allSelected ? g.nls.indirectDeselectAll : g.nls.indirectSelectAll);
 					}
 				});
 			}
@@ -228,7 +225,9 @@ define([
 				rowHeader = g.rowHeader,
 				headerCellNode = rowHeader.headerCellNode,
 				focus = function(evt){
-					g.focus.stopEvent(evt);
+					if(g.header.hidden){
+						return false;
+					}
 					domClass.add(headerCellNode, 'gridxHeaderCellFocus');
 					headerCellNode.focus();
 					return true;

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

@@ -39,7 +39,7 @@ define([
 
 		position: 0,
 
-		width: '20px',
+		width: '23px',
 
 		all: true,
 

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

@@ -0,0 +1,358 @@
+define([
+	"dojo/_base/kernel",
+	"dojo/_base/declare",
+	"dojo/_base/lang",
+	"dojo/dom-class",
+	"dojo/dom-geometry",
+	"dojo/query",
+	"dojo/keys",
+	"../core/_Module"
+], function(kernel, declare, lang, domClass, domGeometry, query, keys, _Module){
+	kernel.experimental('gridx/modules/Layer');
+
+/*=====
+	var Layer = declare(_Module, {
+		// summary:
+		//		module name: Layer.
+		//		A drill-down version of tree grid.
+		// description:
+		//		Add a drill-down button to every row that has children.
+		//		Once clicked this button, child level rows slides in and current level rows slides out,
+		//		while the parent row slides up and gets locked.
+		//		Clicking anywhere in the locked parent row will reverse the above process so as to go back to the parent level.
+		//		Especially suitable for mobile tree grid.
+
+		// buttonColumnWidth: String
+		//		Width of the drill-down column. Same format as column width in column definition.
+		buttonColumnWidth: '20px',
+
+		// buttonColumnArgs: Object
+		//		The drill-down column can be customized by providing extra column definition parameters here.
+		buttonColumnArgs: null,
+
+		down: function(id){
+			// summary:
+			//		Drill down one level on the row with the given ID.
+			//		Only works if the given row exists in current layer.
+			// id: String
+			//		A parent row ID.
+		},
+
+		up: function(){
+			// summary:
+			//		Drill up one level, i.e.: go to the parent layer.
+		},
+
+		onFinish: function(args){
+			// summary:
+			//		Fired when a layer operation (down or up) is done.
+			// args: __LayerOperationArgs
+			//		Some args indicating whether it is drilling down or up, and on which row.
+		}
+	});
+
+	Layer.__LayerOperationArgs = declare([], {
+		// summary:
+		//		Some context info for layer operations.
+
+		// isDown: Boolean
+		//		If true, the operation is drilling down, otherwise, it is drilling up.
+		isDown: true,
+
+		// rowId: String
+		//		Only available when isDown is true. Indicating on which row it is drilling down.
+		rowId: ''
+	});
+
+	return Layer;
+=====*/
+
+	var transitionDuration = 700;
+
+	function moveNodes(bn, tmpBn){
+		while(bn.childNodes.length){
+			tmpBn.appendChild(bn.firstChild);
+		}
+	}
+
+	var nextLevelButtonColumnId = '__nextLevelButton__';
+
+	return declare(_Module, {
+		name: "layer",
+
+		buttonColumnWidth: '20px',
+
+		constructor: function(){
+			var t = this,
+				g = t.grid,
+				n = t._tmpBodyNode = document.createElement('div'),
+				cn = t._contextNode = document.createElement('div'),
+				wrapper1 = t._wrapper1 = document.createElement('div'),
+				wrapper2 = t._wrapper2 = document.createElement('div');
+			n.setAttribute('class', 'gridxBody');
+			cn.setAttribute('class', 'gridxLayerContext');
+			wrapper1.setAttribute('class', 'gridxLayerWrapper');
+			wrapper2.setAttribute('class', 'gridxLayerWrapper');
+			t._parentStack = [];
+			t.connect(cn, 'onmousedown', 'up');
+			function updateColumnWidth(node){
+				var columnId = node.getAttribute('colid');
+				var headerNode = g.header.getHeaderNode(columnId);
+				node.style.width = headerNode.style.width;
+				node.style.minWidth = headerNode.style.minWidth;
+				node.style.maxWidth = headerNode.style.maxWidth;
+			}
+			t.aspect(g.columnWidth, 'onUpdate', function(){
+				query('.gridxCell', wrapper1).forEach(updateColumnWidth);
+				query('.gridxCell', wrapper2).forEach(updateColumnWidth);
+				if(cn.firstChild){
+					cn.style.height = cn.firstChild.offsetHeight + 'px';
+				}
+			});
+
+			var w = t.arg('buttonColumnWidth');
+			var col = t._col = lang.mixin({
+				id: nextLevelButtonColumnId,
+				headerStyle: 'text-align:center;',
+				style: function(cell){
+					return 'text-align:center;' + (cell.model.hasChildren(cell.row.id) ? 'cursor:pointer;' : '');
+				},
+				rowSelectable: false,
+				sortable: false,
+				filterable: false,
+				editable: false,
+				padding: false,
+				ignore: true,
+				declaredWidth: w,
+				width: w,
+				decorator: function(data, rowId){
+					if(t.model.hasChildren(rowId)){
+						return '<div class="gridxLayerHasChildren"></div>';
+					}
+					return '';
+				}
+			}, t.arg('buttonColumnArgs') || {});
+			t._onSetColumns();
+			t.aspect(g, 'setColumns', '_onSetColumns');
+
+			t.aspect(g, g.touch ? 'onCellTouchStart' : 'onCellMouseDown', function(e){
+				if(e.columnId == nextLevelButtonColumnId && e.cellNode.childNodes.length){
+					g.focus.focusArea('header');
+					setTimeout(function(){
+						t.down(e.rowId);
+					}, 0);
+				}
+			});
+		},
+
+		preload: function(){
+			this.grid.vLayout.register(this, '_contextNode', 'headerNode', 10);
+		},
+
+		onReady: function(){},
+		onFinish: function(){},
+
+		down: function(id){
+			var t = this,
+				m = t.model;
+			if(!t._lock && m.hasChildren(id) && String(m.parentId(id)) === String(m.layerId())){
+				t._lock = 1;
+				var g = t.grid,
+					bn = g.bodyNode,
+					w = bn.offsetWidth,
+					tmpBn = t._tmpBodyNode,
+					wrapper1 = t._wrapper1,
+					wrapper2 = t._wrapper2,
+					parentRowNode = g.body.getRowNode({ rowId: id }),
+					pos = domGeometry.position(parentRowNode),
+					refPos = domGeometry.position(t._contextNode),
+					cloneParent = parentRowNode.cloneNode(true);
+
+				domClass.add(parentRowNode, 'gridxLayerLoading');
+
+				wrapper2.appendChild(cloneParent);
+				t._parentStack.push(cloneParent);
+				cloneParent._pos = g.vScroller.position();
+				moveNodes(bn, tmpBn);
+
+				bn.style.left = w + 'px';
+				bn.style.zIndex = 1;
+				tmpBn.style.left = 0;
+				tmpBn.style.zIndex = 0;
+				wrapper2.style.top = (pos.y - refPos.y) + 'px';
+				wrapper2.style.zIndex = -1;
+				g.vScrollerNode.style.zIndex = 9999;
+
+				m.setLayer(id);
+				t._refresh(function(){
+					domClass.remove(parentRowNode, 'gridxLayerLoading');
+					wrapper2.style.zIndex = 9999;
+					g.vScroller.scroll(0);
+					domClass.add(wrapper1, 'gridxLayerHSlide');
+					domClass.add(wrapper2, 'gridxLayerVSlide');
+					bn.style.left = 0;
+					tmpBn.style.left = -w + 'px';
+					wrapper1.style.left = -w + 'px';
+					wrapper2.style.top = 0;
+				}, {
+					isDown: true,
+					rowId: id,
+					parentRowNode: cloneParent
+				});
+			}
+		},
+
+		up: function(){
+			var t = this,
+				m = t.model;
+			if(!t._lock && m.isId(m.layerId())){
+				t._lock = 1;
+				var g = t.grid,
+					bn = g.bodyNode,
+					tmpBn = t._tmpBodyNode,
+					w = bn.offsetWidth,
+					wrapper1 = t._wrapper1,
+					wrapper2 = t._wrapper2,
+					parentRowNode = t._parentStack[t._parentStack.length - 2],
+					currentParentRowNode = t._parentStack.pop();
+					parentId = currentParentRowNode.getAttribute('rowid');
+
+				if(parentRowNode){
+					wrapper2.appendChild(parentRowNode);
+				}
+				moveNodes(bn, tmpBn);
+
+				bn.style.left = -w + 'px';
+				bn.style.zIndex = 0;
+				tmpBn.style.left = 0;
+				tmpBn.style.zIndex = 1;
+				wrapper1.style.top = 0;
+				wrapper1.style.zIndex = 2;
+				wrapper2.style.left = -w + 'px';
+				g.vScrollerNode.style.zIndex = 9999;
+
+				m.layerUp();
+				t._refresh(function(){
+					if(currentParentRowNode){
+						g.vScroller.scroll(currentParentRowNode._pos);
+						var pos = domGeometry.position(g.body.getRowNode({
+							rowId: parentId
+						}));
+						var refPos = domGeometry.position(t._contextNode);
+					}
+					domClass.add(wrapper1, 'gridxLayerVSlide');
+					domClass.add(wrapper2, 'gridxLayerHSlide');
+					bn.style.left = 0;
+					tmpBn.style.left = w + 'px';
+					if(currentParentRowNode){
+						wrapper1.style.top = (pos.y - refPos.y) + 'px';
+					}
+					wrapper2.style.left = 0;
+				}, {
+					parentRowNode: currentParentRowNode
+				});
+			}
+		},
+
+		//Private--------------------------------------------------------------------
+		_onSetColumns: function(){
+			var g = this.grid,
+				col = this._col;
+			g._columns.push(col);
+			g._columnsById[col.id] = col;
+		},
+
+		_onTransitionEnd: function(){
+			var t = this,
+				m = t.model,
+				g = t.grid,
+				mainNode = g.mainNode,
+				bn = g.bodyNode,
+				tmpBn = t._tmpBodyNode,
+				w = bn.offsetWidth,
+				contextNode = t._contextNode,
+				wrapper1 = t._wrapper1,
+				wrapper2 = t._wrapper2;
+			if(t._lock){
+				mainNode.removeChild(tmpBn);
+				mainNode.removeChild(wrapper1);
+				contextNode.appendChild(wrapper2);
+				contextNode.style.height = wrapper2.offsetHeight + 'px';
+				domClass.remove(tmpBn, 'gridxSlideRefresh');
+				domClass.remove(bn, 'gridxSlideRefresh');
+				domClass.remove(wrapper1, 'gridxLayerHSlide gridxLayerVSlide');
+				domClass.remove(wrapper2, 'gridxLayerHSlide gridxLayerVSlide');
+				wrapper1.innerHTML = '';
+
+				var tmp = t._wrapper1;
+				t._wrapper1 = t._wrapper2;
+				t._wrapper2 = tmp;
+
+				wrapper1.style.left = 0;
+				wrapper1.style.zIndex = '';
+				wrapper1.style.top = 0;
+				wrapper2.style.left = 0;
+				wrapper2.style.zIndex = '';
+				wrapper2.style.top = 0;
+				bn.style.paddingTop = 0;
+				bn.style.zIndex = '';
+				tmpBn.style.paddingTop = 0;
+				tmpBn.style.zIndex = '';
+				g.vScrollerNode.style.zIndex = '';
+
+				g.vLayout.reLayout();
+				for(var i = 0; i < tmpBn.childNodes.length; ++i){
+					var rowId = tmpBn.childNodes[i].getAttribute('rowid');
+					if(m.isId(rowId)){
+						g.body.onUnrender(rowId);
+					}
+				}
+				tmpBn.innerHTML = '';
+				g.body._skipUnrender = 0;
+				t._lock = 0;
+			}
+		},
+
+		_refresh: function(callback, args){
+			var t = this,
+				g = t.grid,
+				bn = g.bodyNode,
+				tmpBn = t._tmpBodyNode,
+				frag = document.createDocumentFragment();
+			frag.appendChild(tmpBn);
+			frag.appendChild(t._wrapper1);
+			frag.appendChild(t._wrapper2);
+			g.mainNode.appendChild(frag);
+			tmpBn.style.paddingTop = t._wrapper1.offsetHeight + 'px';
+			bn.style.paddingTop = t._wrapper2.offsetHeight + 'px';
+			t._contextNode.style.height = 0;
+			//temparary disable paging
+			t._paging = g.view.paging;
+			g.view.paging = 0;
+			g.vLayout.reLayout();
+			if(args.isDown){
+				query('.gridxLayerHasChildren', args.parentRowNode).
+					removeClass('gridxLayerHasChildren').
+					addClass('gridxLayerLevelUp');
+			}else if(args.parentRowNode){
+				query('.gridxLayerLevelUp', args.parentRowNode).
+					removeClass('gridxLayerLevelUp').
+					addClass('gridxLayerHasChildren');
+			}
+			t.onReady(args);
+			g.body._skipUnrender = 1;
+			g.body.refresh().then(function(){
+				g.view.paging = t._paging;
+				setTimeout(function(){
+					domClass.add(bn, 'gridxSlideRefresh');
+					domClass.add(tmpBn, 'gridxSlideRefresh');
+					callback();
+					setTimeout(function(){
+						t._onTransitionEnd();
+						t.onFinish(args);
+					}, transitionDuration);
+				}, 10);
+			});
+		}
+	});
+});

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

@@ -10,10 +10,8 @@ define([
 	"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){
+], function(declare, array, lang, event, query, string, domClass, domConstruct, keys, _Module, Sort){
 
 /*=====
 	return declare(_Module, {
@@ -70,7 +68,6 @@ define([
 		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(){
@@ -137,14 +134,15 @@ define([
 
 		//Private---------------------------------------------------------------------------
 		_createBtn: function(isSingle, col){
-			var t = this;
+			var t = this,
+				nls = t.grid.nls;
 			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,
+						nls.singleSort + ' - ' + nls.ascending :
+						nls.nestedSort + ' - ' + nls.ascending,
 					innerHTML: isSingle ?
 						a11yText.dojoxGridAscendingTip + ' ' :
 						t._sortData.length + 1 + a11yText.dojoxGridAscendingTip
@@ -206,8 +204,8 @@ define([
 
 		_updateUI: function(){
 			var t = this,
-				nls = t._nls,
 				g = t.grid,
+				nls = g.nls,
 				dn = g.domNode,
 				sortData = array.filter(t._sortData, function(s){
 					return g._columnsById[s.colId];
@@ -274,8 +272,8 @@ define([
 				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]);
+			var a11ySingleLabel = string.substitute(this.grid.nls.waiSingleSortLabel, [columnInfo, orderState, orderAction]),
+				a11yNestedLabel = string.substitute(this.grid.nls.waiNestedSortLabel, [columnInfo, orderState, orderAction]);
 			query('.gridxSortBtnSingle', cell)[0].setAttribute("aria-label", a11ySingleLabel);
 			query('.gridxSortBtnNested', cell)[0].setAttribute("aria-label", a11yNestedLabel);
 		}