*
@@ -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();
};