Initial

modules/alert-banner/alert-banner.js

@@ -0,0 +1,61 @@
+;(function() {
+  const moduleUrl = window.getModuleUrl(); 
+  loadCSSModule('overlay-alertbanner-css', moduleUrl + '/css/alert-banner.css');
+
+	function initModule() {
+		const container = document.getElementById('mainContainer') || document.body;
+		if (!document.getElementById('alertBannerContainer')) {
+			const alertBannerContainer = document.createElement('div');
+			alertBannerContainer.id = 'alertBannerContainer';
+
+			const alertBannerTitle = document.createElement('div');
+			alertBannerTitle.id = 'alertBannerTitle';
+      alertBannerTitle.innerHTML = '<p></p>';
+
+      const alertBannerMessage = document.createElement('div');
+			alertBannerMessage.id = 'alertBannerMessage';
+      alertBannerMessage.innerHTML = '<p></p>';
+
+      alertBannerContainer.appendChild(alertBannerTitle);
+      alertBannerContainer.appendChild(alertBannerMessage);
+			container.appendChild(alertBannerContainer);
+		}
+  }
+  initModule();
+
+  if (window.SBdispatcher) {
+    SBdispatcher.on('stream-alertbanner', data => {
+      showAlert(data.param1,data.param2);
+    });
+    SBdispatcher.on('stream-alertbanner-hide', () => {
+      hideAlert();
+    });
+  }
+
+  function showAlert(title = "" , message = "") {
+    const container = document.getElementById('alertBannerContainer');
+    const alertTitle = document.getElementById('alertBannerTitle').querySelector('p');
+    const alertText = document.getElementById('alertBannerMessage').querySelector('p');
+
+    if (title.length > 0) {
+      alertTitle.innerText = title;
+    }
+    if (message.length > 0) {
+      alertText.innerText = message;
+    }
+      
+    container._positionDivHandler = () => positionDiv(container);
+    container.addEventListener('animationend', container._positionDivHandler);
+    container.style.animation = "slide-in-right 2s ease forwards";
+      
+  }
+
+  function hideAlert() {
+    const container = document.getElementById('alertBannerContainer');
+    container._positionDivHandler = () => positionDiv(container);
+    container.addEventListener('animationend', container._positionDivHandler);
+    container.style.animation = "slide-out-right 2s ease forwards";
+  }
+
+})();
+

modules/alert-banner/css/alert-banner.css

@@ -0,0 +1,49 @@
+#alertBannerContainer {
+  z-index: 500;
+  position: fixed;
+  top: 30px;
+  left: auto;
+  right: -100%;
+  width: 25%;
+  height: 75px;
+  background: linear-gradient(to left, black, #00007f);
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%);
+}
+#alertBannerContainer #alertBannerTitle {
+  color: white;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
+  font-style: italic;
+  font-size: 26px;
+  text-decoration: underline;
+  white-space: nowrap;
+  left: 30px;
+  top: 0px;
+  position: absolute;
+}
+#alertBannerContainer #alertBannerTitle p {
+  margin: 0px;
+  padding: 0px 1em 0px 0px;
+  background: linear-gradient(to bottom, #ffff7f, #ffffff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}
+#alertBannerContainer #alertBannerMessage {
+  color: white;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
+  font-size: 36px;
+  white-space: nowrap;
+  left: 30px;
+  bottom: 0px;
+  position: absolute;
+}
+#alertBannerContainer #alertBannerMessage p {
+  margin: 0px;
+  padding: 0px 1em 0px 0px;
+}

modules/alert-banner/css/alert-banner.less

@@ -0,0 +1,56 @@
+// out: alert-banner.css, sourcemap: false, compress: false
+
+#alertBannerContainer {
+  z-index: 500;
+  position: fixed;
+  top: 30px;
+  left: auto;
+  right: -100%;
+  width: 25%;
+  height: 75px;
+  background: linear-gradient(to left, black, #00007f);
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  clip-path: polygon( 30px 0, 100% 0, 100% 100%, 0 100% );
+
+  #alertBannerTitle {
+    color: white;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-style: italic;
+    font-size: 26px;
+    text-decoration: underline;
+    white-space: nowrap;
+    left: 30px;
+    top: 0px;
+    position: absolute;
+
+    p {
+      margin: 0px;
+      padding: 0px 1em 0px 0px;
+      background: linear-gradient(to bottom, #ffff7f, #ffffff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      color: transparent;      
+    }
+  }
+
+  #alertBannerMessage {
+    color: white;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-size: 36px;
+    white-space: nowrap;
+    left: 30px;
+    bottom: 0px;
+    position: absolute;
+
+    p {
+      margin: 0px;
+      padding: 0px 1em 0px 0px;
+    }
+  }
+  
+}