diff --git a/js/background.js b/js/background.js index f37e4aaf6..b7dec6599 100644 --- a/js/background.js +++ b/js/background.js @@ -802,43 +802,54 @@ appView.openConversation(groupId, {}); }; - window.toasts = []; + window.toasts = {}; window.pushToast = (options) => { - // Toast ID can be used to prevent identical toasts appearing at once. - // Eg, no two toasts with ID "messageDeletedAlert" can appear on the screen at once. - // If you want to be able to display mutliple, don't use toast IDs. - - // eslint-disable-next-line no-restricted-syntax - for (const toast of window.toasts){ - if ((!!options.id) && (toast.props.id === options.id)) { - return; - } - } - - // Make new Toast - window.toasts.unshift( - new Whisper.SessionToastView({ - el: window.$('#session-toast-container'), - }) - ); + // Setting toasts with the same ID can be used to prevent identical + // toasts from appearing at once (stacking). + // If toast already exists, it will be reloaded (updated) - window.toasts[0].update({ + const params = { title: options.title, description: options.description ? options.description : '', type: options.type ? options.type : '', id: options.id ? options.id : '', - }); + } - console.log(window.toasts[0].props.id); + // Give all toasts an ID. User may define. + const toastID = options.id + ? options.id + : Math.random().toString(36).substring(3); + + let toastExists = false; + // eslint-disable-next-line no-restricted-syntax + for (const key in window.toasts) { + if ((!!options.id) && (key === options.id)) { + toastExists = true; + window.toasts[key].update(params); + break; + } + } + + if (! toastExists){ + // Make new Toast + window.toasts[toastID] = new Whisper.SessionToastView({ + el: window.$('#session-toast-container'), + }); + window.toasts[toastID].render(); + window.toasts[toastID].update(params); + } + // Remove some toasts if too many exist const maxToasts = 6; const numToasts = window.toasts.length; if (numToasts > maxToasts){ - window.toasts[4].fadeToast(); - window.toasts = window.toasts.slice(0, maxToasts - 1); + const finalToastID = window.toasts.keys[window.toasts.length]; + window.toasts[finalToastID].fadeToast(); } + + return toastID; } window.sendGroupInvitations = (serverInfo, pubkeys) => { diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index afd2e6700..856743f8e 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -1377,6 +1377,7 @@ window.pushToast({ title: i18n('messageDeletionForbidden'), type: 'error', + id: 'messageDeletionForbidden', }); return; diff --git a/js/views/session_toast_view.js b/js/views/session_toast_view.js index 3777fa2d2..42d2fae6f 100644 --- a/js/views/session_toast_view.js +++ b/js/views/session_toast_view.js @@ -32,22 +32,38 @@ this.props.description = options.description ? options.description : ''; this.props.type = options.type ? options.type : ''; this.props.id = options.id ? options.id : ''; - this.render(); - setTimeout(this.fadeToast.bind(this), 4000); + this.toastView.update(this.props); + + this.showToast(); + clearTimeout(this.timer); + this.timer = setTimeout(this.fadeToast.bind(this), 4000); + + }, + + showToast() { + this.toastView.$el.show(); }, fadeToast() { this.toastView.$el.fadeOut(500, () => { - this.toastView.remove(); + this.removeToast(); }); }, closeToast() { this.toastView.$el.fadeOut(125, () => { - this.toastView.remove(); + this.removeToast(); }); }, + removeToast() { + this.toastView.remove(); + + if (this.props.id){ + delete window.toasts[this.props.id]; + } + }, + }); })(); \ No newline at end of file