gridx-rails 1.1.0

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

@@ -0,0 +1,276 @@
+define([
+/*====="../core/Column", =====*/
+	"dojo/_base/declare",
+	"dojo/_base/lang",
+	"dojo/dom-class",
+	"dojo/keys",
+	"../core/model/extensions/Sort",
+	"../core/_Module"
+], function(/*=====Column, =====*/declare, lang, domClass, keys, Sort, _Module){
+
+/*=====
+	Column.sort = function(isDescending, skipUpdateBody){
+		// summary:
+		//		Sort this column.
+	};
+
+	Column.isSorted = function(){
+		// summary:
+		//		Check wheter this column is sorted.
+	};
+
+	Column.clearSort = function(skipUpdateBody){
+		// summary:
+		//		Clear sort on this column
+	};
+
+	Column.isSortable = function(){
+		// summary:
+		//		Check whether this column is sortable.
+	};
+
+	Column.setSortable = function(isSortable){
+		// summary:
+		//		Set sortable for this column
+	};
+
+	var SingleSort = declare(_Module, {
+		// summary:
+		//		This module provides the single column sorting functionality for grid.
+
+		// initialOrder: Object|Array
+		//		The initial sort order when grid is created.
+		//		This is of the same format of the sort argument of the store fetch function.
+		//		If an array of sort orders is provided, only the first will be used.
+		initialOrder: null,
+
+		sort: function(colId, isDescending, skipUpdateBody){
+			// summary:
+			//		Sort the grid on given column.
+			// colId: String
+			//		The column ID
+			// isDescending: Boolean?
+			//		Whether to sort the column descendingly
+			// skipUpdateBody: Boolean?
+			//		If set to true, the grid body will not automatically be refreshed after this call,
+			//		so that several grid operations could be done altogether
+			//		without refreshing the grid over and over.
+		},
+
+		isSorted: function(colId){
+			// summary:
+			//		Check wheter (and how) the grid is sorted on the given column.
+			// colId: String
+			//		The columnn ID
+			// returns:
+			//		Positive number if the column is sorted ascendingly;
+			//		Negative number if the column is sorted descendingly;
+			//		Zero if the column is not sorted.
+		},
+
+		clear: function(skipUpdateBody){
+			// summary:
+			//		Clear sort.
+			// skipUpdateBody:
+			//		If set to true, the grid body will not automatically be refreshed after this call,
+			//		so that several grid operations could be done altogether
+			//		without refreshing the grid over and over.
+		},
+
+		getSortData: function(){
+			// summary:
+			//		Get an array of objects that can be accepted by the store's "sort" argument.	
+			// returns:
+			//		An array containing the sort info
+		}
+	});
+
+	SingleSort.__ColumnDefinition = declare([], {
+		// sortable: Boolean
+		sortable: true
+	});
+
+	return SingleSort;
+=====*/
+
+	return declare(_Module, {
+		name: 'sort',
+
+		forced: ['header'],
+
+		modelExtensions: [Sort],
+
+		preload: function(){
+			var t = this,
+				g = t.grid, sort;
+			t.connect(g, 'onHeaderCellClick', '_onClick');
+			t.connect(g, 'onHeaderCellKeyDown', '_onKey');
+			//persistence support
+			if(g.persist){
+				sort = g.persist.registerAndLoad('sort', function(){
+					return [{
+						colId: t._sortId,
+						descending: t._sortDescend 
+					}];
+				});
+			}
+			//Presort...
+			sort = sort || t.arg('initialOrder');
+			if(lang.isArrayLike(sort)){
+				sort = sort[0];
+			}
+			if(sort && sort.colId){
+				t._sortId = sort.colId;
+				t._sortDescend = sort.descending;
+				//sort here so the body can render correctly.
+				t.model.sort([sort]);
+			}
+		},
+
+		load: function(){
+			var t = this,
+				refresh = function(){
+					var columnsById = t.grid._columnsById;
+					for(var colId in columnsById){
+						t._initHeader(colId);
+					}
+					if(t._sortId && columnsById[t._sortId]){
+						t._updateHeader(t._sortId, t._sortDescend);
+					}
+				};
+			t.connect(t.grid.header, 'onRender', refresh);
+			//If presorted, update header UI
+			refresh();
+			t.loaded.callback();
+		},
+
+		columnMixin: {
+			sort: function(isDescending, skipUpdateBody){
+				this.grid.sort.sort(this.id, isDescending, skipUpdateBody);
+				return this;
+			},
+
+			isSorted: function(){
+				return this.grid.sort.isSorted(this.id);
+			},
+
+			clearSort: function(skipUpdateBody){
+				if(this.isSorted()){
+					this.grid.sort.clear(skipUpdateBody);
+				}
+				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--------------------------------------------------------------
+		sort: function(colId, isDescending, skipUpdateBody){
+			var t = this,
+				g = t.grid,
+				col = g._columnsById[colId];
+			if(col && (col.sortable || col.sortable === undefined)){
+				if(t._sortId != colId || t._sortDescend == !isDescending){
+					t._updateHeader(colId, isDescending);
+				}
+				t.model.sort([{colId: colId, descending: isDescending}]);
+				if(!skipUpdateBody){
+					g.body.refresh();
+				}
+			}
+		},
+
+		isSorted: function(colId){
+			if(colId == this._sortId){
+				return this._sortDescend ? -1 : 1;
+			}
+			return 0;
+		},
+
+		clear: function(skipUpdateBody){
+			var t = this;
+			if(t._sortId !== null){
+				var headerCell = t.grid.header.getHeaderNode(t._sortId);
+				if(headerCell){
+					domClass.remove(headerCell, 'gridxCellSorted');
+					domClass.remove(headerCell, 'gridxCellSortedAsc');
+					domClass.remove(headerCell, 'gridxCellSortedDesc');
+				}
+				t._sortId = t._sortDescend = null;
+				t.model.sort();
+				if(!skipUpdateBody){
+					t.grid.body.refresh();
+				}
+			}
+		},
+
+		getSortData: function(){
+			return this._sortId ? [{
+				colId: this._sortId,
+				descending: this._sortDescend
+			}] : null;
+		},
+
+		//Private--------------------------------------------------------------
+		_sortId: null,
+
+		_sortDescend: null,
+
+		_initHeader: function(colId){
+			var g = this.grid,
+				headerCell = g.header.getHeaderNode(colId),
+				col = g.column(colId, 1),
+				sb = [];
+			if(col.isSortable()){
+				sb.push("<div role='presentation' class='gridxArrowButtonNode'>",
+					"<div class='gridxArrowButtonCharAsc'>&#9652;</div>",
+					"<div class='gridxArrowButtonCharDesc'>&#9662;</div>",
+				"</div>");
+				headerCell.setAttribute('aria-sort', 'none');
+			}
+			sb.push("<div class='gridxSortNode'>", col.name(), "</div>");
+			headerCell.innerHTML = sb.join('');
+		},
+
+		_updateHeader: function(colId, isDescending){
+			var t = this,
+				g = t.grid,
+				headerCell;
+			if(t._sortId && t._sortId != colId){
+				headerCell = g.header.getHeaderNode(t._sortId);
+				if(headerCell){
+					domClass.remove(headerCell, 'gridxCellSorted');
+					domClass.remove(headerCell, 'gridxCellSortedAsc');
+					domClass.remove(headerCell, 'gridxCellSortedDesc');
+					headerCell.setAttribute('aria-sort', 'none');
+				}
+			}
+			t._sortId = colId;
+			t._sortDescend = isDescending = !!isDescending;
+			headerCell = g.header.getHeaderNode(colId);
+			domClass.add(headerCell, 'gridxCellSorted');
+			domClass.toggle(headerCell, 'gridxCellSortedAsc', !isDescending);
+			domClass.toggle(headerCell, 'gridxCellSortedDesc', isDescending);
+			headerCell.setAttribute('aria-sort', isDescending ? 'descending' : 'ascending');
+			g.vLayout.reLayout();
+		},
+
+		_onClick: function(e){
+			this.sort(e.columnId, this._sortId != e.columnId ? 0 : !this._sortDescend);
+		},
+
+		_onKey: function(e){
+			if(e.keyCode == keys.ENTER){
+				this._onClick(e);
+			}
+		}
+	});
+});

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

@@ -0,0 +1,33 @@
+define([
+	"dojo/_base/declare",
+	"../support/Summary",
+	"../core/_Module",
+	"./Bar"
+], function(declare, Summary, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		Add summary bar to the bottom of grid.
+		// description:
+		//		Add summary based on Bar module. This module is only for conveniency and backward compatibility.
+		//		Using Bar module directly is recommended.
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'summaryBar',
+
+		required: ['bar'],
+
+		preload: function(){
+			this.grid.bar.defs.push({
+				bar: 'bottom',
+				row: 0,
+				col: 0,
+				pluginClass: Summary,
+				className: 'gridxBarSummary'
+			});
+		}
+	});
+});

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

@@ -0,0 +1,51 @@
+define([
+	"dojo/_base/kernel",
+	"dojo/_base/declare",
+	"dojo/dom-construct",
+	"../core/_Module"
+], function(kernel, declare, domConstruct, _Module){
+	kernel.deprecated('TitleBar is deprecated', 'Use Bar module instead', '1.3');
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		Add title bar for grid.
+		// tags:
+		//		deprecated. Use Bar module instead.
+
+		// label: String
+		label: '',
+
+		setLabel: function(){
+			// summary:
+			//		TODOC
+		}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'titleBar',
+
+		constructor: function(){
+			this.domNode = domConstruct.create('div', {
+				'class': 'gridxTitleBar',
+				innerHTML: this.arg('label')
+			});
+		},
+
+		preload: function(){
+			this.grid.vLayout.register(this, 'domNode', 'headerNode', -15);
+		},
+		
+		destroy: function(){
+			this.inherited(arguments);
+			domConstruct.destroy(this.domNode);
+		},
+		
+		label: '',
+		
+		setLabel: function(label){
+			this.domNode.innerHTML = this.label = label;
+		}
+	});
+});

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

@@ -0,0 +1,55 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/lang",
+	'dijit/Toolbar',
+	"../core/_Module",
+	'./Bar'
+], function(declare, lang, Toolbar, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		Add toolbar on top of grid.
+		// description:
+		//		Add toolbar based on Bar module. This module is only for conveniency and backward compatibility.
+		//		Using Bar module directly is recommended.
+
+		// widget: [readonly] Object
+		widget: null,
+
+		// domNode: [readonly] HTMLElement
+		domNode: null
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'toolBar',
+
+		required: ['bar'],
+
+		constructor: function(grid, args){
+			this._def = lang.mixin(args, {
+				bar: 'top',
+				row: 0,
+				col: 0,
+				pluginClass: Toolbar,
+				'aria-label': 'grid toolbar',
+				className: 'gridxBarToolBar'
+			});
+		},
+
+		preload: function(){
+			this.grid.bar.defs.push(this._def);
+		},
+
+		load: function(){
+			var t = this,
+				bar = t.grid.bar;
+			bar.loaded.then(function(){
+				t.widget = bar.plugins.top[0][0];
+				t.domNode = t.widget.domNode;
+				t.loaded.callback();
+			});
+		}
+	});
+});

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

@@ -0,0 +1,103 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/window",
+	"dojo/_base/event",
+	"dojo/dom",
+	"dojo/dom-construct",
+	"dojo/touch",
+	"../core/_Module"
+], function(declare, win, event, dom, domConstruct, touch, _Module){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		Make desktop grid scrollable by touch in mobile devices.
+		// description:
+		//		No bouncing and sliding effect now.
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'touchScroll',
+
+		required: ['vScroller', 'hScroller'],
+
+		constructor: function(){
+			var t = this,
+				g = t.grid,
+				bn = g.bodyNode;
+			t.vWrapper = domConstruct.create('div', {
+				'class': 'gridxTouchScrollVWrapper'
+			}, g.mainNode);
+			t.vInner = domConstruct.create('div', {
+				'class': 'gridxTouchScrollVBar'
+			}, t.vWrapper);
+			t.hWrapper = domConstruct.create('div', {
+				'class': 'gridxTouchScrollHWrapper'
+			}, g.mainNode);
+			t.hInner = domConstruct.create('div', {
+				'class': 'gridxTouchScrollHBar'
+			}, t.hWrapper);
+			t.batchConnect(
+				[bn, touch.press, '_start'],
+				[bn, touch.move, '_scroll'],
+				[win.doc, touch.release, '_end']);
+		},
+
+		_start: function(e){
+			var t = this,
+				g = t.grid,
+				vScrollerNode = g.vScrollerNode;
+				hScrollerNode = g.hScrollerNode;
+			//Start touch scroll only on mobile devices where the scroll bar can not be shown
+			if((vScrollerNode.style.display != 'none' && vScrollerNode.offsetWidth == 1) ||
+				(hScrollerNode.style.display != 'none' && hScrollerNode.offsetHeight == 1)){
+				var vns = t.vInner.style,
+					hns = t.hInner.style,
+					bn = g.bodyNode,
+					h = bn.clientHeight,
+					w = bn.clientWidth,
+					sh = vScrollerNode.scrollHeight,
+					sw = hScrollerNode.scrollWidth;
+				t._last = e;
+				dom.setSelectable(g.domNode, false);
+				t.vWrapper.style.height = (h - 4) + 'px';
+				t.hWrapper.style.width = (w - 4) + 'px';
+				vns.height = h * (h - 4) / sh + 'px';
+				hns.width = w * (w - 4) / sw + 'px';
+				vns.opacity = 1;
+				hns.opacity = 1;
+				t._vr = (h - 4) / sh;
+				t._hr = (w - 4) / sw;
+				event.stop(e);
+			}
+		},
+
+		_scroll: function(e){
+			var t = this,
+				g = t.grid,
+				hn = g.hScrollerNode,
+				vn = g.vScrollerNode,
+				last = t._last;
+			if(last){
+				vn.scrollTop += last.clientY - e.clientY;
+				hn.scrollLeft += last.clientX - e.clientX;
+				t.vInner.style.top = vn.scrollTop * t._vr + 'px';
+				t.hInner.style.left = hn.scrollLeft * t._hr + 'px';
+				t._last = e;
+				event.stop(e);
+			}
+		},
+
+		_end: function(e){
+			var t = this;
+			if(t._last){
+			t._last = null;
+				dom.setSelectable(t.grid.domNode, true);
+				t.vInner.style.opacity = 0;
+				t.hInner.style.opacity = 0;
+				event.stop(e);
+			}
+		}
+	});
+});

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

@@ -0,0 +1,89 @@
+define([
+	"dojo/_base/kernel",
+	"dojo/_base/Deferred",
+	"dojo/_base/sniff",
+	"dojo/_base/declare",
+	"dojo/query",
+	"dojo/dom-class",
+	"./VScroller",
+	"dojox/mobile/scrollable"
+], function(kernel, Deferred, has, declare, query, domClass, VScroller, Scrollable){
+	kernel.experimental('gridx/modules/TouchVScroller');
+
+/*=====
+	return declare(VScroller, {
+		// summary:
+		//		A vertical scroller only for touch devices.
+		// description:
+		//		Using dojox/mobile/scrollable, and no lazy-rendering (all rows are rendered out).
+	});
+=====*/
+
+	return declare(VScroller, {
+		scrollToRow: function(rowVisualIndex, toTop){
+			if(has('ios') || has('android')){
+				var d = new Deferred(),
+					rowNode = query('[visualindex="' + rowVisualIndex + '"]', this.grid.bodyNode)[0];
+				if(rowNode){
+					console.log('scroll into view: ' + rowNode.getAttribute('rowid'));
+					this._scrollable.scrollIntoView(rowNode, toTop);
+				}
+				d.callback();
+				return d;
+			}
+			return this.inherited(arguments);
+		},
+
+		_init: function(){
+			if(has('ios') || has('android')){
+				var t = this,
+					g = t.grid,
+					view = g.view,
+					h = g.header.innerNode,
+					mainNode = g.mainNode,
+					bodyNode = g.bodyNode,
+					headerTable = h.firstChild,
+					scrollable = t._scrollable = new Scrollable();
+				domClass.add(g.domNode, 'gridxTouchVScroller');
+				h.style.height = headerTable.offsetHeight + 'px';
+				scrollable.init({
+					domNode: mainNode,
+					containerNode: bodyNode,
+					scrollDir: g.hScrollerNode.style.display == 'none' ? 'v' : 'vh',
+					noResize: true
+				});
+				t.aspect(scrollable, 'scrollTo', function(to){
+					if(typeof to.x == "number"){
+						headerTable.style.webkitTransform = scrollable.makeTranslateStr({x: to.x});
+					}
+				});
+				t.aspect(scrollable, 'slideTo', function(to, duration, easing){
+					scrollable._runSlideAnimation({
+						x: scrollable.getPos().x
+					}, {
+						x: to.x
+					}, duration, easing, headerTable, 2);	//2 means it's a containerNode
+				});
+				t.aspect(scrollable, 'stopAnimation', function(){
+					domClass.remove(headerTable, 'mblScrollableScrollTo2');
+				});
+				t.aspect(g.hScroller, 'refresh', function(){
+					scrollable._h = bodyNode.scrollWidth > mainNode.clientWidth;
+					scrollable._v = bodyNode.scrollHeight > mainNode.clientHeight;
+				});
+				t._onBodyChange = function(){
+					t._update();
+				};
+				t._onForcedScroll = function(){};
+				t.model.when({
+					start: view.rootStart,
+					count: view.rootCount
+				}, function(){
+					g.body.renderRows(0, view.visualCount);
+				});
+			}else{
+				this.inherited(arguments);
+			}
+		}
+	});
+});