add contactsmenu popover

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

4 files changed, 120 insertions, 2 deletions

diff --git a/core/js/core.json b/core/js/core.json
index aadd66a0558..15e406bf2d2 100644
--- a/core/js/core.json
+++ b/core/js/core.json
@@ -20,6 +20,7 @@
 	"libraries": [
 		"jquery-showpassword.js",
 		"jquery.avatar.js",
+		"jquery.contactsmenu.js",
 		"placeholder.js"
 	],
 	"modules": [
diff --git a/core/js/jquery.contactsmenu.js b/core/js/jquery.contactsmenu.js
new file mode 100644
index 00000000000..3c782cc5bfd
--- /dev/null
+++ b/core/js/jquery.contactsmenu.js
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2017 Georg Ehrke <oc.list@georgehrke.com>
+ * This file is licensed under the Affero General Public License version 3 or
+ * later.
+ * See the COPYING-README file.
+ */
+
+(function ($) {
+	var ENTRY = ''
+		+ '<li>'
+		+ '    <a href="{{hyperlink}}">'
+		+ '        {{#if icon}}<img src="{{icon}}">{{/if}}'
+		+ '        <span>{{title}}</span>'
+		+ '    </a>'
+		+ '</li>';
+
+	$.fn.contactsMenu = function(shareWith, shareType, appendTo) {
+		if (typeof(shareWith) !== 'undefined') {
+			shareWith = String(shareWith);
+		} else {
+			if (typeof(this.data('share-with')) !== 'undefined') {
+				shareWith = this.data('share-with');
+			}
+		}
+		if (typeof(shareType) !== 'undefined') {
+			shareType = Number(shareType);
+		} else {
+			if (typeof(this.data('share-type')) !== 'undefined') {
+				shareType = this.data('share-type');
+			}
+		}
+		if (typeof(appendTo) === 'undefined') {
+			appendTo = this;
+		}
+
+		// 0 - user, 4 - email, 6 - remote
+		var allowedTypes = [0, 4, 6];
+		if (allowedTypes.indexOf(shareType) === -1) {
+			return;
+		}
+
+		var $div = this;
+		appendTo.append('<div class="menu popovermenu bubble hidden contactsmenu-popover"><ul><li><a><span class="icon-loading-small"></span></a></li></ul></div>');
+		var $list = appendTo.find('div.contactsmenu-popover');
+		var url = OC.generateUrl('/contactsmenu/findOne');
+
+		$div.click(function() {
+			$list.show();
+
+			if ($list.hasClass('loaded')) {
+				return;
+			}
+
+			$list.addClass('loaded');
+			$.ajax(url, {
+				method: 'POST',
+				data: {
+					shareType: shareType,
+					shareWith: shareWith
+				}
+			}).then(function(data) {
+				$list.find('ul').find('li').addClass('hidden');
+
+				var actions;
+				if (!data.topAction) {
+					actions = [{
+						hyperlink: '#',
+						title: t('core', 'No action available')
+					}];
+				} else {
+					actions = [data.topAction].concat(data.actions);
+				}
+
+				actions.forEach(function(action) {
+					var template = Handlebars.compile(ENTRY);
+					$list.find('ul').append(template(action));
+				});
+
+				if (actions.length === 0) {
+
+				}
+			});
+		});
+
+		$(document).click(function(event) {
+			var clickedList = $.contains($list, event.target);
+			var clickedLi = $.contains($div, event.target);
+
+			$div.each(function() {
+				if ($(this).is(event.target)) {
+					clickedLi = true;
+				}
+			});
+
+			if (clickedList) {
+				return;
+			}
+
+			if (clickedLi) {
+				return;
+			}
+
+			$list.hide();
+
+		});
+	};
+}(jQuery));
diff --git a/core/js/merged-template-prepend.json b/core/js/merged-template-prepend.json
index 12b7ca8faa3..0dd6bed5329 100644
--- a/core/js/merged-template-prepend.json
+++ b/core/js/merged-template-prepend.json
@@ -13,5 +13,6 @@
   "mimetypelist.js",
   "oc-backbone.js",
   "placeholder.js",
-  "jquery.avatar.js"
+  "jquery.avatar.js",
+  "jquery.contactsmenu.js"
 ]
diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js
index 3a481e53dde..982004bf52d 100644
--- a/core/js/sharedialogshareelistview.js
+++ b/core/js/sharedialogshareelistview.js
@@ -26,7 +26,7 @@
 			'{{#each sharees}}' +
 				'<li data-share-id="{{shareId}}" data-share-type="{{shareType}}" data-share-with="{{shareWith}}">' +
 					'<div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" data-displayname="{{shareWithDisplayName}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
-					'<span class="has-tooltip username" title="{{shareWithTitle}}">{{shareWithDisplayName}}</span>' +
+					'<span class="username" title="{{shareWithTitle}}">{{shareWithDisplayName}}</span>' +
 					'<span class="sharingOptionsGroup">' +
 						'{{#if editPermissionPossible}}' +
 						'<span class="shareOption">' +
@@ -361,6 +361,15 @@
 				this.$('.has-tooltip').tooltip({
 					placement: 'bottom'
 				});
+
+				this.$('ul.shareWithList > li').each(function() {
+					var $this = $(this);
+
+					var shareWith = $this.data('share-with');
+					var shareType = $this.data('share-type');
+
+					$this.find('div.avatar, span.username').contactsMenu(shareWith, shareType, $this);
+				})
 			} else {
 				var permissionChangeShareId = parseInt(this._renderPermissionChange, 10);
 				var shareWithIndex = this.model.findShareWithIndex(permissionChangeShareId);