gridx-rails 1.2.1 → 1.3.0.pre.alpha

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

@@ -0,0 +1,46 @@
+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",
+	"./GroupHeader"
+], function(declare, array, lang, event, query, string, domClass, domConstruct, keys, _Module, Sort, nls){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		module name: slantedheader.
+		//		Slant headers including group headers.
+
+		
+	});
+=====*/
+	
+	return declare(_Module, {
+		name: 'slantedheader',
+
+		_actionAreaHolder: null,
+
+		required: ['header'],
+
+		load: function(args, deferStartup){
+			domClass.add(this.grid.domNode, 'gridxSlantedHeader');
+
+			//Skew the header node, and use translate to align columns
+			var n = this.grid.header.domNode;	
+			var headerHeight = n.offsetHeight;
+			var translateX = headerHeight/2 - 1; //TODO: 1 is the top border width
+			n.style.transform = n.style.msTransform = n.style.mozTransform
+				= n.style.webkitTransform = 'translate(' + translateX
+				 + 'px, 0px) skew(-45deg,0deg)';
+	
+			this.loaded.callback();
+		}
+	});
+});

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

@@ -0,0 +1,417 @@
+define([
+/*====="gridx/core/Column",=====*/
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"dojo/query",
+	"dojo/_base/event",
+	"dojo/_base/sniff",
+	"dojo/string",
+	"dojo/keys",
+	"dojo/dom",
+	"dojo/dom-class",
+	"../core/model/extensions/Sort",
+	"../core/_Module"
+], function(/*=====Column, =====*/declare, array, query, event, has, string, keys, dom, domClass, Sort, _Module){
+
+/*=====
+	Column.sort = function(isDescending, isAdd){
+		// summary:
+		//		
+	};
+	Column.isSorted = function(){
+		// summary:
+		//		
+	};
+	Column.clearSort = function(){
+		// summary:
+		//		
+	};
+	Column.isSortable = function(){
+		// summary:
+		//		
+	};
+	Column.setSortable = function(sortable){
+		// summary:
+		//		
+	};
+
+	return declare(_Module, {
+		// summary:
+		//		module name: sort.
+		//		A sort module suitable for both nested sort and single sort.
+
+		// initialOrder: Object[]
+		//		The initial sort order when grid is created.
+		//		This is of the same format of the sort argument of the store fetch function.
+		initialOrder: null,
+
+		// nested: Boolean
+		//		Whether nested sort is allowed.
+		//		If true, CTRL+click does nested sort.
+		//		If false, only single sort.
+		nested: true,
+
+		sort: function(sortData){
+			// summary:
+			//		
+		},
+
+		isSorted: function(colId){
+			// summary:
+			//		
+		},
+
+		clear: function(){
+			// summary:
+			//		
+		},
+
+		getSortData: function(){
+			// summary:
+			//		
+		}
+	});
+=====*/
+
+	return _Module.register(
+	declare(_Module, {
+		name: 'sort',
+
+		forced: ['header'],
+
+		modelExtensions: [Sort],
+
+		constructor: function(){
+			this._sortData = [];
+		},
+
+		preload: function(){
+			var t = this,
+				g = t.grid, sort;
+			domClass.add(g.domNode, 'gridxSort');
+			t.aspect(g, 'onHeaderCellClick', '_onClick');
+			t.aspect(g, 'onHeaderCellMouseOver', 'reLayout', g.vLayout);
+			t.aspect(g, 'onHeaderCellMouseOut', 'reLayout', g.vLayout);
+			t.aspect(g.header, 'onRender', '_update');
+			t.connect(g, 'onHeaderCellTouchStart', function(evt){
+				query('.gridxHeaderCellTouch', g.header.domNode).removeClass('gridxHeaderCellTouch');
+				domClass.add(evt.headerCellNode, 'gridxHeaderCellTouch');
+			});
+			t.connect(g, 'onHeaderCellTouchEnd', function(evt){
+				domClass.remove(evt.headerCellNode, 'gridxHeaderCellTouch');
+			});
+			//persistence support
+			if(g.persist){
+				sort = g.persist.registerAndLoad('sort', function(){
+					return t._sortData;
+				});
+			}
+			//Presort...
+			sort = sort || t.arg('initialOrder');
+			if(sort && sort.length){
+				t._sortData = sort;
+				//sort here so the body can render correctly.
+				t.model.sort(sort);
+			}
+		},
+
+		load: function(){
+			var t = this,
+				g = t.grid;
+			t._update();
+			if(has('ff')){
+				//Only in FF, there will be a selection border on the header node when clicking it holding CTRL.
+				dom.setSelectable(g.header.domNode, false);
+			}
+			t._initFocus();
+			t.loaded.callback();
+		},
+
+		columnMixin: {
+			sort: function(isDescending, isAdd){
+				var sort = this.grid.sort;
+				sort._prepareSortData(this.id, isAdd);
+				return sort.sort(sort._sortData);
+			},
+
+			isSorted: function(){
+				return this.grid.sort.isSorted(this.id);
+			},
+
+			clearSort: function(){
+				this.grid.sort.clear();
+				return this;
+			},
+
+			isSortable: function(){
+				var col = this.grid._columnsById[this.id];
+				return col.sortable || col.sortable === undefined;
+			},
+
+			setSortable: function(isSortable){
+				this.grid._columnsById[this.id].sortable = isSortable;
+				return this;
+			}
+		},
+
+		//Public--------------------------------------------------------------
+		nested: true,
+
+		sort: function(sortData){
+			//A column is always sortable programmatically. The sortable attribute is only meaningful for UI
+			this._sortData = sortData || [];
+			this.model.sort(sortData);
+			this._updateHeader();
+			return this.grid.body.refresh();
+		},
+
+		isSorted: function(colId){
+			for(var i = this._sortData.length - 1; i >= 0; --i){
+				var s = this._sortData[i];
+				if(s.colId === colId){
+					return s.decending ? -1 : 1;
+				}
+			}
+			return 0;
+		},
+
+		clear: function(){
+			this.sort();
+		},
+
+		getSortData: function(){
+			return this._sortData;
+		},
+
+		//Private--------------------------------------------------------------
+		_sortData: null,
+
+		_onClick: function(e){
+			event.stop(e);
+			this._sort(e.columnId, domClass.contains(e.target, 'gridxArrowButtonNode'), this.grid._isCtrlKey(e));
+		},
+
+		_sort: function(id, isSortArrow, isNested){
+			var g = this.grid;
+			this._focusHeaderId = id;
+			this._focusSortArrow = isSortArrow;
+			if(g.column(id, 1).isSortable() && (isSortArrow || !g.select || !g.select.column)){
+				this._prepareSortData(id,  isNested);
+				this.sort(this._sortData);
+			}
+		},
+
+		_prepareSortData: function(colId, isAdd){
+			var t = this,
+				oneway = true,
+				desc = false,
+				sortable = t.grid._columnsById[colId].sortable;
+			isAdd = t.arg('nested') && isAdd;
+			if(sortable == 'descend'){
+				desc = true;
+			}else if(sortable != 'ascend'){
+				oneway = false;
+			}
+			for(var s, i = t._sortData.length - 1; i >= 0; --i, s = 0){
+				s = t._sortData[i];
+				if(s.colId === colId){
+					s.descending = oneway ? desc : !s.descending;
+					break;
+				}
+			}
+			if(!s){
+				s = {
+					colId: colId,
+					descending: oneway && desc
+				};
+				t._sortData.push(s);
+			}
+			if(!isAdd){
+				t._sortData = [s];
+			}
+		},
+
+		_getSortModeCls: function(col){
+			return {
+				ascend: 'gridxSortAscendOnly',
+				descend: 'gridxSortDescendOnly'
+			}[col.isSortable()] || '';
+		},
+
+		_initHeader: function(col){
+			var	n = col.headerNode();
+			n.innerHTML = ["<div class='gridxSortNode'><div role='presentation' tabindex='0' class='gridxArrowButtonNode ",
+				this._getSortModeCls(col),
+				"'></div><div class='gridxColCaption'>",
+				col.name(),
+				"</div></div>"
+			].join('');
+			n.removeAttribute('aria-sort');
+			this._setTitle(n, col);
+		},
+
+		_update: function(){
+			var t = this,
+				g = t.grid;
+			query('.gridxCell', g.header.domNode).forEach(function(node){
+				var col = g.column(node.getAttribute('colid'), 1);
+				if(col.isSortable()){
+					t._initHeader(col);
+				}
+				t._setTitle(node, col);
+			});
+			t._updateHeader();
+		},
+
+		_setTitle: function(headerCellNode, col){
+			if(col.isSortable()){
+				headerCellNode.setAttribute('title', string.substitute(
+					this.arg('nested') ? this.grid.nls.helpMsg : this.grid.nls.singleHelpMsg,
+				//If column name includes HTML tags, can provide tooltip instead.
+				[col.def().tooltip || col.name()]));
+			}
+		},
+
+		_updateHeader: function(){
+			var g = this.grid;
+			query('[aria-sort]', g.header.domNode).forEach(function(n){
+				this._initHeader(g.column(n.getAttribute('colid'), 1));
+			}, this);
+			var sortData = array.filter(this._sortData, function(s){
+				return g._columnsById[s.colId];
+			});
+			for(var i = 0, len = sortData.length; i < len; ++i){
+				var s = sortData[i],
+					col = g.column(s.colId, 1),
+					n = col.headerNode();
+				n.innerHTML = ["<div class='gridxSortNode ",
+					(s.descending ? 'gridxSortDown' : 'gridxSortUp'),
+					"'><div role='presentation' tabindex='0' class='gridxArrowButtonNode ",
+					this._getSortModeCls(col), "'>",
+					"<div class='gridxArrowButtonChar'>",
+					(s.descending ? "&#9662;" : "&#9652;"),
+					"</div></div><div class='",
+					len == 1 ? "gridxSortSingle" : "gridxSortNested",
+					"'>", i + 1,
+					"</div><div class='gridxColCaption'>", col.name(),
+					"</div></div>"
+				].join('');
+				n.setAttribute('aria-sort', s.descending ? 'descending' : 'ascending');
+				//FIXME: it there any better way to set aria sort priority?
+				if(this.arg('nested')){
+					var priority = string.substitute(g.nls.priorityOrder, [i + 1]);
+					n.setAttribute('aria-label', (col.def().tooltip || col.name()) + ', ' + priority);
+				}
+			}
+			g.vLayout.reLayout();
+			if(g.focus && g.focus.currentArea() == 'header'){
+				this._focus(this._focusHeaderId);
+			}
+		},
+
+		//Keyboard support-----------------------------------------------------------------
+		_focusHeaderId: null,
+
+		_focusSortArrow: false,
+
+		_initFocus: function(){
+			var g = this.grid, focus = g.focus;
+			if(focus){
+				if(g.select && g.select.column){
+					focus.registerArea({
+						name: 'header',
+						priority: 0,
+						focusNode: g.header.domNode,
+						scope: this,
+						doFocus: this._doFocus,
+						onFocus: this._onFocus,
+//                        doBlur: hitch(this, this._doBlur),
+//                        onBlur: hitch(this, this._onBlur),
+						connects: [this.connect(g, 'onHeaderCellKeyPress', '_onKeyPress')]
+					});
+				}else{
+					this.connect(g, 'onHeaderCellKeyDown', function(evt){
+						if(evt.keyCode == keys.ENTER || evt.keyCode == keys.SPACE){
+							this._sort(evt.columnId, false, g._isCtrlKey(evt));
+						}
+					});
+				}
+			}
+		},
+
+		_doFocus: function(evt){
+			var id = this._focusHeaderId = this._focusHeaderId || this.grid._columns[0].id;
+			this._focus(id, evt);
+			return true;
+		},
+
+		_onFocus: function(evt){
+			this._focusSortArrow = false;
+			return true;
+		},
+
+//        _doBlur: function(){
+//            return true;
+//        },
+
+//        _onBlur: function(){
+//            return true;
+//        },
+
+		_onKeyPress: function(e){
+			switch(e.keyCode){
+				case keys.RIGHT_ARROW:
+				case keys.LEFT_ARROW:
+					this._moveFocus(e);
+					break;
+				case keys.ENTER:
+				case keys.SPACE:
+					this._sort(this._focusHeaderId, this._focusSortArrow, this.grid._isCtrlKey(e));
+			}
+		},
+
+		_moveFocus: function(evt){
+			if(this._focusHeaderId){	//Only need to move focus when we are already focusing on a column
+				var col, g = this.grid, dir = g.isLeftToRight() ? 1 : -1,
+					delta = evt.keyCode == keys.LEFT_ARROW ? -dir : dir,
+					focusSortArrow = this._focusSortArrow;
+				event.stop(evt);	//Prevent scrolling the whole page.
+				col = g.column(this._focusHeaderId, 1);
+				var sortable = col.isSortable();
+				if(!sortable || focusSortArrow ^ (delta < 0)){
+					col = g.column(col.index() + delta);
+				}
+				if(col){
+					this._focusHeaderId = col.id;
+					this._focusSortArrow = col.isSortable() && (sortable || delta < 0) && !focusSortArrow;
+					this._focus(col.id, evt);
+				}
+			}
+		},
+
+		_focus: function(id, evt){
+			var header = this.grid.header,
+				headerNode = header.getHeaderNode(id);
+			header._focusNode(headerNode);
+			if(evt){
+				header.onMoveToHeaderCell(id, evt);
+			}
+			this._focusArrow(id);
+		},
+
+		_focusArrow: function(id){
+			var header = this.grid.header;
+			query('.gridxArrowButtonFocus', header.domNode).forEach(function(node){
+				domClass.remove(node, 'gridxArrowButtonFocus');
+			});
+			if(this._focusSortArrow){
+				var arrowNode = query('.gridxArrowButtonNode', header.getHeaderNode(id))[0];
+				if(arrowNode){
+					domClass.add(arrowNode, 'gridxArrowButtonFocus');
+					arrowNode.focus();
+				}
+			}
+		}
+	}));
+});
+

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

@@ -0,0 +1,143 @@
+define([
+	'dojo/_base/kernel',
+	'dojo/_base/declare',
+	'dojo/_base/array',
+	'../core/_Module'
+], function(kernel, declare, array, _Module){
+	kernel.experimental('gridx/modules/structureSwitch');
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		module name: structureSwitch.
+		//		Switch column structure by means of hidden columns.
+		// description:
+		//		All possible columns are declared on creation of gridx, but only a few of them are shown at a time.
+		//		Column structure profiles are defined, each profile defines which columns to show.
+		//		Switch profiles through API of this module, which is done by means of the HiddenColumns module.
+		//		Especially suitable for orientation change on mobile device.
+
+		// default: String
+		//		The name of the default structure profile. Should exist in the config parameter.
+		//		If not, every column will be shown.
+		default: '',
+
+		// orientation: Boolean
+		//		If true, gridx automatically checks which profile to use on every "orientationchange" event.
+		orientation: true,
+
+		// config: Object
+		//		An association array to define column structure profiles.
+		//		Key is profile name. Value is an array of column IDs.
+		config: {},
+
+		// condition: Object
+		//		An association array to define trigger-conditions for every profile.
+		//		Key is profile name (should exists in the config parameter).
+		//		Value is a predicate function accepting grid as its parameter:
+		//		For example:
+		//		function(grid){
+		//			return Math.abs(window.orientation) == 90;
+		//		}
+		condition: {},
+
+		to: function(profileName){
+			// summary:
+			//		Switch to a column structure indicated by the profileName.
+			//		Returns true if switched to the target profile, false if not.
+			// profileName: String
+			//		The name of the target profile.
+			//		If set to empty string "", switch to show all columns.
+			//		If invalid, no-op.
+		},
+
+		check: function(){
+			// summary:
+			//		Checks every pre-defined condition predicate, if any of them returns true,
+			//		and the corresponding profile exists, switch to that profile.
+			//		Returns the name of the profile if found a match, null if not.
+		}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: "structureSwitch",
+		required: ['hiddenColumns'],
+		'default': '',
+		orientation: true,
+
+		constructor: function(){
+			var t = this,
+				config = t.arg('config') || {},
+				condition = t.arg('condition') || {};
+			if(t.arg('orientation')){
+				if(config.portrait){
+					condition.portrait = function(){
+						return 'orientation' in window && window.orientation === 0;
+					};
+				}
+				if(config.landscape){
+					condition.portrait = function(){
+						return Math.abs(window.orientation) == 90;
+					};
+				}
+				t.connect(window, 'orientationchange', 'check');
+			}
+		},
+
+		preload: function(){
+			var t = this,
+				dft = t.config[t.arg('default')];
+			if(dft){
+				var toHide = array.filter(array.map(t.grid._columns, function(col){
+					return col.id;
+				}), function(id){
+					return array.indexOf(dft, id) < 0;
+				});
+				[].push.apply(t.grid.hiddenColumns.arg('init', []), toHide);
+			}
+		},
+
+		load: function(args, startup){
+			var t = this;
+			startup.then(function(){
+				t.check();
+				t.loaded.callback();
+			});
+		},
+
+		//Public----------------------------------------------------------------------------
+		to: function(name){
+			var g = this.grid,
+				structure = this.config[name];
+			if(!structure && name === ''){
+				structure = array.map(g.structure, function(col){
+					return col.id;
+				});
+			}
+			if(structure){
+				var hiddenColumns = g.hiddenColumns;
+				var toHide = array.filter(g._columns, function(col){
+					return array.indexOf(structure, col.id) < 0;
+				});
+				var toShow = array.filter(structure, function(col){
+					return !g._columnsById[col.id];
+				});
+				hiddenColumns.add.apply(hiddenColumns, toHide);
+				hiddenColumns.remove.apply(hiddenColumns, toShow);
+			}
+			return !!structure;
+		},
+
+		check: function(){
+			var t = this;
+			for(var name in t.condition){
+				if(t.condition[name](t.grid) && t.to(name)){
+					t.grid.resize();
+					return name;
+				}
+			}
+			return null;
+		}
+	});
+});

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

@@ -21,13 +21,18 @@ define([
 
 		required: ['bar'],
 
+		//message: ''
+
 		preload: function(){
 			this.grid.bar.defs.push({
 				bar: 'bottom',
 				row: 0,
 				col: 0,
 				pluginClass: Summary,
-				className: 'gridxBarSummary'
+				className: 'gridxBarSummary',
+				message: this.arg('message'),
+				hookPoint: this,
+				hookName: 'summary'
 			});
 		}
 	});