Add toastify js as a OC.Notification replacement

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

3 files changed, 135 insertions, 115 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;
 	}
 }
diff --git a/core/src/OCP/index.js b/core/src/OCP/index.js
index 67945318362..a4d8f46b88d 100644
--- a/core/src/OCP/index.js
+++ b/core/src/OCP/index.js
@@ -6,14 +6,16 @@ import * as Comments from './comments'
 import * as InitialState from './initialstate'
 import Loader from './loader'
 import Collaboration from './collaboration'
+import Toast from './toast'
 import * as WhatsNew from './whatsnew'
 
 /** @namespace OCP */
 export default {
 	AppConfig,
+	Collaboration,
 	Comments,
 	InitialState,
 	Loader,
-	WhatsNew,
-	Collaboration
+	Toast,
+	WhatsNew
 };
diff --git a/core/src/OCP/toast.js b/core/src/OCP/toast.js
new file mode 100644
index 00000000000..a9c96f14a70
--- /dev/null
+++ b/core/src/OCP/toast.js
@@ -0,0 +1,89 @@
+/*
+ * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Toastify from 'toastify-js'
+
+const TOAST_TYPE_CLASES = {
+	error: 'toast-error',
+	info: 'toast-info',
+	warning: 'toast-warning',
+	success: 'toast-success',
+	permanent: 'permanent'
+}
+
+const Toast = {
+
+	success(text, options = {}) {
+		options.type = 'success';
+		return this.message(text, options)
+	},
+
+	warning(text, options = {}) {
+		options.type = 'warning';
+		return this.message(text, options)
+	},
+
+	error(text, options = {}) {
+		options.type = 'error';
+		return this.message(text, options)
+	},
+
+	info(text, options = {}) {
+		options.type = 'info';
+		return this.message(text, options)
+	},
+
+	message(text, options) {
+		options = options || {};
+		_.defaults(options, {
+			timeout: 7,
+			showHtml: false,
+			type: undefined,
+			close: true,
+			callback: () => {}
+		});
+		if (!options.showHtml) {
+			text = $('<div/>').text(text).html()
+		}
+		let classes = ''
+		if (options.type) {
+			classes = TOAST_TYPE_CLASES[options.type]
+		}
+
+		const toast = Toastify({
+			text: text,
+			duration: options.timeout ? options.timeout*1000 : null,
+			callback: options.callback,
+			close: options.close,
+			gravity: 'top',
+			selector: 'content',
+			positionLeft: false,
+			backgroundColor: '',
+			className: 'toast ' + classes
+		})
+		toast.showToast()
+		// add toastify object to the element for reference in legacy OC.Notification
+		toast.toastElement.toastify = toast;
+		return toast
+	}
+}
+export default Toast