flicker-free permission change in share dialog

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

core/js/sharedialogshareelistview.js

@@ -35,6 +35,26 @@
 						'{{/unless}}' +
 						'{{/if}}' +
 						'<a href="#"><span class="icon icon-more"></span></a>' +
+						'{{{popoverMenu}}}' +
+					'</span>' +
+				'</li>' +
+			'{{/each}}' +
+			'{{#each linkReshares}}' +
+				'<li data-share-id="{{shareId}}" data-share-type="{{shareType}}">' +
+					'{{#if avatarEnabled}}' +
+					'<div class="avatar" data-username="{{shareInitiator}}"></div>' +
+					'{{/if}}' +
+					'<span class="has-tooltip username" title="{{shareInitiator}}">' + t('core', '{{shareInitiatorDisplayName}} shared via link') + '</span>' +
+
+					'<span class="sharingOptionsGroup">' +
+						'<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
+					'</span>' +
+				'</li>' +
+			'{{/each}}' +
+			'</ul>'
+		;
+
+	var TEMPLATE_POPOVER_MENU =
 		'<div class="popovermenu bubble hidden menu">' +
 			'<ul>' +
 				'{{#if isResharingAllowed}} {{#if sharePermissionPossible}} {{#unless isMailShare}}' +
@@ -75,24 +95,7 @@
 					'<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span>{{unshareLabel}}</span></a>' +
 				'</li>' +
 			'</ul>' +
-						'</div>' +
+		'</div>';
-					'</span>' +
-				'</li>' +
-			'{{/each}}' +
-			'{{#each linkReshares}}' +
-				'<li data-share-id="{{shareId}}" data-share-type="{{shareType}}">' +
-					'{{#if avatarEnabled}}' +
-					'<div class="avatar" data-username="{{shareInitiator}}"></div>' +
-					'{{/if}}' +
-					'<span class="has-tooltip username" title="{{shareInitiator}}">' + t('core', '{{shareInitiatorDisplayName}} shared via link') + '</span>' +
-
-					'<span class="sharingOptionsGroup">' +
-						'<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
-					'</span>' +
-				'</li>' +
-			'{{/each}}' +
-			'</ul>'
-		;
 
 	/**
 	 * @class OCA.Share.ShareDialogShareeListView
@@ -114,8 +117,14 @@
 		/** @type {Function} **/
 		_template: undefined,
 
+		/** @type {Function} **/
+		_popoverMenuTemplate: undefined,
+
 		_menuOpen: false,
 
+		/** @type {boolean|number} **/
+		_renderPermissionChange: false,
+
 		events: {
 			'click .unshare': 'onUnshare',
 			'click .icon-more': 'onToggleMenu',
@@ -182,8 +191,8 @@
 			});
 		},
 
-		getShareeList: function() {
+		getShareProperties: function() {
-			var universal = {
+			return {
 				avatarEnabled: this.configModel.areAvatarsEnabled(),
 				unshareLabel: t('core', 'Unshare'),
 				canShareLabel: t('core', 'can reshare'),
@@ -205,6 +214,15 @@
 				deletePermission: OC.PERMISSION_DELETE,
 				isFolder: this.model.isFolder()
 			};
+		},
+
+		/**
+		 * get an array of sharees' share properties
+		 *
+		 * @returns {Array}
+		 */
+		getShareeList: function() {
+			var universal = this.getShareProperties();
 
 			if(!this.model.hasUserShares()) {
 				return [];
@@ -256,6 +274,7 @@
 		},
 
 		render: function() {
+			if(!this._renderPermissionChange) {
 				this.$el.html(this.template({
 					cid: this.cid,
 					sharees: this.getShareeList(),
@@ -269,8 +288,7 @@
 							$this.css({width: 32, height: 32});
 							$this.imageplaceholder($this.data('seed'));
 						} else {
-						//                         user,   size,  ie8fix, hidedefault,  callback, displayname
+							$this.avatar($this.data('username'), 32);
-						$this.avatar($this.data('username'), 32, undefined, undefined, undefined, $this.data('displayname'));
 						}
 					});
 				}
@@ -278,6 +296,14 @@
 				this.$('.has-tooltip').tooltip({
 					placement: 'bottom'
 				});
+			} else {
+				var permissionChangeShareId = parseInt(this._renderPermissionChange, 10);
+				var shareWithIndex = this.model.findShareWithIndex(permissionChangeShareId);
+				var sharee = this.getShareeObject(shareWithIndex);
+				$.extend(sharee, this.getShareProperties());
+				var $li = this.$('li[data-share-id=' + permissionChangeShareId + ']');
+				$li.find('.popovermenu').replaceWith(this.popoverMenuTemplate(sharee));
+			}
 
 			var _this = this;
 			this.$('.popovermenu').on('afterHide', function() {
@@ -292,6 +318,8 @@
 				}
 			}
 
+			this._renderPermissionChange = false;
+
 			this.delegateEvents();
 
 			return this;
@@ -305,9 +333,28 @@
 			if (!this._template) {
 				this._template = Handlebars.compile(TEMPLATE);
 			}
+			var sharees = data['sharees'];
+			if(_.isArray(sharees)) {
+				for (var i = 0; i < sharees.length; i++) {
+					data['sharees'][i]['popoverMenu'] = this.popoverMenuTemplate(sharees[i]);
+				}
+			}
 			return this._template(data);
 		},
 
+		/**
+		 * renders the popover template and returns the resulting HTML
+		 *
+		 * @param {Object} data
+		 * @returns {string}
+		 */
+		popoverMenuTemplate: function(data) {
+			if(!this._popoverMenuTemplate) {
+				this._popoverMenuTemplate = Handlebars.compile(TEMPLATE_POPOVER_MENU);
+			}
+			return this._popoverMenuTemplate(data);
+		},
+
 		onUnshare: function(event) {
 			event.preventDefault();
 			event.stopPropagation();
@@ -386,6 +433,8 @@
 			});
 
 			this.model.updateShare(shareId, {permissions: permissions});
+
+			this._renderPermissionChange = shareId;
 		},
 	});
 

core/js/shareitemmodel.js

@@ -391,6 +391,26 @@
 			return share.share_with_displayname;
 		},
 
+		/**
+		 * returns the array index of a sharee for a provided shareId
+		 *
+		 * @param shareId
+		 * @returns {number}
+		 */
+		findShareWithIndex: function(shareId) {
+			var shares = this.get('shares');
+			if(!_.isArray(shares)) {
+				throw "Unknown Share";
+			}
+			for(var i = 0; i < shares.length; i++) {
+				var shareWith = shares[i];
+				if(shareWith['id'] == shareId) {
+					return i;
+				}
+			}
+			throw "Unknown Sharee";
+		},
+
 		getShareType: function(shareIndex) {
 			/** @type OC.Share.Types.ShareInfo **/
 			var share = this.get('shares')[shareIndex];