@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/notifications.js

@@ -0,0 +1,282 @@
+ 
+RED.notifications = (function() {
+  /*
+    If RED.notifications.hide is set to true, all notifications will be hidden.
+    This is to help with UI testing in certain cases and not intended for the
+    end-user.
+
+    // Example usage for a modal dialog with buttons
+    var myNotification = RED.notify("This is the message to display",{
+        modal: true,
+        fixed: true,
+        type: 'warning',
+        buttons: [
+            {
+                text: "cancel",
+                click: function(e) {
+                    myNotification.close();
+                }
+            },
+            {
+                text: "okay",
+                class:"primary",
+                click: function(e) {
+                    myNotification.close();
+                }
+            }
+        ]
+    });
+    */
+
+  var persistentNotifications = {};
+
+  var currentNotifications = [];
+  var c = 0;
+  // Example:
+  // msg: <p>Flow deploy successfully </p>
+  // type: 'success | error | warning'
+  // fixed: undefined
+  // timeout: undefined
+  function notify(msg, type, fixed, timeout) {
+    var options = {};
+    if (type !== null && typeof type === 'object') {
+      options = type;
+      fixed = options.fixed;
+      timeout = options.timeout;
+      type = options.type;
+    }
+
+    if (options.id && persistentNotifications.hasOwnProperty(options.id)) {
+      persistentNotifications[options.id].update(msg, options);
+      return persistentNotifications[options.id];
+    }
+
+    if (options.modal) {
+      $('#full-shade').show();
+    }
+
+    if (currentNotifications.length > 4) {
+      var ll = currentNotifications.length;
+      for (var i = 0; ll > 4 && i < currentNotifications.length; i += 1) {
+        var notifiction = currentNotifications[i];
+        if (!notifiction.fixed) {
+          window.clearTimeout(notifiction.timeoutid);
+          notifiction.close();
+          ll -= 1;
+        }
+      }
+    }
+    var n = document.createElement('div');
+    n.id = 'red-notification-' + c;
+    n.className = 'notification';
+    n.fixed = fixed;
+    if (type) {
+      n.className = 'notification notification-' + type;
+    }
+    if (options.width) {
+      var parentWidth = $('#notifications').width();
+      if (options.width > parentWidth) {
+        var margin = -(options.width - parentWidth) / 2;
+        $(n).css({
+          width: options.width + 'px',
+          marginLeft: margin + 'px'
+        });
+      }
+    }
+    n.style.display = 'none';
+    if (typeof msg === 'string') {
+      if (!/<p>/i.test(msg)) {
+        msg = '<p>' + msg + '</p>';
+      }
+      n.innerHTML = msg;
+    } else {
+      $(n).append(msg);
+    }
+    if (options.buttons) {
+      var buttonSet = $(
+        '<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>'
+      ).appendTo(n);
+      options.buttons.forEach(function(buttonDef) {
+        var b = $('<button>')
+          .html(buttonDef.text)
+          .click(buttonDef.click)
+          .appendTo(buttonSet);
+        if (buttonDef.id) {
+          b.attr('id', buttonDef.id);
+        }
+        if (buttonDef.class) {
+          b.addClass(buttonDef.class);
+        }
+      });
+    }
+
+    $('#notifications').append(n);
+    if (!RED.notifications.hide) {
+      $(n).slideDown(300);
+    }
+    n.close = (function() {
+      var nn = n;
+      return function() {
+        if (nn.closed) {
+          return;
+        }
+        nn.closed = true;
+        currentNotifications.splice(currentNotifications.indexOf(nn), 1);
+        if (options.id) {
+          delete persistentNotifications[options.id];
+          if (Object.keys(persistentNotifications).length === 0) {
+            notificationButtonWrapper.hide();
+          }
+        }
+        if (!RED.notifications.hide) {
+          $(nn).slideUp(300, function() {
+            nn.parentNode.removeChild(nn);
+          });
+        } else {
+          nn.parentNode.removeChild(nn);
+        }
+        if (options.modal) {
+          $('#full-shade').hide();
+        }
+      };
+    })();
+    n.hideNotification = (function() {
+      var nn = n;
+      return function() {
+        if (nn.closed) {
+          return;
+        }
+        nn.hidden = true;
+        if (!RED.notifications.hide) {
+          $(nn).slideUp(300);
+        }
+      };
+    })();
+    n.showNotification = (function() {
+      var nn = n;
+      return function() {
+        if (nn.closed || !nn.hidden) {
+          return;
+        }
+        nn.hidden = false;
+        if (!RED.notifications.hide) {
+          $(nn).slideDown(300);
+        }
+      };
+    })();
+
+    n.update = (function() {
+      var nn = n;
+      return function(msg, options) {
+        if (typeof msg === 'string') {
+          if (!/<p>/i.test(msg)) {
+            msg = '<p>' + msg + '</p>';
+          }
+          nn.innerHTML = msg;
+        } else {
+          $(nn)
+            .empty()
+            .append(msg);
+        }
+        var timeout;
+        if (typeof options === 'number') {
+          timeout = options;
+        } else if (options !== undefined) {
+          if (!options.fixed) {
+            timeout = options.timeout || 5000;
+          }
+          if (options.buttons) {
+            var buttonSet = $(
+              '<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>'
+            ).appendTo(nn);
+            options.buttons.forEach(function(buttonDef) {
+              var b = $('<button>')
+                .text(buttonDef.text)
+                .click(buttonDef.click)
+                .appendTo(buttonSet);
+              if (buttonDef.id) {
+                b.attr('id', buttonDef.id);
+              }
+              if (buttonDef.class) {
+                b.addClass(buttonDef.class);
+              }
+            });
+          }
+        }
+        if (timeout !== undefined && timeout > 0) {
+          window.clearTimeout(nn.timeoutid);
+          nn.timeoutid = window.setTimeout(nn.close, timeout);
+        } else {
+          window.clearTimeout(nn.timeoutid);
+        }
+        if (nn.hidden) {
+          nn.showNotification();
+        } else if (!options || !options.silent) {
+          $(nn).addClass('notification-shake-horizontal');
+          setTimeout(function() {
+            $(nn).removeClass('notification-shake-horizontal');
+          }, 300);
+        }
+      };
+    })();
+
+    if (!fixed) {
+      $(n).click(
+        (function() {
+          var nn = n;
+          return function() {
+            nn.close();
+            window.clearTimeout(nn.timeoutid);
+          };
+        })()
+      );
+      n.timeoutid = window.setTimeout(n.close, timeout || 5000);
+    }
+    currentNotifications.push(n);
+    if (options.id) {
+      persistentNotifications[options.id] = n;
+      if (options.fixed) {
+        notificationButtonWrapper.show();
+      }
+    }
+    c += 1;
+    return n;
+  }
+
+  RED.notify = notify;
+
+  function hidePersistent() {
+    for (var i in persistentNotifications) {
+      if (persistentNotifications.hasOwnProperty(i)) {
+        persistentNotifications[i].hideNotification();
+      }
+    }
+  }
+  function showPersistent() {
+    for (var i in persistentNotifications) {
+      if (persistentNotifications.hasOwnProperty(i)) {
+        persistentNotifications[i].showNotification();
+      }
+    }
+  }
+
+  var notificationButtonWrapper;
+
+  return {
+    init: function() {
+      notificationButtonWrapper = $(
+        '<li>' +
+          '<a id="btn-notifications" class="button" href="#">' +
+          '<i class="fa fa-warning"></i>' +
+          '</a>' +
+          '</li>'
+      )
+        .prependTo('.header-toolbar')
+        .hide();
+      $('#btn-notifications').click(function() {
+        showPersistent();
+      });
+    },
+    notify: notify
+  };
+})();