From 0d9f24a0efef20b9041e40817b10822a4700532d Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Thu, 11 Sep 2014 15:56:00 +0200 Subject: Add timeout to user and group deletion notification Added timeout in DeleteHandler to auto-delete after a delay. Fixed issue where OC.Notification.hide() was called twice in a row when deleting multiple entries, causing the second notification to disappear. Fixed issue where "undo" click event handler was registered multiple times when calling setNotifications() twice. Added JS unit tests for the DeleteHandler class. Refix undo users, groups feature Timeout is now cleared in cancel(). Fixed click handler name for "undo" to be able to work with multiple DeleteHandler instances (in our case one for users and one for groups) so that there is no conflict. --- settings/js/users/deleteHandler.js | 47 ++++++++++++++++++++++++++++++++++---- 1 file changed, 43 insertions(+), 4 deletions(-) (limited to 'settings/js/users/deleteHandler.js') diff --git a/settings/js/users/deleteHandler.js b/settings/js/users/deleteHandler.js index d4736d88701..c89a844044e 100644 --- a/settings/js/users/deleteHandler.js +++ b/settings/js/users/deleteHandler.js @@ -34,6 +34,16 @@ function DeleteHandler(endpoint, paramID, markCallback, removeCallback) { this.notificationPlaceholder = '%oid'; } +/** + * Number of milliseconds after which the operation is performed. + */ +DeleteHandler.TIMEOUT_MS = 7000; + +/** + * Timer after which the action will be performed anyway. + */ +DeleteHandler.prototype._timeout = null; + /** * The function to be called after successfully marking the object for deletion * @callback markCallback @@ -72,7 +82,9 @@ DeleteHandler.prototype.setNotification = function(notifier, dataID, message, un var dh = this; - $('#notification').on('click', '.undo', function () { + $('#notification') + .off('click.deleteHandler_' + dataID) + .on('click.deleteHandler_' + dataID, '.undo', function () { if ($('#notification').data(dh.notificationDataID)) { var oid = dh.oidToDelete; dh.cancel(); @@ -116,18 +128,36 @@ DeleteHandler.prototype.hideNotification = function() { */ DeleteHandler.prototype.mark = function(oid) { if(this.oidToDelete !== false) { - this.deleteEntry(); + // passing true to avoid hiding the notification + // twice and causing the second notification + // to disappear immediately + this.deleteEntry(true); } this.oidToDelete = oid; this.canceled = false; this.markCallback(oid); this.showNotification(); + if (this._timeout) { + clearTimeout(this._timeout); + this._timeout = null; + } + if (DeleteHandler.TIMEOUT_MS > 0) { + this._timeout = window.setTimeout( + _.bind(this.deleteEntry, this), + DeleteHandler.TIMEOUT_MS + ); + } }; /** * cancels a delete operation */ DeleteHandler.prototype.cancel = function() { + if (this._timeout) { + clearTimeout(this._timeout); + this._timeout = null; + } + this.canceled = true; this.oidToDelete = false; }; @@ -137,22 +167,31 @@ DeleteHandler.prototype.cancel = function() { * initialized by mark(). On error, it will show a message via * OC.dialogs.alert. On success, a callback is fired so that the client can * update the web interface accordingly. + * + * @param {boolean} [keepNotification] true to keep the notification, false to hide + * it, defaults to false */ -DeleteHandler.prototype.deleteEntry = function() { +DeleteHandler.prototype.deleteEntry = function(keepNotification) { if(this.canceled || this.oidToDelete === false) { return false; } var dh = this; - if($('#notification').data(this.notificationDataID) === true) { + if(!keepNotification && $('#notification').data(this.notificationDataID) === true) { dh.hideNotification(); } + if (this._timeout) { + clearTimeout(this._timeout); + this._timeout = null; + } + var payload = {}; payload[dh.ajaxParamID] = dh.oidToDelete; $.ajax({ type: 'POST', url: OC.filePath('settings', 'ajax', dh.ajaxEndpoint), + // FIXME: do not use synchronous ajax calls as they block the browser ! async: false, data: payload, success: function (result) { -- cgit v1.2.3