Skip to content
This repository has been archived by the owner on Nov 8, 2018. It is now read-only.

Commit

Permalink
Merge pull request #1411 from owncloud/message-loadingview
Browse files Browse the repository at this point in the history
Use LoadingView when loading messages
  • Loading branch information
ChristophWurst committed Apr 13, 2016
2 parents 793aec9 + 5f2eed8 commit 34a14ce
Show file tree
Hide file tree
Showing 9 changed files with 175 additions and 104 deletions.
1 change: 1 addition & 0 deletions js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
13 changes: 11 additions & 2 deletions js/controller/accountcontroller.js
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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();
});
}

Expand Down
13 changes: 2 additions & 11 deletions js/controller/foldercontroller.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
}
Expand Down Expand Up @@ -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);

Expand All @@ -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 {
Expand Down
105 changes: 105 additions & 0 deletions js/controller/messagecontroller.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/**
* @author Christoph Wurst <[email protected]>
*
* 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.'));
}
}
});
}
});
92 changes: 6 additions & 86 deletions js/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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();
Expand All @@ -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);
Expand All @@ -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) {
Expand All @@ -93,7 +84,6 @@ define(function(require) {
}
} else {
$('#emptycontent').show();
$('#mail-message').removeClass('icon-loading');
}
$('#load-new-mail-messages')
.fadeIn()
Expand Down Expand Up @@ -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
};
});
10 changes: 9 additions & 1 deletion js/views/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand All @@ -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
Expand Down Expand Up @@ -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() {
Expand All @@ -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());
}
}
});

Expand Down
Loading

0 comments on commit 34a14ce

Please sign in to comment.