Add toastify js as a OC.Notification replacement

Signed-off-by: Julius Härtl <jus@bitgrid.net>

1 files changed, 42 insertions, 113 deletions

diff --git a/core/src/OC/notification.js b/core/src/OC/notification.js
index 73220c71bdd..45af1584123 100644
--- a/core/src/OC/notification.js
+++ b/core/src/OC/notification.js
@@ -21,24 +21,22 @@
 
 import _ from 'underscore'
 import $ from 'jquery'
+import Toastify from 'toastify-js'
 
 /**
  * @todo Write documentation
+ * @deprecated 17.0.0 use OCP.Toast
  * @namespace OC.Notification
  */
 export default {
-	queuedNotifications: [],
-	getDefaultNotificationFunction: null,
 
-	/**
-	 * @type Array<int>
-	 * @description array of notification timers
-	 */
-	notificationTimers: [],
+	updatableNotification: null,
+
+	getDefaultNotificationFunction: null,
 
 	/**
 	 * @param callback
-	 * @todo Write documentation
+	 * @deprecated 17.0.0 use OCP.Toast
 	 */
 	setDefault: function (callback) {
 		this.getDefaultNotificationFunction = callback;
@@ -52,10 +50,11 @@ export default {
 	 *
 	 * @param {jQuery} [$row] notification row
 	 * @param {Function} [callback] callback
+	 * @deprecated 17.0.0 use OCP.Toast
 	 */
 	hide: function ($row, callback) {
 		var self = this;
-		var $notification = $('#notification');
+		var $notification = $('#content');
 
 		if (_.isFunction($row)) {
 			// first arg is the callback
@@ -64,46 +63,23 @@ export default {
 		}
 
 		if (!$row) {
-			console.warn('Missing argument $row in OC.Notification.hide() call, caller needs to be adjusted to only dismiss its own notification');
-			// assume that the row to be hidden is the first one
-			$row = $notification.find('.row:first');
-		}
-
-		if ($row && $notification.find('.row').length > 1) {
-			// remove the row directly
-			$row.remove();
-			if (callback) {
-				callback.call();
-			}
+			console.error('Missing argument $row in OC.Notification.hide() call, caller needs to be adjusted to only dismiss its own notification');
 			return;
 		}
 
-		_.defer(function () {
-			// fade out is supposed to only fade when there is a single row
-			// however, some code might call hide() and show() directly after,
-			// which results in more than one element
-			// in this case, simply delete that one element that was supposed to
-			// fade out
-			//
-			// FIXME: remove once all callers are adjusted to only hide their own notifications
-			if ($notification.find('.row').length > 1) {
-				$row.remove();
-				return;
+		// remove the row directly
+		$row.each(function () {
+			$(this)[0].toastify.hideToast()
+			if (this === this.updatableNotification) {
+				this.updatableNotification = null
 			}
-
-			// else, fade out whatever was present
-			$notification.fadeOut('400', function () {
-				if (self.isHidden()) {
-					if (self.getDefaultNotificationFunction) {
-						self.getDefaultNotificationFunction.call();
-					}
-				}
-				if (callback) {
-					callback.call();
-				}
-				$notification.empty();
-			});
-		});
+		})
+		if (callback) {
+			callback.call()
+		}
+		if (this.getDefaultNotificationFunction) {
+			this.getDefaultNotificationFunction()
+		}
 	},
 
 	/**
@@ -116,45 +92,14 @@ export default {
 	 * @param {string} [options.type] notification type
 	 * @param {int} [options.timeout=0] timeout value, defaults to 0 (permanent)
 	 * @return {jQuery} jQuery element for notification row
+	 * @deprecated 17.0.0 use OCP.Toast
 	 */
 	showHtml: function (html, options) {
-		options = options || {};
-		_.defaults(options, {
-			timeout: 0
-		});
-
-		var self = this;
-		var $notification = $('#notification');
-		if (this.isHidden()) {
-			$notification.fadeIn().css('display', 'inline-block');
-		}
-		var $row = $('<div class="row"></div>');
-		if (options.type) {
-			$row.addClass('type-' + options.type);
-		}
-		if (options.type === 'error') {
-			// add a close button
-			var $closeButton = $('<a class="action close icon-close" href="#"></a>');
-			$closeButton.attr('alt', t('core', 'Dismiss'));
-			$row.append($closeButton);
-			$closeButton.one('click', function () {
-				self.hide($row);
-				return false;
-			});
-			$row.addClass('closeable');
-		}
-
-		$row.prepend(html);
-		$notification.append($row);
-
-		if (options.timeout > 0) {
-			// register timeout to vanish notification
-			this.notificationTimers.push(setTimeout(function () {
-				self.hide($row);
-			}, (options.timeout * 1000)));
-		}
-
-		return $row;
+		options = options || {}
+		options.showHtml = true
+		options.timeout = (options.timeout === 0) ? -1 : options.timeout
+		const toast = window.OCP.Toast.message(html, options)
+		return $(toast.toastElement)
 	},
 
 	/**
@@ -165,9 +110,11 @@ export default {
 	 * @param {string} [options.type] notification type
 	 * @param {int} [options.timeout=0] timeout value, defaults to 0 (permanent)
 	 * @return {jQuery} jQuery element for notification row
+	 * @deprecated 17.0.0 use OCP.Toast
 	 */
 	show: function (text, options) {
-		return this.showHtml($('<div/>').text(text).html(), options);
+		const toast = window.OCP.Toast.message(text, options);
+		return $(toast.toastElement);
 	},
 
 	/**
@@ -175,23 +122,14 @@ export default {
 	 *
 	 * @param {string} text Message to display
 	 * @return {jQuery} JQuery element for notificaiton row
+	 * @deprecated 17.0.0 use OCP.Toast
 	 */
 	showUpdate: function (text) {
-		var $notification = $('#notification');
-		// sanitise
-		var $html = $('<div/>').text(text).html();
-
-		// new notification
-		if (text && $notification.find('.row').length == 0) {
-			return this.showHtml($html);
+		if (this.updatableNotification) {
+			this.updatableNotification.hideToast();
 		}
-
-		var $row = $('<div class="row"></div>').prepend($html);
-
-		// just update html in notification
-		$notification.html($row);
-
-		return $row;
+		this.updatableNotification = OCP.Toast.message(text, {timeout: -1})
+		return $(this.updatableNotification.toastElement);
 	},
 
 	/**
@@ -203,30 +141,21 @@ export default {
 	 * @param {int} [options.timeout=7] timeout in seconds, if this is 0 it will show the message permanently
 	 * @param {boolean} [options.isHTML=false] an indicator for HTML notifications (true) or text (false)
 	 * @param {string} [options.type] notification type
+	 * @deprecated 17.0.0 use OCP.Toast
 	 */
 	showTemporary: function (text, options) {
-		var defaults = {
-			isHTML: false,
-			timeout: 7
-		};
-		options = options || {};
-		// merge defaults with passed in options
-		_.defaults(options, defaults);
-
-		var $row;
-		if (options.isHTML) {
-			$row = this.showHtml(text, options);
-		} else {
-			$row = this.show(text, options);
-		}
-		return $row;
+		options = options || {}
+		options.timeout = options.timeout || 7;
+		const toast = window.OCP.Toast.message(text, options);
+		return $(toast.toastElement);
 	},
 
 	/**
 	 * Returns whether a notification is hidden.
 	 * @return {boolean}
+	 * @deprecated 17.0.0 use OCP.Toast
 	 */
 	isHidden: function () {
-		return !$("#notification").find('.row').length;
+		return !$('#content').find('.toastify').length;
 	}
 }