add http interceptor for alerts

static/css/utils/alerts.scss

@@ -34,6 +34,10 @@
   }
 }
 
+.alerts--elevated {
+  z-index: 1000;
+}
+
 .alerts__toggler--visible {
   top: -40px;
   opacity: 1;

static/js/utils/alerts.js

@@ -30,7 +30,7 @@
    * Example usage:
    *  <div .alerts uw-alerts>
    *    <div .alerts__toggler>
-   *      <div .alert.alert-info>
+   *    <div .alert.alert-info>
    *      <div .alert__closer>
    *      <div .alert__icon>
    *      <div .alert__content>
@@ -42,6 +42,7 @@
   var ALERTS_UTIL_SELECTOR = '[uw-alerts]';
 
   var ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
+  var ALERTS_ELEVATED_CLASS = 'alerts--elevated';
   var ALERTS_TOGGLER_CLASS = 'alerts__toggler';
   var ALERTS_TOGGLER_VISIBLE_CLASS = 'alerts__toggler--visible';
   var ALERTS_TOGGLER_APPEAR_DELAY = 120;
@@ -49,6 +50,8 @@
   var ALERT_CLASS = 'alert';
   var ALERT_INITIALIZED_CLASS = 'alert--initialized';
   var ALERT_CLOSER_CLASS = 'alert__closer';
+  var ALERT_ICON_CLASS = 'alert__icon';
+  var ALERT_CONTENT_CLASS = 'alert__content';
   var ALERT_INVISIBLE_CLASS = 'alert--invisible';
   var ALERT_AUTO_HIDE_DELAY = 10;
   var ALERT_AUTOCLOSING_MATCHER = '.alert-info, .alert-success';
@@ -73,6 +76,9 @@
       initToggler();
       initAlerts();
 
+      // register http client interceptor to filter out Alerts Header
+      setupHttpInterceptor();
+
       // mark initialized
       element.classList.add(ALERTS_INITIALIZED_CLASS);
 
@@ -96,7 +102,6 @@
         });
         togglerElement.classList.remove(ALERTS_TOGGLER_VISIBLE_CLASS);
       });
-      element.classList.add(ALERTS_INITIALIZED_CLASS);
     }
 
     function initAlerts() {
@@ -119,8 +124,6 @@
           toggleAlert(alertElement);
         }, autoHideDelay * 1000);
       }
-
-      alertElement.classList.add(ALERTS_INITIALIZED_CLASS);
     }
 
     function toggleAlert(alertEl, visible) {
@@ -143,6 +146,58 @@
       }, ALERTS_TOGGLER_APPEAR_DELAY);
     }
 
+    function setupHttpInterceptor() {
+      if (HttpClient) {
+        HttpClient.addResponseInterceptor(responseInterceptor.bind(this));
+      }
+    }
+
+    function elevateAlerts() {
+      element.classList.add(ALERTS_ELEVATED_CLASS);
+    }
+
+    function responseInterceptor(response) {
+      var alerts;
+      for (var header of response.headers) {
+        if (header[0] === 'alerts') {
+          alerts = JSON.parse(header[1]);
+          break;
+        }
+      }
+
+      if (alerts) {
+        alerts.forEach(function(alert) {
+          var alertElement = createAlertElement(alert.status, alert.content);
+          element.appendChild(alertElement);
+          alertElements.push(alertElement);
+          initAlert(alertElement);
+        });
+
+        elevateAlerts();
+      }
+    }
+
+    function createAlertElement(type, content) {
+      var alertElement = document.createElement('div');
+      alertElement.classList.add(ALERT_CLASS, 'alert-' + type);
+
+      var alertCloser = document.createElement('div');
+      alertCloser.classList.add(ALERT_CLOSER_CLASS);
+
+      var alertIcon = document.createElement('div');
+      alertIcon.classList.add(ALERT_ICON_CLASS);
+
+      var alertContent = document.createElement('div');
+      alertContent.classList.add(ALERT_CONTENT_CLASS);
+      alertContent.innerHTML = content;
+
+      alertElement.appendChild(alertCloser);
+      alertElement.appendChild(alertIcon);
+      alertElement.appendChild(alertContent);
+
+      return alertElement;
+    }
+
     return init();
   };