Add more personal information fields to the settings page for enhanced federated sharing

fix layout

Add generic way of handling input change events

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>

3 files changed, 246 insertions, 7 deletions

diff --git a/settings/js/federationscopemenu.js b/settings/js/federationscopemenu.js
new file mode 100644
index 00000000000..6eb9afb54e0
--- /dev/null
+++ b/settings/js/federationscopemenu.js
@@ -0,0 +1,114 @@
+/*
+ * Copyright (c) 2016
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+/* global OC, Handlebars */
+
+(function() {
+
+	var TEMPLATE_MENU =
+		'<ul>' +
+		'{{#each items}}' +
+		'<li>' +
+		'<a href="#" class="menuitem action action-{{name}} permanent" data-action="{{name}}">' +
+			'{{#if icon}}<img class="icon" src="{{icon}}"/>' +
+			'{{else}}'+
+				'{{#if iconClass}}' +
+				'<span class="icon {{iconClass}}"></span>' +
+				'{{else}}' +
+				'<span class="no-icon"></span>' +
+				'{{/if}}' +
+			'{{/if}}' +
+			'<span>{{displayName}}</span></a>' +
+		'</li>' +
+		'{{/each}}' +
+		'</ul>';
+
+	/**
+	 * Construct a new FederationScopeMenu instance
+	 * @constructs FederationScopeMenu
+	 * @memberof OC.Settings
+	 */
+	var FederationScopeMenu = OC.Backbone.View.extend({
+		tagName: 'div',
+		className: 'federationScopeMenu popovermenu bubble hidden open menu',
+		_scopes: [
+			{
+				name: 'private',
+				displayName: t('core', 'Private'),
+				icon: OC.imagePath('core', 'actions/password')
+			},
+			{
+				name: 'contacts',
+				displayName: t('core', 'Contacts'),
+				icon: OC.imagePath('core', 'places/contacts-dark')
+			},
+			{
+				name: 'public',
+				displayName: t('core', 'Public'),
+				icon: OC.imagePath('core', 'places/link')
+			}
+		],
+
+		/**
+		 * Current context
+		 *
+		 * @type OCA.Files.FileActionContext
+		 */
+		_context: null,
+
+		events: {
+			'click a.action': '_onClickAction'
+		},
+
+		template: Handlebars.compile(TEMPLATE_MENU),
+
+		/**
+		 * Event handler whenever an action has been clicked within the menu
+		 *
+		 * @param {Object} event event object
+		 */
+		_onClickAction: function(event) {
+			var $target = $(event.currentTarget);
+			if (!$target.hasClass('menuitem')) {
+				$target = $target.closest('.menuitem');
+			}
+
+			this.trigger('select:scope', $target.data('action'));
+
+			OC.hideMenus();
+		},
+
+		/**
+		 * Renders the menu with the currently set items
+		 */
+		render: function() {
+			this.$el.html(this.template({
+				items: this._scopes
+			}));
+		},
+
+		/**
+		 * Displays the menu
+		 */
+		show: function(context) {
+			this._context = context;
+
+			this.render();
+			this.$el.removeClass('hidden');
+
+			OC.showMenu(null, this.$el);
+		}
+	});
+
+	OC.Settings = OC.Settings || {};
+	OC.Settings.FederationScopeMenu = FederationScopeMenu;
+
+})();
+
diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js
new file mode 100644
index 00000000000..cf5158fa785
--- /dev/null
+++ b/settings/js/federationsettingsview.js
@@ -0,0 +1,116 @@
+/* global OC */
+
+/**
+ * Copyright (c) 2016, Christoph Wurst <christoph@owncloud.com>
+ *
+ * This file is licensed under the Affero General Public License version 3 or later.
+ * See the COPYING-README file.
+ */
+
+(function() {
+	'use strict';
+
+	var FederationSettingsView = OC.Backbone.View.extend({
+		_inputFields: undefined,
+
+		/** @var Backbone.Model */
+		_config: undefined,
+
+		initialize: function(options) {
+			options = options || {};
+
+			if (options.config) {
+				this._config = options.config;
+			} else {
+				this._config = new OC.Backbone.Model()
+			}
+
+			this._inputFields = [
+				'displayname',
+				'phone',
+				'email',
+				'website',
+				'address'
+			];
+
+			this._registerEvents();
+		},
+
+		render: function() {
+			var self = this;
+			_.each(this._inputFields, function(field) {
+				var $heading = self.$('#' + field + 'form > h2');
+				var $icon = self.$('#' + field + 'form > h2 > span');
+				var scopeMenu = new OC.Settings.FederationScopeMenu();
+
+				self.listenTo(scopeMenu, 'select:scope', function(scope) {
+					self._onScopeChanged(field, scope);
+				});
+				$heading.append(scopeMenu.$el);
+				$icon.on('click', _.bind(scopeMenu.show, scopeMenu));
+
+				// Fix absolute position according to the heading text length
+				// TODO: fix position without magic numbers
+				var pos = ($heading.width() - $heading.find('label').width()) - 68;
+				scopeMenu.$el.css('right', pos);
+			});
+		},
+
+		_registerEvents: function() {
+			var self = this;
+			_.each(this._inputFields, function(field) {
+				self.$('#' + field).keyUpDelayedOrEnter(_.bind(self._onInputChanged, self));
+			});
+		},
+
+		_onInputChanged: function(e) {
+			OC.msg.startSaving('#personal-settings-container .msg');
+			var $target = $(e.target);
+			var value = $target.val();
+			var field = $target.attr('id');
+			console.log(field + ' changed to ' + value);
+			this._config.set(field, value);
+			console.log(this._config.toJSON());
+			// TODO: this._config.save();
+			// TODO: OC.msg.finishedSaving('#personal-settings-container .msg', result);
+			// TODO: call _updateDisplayName after successful update
+		},
+
+		_updateDisplayName: function(displayName) {
+			// update displayName on the top right expand button
+			$('#expandDisplayName').text($('#displayName').val());
+			// update avatar if avatar is available
+			if(!$('#removeavatar').hasClass('hidden')) {
+				updateAvatar();
+			}
+		},
+
+		_onScopeChanged: function(field, scope) {
+			// TODO: save changes to the server
+			console.log(field + ' changed to ' + scope);
+
+			this._setFieldScopeIcon(field, scope);
+		},
+
+		_setFieldScopeIcon: function(field, scope) {
+			var $icon = this.$('#' + field + 'form > h2 > span');
+			$icon.removeClass('icon-password');
+			$icon.removeClass('icon-contacts-dark');
+			$icon.removeClass('icon-link');
+			switch (scope) {
+				case 'private':
+					$icon.addClass('icon-password');
+					break;
+				case 'contacts':
+					$icon.addClass('icon-contacts-dark');
+					break;
+				case 'public':
+					$icon.addClass('icon-link');
+					break;
+			}
+		}
+	});
+
+	OC.Settings = OC.Settings || {};
+	OC.Settings.FederationSettingsView = FederationSettingsView;
+})();
\ No newline at end of file
diff --git a/settings/js/personal.js b/settings/js/personal.js
index c2cb437bd13..7a8d43d1475 100644
--- a/settings/js/personal.js
+++ b/settings/js/personal.js
@@ -1,10 +1,15 @@
+/* global OC */
+
 /**
  * Copyright (c) 2011, Robin Appelman <icewind1991@gmail.com>
  *               2013, Morris Jobke <morris.jobke@gmail.com>
+ *               2016, Christoph Wurst <christoph@owncloud.com>
  * This file is licensed under the Affero General Public License version 3 or later.
  * See the COPYING-README file.
  */
 
+OC.Settings = OC.Settings || {};
+
 /**
  * The callback will be fired as soon as enter is pressed by the
  * user or 1 second after the last data entry
@@ -21,21 +26,21 @@ jQuery.fn.keyUpDelayedOrEnter = function (callback, allowEmptyValue) {
 			return;
 		}
 		if (allowEmptyValue || that.val() !== '') {
-			cb();
+			cb(event);
 		}
 	}, 1000));
 
 	this.keypress(function (event) {
 		if (event.keyCode === 13 && (allowEmptyValue || that.val() !== '')) {
 			event.preventDefault();
-			cb();
+			cb(event);
 		}
 	});
 
-	this.bind('paste', null, function (e) {
-		if(!e.keyCode){
+	this.bind('paste', null, function (event) {
+		if(!event.keyCode){
 			if (allowEmptyValue || that.val() !== '') {
-				cb();
+				cb(event);
 			}
 		}
 	});
@@ -265,8 +270,10 @@ $(document).ready(function () {
 		}
 	});
 
-	$('#displayName').keyUpDelayedOrEnter(changeDisplayName);
-	$('#email').keyUpDelayedOrEnter(changeEmailAddress, true);
+	var federationSettingsView = new OC.Settings.FederationSettingsView({
+		el: '#personal-settings-container'
+	});
+	federationSettingsView.render();
 
 	$("#languageinput").change(function () {
 		// Serialize the data
@@ -452,3 +459,5 @@ OC.Encryption.msg = {
 		}
 	}
 };
+
+OC.Settings.updateAvatar = updateAvatar;