syncing and listing emails in messagelist works. Great refactoring and cleanup of postmessage code

src/js/app-config.js

@@ -25,4 +25,14 @@ var app; // container for the application namespace
 		workerPath: 'js'
 	};
 
+	/**
+	 * The Template Loader. Used to asynchronously load templates located in separate .html files
+	 */
+	app.util.tpl = {
+		templates: {},
+		get: function(name) {
+			return this.templates[name];
+		}
+	};
+
 }());

src/js/loader.js

@@ -1,71 +0,0 @@
-(function() {
-	'use strict';
-
-	/**
-	 * The Template Loader. Used to asynchronously load templates located in separate .html files
-	 */
-	app.util.tpl = {
-
-		// Hash of preloaded templates for the app
-		templates: {},
-
-		// Recursively pre-load all the templates for the app.
-		loadTemplates: function(names, callback) {
-			var that = this;
-
-			var loadTemplate = function(index) {
-				var name = names[index];
-				console.log('Loading template: ' + name);
-				$.get('tpl/' + name + '.html', function(data) {
-					that.templates[name] = data;
-					index++;
-					if (index < names.length) {
-						loadTemplate(index);
-					} else {
-						callback();
-					}
-				});
-			};
-
-			loadTemplate(0);
-		},
-
-		// Get template by name from hash of preloaded templates
-		get: function(name) {
-			return this.templates[name];
-		}
-
-	};
-
-	/**
-	 * Load templates and start the application
-	 */
-	$(document).ready(function() {
-		// are we running in native app or in browser?
-		var isBrowser = false;
-		if (document.URL.indexOf("http") === 0) {
-			isBrowser = true;
-		}
-
-		if (!isBrowser) {
-			document.addEventListener("deviceready", onDeviceReady, false);
-		} else {
-			onDeviceReady();
-		}
-
-		function onDeviceReady() {
-			console.log('Starting in Browser: ' + isBrowser);
-			app.util.tpl.loadTemplates([
-				'login',
-				'compose',
-				'folderlist',
-				'messagelist',
-				'messagelistitem',
-				'read'], function() {
-				var router = new app.Router();
-				Backbone.history.start();
-			});
-		}
-	});
-
-}());

src/js/sandbox-loader.js

@@ -1,20 +1,9 @@
 (function() {
 	'use strict';
 
-	/**
+	var router,
-	 * The Template Loader. Used to asynchronously load templates located in separate .html files
+		mainWindow,
-	 */
+		mainWindowOrigin;
-	app.util.tpl = {
-
-		// Hash of preloaded templates for the app
-		templates: {},
-
-		// Get template by name from hash of preloaded templates
-		get: function(name) {
-			return this.templates[name];
-		}
-
-	};
 
 	/**
 	 * Load templates and start the application
@@ -28,13 +17,31 @@
 				app.util.tpl.templates = e.data.args;
 
 				// remember references to main window
-				window.mainWindow = e.source;
+				mainWindow = e.source;
-				window.mainWindowOrigin = e.origin;
+				mainWindowOrigin = e.origin;
 
-				var router = new app.Router();
+				router = new app.Router();
 				Backbone.history.start();
 			}
 		};
 	});
 
+	/**
+	 * Helper method to ease message posting between sandbox and main window
+	 */
+	app.util.postMessage = function(cmd, args, callback) {
+		// set listender
+		window.onmessage = function(e) {
+			if (e.data.cmd === cmd) {
+				callback(e.data.args);
+			}
+		};
+
+		// send message to main window
+		mainWindow.postMessage({
+			cmd: cmd,
+			args: args
+		}, mainWindowOrigin);
+	};
+
 }());

src/js/view/login-view.js

@@ -33,29 +33,21 @@
 				theme: 'c'
 			});
 
-			// set listener for event from main window
+			// post message to main window
-			window.onmessage = function(e) {
+			app.util.postMessage('login', {
-				if (e.data.cmd === 'login') {
+				userId: userId,
-					var err = e.data.args.err;
+				password: password
+			}, function(resArgs) {
+				var err = resArgs.err;
 
-					$.mobile.loading('hide');
+				$.mobile.loading('hide');
-					if (err) {
+				if (err) {
-						window.alert(err.errMsg);
+					window.alert(err.errMsg);
-						return;
+					return;
-					}
-
-					window.location = '#accounts/' + userId + '/folders';
 				}
-			};
 
-			// send message to main window
+				window.location = '#accounts/' + userId + '/folders';
-			window.mainWindow.postMessage({
+			});
-				cmd: 'login',
-				args: {
-					userId: userId,
-					password: password
-				}
-			}, window.mainWindowOrigin);
 		}
 	});
 

src/js/view/messagelist-view.js

@@ -6,10 +6,9 @@
 		initialize: function(args) {
 			this.template = _.template(app.util.tpl.get('messagelist'));
 			this.folder = args.folder;
-			this.dao = args.dao;
 		},
 
-		render: function(eventName) {
+		render: function() {
 			var self = this,
 				page = $(this.el);
 
@@ -33,8 +32,12 @@
 				textVisible: true
 			});
 
-			// sync current folder from cloud
+			// post message to main window
-			self.dao.syncFromCloud(self.folder, function(err) {
+			app.util.postMessage('syncEmails', {
+				folder: self.folder
+			}, function(resArgs) {
+				var err = resArgs.err;
+
 				$.mobile.loading('hide');
 
 				// check for error
@@ -61,7 +64,16 @@
 				text: 'decrypting...',
 				textVisible: true
 			});
-			this.dao.listItems(this.folder, 0, 10, function(err, collection) {
+
+			// post message to main window
+			app.util.postMessage('listEmails', {
+				folder: self.folder,
+				offset: 0,
+				num: 10
+			}, function(resArgs) {
+				var err = resArgs.err;
+				var collection = resArgs.collection;
+
 				// check for error
 				if (err) {
 					$.mobile.loading('hide');
@@ -73,8 +85,8 @@
 				list.html('');
 
 				// append items to list in reverse order so mails with the most recent date will be displayed first
-				for (i = collection.models.length - 1; i >= 0; i--) {
+				for (i = collection.length - 1; i >= 0; i--) {
-					email = collection.at(i);
+					email = collection[i];
 					listItemArgs = {
 						account: self.options.account,
 						folder: self.folder,

src/js/view/messagelistitem-view.js

@@ -9,15 +9,16 @@
 			this.template = _.template(app.util.tpl.get('messagelistitem'));
 		},
 
-		render: function(eventName) {
+		render: function() {
-			var params = this.model.toJSON();
+			var params = this.model;
 			params.account = this.options.account;
 			params.folder = this.options.folder;
 			params.id = encodeURIComponent(params.id);
 
-			var util = new cryptoLib.Util(window, null);
+			// var util = new cryptoLib.Util(window, null);
-			var date = util.parseDate(params.sentDate);
+			// var date = util.parseDate(params.sentDate);
-			params.displayDate = date.getDate() + '.' + (date.getMonth() + 1) + '. ' + date.getHours() + ':' + date.getMinutes();
+			// params.displayDate = date.getDate() + '.' + (date.getMonth() + 1) + '. ' + date.getHours() + ':' + date.getMinutes();
+			params.displayDate = params.sentDate;
 
 			$(this.el).html(this.template(params));
 			return this;

src/js/window-loader.js

@@ -6,37 +6,23 @@
 	/**
 	 * The Template Loader. Used to asynchronously load templates located in separate .html files
 	 */
-	app.util.tpl = {
+	app.util.tpl.loadTemplates = function(names, callback) {
-
+		var that = this;
-		// Hash of preloaded templates for the app
-		templates: {},
-
-		// Recursively pre-load all the templates for the app.
-		loadTemplates: function(names, callback) {
-			var that = this;
-
-			var loadTemplate = function(index) {
-				var name = names[index];
-				console.log('Loading template: ' + name);
-				$.get('tpl/' + name + '.html', function(data) {
-					that.templates[name] = data;
-					index++;
-					if (index < names.length) {
-						loadTemplate(index);
-					} else {
-						callback();
-					}
-				});
-			};
-
-			loadTemplate(0);
-		},
-
-		// Get template by name from hash of preloaded templates
-		get: function(name) {
-			return this.templates[name];
-		}
 
+		var loadTemplate = function(index) {
+			var name = names[index];
+			console.log('Loading template: ' + name);
+			$.get('tpl/' + name + '.html', function(data) {
+				that.templates[name] = data;
+				index++;
+				if (index < names.length) {
+					loadTemplate(index);
+				} else {
+					callback();
+				}
+			});
+		};
+		loadTemplate(0);
 	};
 
 	/**
@@ -71,26 +57,21 @@
 	function startApp() {
 		// init email dao and dependencies
 		initDAO();
-
 		// sandboxed ui in iframe
 		var sandbox = document.getElementById('sandboxFrame').contentWindow;
 
-		// set listener for events from sandbox
+		// set global listener for events from sandbox
 		window.onmessage = function(e) {
 			var cmd = e.data.cmd;
 			var args = e.data.args;
-
+			// handle the workload in the main window
-			if (cmd === 'login') {
+			handleCommand(cmd, args, function(resArgs) {
-				// login user
+				// send reponse to sandbox
-				login(args.userId, args.password, function(err) {
+				sandbox.postMessage({
-					sandbox.postMessage({
+					cmd: cmd,
-						cmd: 'login',
+					args: resArgs
-						args: {
+				}, '*');
-							err: err
+			});
-						}
-					}, '*');
-				});
-			}
 		};
 
 		// init sandbox ui
@@ -100,6 +81,42 @@
 		}, '*');
 	}
 
+	function handleCommand(cmd, args, callback) {
+		if (cmd === 'login') {
+			// login user
+			login(args.userId, args.password, function(err) {
+				callback({
+					err: err
+				});
+			});
+
+		} else if (cmd === 'syncEmails') {
+			// list emails from folder
+			emailDao.syncFromCloud(args.folder, function(err) {
+				callback({
+					err: err
+				});
+			});
+
+		} else if (cmd === 'listEmails') {
+			// list emails from folder
+			emailDao.listItems(args.folder, args.offset, args.num, function(err, collection) {
+				callback({
+					err: err,
+					collection: collection.toJSON()
+				});
+			});
+
+		} else {
+			// error: invalid message from sandbox
+			callback({
+				err: {
+					errMsg: 'Invalid message posted from sandbox!'
+				}
+			});
+		}
+	}
+
 	function initDAO() {
 		var util = new cryptoLib.Util(window, uuid);
 		var crypto = new app.crypto.Crypto(window, util);