render folders using the composite pattern (tree view)

css/mail.css

@@ -167,12 +167,6 @@
 	padding-left: 32px;
 }
 
-#app-navigation .with-icon ul li > a,
-#app-navigation .with-icon ul li.app-navigation-entry-loading > a {
-	padding-left: 68px;
-	background-position: 44px center;
-}
-
 #app-navigation ul .collapsible.open:hover {
 	box-shadow: inset 0 0 3px #ddd;
 }

js/templates/account.html

@@ -20,9 +20,7 @@ <h2 class="mail-account-email" title="{{emailAddress}}">{{emailAddress}}</h2>
 </div>
 {{/if}}
 
-
-<ul id="mail_folders" class="mail_folders with-icon" data-account_id="{{id}}">
-</ul>
+<div class="folders with-icon"></div>
 {{#unless isUnifiedInbox}}
 {{#if hasFolders}}
 <span class="account-toggle-collapse">{{toggleCollapseMessage}}</span>

js/templates/folder.html

@@ -1,35 +1,12 @@
-<li data-folder_id="{{id}}" data-no_select="{{noSelect}}"
-	class="
-	{{#if unseen}}unread{{/if}}
-	{{#if active}} active{{/if}}
-	{{#if specialRole}} special-{{specialRole}}{{/if}}
-	{{#if folders}} collapsible{{/if}}
-	{{#if open}} open{{/if}}
-	">
-	{{#if folders}}<button class="collapse"></button>{{/if}}
-	<a class="folder {{#if specialRole}}
-	   icon-{{specialRole}} svg{{/if}}"
-	   href="{{url}}">
-		{{name}}
-		{{#if count}}
-		<span class="utils">{{count}}</span>
-		{{/if}}
-	</a>
-	<ul>
-		{{#each folders}}
-		<li data-folder_id="{{id}}"
-			class="
-			{{#if unseen}}unread{{/if}}
-			{{#if specialRole}} special-{{specialRole}}{{/if}}
-			">
-			<a class="folder
-			   {{#if specialRole}} icon-{{specialRole}} svg{{/if}}">
-				{{name}}
-				{{#if count}}
-				<span class="utils">{{count}}</span>
-				{{/if}}
-			</a>
-		</li>
-		{{/each}}
-	</ul>
-</li>
+{{#if folders}}
+<button class="collapse"></button>
+{{/if}}
+<a class="folder {{#if specialRole}}
+   icon-{{specialRole}} svg{{/if}}"
+   href="{{url}}">
+	{{name}}
+	{{#if count}}
+	<span class="utils">{{count}}</span>
+	{{/if}}
+</a>
+<div class="folders"></div>

js/views/account.js → js/views/accountview.js

@@ -15,58 +15,41 @@ define(function(require) {
 	var Marionette = require('marionette');
 	var OC = require('OC');
 	var Radio = require('radio');
-	var FolderView = require('views/folder');
+	var FolderListView = require('views/folderlistview');
 	var AccountTemplate = require('text!templates/account.html');
 
-	var SHOW_COLLAPSED = Object.seal([
-		'inbox',
-		'flagged',
-		'drafts',
-		'sent'
-	]);
-
-	return Marionette.CompositeView.extend({
-		collection: null,
-		model: null,
+	return Marionette.View.extend({
 		template: Handlebars.compile(AccountTemplate),
 		templateContext: function() {
 			var toggleCollapseMessage = this.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders');
 			return {
 				isUnifiedInbox: this.model.get('accountId') === -1,
 				toggleCollapseMessage: toggleCollapseMessage,
 				hasMenu: this.model.get('accountId') !== -1,
-				hasFolders: this.collection.length > 0
+				hasFolders: this.model.folders.length > 0
 			};
 		},
-		collapsed: true,
 		events: {
 			'click .account-toggle-collapse': 'toggleCollapse',
 			'click .app-navigation-entry-utils-menu-button button': 'toggleMenu',
 			'click @ui.deleteButton': 'onDelete',
 			'click @ui.settingsButton': 'showAccountSettings',
 			'click @ui.email': 'onClick'
 		},
+		regions: {
+			folders: '.folders'
+		},
 		ui: {
-			'email': '.mail-account-email',
-			'menu': 'div.app-navigation-entry-menu',
-			'deleteButton': 'button[class^="icon-delete"]',
-			'settingsButton': 'button[class^="icon-rename"]'
+			email: '.mail-account-email',
+			menu: 'div.app-navigation-entry-menu',
+			deleteButton: 'button[class^="icon-delete"]',
+			settingsButton: 'button[class^="icon-rename"]'
 		},
-		// 'active' is needed to show the dotdotdot menu
 		className: 'navigation-account',
-		childView: FolderView,
-		childViewContainer: '#mail_folders',
 		menuShown: false,
+		collapsed: true,
 		initialize: function(options) {
 			this.model = options.model;
-			this.collection = this.model.folders;
-		},
-		filter: function(child) {
-			if (!this.collapsed) {
-				return true;
-			}
-			var specialRole = child.get('specialRole');
-			return SHOW_COLLAPSED.indexOf(specialRole) !== -1;
 		},
 		toggleCollapse: function() {
 			this.collapsed = !this.collapsed;
@@ -120,6 +103,11 @@ define(function(require) {
 					this.toggleMenuClass();
 				}
 			});
+
+			this.showChildView('folders', new FolderListView({
+				collection: this.model.folders,
+				collapsed: this.collapsed
+			}));
 		},
 		showAccountSettings: function(e) {
 			this.toggleMenu(e);

js/views/folderlistview.js

@@ -0,0 +1,41 @@
+/**
+ * Mail
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ * @copyright Christoph Wurst 2016
+ */
+
+define(function(require) {
+	'use strict';
+
+	var Marionette = require('marionette');
+	var FolderView = require('views/folderview');
+
+	var SHOW_COLLAPSED = Object.seal([
+		'inbox',
+		'flagged',
+		'drafts',
+		'sent'
+	]);
+
+	var FolderListView = Marionette.CollectionView.extend({
+		tagName: 'ul',
+		childView: FolderView,
+		collapsed: true,
+		initialize: function(options) {
+			this.collapsed = options.collapsed;
+		},
+		filter: function(child) {
+			if (!this.collapsed) {
+				return true;
+			}
+			var specialRole = child.get('specialRole');
+			return SHOW_COLLAPSED.indexOf(specialRole) !== -1;
+		}
+	});
+
+	return FolderListView;
+});

js/views/folder.js → js/views/folderview.js

@@ -11,14 +11,39 @@
 define(function(require) {
 	'use strict';
 
-	var $ = require('jquery');
-	var Backbone = require('backbone');
+	var _ = require('underscore');
+	var Marionette = require('marionette');
 	var Handlebars = require('handlebars');
 	var OC = require('OC');
 	var Radio = require('radio');
 	var FolderTemplate = require('text!templates/folder.html');
 
-	return Backbone.Marionette.View.extend({
+	return Marionette.View.extend({
+		tagName: 'li',
+		updateElClasses: function() {
+			var classes = [];
+			if (this.model.get('unseen')) {
+				classes.push('unseen');
+			}
+			if (this.model.get('active')) {
+				classes.push('active');
+			}
+			if (this.model.get('specialRole')) {
+				classes.push('special-' + this.model.get('specialRole'));
+			}
+			if (this.model.folders.length > 0) {
+				classes.push('collapsible');
+			}
+			if (this.model.get('open')) {
+				classes.push('open');
+			}
+			// .removeClass() does not work, https://bugs.jqueryui.com/ticket/9015
+			this.$el.prop('class', '');
+			var _this = this;
+			_.each(classes, function(clazz) {
+				_this.$el.addClass(clazz);
+			});
+		},
 		template: Handlebars.compile(FolderTemplate),
 		templateContext: function() {
 			var count = null;
@@ -39,6 +64,9 @@ define(function(require) {
 				url: url
 			};
 		},
+		regions: {
+			folders: '.folders'
+		},
 		events: {
 			'click .collapse': 'collapseFolder',
 			'click .folder': 'loadFolder'
@@ -54,24 +82,18 @@ define(function(require) {
 			e.preventDefault();
 			// TODO: account should be property of folder
 			var account = require('state').accounts.get(this.model.get('accountId'));
-			var folderId = $(e.currentTarget).parent().data('folder_id');
-			var folder = null;
-			if (folderId === this.model.get('id')) {
-				folder = this.model;
-			} else {
-				folder = this.model.folders.get(folderId);
-			}
-			var noSelect = $(e.currentTarget).parent().data('no_select');
+			var folder = this.model;
+			var noSelect = this.model.get('noSelect');
 			Radio.navigation.trigger('folder', account.get('accountId'), folder.get('id'), noSelect);
 		},
 		onRender: function() {
-			// Get rid of that pesky wrapping-div.
-			// Assumes 1 child element present in template.
-			this.$el = this.$el.children();
-			// Unwrap the element to prevent infinitely
-			// nesting elements during re-render.
-			this.$el.unwrap();
-			this.setElement(this.$el);
+			var FolderListView = require('views/folderlistview');
+
+			this.showChildView('folders', new FolderListView({
+				collection: this.model.folders
+			}));
+
+			this.updateElClasses();
 		}
 	});
 });

js/views/navigation-accounts.js

@@ -14,7 +14,7 @@ define(function(require) {
 	var _ = require('underscore');
 	var $ = require('jquery');
 	var Marionette = require('marionette');
-	var AccountView = require('views/account');
+	var AccountView = require('views/accountview');
 	var Radio = require('radio');
 
 	/**