Merge pull request #1411 from owncloud/message-loadingviewv0.4.2

Use LoadingView when loading messages

9 files changed, 175 insertions, 104 deletions

diff --git a/js/app.js b/js/app.js
index b2738cb50..4ed1505bd 100644
--- a/js/app.js
+++ b/js/app.js
@@ -18,6 +18,7 @@ define(function(require) {
 	// Load controllers/services
 	require('controller/accountcontroller');
 	require('controller/foldercontroller');
+	require('controller/messagecontroller');
 	require('service/accountservice');
 	require('service/folderservice');
 	require('notification');
diff --git a/js/controller/accountcontroller.js b/js/controller/accountcontroller.js
index 149a8bc90..0007edd6c 100644
--- a/js/controller/accountcontroller.js
+++ b/js/controller/accountcontroller.js
@@ -12,6 +12,7 @@ define(function(require) {
 	'use strict';
 
 	var $ = require('jquery');
+	var FolderController = require('controller/foldercontroller');
 	var Radio = require('radio');
 	var UPDATE_INTERVAL = 5 * 60 * 1000; // 5 minutes
 
@@ -32,14 +33,22 @@ define(function(require) {
 
 	function loadAccounts() {
 		var fetchingAccounts = Radio.account.request('entities');
+		Radio.ui.trigger('content:loading');
 
 		$.when(fetchingAccounts).done(function(accounts) {
 			if (accounts.length === 0) {
 				addAccount();
 			} else {
 				var firstAccount = accounts.at(0);
-				accounts.each(function(account) {
-					Radio.folder.trigger('init', account, firstAccount);
+				var loadingAccounts = accounts.map(function(account) {
+					return FolderController.loadFolder(account, firstAccount);
+				});
+				$.when.apply($, loadingAccounts).done(function() {
+					$('#app-navigation').removeClass('icon-loading');
+					Radio.ui.trigger('messagecontent:show');
+
+					// Start fetching messages in background
+					require('background').messageFetcher.start();
 				});
 			}
 
diff --git a/js/controller/foldercontroller.js b/js/controller/foldercontroller.js
index 4aff574f0..f94663efa 100644
--- a/js/controller/foldercontroller.js
+++ b/js/controller/foldercontroller.js
@@ -16,8 +16,6 @@ define(function(require) {
 	var Radio = require('radio');
 	var FolderService = require('service/folderservice');
 
-	Radio.folder.on('init', loadFolder);
-
 	function urldecode(str) {
 		return decodeURIComponent((str + '').replace(/\+/g, '%20'));
 	}
@@ -77,16 +75,10 @@ define(function(require) {
 	function loadFolder(account, active) {
 		var fetchingFolders = FolderService.getFolderEntities(account);
 
-		// TODO: create loading-view
-		$('#mail-messages').addClass('icon-loading');
-		$('#mail-message').addClass('icon-loading');
-
 		Radio.ui.trigger('messagesview:messages:reset');
 		$('#app-navigation').addClass('icon-loading');
 
 		$.when(fetchingFolders).done(function(accountFolders) {
-			$('#app-navigation').removeClass('icon-loading');
-
 			if (account === active) {
 				var folder = accountFolders.at(0);
 
@@ -99,14 +91,13 @@ define(function(require) {
 				Radio.folder.trigger('setactive', account, folder);
 				require('state').currentAccount = account;
 				require('state').currentFolder = folder;
-
-				// Start fetching messages in background
-				require('background').messageFetcher.start();
 			}
 		});
 		$.when(fetchingFolders).fail(function() {
 			Radio.ui.trigger('error:show', t('mail', 'Error while loading the selected account.'));
 		});
+
+		return fetchingFolders.promise();
 	}
 
 	return {
diff --git a/js/controller/messagecontroller.js b/js/controller/messagecontroller.js
new file mode 100644
index 000000000..fd0859a7c
--- /dev/null
+++ b/js/controller/messagecontroller.js
@@ -0,0 +1,105 @@
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * ownCloud - Mail
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ *
+ */
+
+define(function(require) {
+	'use strict';
+
+	var $ = require('jquery');
+	var _ = require('underscore');
+	var Radio = require('radio');
+
+	Radio.message.on('load', function(account, folder, messageId, options) {
+		//FIXME: don't rely on global state vars
+		load(account, messageId, options);
+	});
+
+	/**
+	 * @param {Account} account
+	 * @param {number} messageId
+	 * @param {object} options
+	 * @returns {undefined}
+	 */
+	function load(account, messageId, options) {
+		options = options || {};
+		var defaultOptions = {
+			force: false
+		};
+		_.defaults(options, defaultOptions);
+
+		// Do not reload email when clicking same again
+		if (require('state').currentMessageId === messageId) {
+			return;
+		}
+
+		Radio.ui.trigger('composer:leave');
+
+		if (!options.force && require('ui').isComposerVisible()) {
+			return;
+		}
+		// Abort previous loading requests
+		if (require('state').messageLoading !== null) {
+			require('state').messageLoading.abort();
+		}
+
+		// check if message is a draft
+		var draftsFolder = account.get('specialFolders').drafts;
+		var draft = draftsFolder === require('state').currentFolder.get('id');
+
+		// close email first
+		// Check if message is open
+		if (require('state').currentMessageId !== null) {
+			var lastMessageId = require('state').currentMessageId;
+			Radio.ui.trigger('messagesview:message:setactive', null);
+			if (lastMessageId === messageId) {
+				return;
+			}
+		}
+
+		Radio.ui.trigger('message:loading');
+
+		// Set current Message as active
+		Radio.ui.trigger('messagesview:message:setactive', messageId);
+		require('state').currentMessageBody = '';
+
+		// Fade out the message composer
+		$('#mail_new_message').prop('disabled', false);
+
+		require('communication').fetchMessage(
+			require('state').currentAccount,
+			require('state').currentFolder,
+			messageId,
+			{
+				onSuccess: function(message) {
+					if (draft) {
+						Radio.ui.trigger('composer:show', message);
+					} else {
+						require('cache').addMessage(require('state').currentAccount,
+							require('state').currentFolder,
+							message);
+						Radio.ui.trigger('message:show', message);
+					}
+				},
+				onError: function(jqXHR, textStatus) {
+					if (textStatus !== 'abort') {
+						Radio.ui.trigger('error:show', t('mail', 'Error while loading the selected message.'));
+					}
+				}
+			});
+	}
+});
\ No newline at end of file
diff --git a/js/ui.js b/js/ui.js
index 31a1229f5..a84a3e552 100755
--- a/js/ui.js
+++ b/js/ui.js
@@ -19,11 +19,6 @@ define(function(require) {
 	require('views/helper');
 
 	Radio.ui.on('folder:show', loadFolder);
-	Radio.ui.on('message:load', function(account, folder, messageId,
-		options) {
-		//FIXME: don't rely on global state vars
-		loadMessage(account, messageId, options);
-	});
 
 	var composerVisible = false;
 
@@ -35,7 +30,6 @@ define(function(require) {
 	 */
 	function loadFolder(account, folder, noSelect) {
 		Radio.ui.trigger('composer:leave');
-		Radio.ui.trigger('messagecontent:show');
 
 		if (require('state').messagesLoading !== null) {
 			require('state').messagesLoading.abort();
@@ -46,29 +40,26 @@ define(function(require) {
 
 		// Set folder active
 		Radio.folder.trigger('setactive', account, folder);
+		Radio.ui.trigger('content:loading');
 		Radio.ui.trigger('messagesview:messages:reset');
-		$('#mail-messages')
-			.addClass('icon-loading');
 
 		$('#load-new-mail-messages').hide();
 		$('#load-more-mail-messages').hide();
 
 		if (noSelect) {
 			$('#emptycontent').show();
-			$('#mail-message').removeClass('icon-loading');
 			require('state').currentAccount = account;
 			require('state').currentFolder = folder;
 			Radio.ui.trigger('messagesview:message:setactive', null);
-			$('#mail-messages').removeClass('icon-loading');
 			require('state').currentlyLoading = null;
 		} else {
 			require('communication').fetchMessageList(account, folder, {
 				onSuccess: function(messages, cached) {
+					Radio.ui.trigger('messagecontent:show');
 					require('state').currentlyLoading = null;
 					require('state').currentAccount = account;
 					require('state').currentFolder = folder;
 					Radio.ui.trigger('messagesview:message:setactive', null);
-					$('#mail-messages').removeClass('icon-loading');
 
 					// Fade out the message composer
 					$('#mail_new_message').prop('disabled', false);
@@ -83,7 +74,7 @@ define(function(require) {
 						});
 
 						var messageId = messages[0].id;
-						loadMessage(account, messageId);
+						Radio.message.trigger('load', account, folder, messageId);
 						// Show 'Load More' button if there are
 						// more messages than the pagination limit
 						if (messages.length > 20) {
@@ -93,7 +84,6 @@ define(function(require) {
 						}
 					} else {
 						$('#emptycontent').show();
-						$('#mail-message').removeClass('icon-loading');
 					}
 					$('#load-new-mail-messages')
 						.fadeIn()
@@ -204,83 +194,13 @@ define(function(require) {
 		Radio.ui.trigger('composer:show', data);
 	}
 
-	/**
-	 * @param {Account} account
-	 * @param {number} messageId
-	 * @param {object} options
-	 * @returns {undefined}
-	 */
-	function loadMessage(account, messageId, options) {
-		options = options || {};
-		var defaultOptions = {
-			force: false
-		};
-		_.defaults(options, defaultOptions);
-
-		// Do not reload email when clicking same again
-		if (require('state').currentMessageId === messageId) {
-			return;
-		}
-
-		Radio.ui.trigger('composer:leave');
-
-		if (!options.force && composerVisible) {
-			return;
-		}
-		// Abort previous loading requests
-		if (require('state').messageLoading !== null) {
-			require('state').messageLoading.abort();
-		}
-
-		// check if message is a draft
-		var draftsFolder = account.get('specialFolders').drafts;
-		var draft = draftsFolder === require('state').currentFolder.get('id');
-
-		// close email first
-		// Check if message is open
-		if (require('state').currentMessageId !== null) {
-			var lastMessageId = require('state').currentMessageId;
-			Radio.ui.trigger('messagesview:message:setactive', null);
-			if (lastMessageId === messageId) {
-				return;
-			}
-		}
-
-		Radio.ui.trigger('message:loading');
-
-		// Set current Message as active
-		Radio.ui.trigger('messagesview:message:setactive', messageId);
-		require('state').currentMessageBody = '';
-
-		// Fade out the message composer
-		$('#mail_new_message').prop('disabled', false);
-
-		require('communication').fetchMessage(
-			require('state').currentAccount,
-			require('state').currentFolder,
-			messageId,
-			{
-				onSuccess: function(message) {
-					if (draft) {
-						Radio.ui.trigger('composer:show', message);
-					} else {
-						require('cache').addMessage(require('state').currentAccount,
-							require('state').currentFolder,
-							message);
-						Radio.ui.trigger('message:show', message);
-					}
-				},
-				onError: function(jqXHR, textStatus) {
-					if (textStatus !== 'abort') {
-						Radio.ui.trigger('error:show', t('mail', 'Error while loading the selected message.'));
-					}
-				}
-			});
+	function isComposerVisible() {
+		return composerVisible;
 	}
 
 	return {
 		saveAttachment: saveAttachment,
 		openForwardComposer: openForwardComposer,
-		loadMessage: loadMessage
+		isComposerVisible: isComposerVisible
 	};
 });
diff --git a/js/views/app.js b/js/views/app.js
index 71e466937..1fe6b21f4 100644
--- a/js/views/app.js
+++ b/js/views/app.js
@@ -18,10 +18,12 @@ define(function(require) {
 	var MessageContentView = require('views/messagecontent');
 	var NavigationAccountsView = require('views/navigation-accounts');
 	var SettingsView = require('views/settings');
+	var LoadingView = require('views/loadingview');
 	var NavigationView = require('views/navigation');
 	var SetupView = require('views/setup');
 
 	var ContentType = Object.freeze({
+		LOADING: -1,
 		MESSAGE_CONTENT: 0,
 		SETUP: 1
 	});
@@ -44,6 +46,7 @@ define(function(require) {
 			this.listenTo(Radio.ui, 'error:show', this.showError);
 			this.listenTo(Radio.ui, 'setup:show', this.showSetup);
 			this.listenTo(Radio.ui, 'messagecontent:show', this.showMessageContent);
+			this.listenTo(Radio.ui, 'content:loading', this.showContentLoading);
 
 			// Hide notification favicon when switching back from
 			// another browser tab
@@ -118,7 +121,6 @@ define(function(require) {
 			OC.Notification.showTemporary(message);
 			$('#app-navigation').removeClass('icon-loading');
 			$('#app-content').removeClass('icon-loading');
-			$('#mail-message').removeClass('icon-loading');
 			$('#mail_message').removeClass('icon-loading');
 		},
 		showSetup: function() {
@@ -141,6 +143,12 @@ define(function(require) {
 					accountsView.changeUnseen);
 				this.content.show(messageContentView);
 			}
+		},
+		showContentLoading: function() {
+			if (this.activeContent !== ContentType.LOADING) {
+				this.activeContent = ContentType.LOADING;
+				this.content.show(new LoadingView());
+			}
 		}
 	});
 
diff --git a/js/views/loadingview.js b/js/views/loadingview.js
new file mode 100644
index 000000000..7a3559b89
--- /dev/null
+++ b/js/views/loadingview.js
@@ -0,0 +1,34 @@
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * ownCloud - Mail
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ *
+ */
+
+define(function(require) {
+	'use strict';
+
+	var Marionette = require('marionette');
+
+	/**
+	 * @class LoadingView
+	 */
+	var LoadingView = Marionette.ItemView.extend({
+		template: false,
+		className: 'icon-loading container'
+	});
+
+	return LoadingView;
+});
diff --git a/js/views/messagecontent.js b/js/views/messagecontent.js
index 387c67d46..503c0e6c5 100644
--- a/js/views/messagecontent.js
+++ b/js/views/messagecontent.js
@@ -20,6 +20,7 @@ define(function(require) {
 	var ComposerView = require('views/composer');
 	var MessageView = require('views/message');
 	var MessagesView = require('views/messages');
+	var LoadingView = require('views/loadingview');
 	var MessageContentTemplate = require('text!templates/messagecontent.html');
 
 	var DetailView = Object.freeze({
@@ -49,7 +50,7 @@ define(function(require) {
 			});
 			// END TODO
 
-			//TODO: this.listenTo(Radio.ui, 'message:loading', this.onMessageLoading);
+			this.listenTo(Radio.ui, 'message:loading', this.onMessageLoading);
 		},
 		onShow: function() {
 			this.messages.show(new MessagesView());
@@ -73,7 +74,6 @@ define(function(require) {
 			if (require('state').messageLoading !== null) {
 				require('state').messageLoading.abort();
 				$('iframe').parent().removeClass('icon-loading');
-				$('#mail-message').removeClass('icon-loading');
 				$('#mail_message').removeClass('icon-loading');
 			}
 
@@ -127,6 +127,9 @@ define(function(require) {
 					}
 				}
 			}
+		},
+		onMessageLoading: function() {
+			this.message.show(new LoadingView());
 		}
 	});
 });
diff --git a/js/views/messagesitem.js b/js/views/messagesitem.js
index 1bdffe49a..c85dc7d1d 100644
--- a/js/views/messagesitem.js
+++ b/js/views/messagesitem.js
@@ -75,7 +75,7 @@ define(function(require) {
 			var account = require('state').currentAccount;
 			var folder = require('state').currentFolder;
 			var messageId = this.model.id; //TODO: backbone property
-			Radio.ui.trigger('message:load', account, folder, messageId, {
+			Radio.message.trigger('load', account, folder, messageId, {
 				force: true
 			});
 		},
@@ -106,7 +106,7 @@ define(function(require) {
 						var account = require('state').currentAccount;
 						var folder = require('state').currentFolder;
 						var messageId = nextMessage.id; //TODO: backbone property
-						Radio.ui.trigger('message:load', account, folder, messageId);
+						Radio.message.trigger('load', account, folder, messageId);
 					}
 				}
 				// manually trigger mouseover event for current mouse position