From 2514176e41c19e27de7abaffc5f86995b7d683bb Mon Sep 17 00:00:00 2001 From: Arthur Schiwon Date: Tue, 29 Nov 2016 12:51:37 +0100 Subject: flicker-free permission change in share dialog Signed-off-by: Arthur Schiwon --- core/js/sharedialogshareelistview.js | 175 ++++++++++++++++++++++------------- core/js/shareitemmodel.js | 20 ++++ 2 files changed, 132 insertions(+), 63 deletions(-) (limited to 'core/js') diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js index a0a7bbfa2dc..56050d2d0c1 100644 --- a/core/js/sharedialogshareelistview.js +++ b/core/js/sharedialogshareelistview.js @@ -35,47 +35,7 @@ '{{/unless}}' + '{{/if}}' + '' + - '' + + '{{{popoverMenu}}}' + '' + '' + '{{/each}}' + @@ -94,6 +54,49 @@ '' ; + var TEMPLATE_POPOVER_MENU = + ''; + /** * @class OCA.Share.ShareDialogShareeListView * @member {OC.Share.ShareItemModel} model @@ -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() { - var universal = { + getShareProperties: function() { + 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,29 +274,37 @@ }, render: function() { - this.$el.html(this.template({ - cid: this.cid, - sharees: this.getShareeList(), - linkReshares: this.getLinkReshares() - })); - - if(this.configModel.areAvatarsEnabled()) { - this.$('.avatar').each(function() { - var $this = $(this); - if ($this.hasClass('imageplaceholderseed')) { - $this.css({width: 32, height: 32}); - $this.imageplaceholder($this.data('seed')); - } else { - // user, size, ie8fix, hidedefault, callback, displayname - $this.avatar($this.data('username'), 32, undefined, undefined, undefined, $this.data('displayname')); - } + if(!this._renderPermissionChange) { + this.$el.html(this.template({ + cid: this.cid, + sharees: this.getShareeList(), + linkReshares: this.getLinkReshares() + })); + + if (this.configModel.areAvatarsEnabled()) { + this.$('.avatar').each(function () { + var $this = $(this); + if ($this.hasClass('imageplaceholderseed')) { + $this.css({width: 32, height: 32}); + $this.imageplaceholder($this.data('seed')); + } else { + $this.avatar($this.data('username'), 32); + } + }); + } + + 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)); } - this.$('.has-tooltip').tooltip({ - placement: 'bottom' - }); - var _this = this; this.$('.popovermenu').on('afterHide', function() { _this._menuOpen = false; @@ -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; }, }); diff --git a/core/js/shareitemmodel.js b/core/js/shareitemmodel.js index a784f59f67f..4a2f8f8bc8a 100644 --- a/core/js/shareitemmodel.js +++ b/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]; -- cgit v1.2.3 From 39c2d9e6636b525a3166ce2826d7d282de169c93 Mon Sep 17 00:00:00 2001 From: Arthur Schiwon Date: Tue, 29 Nov 2016 15:44:43 +0100 Subject: also handle can-edit change Signed-off-by: Arthur Schiwon --- core/js/sharedialogshareelistview.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'core/js') diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js index 56050d2d0c1..5bece6afc98 100644 --- a/core/js/sharedialogshareelistview.js +++ b/core/js/sharedialogshareelistview.js @@ -303,6 +303,11 @@ $.extend(sharee, this.getShareProperties()); var $li = this.$('li[data-share-id=' + permissionChangeShareId + ']'); $li.find('.popovermenu').replaceWith(this.popoverMenuTemplate(sharee)); + + var $edit = $li.parent().find('#canEdit-' + this.cid + '-' + sharee.shareWith); + if($edit.length == 1) { + $edit.prop('checked', sharee.hasEditPermission); + } } var _this = this; -- cgit v1.2.3 From 056e59af7e98a8526739a441e052b5af6d7f8320 Mon Sep 17 00:00:00 2001 From: Arthur Schiwon Date: Fri, 2 Dec 2016 12:27:15 +0100 Subject: fix some coding style and stricter comparisons, makes scrutinizer happier Signed-off-by: Arthur Schiwon --- core/js/sharedialogshareelistview.js | 6 +++--- core/js/shareitemmodel.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'core/js') diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js index 5bece6afc98..5f24b236464 100644 --- a/core/js/sharedialogshareelistview.js +++ b/core/js/sharedialogshareelistview.js @@ -305,7 +305,7 @@ $li.find('.popovermenu').replaceWith(this.popoverMenuTemplate(sharee)); var $edit = $li.parent().find('#canEdit-' + this.cid + '-' + sharee.shareWith); - if($edit.length == 1) { + if($edit.length === 1) { $edit.prop('checked', sharee.hasEditPermission); } } @@ -338,10 +338,10 @@ if (!this._template) { this._template = Handlebars.compile(TEMPLATE); } - var sharees = data['sharees']; + var sharees = data.sharees; if(_.isArray(sharees)) { for (var i = 0; i < sharees.length; i++) { - data['sharees'][i]['popoverMenu'] = this.popoverMenuTemplate(sharees[i]); + data.sharees[i].popoverMenu = this.popoverMenuTemplate(sharees[i]); } } return this._template(data); diff --git a/core/js/shareitemmodel.js b/core/js/shareitemmodel.js index 4a2f8f8bc8a..4a82630b967 100644 --- a/core/js/shareitemmodel.js +++ b/core/js/shareitemmodel.js @@ -404,7 +404,7 @@ } for(var i = 0; i < shares.length; i++) { var shareWith = shares[i]; - if(shareWith['id'] == shareId) { + if(shareWith.id === shareId) { return i; } } -- cgit v1.2.3 From 3ac8d422ded4f2bc1064448041cadb4727e2c1ef Mon Sep 17 00:00:00 2001 From: Arthur Schiwon Date: Fri, 2 Dec 2016 13:14:25 +0100 Subject: disable checkboxes during save op to avoid race conditions Signed-off-by: Arthur Schiwon --- core/js/sharedialogshareelistview.js | 13 ++++++++++++- core/js/shareitemmodel.js | 6 +++++- 2 files changed, 17 insertions(+), 2 deletions(-) (limited to 'core/js') diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js index 5f24b236464..74ba6b9746c 100644 --- a/core/js/sharedialogshareelistview.js +++ b/core/js/sharedialogshareelistview.js @@ -437,7 +437,18 @@ permissions |= $(checkbox).data('permissions'); }); - this.model.updateShare(shareId, {permissions: permissions}); + + /** disable checkboxes during save operation to avoid race conditions **/ + $li.find('input[type=checkbox]').prop('disabled', true); + var enableCb = function() { + $li.find('input[type=checkbox]').prop('disabled', false); + }; + var errorCb = function(elem, msg) { + OC.dialogs.alert(msg, t('core', 'Error while sharing')); + enableCb(); + }; + + this.model.updateShare(shareId, {permissions: permissions}, {error: errorCb, success: enableCb}); this._renderPermissionChange = shareId; }, diff --git a/core/js/shareitemmodel.js b/core/js/shareitemmodel.js index 4a82630b967..b01f0f790ac 100644 --- a/core/js/shareitemmodel.js +++ b/core/js/shareitemmodel.js @@ -573,7 +573,7 @@ return superShare; }, - fetch: function() { + fetch: function(options) { var model = this; this.trigger('request', this); @@ -597,6 +597,10 @@ shares: sharesMap, reshare: reshare })); + + if(!_.isUndefined(options) && _.isFunction(options.success)) { + options.success(); + } }); return deferred; -- cgit v1.2.3 From f29f4d9c3ac0292491de972791649108a17d816d Mon Sep 17 00:00:00 2001 From: Arthur Schiwon Date: Tue, 6 Dec 2016 12:41:15 +0100 Subject: fix rendering for mail shares Signed-off-by: Arthur Schiwon --- core/js/sharedialogshareelistview.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'core/js') diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js index 74ba6b9746c..0fe0747dd59 100644 --- a/core/js/sharedialogshareelistview.js +++ b/core/js/sharedialogshareelistview.js @@ -288,7 +288,8 @@ $this.css({width: 32, height: 32}); $this.imageplaceholder($this.data('seed')); } else { - $this.avatar($this.data('username'), 32); + // user, size, ie8fix, hidedefault, callback, displayname + $this.avatar($this.data('username'), 32, undefined, undefined, undefined, $this.data('displayname')); } }); } @@ -304,7 +305,9 @@ var $li = this.$('li[data-share-id=' + permissionChangeShareId + ']'); $li.find('.popovermenu').replaceWith(this.popoverMenuTemplate(sharee)); - var $edit = $li.parent().find('#canEdit-' + this.cid + '-' + sharee.shareWith); + var checkBoxId = 'canEdit-' + this.cid + '-' + sharee.shareWith; + checkBoxId = '#' + checkBoxId.replace( /(:|\.|\[|\]|,|=|@)/g, "\\$1"); + var $edit = $li.parent().find(checkBoxId); if($edit.length === 1) { $edit.prop('checked', sharee.hasEditPermission); } -- cgit v1.2.3