revamp GlobalUI.notifyUser

frontend/src/Metamaps/GlobalUI/index.js

@@ -12,9 +12,11 @@ import NotificationIcon from './NotificationIcon'
 
 const GlobalUI = {
   notifyTimeout: null,
+  notifyQueue: [],
+  notifying: false,
   lightbox: null,
   init: function(serverData) {
-    var self = GlobalUI
+    const self = GlobalUI
 
     self.Search.init(serverData)
     self.CreateMap.init(serverData)
@@ -45,7 +47,7 @@ const GlobalUI = {
     }, 200, 'easeInCubic', function() { $(this).hide() })
   },
   openLightbox: function(which) {
-    var self = GlobalUI
+    const self = GlobalUI
 
     $('.lightboxContent').hide()
     $('#' + which).show()
@@ -72,7 +74,7 @@ const GlobalUI = {
   },
 
   closeLightbox: function(event) {
-    var self = GlobalUI
+    const self = GlobalUI
 
     if (event) event.preventDefault()
 
@@ -96,23 +98,45 @@ const GlobalUI = {
     }
     self.lightbox = null
   },
-  notifyUser: function(message, leaveOpen) {
+  notifyUser: function(message, opts = {}) {
-    var self = GlobalUI
+    const self = GlobalUI
+
+    if (self.notifying) {
+      self.notifyQueue.push({ message, opts })
+      return
+    } else {
+      self._notifyUser(message, opts)
+    }
+  },
+  // note: use the wrapper function notifyUser instead of this one
+  _notifyUser: function(message, opts = {}) {
+    const self = GlobalUI
+
+    const { leaveOpen: false, timeOut: 8000 } = opts
 
     $('#toast').html(message)
     self.showDiv('#toast')
     clearTimeout(self.notifyTimeOut)
+
     if (!leaveOpen) {
       self.notifyTimeOut = setTimeout(function() {
-        self.hideDiv('#toast')
+        GlobalUI.clearNotify()
-      }, 8000)
+      }, timeOut)
     }
+
+    self.notifying = true
   },
   clearNotify: function() {
-    var self = GlobalUI
+    const self = GlobalUI
 
-    clearTimeout(self.notifyTimeOut)
+    // if there are messages remaining, display them
-    self.hideDiv('#toast')
+    if (self.notifyQueue.length > 0) {
+      const { message, opts } = self.notifyQueue.shift()
+      self._notifyUser(message, opts)
+    } else {
+      self.hideDiv('#toast')
+      self.notifying = false
+    }
   },
   shareInvite: function(inviteLink) {
     clipboard.copy({

frontend/src/Metamaps/Map/index.js

@@ -271,7 +271,7 @@ const Map = {
         DOWNLOAD
       </a>`
     GlobalUI.notifyUser(downloadMessage)
-    $('#map-screenshot-download-link').click()
+    //$('#map-screenshot-download-link').click()
   },
   uploadMapScreenshot: () => {
     const canvas = Map.getMapCanvasForScreenshots()

frontend/src/Metamaps/Realtime/receivable.js

@@ -149,7 +149,7 @@ export const invitedToCall = self => inviter => {
   notifyText += username + ' is inviting you to a conversation. Join live?'
   notifyText += ' <button type="button" class="toast-button button yes">Yes</button>'
   notifyText += ' <button type="button" class="toast-button button btn-no no">No</button>'
-  GlobalUI.notifyUser(notifyText, true)
+  GlobalUI.notifyUser(notifyText, { leaveOpen: true })
   $('#toast button.yes').click(e => self.acceptCall(inviter))
   $('#toast button.no').click(e => self.denyCall(inviter))
 }
@@ -162,7 +162,7 @@ export const invitedToJoin = self => inviter => {
   var notifyText = username + ' is inviting you to the conversation. Join?'
   notifyText += ' <button type="button" class="toast-button button yes">Yes</button>'
   notifyText += ' <button type="button" class="toast-button button btn-no no">No</button>'
-  GlobalUI.notifyUser(notifyText, true)
+  GlobalUI.notifyUser(notifyText, { leaveOpen: true })
   $('#toast button.yes').click(e => self.joinCall())
   $('#toast button.no').click(e => self.denyInvite(inviter))
 }
@@ -201,7 +201,7 @@ export const callInProgress = self => () => {
   var notifyText = "There's a conversation happening, want to join?"
   notifyText += ' <button type="button" class="toast-button button yes">Yes</button>'
   notifyText += ' <button type="button" class="toast-button button btn-no no">No</button>'
-  GlobalUI.notifyUser(notifyText, true)
+  GlobalUI.notifyUser(notifyText, { leaveOpen: true })
   $('#toast button.yes').click(e => self.joinCall())
   $('#toast button.no').click(e => GlobalUI.clearNotify())
   ChatView.conversationInProgress()
@@ -212,7 +212,7 @@ export const callStarted = self => () => {
   var notifyText = "There's a conversation starting, want to join?"
   notifyText += ' <button type="button" class="toast-button button">Yes</button>'
   notifyText += ' <button type="button" class="toast-button button btn-no">No</button>'
-  GlobalUI.notifyUser(notifyText, true)
+  GlobalUI.notifyUser(notifyText, { leaveOpen: true })
   $('#toast button.yes').click(e => self.joinCall())
   $('#toast button.no').click(e => GlobalUI.clearNotify())
   ChatView.conversationInProgress()