From d9aa138a34342cf6422e02ebe535002426c7d5bb Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Sat, 6 Feb 2016 11:35:44 +0100 Subject: [PATCH] add backbone radio for advanced event and req/resp handling --- bower.json | 3 +- js/app.js | 55 ------------------------------ js/background.js | 3 +- js/controller/accountcontroller.js | 7 ++-- js/controller/foldercontroller.js | 7 ++-- js/radio.js | 37 ++++++++++++++++++++ js/require_config.js | 1 + js/service/accountservice.js | 4 +++ js/service/folderservice.js | 3 ++ js/ui.js | 13 +++++-- js/views/folder.js | 3 +- js/views/message.js | 5 +-- js/views/setup.js | 7 ++-- 13 files changed, 79 insertions(+), 69 deletions(-) create mode 100644 js/radio.js diff --git a/bower.json b/bower.json index 33d74f100..1488d853c 100644 --- a/bower.json +++ b/bower.json @@ -24,6 +24,7 @@ "jquery-visibility": "~1.0.11", "requirejs": "~2.1.20", "text": "requirejs-text#~2.0.14", - "underscore": "~1.8.3" + "underscore": "~1.8.3", + "backbone.radio": "^1.0.2" } } diff --git a/js/app.js b/js/app.js index 841e97a6e..8c826bb89 100644 --- a/js/app.js +++ b/js/app.js @@ -12,10 +12,6 @@ define(function(require) { 'use strict'; var Marionette = require('marionette'); - var AccountController = require('controller/accountcontroller'); - var FolderController = require('controller/foldercontroller'); - var AccountService = require('service/accountservice'); - var FolderService = require('service/folderservice'); var AppView = require('views/app'); var SettingsView = require('views/settings'); var NavigationView = require('views/navigation'); @@ -26,63 +22,12 @@ define(function(require) { var Mail = new Marionette.Application(); var State = require('state'); - var UI = require('ui'); /** * Set up view */ Mail.view = new AppView(); - /* - * Set up event handler - */ - Mail.on('accounts:load', function() { - Mail.Controller.accountController.loadAccounts(); - }); - Mail.on('folder:init', function(accountId, activeId) { - Mail.Controller.folderController.loadFolder(accountId, activeId); - }); - Mail.on('folder:load', function(accountId, folderId, noSelect) { - UI.loadFolder(accountId, folderId, noSelect); - }); - Mail.on('message:load', function(accountId, folderId, messageId, options) { - //FIXME: don't rely on global state vars - UI.loadMessage(messageId, options); - }); - Mail.on('ui:menu:show', function() { - UI.showMenu(); - }); - Mail.on('ui:menu:hide', function() { - UI.hideMenu(); - }); - - /** - * Set up controllers - */ - Mail.Controller = {}; - Mail.Controller.accountController = AccountController; - Mail.Controller.folderController = FolderController; - - /** - * Set up services - */ - Mail.Service = {}; - Mail.Service.accountService = AccountService; - Mail.Service.folderService = FolderService; - - /* - * Set up request/response handler - */ - Mail.reqres.setHandler('account:create', function(config) { - return Mail.Service.accountService.createAccount(config); - }); - Mail.reqres.setHandler('account:entities', function() { - return Mail.Service.accountService.getAccountEntities(); - }); - Mail.reqres.setHandler('folder:entities', function(accountId) { - return Mail.Service.folderService.getFolderEntities(accountId); - }); - Mail.on('before:start', function() { // Render settings menu this.view.navigation = new NavigationView(); diff --git a/js/background.js b/js/background.js index f52b0d3df..7bb325f50 100644 --- a/js/background.js +++ b/js/background.js @@ -14,6 +14,7 @@ define(function(require) { 'use strict'; var OC = require('OC'); + var Radio = require('radio'); /*jshint maxparams: 6 */ function showNotification(title, body, tag, icon, accountId, folderId) { @@ -35,7 +36,7 @@ define(function(require) { } ); notification.onclick = function() { - require('app').trigger('folder:load', accountId, folderId, false); + Radio.ui.trigger('folder:load', accountId, folderId, false); window.focus(); }; setTimeout(function() { diff --git a/js/controller/accountcontroller.js b/js/controller/accountcontroller.js index 8928beed4..7d0dce966 100644 --- a/js/controller/accountcontroller.js +++ b/js/controller/accountcontroller.js @@ -12,9 +12,12 @@ define(function(require) { 'use strict'; var $ = require('jquery'); + var Radio = require('radio'); + + Radio.account.on('load', loadAccounts); function loadAccounts() { - var fetchingAccounts = require('app').request('account:entities'); + var fetchingAccounts = Radio.account.request('entities'); var UI = require('ui'); $.when(fetchingAccounts).done(function(accounts) { @@ -23,7 +26,7 @@ define(function(require) { } else { var firstAccountId = accounts.at(0).get('accountId'); accounts.each(function(a) { - require('app').trigger('folder:init', a.get('accountId'), firstAccountId); + Radio.folder.trigger('init', a.get('accountId'), firstAccountId); }); } }); diff --git a/js/controller/foldercontroller.js b/js/controller/foldercontroller.js index 7a673b3fc..45924cb27 100644 --- a/js/controller/foldercontroller.js +++ b/js/controller/foldercontroller.js @@ -13,6 +13,9 @@ define(function(require) { var $ = require('jquery'); var _ = require('underscore'); + var Radio = require('radio'); + + Radio.folder.on('init', loadFolder); function urldecode(str) { return decodeURIComponent((str + '').replace(/\+/g, '%20')); @@ -66,7 +69,7 @@ define(function(require) { } function loadFolder(accountId, activeId) { - var fetchingFolders = require('app').request('folder:entities', accountId); + var fetchingFolders = Radio.folder.request('entities', accountId); var UI = require('ui'); // TODO: create loading-view @@ -86,7 +89,7 @@ define(function(require) { if (accountId === activeId) { var folderId = accountFolders.folders[0].id; - require('app').trigger('folder:load', accountId, folderId, false); + Radio.ui.trigger('folder:load', accountId, folderId, false); // Open composer if 'mailto' url-param is set handleMailTo(); diff --git a/js/radio.js b/js/radio.js new file mode 100644 index 000000000..609ff21e1 --- /dev/null +++ b/js/radio.js @@ -0,0 +1,37 @@ +/** + * ownCloud - Mail + * + * This file is licensed under the Affero General Public License version 3 or + * later. See the COPYING file. + * + * @author Christoph Wurst + * @copyright Christoph Wurst 2016 + */ + +define(function(require) { + 'use strict'; + + var Radio = require('backbone.radio'); + + var uiChannel = Radio.channel('ui'); + var stateChannel = Radio.channel('state'); + var accountChannel = Radio.channel('account'); + var folderChannel = Radio.channel('folder'); + var messageChannel = Radio.channel('message'); + + var channels = { + ui: uiChannel, + state: stateChannel, + account: accountChannel, + folder: folderChannel, + message: messageChannel + }; + + // Log all events to the console + for (var channelName in channels) { + Radio.tuneIn(channelName); + } + + return channels; +}); + diff --git a/js/require_config.js b/js/require_config.js index a1de6c31d..7d3320854 100644 --- a/js/require_config.js +++ b/js/require_config.js @@ -20,6 +20,7 @@ * Libraries */ backbone: 'vendor/backbone/backbone', + 'backbone.radio': 'vendor/backbone.radio/build/backbone.radio', domready: 'vendor/domready/ready.min', handlebars: 'vendor/handlebars/handlebars', marionette: 'vendor/backbone.marionette/lib/backbone.marionette', diff --git a/js/service/accountservice.js b/js/service/accountservice.js index 0d985b852..b326ffbab 100644 --- a/js/service/accountservice.js +++ b/js/service/accountservice.js @@ -13,6 +13,10 @@ define(function(require) { var $ = require('jquery'); var OC = require('OC'); + var Radio = require('radio'); + + Radio.account.reply('create', createAccount); + Radio.account.reply('entities', getAccountEntities); function createAccount(config) { var defer = $.Deferred(); diff --git a/js/service/folderservice.js b/js/service/folderservice.js index 93219a084..986eda8bf 100644 --- a/js/service/folderservice.js +++ b/js/service/folderservice.js @@ -13,6 +13,9 @@ define(function(require) { var $ = require('jquery'); var OC = require('OC'); + var Radio = require('radio'); + + Radio.folder.reply('entities', getFolderEntities); function getFolderEntities(accountId) { var defer = $.Deferred(); diff --git a/js/ui.js b/js/ui.js index 86e5504a1..c57ff1379 100755 --- a/js/ui.js +++ b/js/ui.js @@ -17,6 +17,7 @@ define(function(require) { var Handlebars = require('handlebars'); var Marionette = require('marionette'); var OC = require('OC'); + var Radio = require('radio'); var MessagesView = require('views/messages'); var NavigationAccountsView = require('views/navigation-accounts'); var ComposerView = require('views/composer'); @@ -24,6 +25,14 @@ define(function(require) { require('views/helper'); require('settings'); + Radio.ui.on('menu:show', showMenu); + Radio.ui.on('menu:hide', hideMenu); + Radio.ui.on('folder:load', loadFolder); + Radio.ui.on('message:load', function(accountId, folderId, messageId, options) { + //FIXME: don't rely on global state vars + loadMessage(messageId, options); + }); + var messageView = null; var composer = null; var composerVisible = false; @@ -161,7 +170,7 @@ define(function(require) { }); setInterval(require('background').checkForNotifications, 5 * 60 * 1000); - require('app').trigger('accounts:load'); + Radio.account.trigger('load'); } function showError(message) { @@ -688,7 +697,7 @@ define(function(require) { $('#mail_new_message').addClass('hidden'); $('#app-navigation').removeClass('icon-loading'); - require('app').trigger('ui:menu:hide'); + Radio.ui.trigger('menu:hide'); $('#setup').removeClass('hidden'); // don't show New Message button on Add account screen diff --git a/js/views/folder.js b/js/views/folder.js index c410ef222..371f51629 100644 --- a/js/views/folder.js +++ b/js/views/folder.js @@ -13,6 +13,7 @@ define(function(require) { var Backbone = require('backbone'); var Handlebars = require('handlebars'); + var Radio = require('radio'); var FolderTemplate = require('text!templates/folder.html'); return Backbone.Marionette.ItemView.extend({ @@ -33,7 +34,7 @@ define(function(require) { var accountId = this.model.get('accountId'); var folderId = $(e.currentTarget).parent().data('folder_id'); var noSelect = $(e.currentTarget).parent().data('no_select'); - require('app').trigger('folder:load', accountId, folderId, noSelect); + Radio.ui.trigger('folder:load', accountId, folderId, noSelect); }, onRender: function() { // Get rid of that pesky wrapping-div. diff --git a/js/views/message.js b/js/views/message.js index a2e2e13e6..55ce1d4c6 100644 --- a/js/views/message.js +++ b/js/views/message.js @@ -14,6 +14,7 @@ define(function(require) { var Handlebars = require('handlebars'); var Marionette = require('marionette'); var OC = require('OC'); + var Radio = require('radio'); var MessageTemplate = require('text!templates/message-list-item.html'); return Marionette.ItemView.extend({ @@ -73,7 +74,7 @@ define(function(require) { var accountId = require('state').currentAccountId; var folderId = require('state').currentFolderId; var messageId = this.model.id; //TODO: backbone property - require('app').trigger('message:load', accountId, folderId, messageId, { + Radio.ui.trigger('message:load', accountId, folderId, messageId, { force: true }); }, @@ -101,7 +102,7 @@ define(function(require) { var accountId = require('state').currentAccountId; var folderId = require('state').currentFolderId; var messageId = nextMessage.id; //TODO: backbone property - require('app').trigger('message:load', accountId, folderId, messageId); + Radio.ui.trigger('message:load', accountId, folderId, messageId); } } // manually trigger mouseover event for current mouse position diff --git a/js/views/setup.js b/js/views/setup.js index 1d1982842..737f0f55b 100644 --- a/js/views/setup.js +++ b/js/views/setup.js @@ -15,6 +15,7 @@ define(function(require) { var _ = require('underscore'); var Marionette = require('marionette'); var Handlebars = require('handlebars'); + var Radio = require('radio'); var SetupTemplate = require('text!templates/setup.html'); return Marionette.ItemView.extend({ @@ -126,12 +127,12 @@ define(function(require) { } this.loading = true; - var creatingAccount = require('app').request('account:create', config); + var creatingAccount = Radio.account.request('create', config); $.when(creatingAccount).done(function() { - Mail.trigger('ui:menu:show'); + Radio.ui.trigger('menu:show'); // reload accounts - Mail.trigger('accounts:load'); + Radio.account.trigger('load'); }); $.when(creatingAccount).fail(function(error) {