gridx-rails 1.1.0

data/app/assets/javascripts/gridx/mobile/Grid.js

@@ -0,0 +1,300 @@
+define([
+	"dojo/_base/kernel",
+	'dojo/_base/declare',
+	'dojo/_base/lang',
+	'dojo/_base/array',
+	'dojo/dom-construct',
+	'dojo/aspect',
+	'dojo/string',
+	'dojo/dom-class',
+	'dojox/mobile/_StoreMixin',
+	'dojox/mobile/Pane',
+	'dojox/mobile/ScrollablePane',
+	'dojo/i18n!./nls/common',
+	"dojo/_base/Deferred",
+	"dojo/has"
+], function(kernel, declare, lang, array, dom, aspect, string, css, _StoreMixin, Pane, ScrollablePane, i18n, Deferred, has){
+	// module:
+	//		gridx/mobile/Grid
+	// summary:
+	//		A mobile grid that has fixed header, footer and a scrollable body.
+	
+	kernel.experimental('gridx/mobile/Grid');
+	
+	return declare('gridx.mobile.Grid', [Pane, _StoreMixin], {
+		// summary:
+		//		A mobile grid that has fixed header, footer and a scrollable body.
+		
+		// autoHeight: boolean
+		//		If true, it's must be a children of dojox.mobile.View
+		//		and it occupies the rest height of the screen. If false it could be in any container
+		//		using a specified height.
+		autoHeight: true,
+		
+		// showHeader: boolean
+		//		Whether to show the grid header
+		showHeader: false,
+		
+		// vScroller: boolean
+		//		Whether to show the virtical scroller
+		vScroller: true,
+		
+		// hScroller: boolean
+		//		Whether to show the horizontal scroller
+		hScroller: false,
+		
+		// columns: array
+		//		Column definition to show the grid from store
+		columns: null,
+		
+		setColumns: function(columns){
+			// summary:
+			//		Set columns to show for the grid. 
+			//		Maybe improve performance by adding/removing some columns instead of re-rendering.
+			this.columns = columns;
+			this.refresh();
+		},
+		
+		buildGrid: function(){
+			// summary:
+			//		Build the whole grid
+			if(this.columns)this._buildHeader();
+			if(this.store)this._buildBody();
+			this.resize();
+		},
+		
+		_buildHeader: function(){
+			// summary:
+			//		Build the grid header when showHeader is true.
+			if(!this.showHeader){
+				this.headerNode.style.display = 'none';
+				return;
+			}else{
+				this.headerNode.style.display = 'block';
+			}
+			
+			var arr = ['<div class="mobileGridxHeaderRow"><table><tr>'];
+			var _this = this;
+			array.forEach(this.columns, function(col){
+				var textDir = col.textDir || _this.textDir;
+				arr.push(
+					'<th class="mobileGridxHeaderCell ', col.cssClass || ''
+						,col.align ? ' align-' + col.align : ''
+					,col.width? '" style="width:' + col.width + ';"' : ''
+					,'>'
+					,(has("dojo-bidi") && textDir) ? _this._enforceTextDirWithUcc(col.title, textDir) : col.title
+					,'</th>'
+				);
+			});
+			arr.push('</tr></table></div>');
+			this.headerNode.innerHTML = arr.join('');
+		},
+		
+		_buildBody: function(items){
+			// summary:
+			//		Build the grid body
+			console.log('building body');
+			if(items && items.length){
+				var arr = [];
+				array.forEach(items, function(item, i){
+					arr.push(this._createRow(item, i%2 == 1));
+				}, this);
+				this.bodyPane.containerNode.innerHTML = arr.join('');
+			}else{
+				this.bodyPane.containerNode.innerHTML = '<div class="mobileGridxNoDataNode">' + i18n.noDataMsg + '</div>';
+			}
+		},
+		
+		_createRow: function(item){
+			// summary:
+			//		Create a grid row by object store item.
+			var rowId = this.store.getIdentity(item);
+			var arr = ['<div class="mobileGridxRow"',
+				rowId ? ' rowId="' + rowId + '"' : '',
+				 '><table><tr>'];
+			array.forEach(this.columns, function(col){
+				var value = this._getCellContent(col, item);
+				var textDir = col.textDir || this.textDir;
+				if(has("dojo-bidi") && textDir){
+					value = this._enforceTextDirWithUcc(value, textDir);
+				}
+				arr.push(
+					'<td class="mobileGridxCell ' 
+					,((col.cssClass || col.align) ? ((col.cssClass || '') + (col.align ? ' align-' + col.align : '')) : '')
+					,'"'
+					,(col.width? ' style="width:' + col.width + ';"' : '') 
+					,'>', value, '</td>'
+				);
+			}, this);
+			arr.push('</tr></table></div>');
+			return arr.join('');
+		},
+		
+		_getCellContent: function(col, item){
+			// summary:
+			//		Get a cell content by the column definition.
+			//		* Currently only support string content, will add support for widget in future.
+			var f = col.formatter;
+			if(col.template){
+				return string.substitute(col.template, item);
+			}else{
+				return f ? f(item, col) : item[col.field];
+			}
+		},
+		
+		buildRendering: function(){
+			// summary:
+			//		Build the grid dom structure.
+			this.inherited(arguments);
+			css.add(this.domNode, 'mobileGridx');
+			this.domNode.innerHTML = '<div class="mobileGridxHeader"></div><div class="mobileGridxBody"></div><div class="mobileGridxFooter"></div>';
+			this.headerNode = this.domNode.childNodes[0];
+			this.bodyNode = this.domNode.childNodes[1];
+			this.footerNode = this.domNode.childNodes[2];
+			this.containerNode = this.bodyNode;
+			var scrollDir = (this.vScroller ? 'v' : '') + (this.hScroller ? 'h' : '');
+			if(!scrollDir)scrollDir = 'v';
+			this.bodyPane = new ScrollablePane({
+				scrollDir: scrollDir,
+				scrollType: 1
+			}, this.bodyNode);
+			this.bodyPane._useTopLeft = false;
+			
+			if(this.showHeader){
+				var h = this.headerNode;
+				this.connect(this.bodyPane, 'scrollTo', function(to){
+					if((typeof to.x) != "number")return;
+					h.firstChild.style.webkitTransform = this.bodyPane.makeTranslateStr({x:to.x});
+				});
+				
+				this.connect(this.bodyPane, 'slideTo', function(to, duration, easing){
+					this.bodyPane._runSlideAnimation({x:this.bodyPane.getPos().x}, {x:to.x}
+						, duration, easing, h.firstChild, 2);	//2 means it's a containerNode
+				});
+				
+				this.connect(this.bodyPane, 'stopAnimation', function(){
+					css.remove(h.firstChild, 'mblScrollableScrollTo2');
+				});
+			}
+		},
+		
+		resize: function(){
+			// summary:
+			//		Calculate the height of grid body according to the autoHeight property.
+			this.inherited(arguments);
+			var h = this.domNode.offsetHeight;
+			if(this.autoHeight){
+				//if auto height, grid occupies the rest height of the screen.
+				this.domNode.style.height = 'auto';
+				var n = this.domNode, p = n.parentNode;
+				h = this.bodyPane.getScreenSize().h;
+				array.forEach(p.childNodes, function(node){
+					if(node == n)return;
+					h -= (node.offsetHeight || 0);
+				});
+			}
+			h = h - this.headerNode.offsetHeight - this.footerNode.offsetHeight;
+			this.bodyNode.style.height = h + 'px';
+		},
+		
+		startup: function(){
+			//summary:
+			//		Start up the body pane, and fetch data from store.
+			
+			this.bodyPane.startup();
+			this.inherited(arguments);
+			this.refresh();
+			this.resize();
+		},
+
+		
+		onComplete: function(items){
+			// summary:
+			//		An handler that is called after the fetch completes.
+			this._buildBody(items);
+		},
+
+		onError: function(errorData){
+			// summary:
+			//		An error handler.
+			console.log('error: ', errorData);
+		},
+
+		onUpdate: function(item, insertedInto){
+			// summary:
+			//		Adds a new item or updates an existing item.
+			dom.place(this._createRow(item), this.bodyNode.firstChild, insertedInto);
+		},
+
+		onDelete: function(item, removedFrom){
+			// summary:
+			//		Deletes an existing item.
+			dom.destroy(this.bodyNode.firstChild.childNodes[removedFrom]);
+		},
+		
+		
+		PDF: '\u202C',
+		LRE: '\u202A',
+		RLE: '\u202B',		
+		_enforceTextDirWithUcc: function(text, textDir){
+			// summary:
+			//		Wraps by UCC (Unicode control characters) option's text according to this.textDir
+			// text:
+			//		The text to be wrapped.
+			// textDir:
+			//		Text direction.
+			
+			textDir = (this._checkContextual && text && textDir === "auto") ? this._checkContextual(text.replace(/<[^>]*>/g,"")) : textDir;
+			return ((textDir === "rtl") ? this.RLE : this.LRE) + text + this.PDF;		
+		},
+		_setTextDirAttr: function(textDir){
+			if(this.textDir != textDir){
+				this.textDir = textDir;
+				this.refresh();					
+			}
+		},			
+//		refresh: function(){
+//			//summary:
+//			//	Firstly refresh header, then fetch data from store.
+//			//	Body will be refreshed after store query completes.
+//			
+//			this._buildHeader();
+//			return this.inherited(arguments);
+//		},
+		
+		///////////////////
+		//////////////////////////////////////////////
+		//Over-write from dojox/mobile/_StoreMixin.js , which doesn't support updating events
+		//TODO: will remove this if it's fixed in _StoreMixin
+		refresh: function(){
+			// summary:
+			//		Fetches the data and generates the list items.
+			
+			this._buildHeader();
+			if(!this.store){ return null; }
+			var _this = this;
+			var promise = this.store.query(this.query, this.queryOptions);
+			Deferred.when(promise, function(results){
+				if(results.items){
+					results = results.items; // looks like dojo/data style items array
+				}
+				if(promise.observe){
+					promise.observe(function(object, removedFrom, insertedInto){
+						if(removedFrom > -1){ // existing object removed
+							_this.onDelete(object, removedFrom);
+						}
+						if(insertedInto > -1){ // new or updated object inserted
+							_this.onUpdate(object, insertedInto);
+						}
+					}, true);
+				}
+				_this.onComplete(results);
+			}, function(error){
+				_this.onError(error);
+			});
+			this.resize();
+			return promise;
+		}
+	});
+
+});

data/app/assets/javascripts/gridx/mobile/LazyLoad.js

@@ -0,0 +1,88 @@
+define([
+	'dojo/_base/declare',
+	'dojo/_base/lang',
+	'dojo/_base/array',
+	'dojo/dom-construct',
+	'dojo/dom-class',
+	'dojo/query',
+	'dojo/Deferred',
+	'dojo/i18n!./nls/LazyLoad'
+], function(declare, lang, array, dom, css, query, Deferred, i18n){
+	return declare(null, {
+		pageSize: 20,
+		lastId: null,	//used to store last id value for query, so that server side knows the state of grid
+		_buildBody: function(items){
+			this.inherited(arguments);
+			var wrapper = dom.create('div', {
+				className: 'mobileGridxLoadMoreWrapper'
+			}, this.bodyPane.containerNode, 'last');
+			this._buttonLoadMore = dom.create('button', { 
+				innerHTML: i18n.loadMore,
+				className: 'mobileGridxLoadMoreButton mblButton'
+			}, wrapper, 'last');
+			this.connect(this._buttonLoadMore, 'onclick', 'loadMore');
+			if(items && items.length < this.pageSize){
+				this._buttonLoadMore.style.display = 'none';
+			}
+			if(items && items.length){
+				this.lastId = items[items.length - 1][this.store.idProperty];
+			}
+		},
+
+		loadMore: function(){
+			// summary:
+			//	Called when touch load more button.
+			//	It loads data from server side and create extra rows at the bottom.
+			//  If need to provide custom query information, use aspect.before(grid, 'loadMore')
+			
+			this._makeButtonBusy();
+			var q = lang.mixin({
+				'lastId': this.lastId,
+				count: this.pageSize
+			}, this.query);
+			
+			var self = this;
+			this.store.query(q, this.queryOptions).then(
+			   lang.hitch(this, '_loadMoreComplete'),
+			   lang.hitch(this, 'onError')
+			);
+		},
+		
+		_loadMoreComplete: function(results){
+			//summary:
+			//	Called after the store completes the query
+			
+			var items = results.items || results;
+			//add new rows at the bottom
+			if(items && items.length){
+				var rows = query('>.mobileGridxRow', this.bodyPane.containerNode);
+				var arr = [];
+				array.forEach(items, function(item){
+					arr.push(this._createRow(item));
+				}, this);
+				dom.place(arr.join(''), this._buttonLoadMore.parentNode, 'before');
+				this.lastId = items[items.length - 1][this.store.idProperty];
+			}
+			this._cancelButtonBusy();
+			if(results.noMore){
+				//if no more data, results should have a property 'noMore' with truthy value
+				this._buttonLoadMore.style.display = 'none';
+			}
+		},
+		onError: function(){
+			this.inherited(arguments);
+			this._cancelButtonBusy();
+		},
+		
+		_makeButtonBusy: function(){
+			var btn = this._buttonLoadMore;
+			btn.innerHTML = '<img src="' + this._blankGif +'" class="mobileGridxLoadingIcon"/> ' + i18n.loading;
+			btn.disabled = true;
+		},
+		_cancelButtonBusy: function(){
+			var btn = this._buttonLoadMore;
+			btn.innerHTML = i18n.loadMore;
+			btn.disabled = false;
+		}
+	});
+});

data/app/assets/javascripts/gridx/mobile/PullRefresh.js

@@ -0,0 +1,117 @@
+define([
+	'dojo/_base/declare',
+	'dojo/_base/lang',
+	'dojo/_base/array',
+	'dojo/aspect',
+	'dojo/dom-construct',
+	'dojo/dom-class',
+	'dojo/query',
+	'dojo/i18n!./nls/PullRefresh'
+], function(declare, lang, array, aspect, dom, css, query, i18n){
+	return declare(null, {
+		readyToRefresh: false,
+		state: 'normal',
+		triggerHeight: 50,
+		
+		// lastId:
+		//		used to store last id value for query, so that server side knows the state of grid
+		lastId: null,
+		
+		buildRendering: function(){
+			// summary:
+			//		Add pull refresh related ui elements, and connect events to them.
+			
+			this.inherited(arguments);
+			var self = this;
+			aspect.before(this.bodyPane, 'slideTo', function(to, duration, easing){
+				if((typeof to.y) != "number")return;
+				if(to.y == 0 && self.state != 'normal'){
+					to.y = self.triggerHeight;
+					if(self.state == 'ready'){
+						self.loadNew();
+						self._setPullRefreshState('loading');
+					}
+				}
+			});
+			this.connect(this.bodyPane, 'scrollTo', function(to){
+				if((typeof to.y) != "number")return;
+				var wrapper = self.pullRefreshWrapper;
+				if(to.y == 0){
+					if(self.state == 'ready'){}
+				}else if(to.y > self.triggerHeight){
+					if(self.state == 'normal'){
+						self._setPullRefreshState('ready');
+					}
+				}else{
+					if(self.state == 'ready'){
+						self._setPullRefreshState('normal');
+					}
+				}
+			});
+		},
+		loadNew: function(){
+			// summary:
+			//		Called when pull refresh triggers.
+			//		It loads data from server side and create extra rows at the top.
+			
+			var q = lang.mixin({
+				'lastId': this.lastId
+			}, this.query);
+			this.store.query(q, this.queryOptions).then(
+				lang.hitch(this, '_loadNewComplete'), 
+				lang.hitch(this, 'onError')
+			);
+		},
+		_loadNewComplete: function(results){
+			// summary:
+			//		Called after store finishes fetching data from server side.
+			
+			var items = results.items || results, arr = [];
+			if(items.length){
+				var rows = query('>.mobileGridxRow', this.bodyPane.containerNode);
+				this.lastId = items[0][this.store.idProperty];
+				array.forEach(items, function(item){
+					arr.push(this._createRow(item));
+				}, this);
+				dom.place(arr.join(''), this.pullRefreshWrapper, 'after');
+			}
+			this._setPullRefreshState('normal');
+			this.bodyPane.slideTo({y:0});
+		},
+		_setPullRefreshState: function(state){
+			// summary:
+			//		Set state of the grid
+			// state:
+			//		normal|ready|loading
+			var wrapper = this.pullRefreshWrapper, labelNode = wrapper.lastChild;
+			css.remove(wrapper, 'releaseToRefresh');
+			css.remove(wrapper, 'inLoading');
+			this.state = state;
+			switch(state){
+				case 'normal':
+					labelNode.innerHTML = i18n.pullToRefresh;
+					break;
+				case 'ready':
+					labelNode.innerHTML = i18n.releaseToRefresh;
+					css.add(wrapper, 'releaseToRefresh');
+					break;
+				case 'loading':
+					labelNode.innerHTML = i18n.waitForLoading;
+					css.add(wrapper, 'inLoading');
+					break;
+				default:
+					break;
+			}
+		},
+
+		_buildBody: function(){
+			this.inherited(arguments);
+			
+			//Add an extra node for pull refresh UI
+			this.pullRefreshWrapper = dom.create('div', {
+				className: 'mobileGridxPullRefreshWrapper'
+			}, this.bodyPane.containerNode, 'first');
+			this.pullRefreshWrapper.innerHTML = '<img src="'+this._blankGif+'"/><span class="mobileGridxPullRefreshLabel">' + i18n.pullToRefresh + '</span>';
+		}
+	});
+});

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

@@ -0,0 +1,66 @@
+define([
+	'dojo/_base/declare',
+	'dojo/_base/array'
+], function(declare, array){
+	return declare(null, {
+		// summary:
+		//	Provide sort api for the grid
+		//	and provide a single UI in the header like traditional grid sorting.
+		sort: function(args){
+			// summary:
+			//	Sort the grid by args which in store sorting format.
+			if(args && (args.length || args.attribute)){
+				this.queryOptions.sort = args.length ? args : [args];
+			}else{
+				this.queryOptions.sort = null;
+			}
+			this.refresh();
+			this.updateSortIndicators();
+		},
+		
+		_buildHeader: function(){
+			// summary:
+			//	Add click to sort capability for header, only for single sort.
+			this.inherited(arguments);
+			if(this._headerClickHandler){return;}
+			this._headerClickHandler = this.connect(this.headerNode, 'onclick', function(evt){
+				var cell = evt.target;
+				if(!/th/i.test(cell.tagName))return;
+				if(!this.queryOptions){this.queryOptions = {};}
+				var col = this.columns[cell.cellIndex], sort = this.queryOptions.sort;
+				
+				//Initial sort may be a array or null..
+				if(sort){sort = sort.length ? sort[0] : sort;}
+				else{sort = {};}
+			
+				if(sort.attribute != col.field){
+					sort = {attribute: col.field, descending: false};
+				}else{
+					if(sort.descending)sort.attribute = null;
+					else if(!sort.descending)sort.descending = true;
+				}
+				this.sort(sort);
+			}, this);
+		},
+		
+		updateSortIndicators: function(){
+			// summary:
+			//	Update the sorting indicators. Maybe override to provide other sorting UI.
+			//	Only support single sort now
+			
+			var cols = this.columns, sort = this.queryOptions.sort, 
+				ht = this.headerNode.firstChild.firstChild;//header table
+			if(sort)sort = sort.length ? sort[0] : sort;
+			else sort = {};
+			
+			array.forEach(ht.rows[0].cells, function(cell, i){
+				var txt = cell.innerHTML.replace(/ *[↑↓]$/g, '');
+				var col = cols[cell.cellIndex];
+				if(col.field == sort.attribute){
+					txt += sort.descending ? ' ↓' : ' ↑';
+				}
+				cell.innerHTML = txt;
+			});
+		}
+	});
+});

data/app/assets/javascripts/gridx/mobile/nls/LazyLoad.js

@@ -0,0 +1,38 @@
+define({root:
+({
+	loading: 'Loading...',
+	loadMore: 'Load More'
+}),
+"ar": true,
+"bg": true,
+"ca": true,
+"cs": true,
+"da": true,
+"de": true,
+"el": true,
+"es": true,
+"fi": true,
+"fr": true,
+"he": true,
+"hr": true,
+"hu": true,
+"it": true,
+"ja": true,
+"kk": true,
+"ko": true,
+"nb": true,
+"nl": true,
+"pl": true,
+"pt": true,
+"pt-pt": true,
+"ro": true,
+"ru": true,
+"sk": true,
+"sl": true,
+"sv": true,
+"th": true,
+"tr": true,
+"uk": true,
+"zh": true,
+"zh-tw": true
+});

data/app/assets/javascripts/gridx/mobile/nls/PullRefresh.js

@@ -0,0 +1,39 @@
+define({root:
+({
+	pullToRefresh: 'Pull to refresh',
+	releaseToRefresh: 'Release to refresh',
+	waitForLoading: 'Wait for loading...'
+}),
+"ar": true,
+"bg": true,
+"ca": true,
+"cs": true,
+"da": true,
+"de": true,
+"el": true,
+"es": true,
+"fi": true,
+"fr": true,
+"he": true,
+"hr": true,
+"hu": true,
+"it": true,
+"ja": true,
+"kk": true,
+"ko": true,
+"nb": true,
+"nl": true,
+"pl": true,
+"pt": true,
+"pt-pt": true,
+"ro": true,
+"ru": true,
+"sk": true,
+"sl": true,
+"sv": true,
+"th": true,
+"tr": true,
+"uk": true,
+"zh": true,
+"zh-tw": true
+});

data/app/assets/javascripts/gridx/mobile/nls/ar/LazyLoad.js

@@ -0,0 +1,6 @@
+define(
+({
+	loading: 'جاري التحميل...',
+	loadMore: 'المزيد من التحميل'
+})
+);

data/app/assets/javascripts/gridx/mobile/nls/ar/PullRefresh.js

@@ -0,0 +1,7 @@
+define(
+({
+	pullToRefresh: 'قم بالسحب ليتم التجديد',
+	releaseToRefresh: 'قم بالاصدار ليتم التجديد',
+	waitForLoading: 'برجاء الانتظار، جاري التحميل...'
+})
+);

data/app/assets/javascripts/gridx/mobile/nls/ar/common.js

@@ -0,0 +1,5 @@
+define(
+({
+	noDataMsg: 'لا توجد بنود ليتم عرضها.'
+})
+);

data/app/assets/javascripts/gridx/mobile/nls/bg/LazyLoad.js

@@ -0,0 +1,6 @@
+define(
+({
+	loading: 'Зареждане...',
+	loadMore: 'Зареждане на повече'
+})
+);

data/app/assets/javascripts/gridx/mobile/nls/bg/PullRefresh.js

@@ -0,0 +1,7 @@
+define(
+({
+	pullToRefresh: 'Изведи за опресняване',
+	releaseToRefresh: 'Освободи за опресняване',
+	waitForLoading: 'Изчакай за зареждане...'
+})
+);

data/app/assets/javascripts/gridx/mobile/nls/bg/common.js

@@ -0,0 +1,5 @@
+define(
+({
+	noDataMsg: 'Няма елементи за показване.'
+})
+);