From 5e1b4d37f5fcc85636bd75f2ffc3559ca18ec0e5 Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Fri, 14 Jan 2022 19:49:46 +0100
Subject: [PATCH] added banner support

---
 src/js/elements/notifications.js | 238 +++++++++++++++++++++----------
 src/sass/banners.scss            |  54 +++++++
 src/sass/z_media-queries.scss    |   9 ++
 static/index.html                |  10 +-
 4 files changed, 224 insertions(+), 87 deletions(-)
 create mode 100644 src/sass/banners.scss

diff --git a/src/js/elements/notifications.js b/src/js/elements/notifications.js
index 3ce282794..54e222102 100644
--- a/src/js/elements/notifications.js
+++ b/src/js/elements/notifications.js
@@ -1,29 +1,36 @@
+import * as Misc from "./misc";
 // const notificationHistory = [];
 let id = 0;
 class Notification {
   constructor(
+    type,
     message,
     level,
     duration,
     customTitle,
     customIcon,
-    clickCallback = () => {}
+    closeCallback = () => {}
   ) {
+    this.type = type;
     this.message = message;
     this.level = level;
-    if (duration == undefined) {
-      if (level === -1) {
-        this.duration = 0;
-      } else {
-        this.duration = 3000;
-      }
+    if (type === "banner") {
+      this.duration = duration;
     } else {
-      this.duration = duration * 1000;
+      if (duration == undefined) {
+        if (level === -1) {
+          this.duration = 0;
+        } else {
+          this.duration = 3000;
+        }
+      } else {
+        this.duration = duration * 1000;
+      }
     }
     this.customTitle = customTitle;
     this.customIcon = customIcon;
     this.id = id++;
-    this.clickCallback = clickCallback;
+    this.closeCallback = closeCallback;
   }
   //level
   //0 - notice
@@ -48,88 +55,142 @@ class Notification {
       title = this.customTitle;
     }
 
+    if (this.type === "banner") {
+      icon = `<i class="fas fa-fw fa-bullhorn"></i>`;
+    }
+
     if (this.customIcon != undefined) {
       icon = `<i class="fas fa-fw fa-${this.customIcon}"></i>`;
     }
 
-    // moveCurrentToHistory();
-    let oldHeight = $("#notificationCenter .history").height();
-    $("#notificationCenter .history").prepend(`
-        
-        <div class="notif ${cls}" id=${this.id}>
-            <div class="icon">${icon}</div>
-            <div class="message"><div class="title">${title}</div>${this.message}</div>
-        </div>     
+    if (this.type === "notification") {
+      // moveCurrentToHistory();
+      let oldHeight = $("#notificationCenter .history").height();
+      $("#notificationCenter .history").prepend(`
+          
+          <div class="notif ${cls}" id=${this.id}>
+              <div class="icon">${icon}</div>
+              <div class="message"><div class="title">${title}</div>${this.message}</div>
+          </div>     
 
-        `);
-    let newHeight = $("#notificationCenter .history").height();
-    $(`#notificationCenter .notif[id='${this.id}']`).remove();
-    $("#notificationCenter .history")
-      .css("margin-top", 0)
-      .animate(
-        {
-          marginTop: newHeight - oldHeight,
-        },
-        125,
-        () => {
-          $("#notificationCenter .history").css("margin-top", 0);
-          $("#notificationCenter .history").prepend(`
-        
-                <div class="notif ${cls}" id=${this.id}>
-                    <div class="icon">${icon}</div>
-                    <div class="message"><div class="title">${title}</div>${this.message}</div>
-                </div>     
+          `);
+      let newHeight = $("#notificationCenter .history").height();
+      $(`#notificationCenter .notif[id='${this.id}']`).remove();
+      $("#notificationCenter .history")
+        .css("margin-top", 0)
+        .animate(
+          {
+            marginTop: newHeight - oldHeight,
+          },
+          125,
+          () => {
+            $("#notificationCenter .history").css("margin-top", 0);
+            $("#notificationCenter .history").prepend(`
+          
+                  <div class="notif ${cls}" id=${this.id}>
+                      <div class="icon">${icon}</div>
+                      <div class="message"><div class="title">${title}</div>${this.message}</div>
+                  </div>     
 
-            `);
-          $(`#notificationCenter .notif[id='${this.id}']`)
-            .css("opacity", 0)
-            .animate(
-              {
-                opacity: 1,
-              },
-              125,
-              () => {
-                $(`#notificationCenter .notif[id='${this.id}']`).css(
-                  "opacity",
-                  ""
-                );
-              }
-            );
-          $(`#notificationCenter .notif[id='${this.id}']`).click(() => {
-            this.hide();
-            this.clickCallback();
-          });
-        }
+              `);
+            $(`#notificationCenter .notif[id='${this.id}']`)
+              .css("opacity", 0)
+              .animate(
+                {
+                  opacity: 1,
+                },
+                125,
+                () => {
+                  $(`#notificationCenter .notif[id='${this.id}']`).css(
+                    "opacity",
+                    ""
+                  );
+                }
+              );
+            $(`#notificationCenter .notif[id='${this.id}']`).click(() => {
+              this.hide();
+              this.closeCallback();
+            });
+          }
+        );
+      $(`#notificationCenter .notif[id='${this.id}']`).hover(() => {
+        $(`#notificationCenter .notif[id='${this.id}']`).toggleClass("hover");
+      });
+    } else if (this.type === "banner") {
+      let leftside = `<div class="icon">${icon}</div>`;
+
+      if (/^images\/.*/.test(this.customIcon)) {
+        leftside = `<div class="image" style="background-image: url(${this.customIcon})"></div>`;
+      }
+
+      $("#bannerCenter").prepend(`
+        <div class="banner ${cls}" id="${this.id}">
+        <div class="container">
+          ${leftside}
+          <div class="text">
+            ${this.message}
+          </div>
+          ${
+            this.duration >= 0
+              ? `
+          <div class="closeButton">
+            <i class="fas fa-fw fa-times"></i>
+          </div>
+          `
+              : `<div style="margin-right: 2rem;">${icon}</div>`
+          }
+        </div>
+      </div>
+      `);
+      let height = $("#bannerCenter").height();
+      $("#centerContent").css(
+        "padding-top",
+        height + Misc.convertRemToPixels(2) + "px"
       );
+      $("#notificationCenter").css("margin-top", height + "px");
+      if (this.duration >= 0) {
+        $(`#bannerCenter .banner[id='${this.id}'] .closeButton`).click(() => {
+          this.hide();
+          this.closeCallback();
+        });
+      }
+    }
     if (this.duration > 0) {
       setTimeout(() => {
         this.hide();
       }, this.duration + 250);
     }
-    $(`#notificationCenter .notif[id='${this.id}']`).hover(() => {
-      $(`#notificationCenter .notif[id='${this.id}']`).toggleClass("hover");
-    });
   }
   hide() {
-    $(`#notificationCenter .notif[id='${this.id}']`)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        125,
-        () => {
-          $(`#notificationCenter .notif[id='${this.id}']`).animate(
-            {
-              height: 0,
-            },
-            125,
-            () => {
-              $(`#notificationCenter .notif[id='${this.id}']`).remove();
-            }
-          );
-        }
+    if (this.type === "notification") {
+      $(`#notificationCenter .notif[id='${this.id}']`)
+        .css("opacity", 1)
+        .animate(
+          {
+            opacity: 0,
+          },
+          125,
+          () => {
+            $(`#notificationCenter .notif[id='${this.id}']`).animate(
+              {
+                height: 0,
+              },
+              125,
+              () => {
+                $(`#notificationCenter .notif[id='${this.id}']`).remove();
+              }
+            );
+          }
+        );
+    } else if (this.type === "banner") {
+      $(`#bannerCenter .banner[id='${this.id}']`).remove();
+      let height = $("#bannerCenter").height();
+      $("#centerContent").css(
+        "padding-top",
+        height + Misc.convertRemToPixels(2) + "px"
       );
+      $("#notificationCenter").css("margin-top", height + "px");
+    }
   }
 }
 
@@ -139,16 +200,37 @@ export function add(
   duration,
   customTitle,
   customIcon,
-  clickCallback
+  closeCallback
 ) {
   // notificationHistory.push(
   new Notification(
+    "notification",
     message,
     level,
     duration,
     customTitle,
     customIcon,
-    clickCallback
+    closeCallback
+  ).show();
+  // );
+}
+
+export function addBanner(
+  message,
+  level = -1,
+  customIcon = "bullhorn",
+  sticky = false,
+  closeCallback
+) {
+  // notificationHistory.push(
+  new Notification(
+    "banner",
+    message,
+    level,
+    sticky ? -1 : 0,
+    undefined,
+    customIcon,
+    closeCallback
   ).show();
   // );
 }
diff --git a/src/sass/banners.scss b/src/sass/banners.scss
new file mode 100644
index 000000000..c9077cc0b
--- /dev/null
+++ b/src/sass/banners.scss
@@ -0,0 +1,54 @@
+#bannerCenter {
+  position: fixed;
+  width: 100%;
+  z-index: 9999;
+  .banner {
+    background: var(--sub-color);
+    color: var(--bg-color);
+    display: flex;
+    justify-content: center;
+    .container {
+      max-width: 1000px;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 1rem;
+      align-items: center;
+      width: 100%;
+      justify-items: center;
+      .image {
+        // background-image: url(images/merchdropwebsite2.png);
+        height: 2.1rem;
+        background-size: cover;
+        aspect-ratio: 6/1;
+        background-position: center;
+        background-repeat: no-repeat;
+        margin-left: 2rem;
+      }
+      .icon {
+        margin-left: 2rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+      }
+      .text {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+      }
+      .closeButton {
+        margin-right: 2rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        transition: 0.125s;
+        &:hover {
+          cursor: pointer;
+          color: var(--text-color);
+        }
+      }
+    }
+    &.good {
+      background: var(--main-color);
+    }
+    &.bad {
+      background: var(--error-color);
+    }
+  }
+}
diff --git a/src/sass/z_media-queries.scss b/src/sass/z_media-queries.scss
index 0d68209a0..1d726f220 100644
--- a/src/sass/z_media-queries.scss
+++ b/src/sass/z_media-queries.scss
@@ -105,6 +105,15 @@
     grid-template-columns: 1fr 1fr 1fr;
     justify-items: center;
   }
+  #bannerCenter .banner .container {
+    grid-template-columns: 1fr auto;
+    .image {
+      display: none;
+    }
+    .text {
+      margin-left: 2rem;
+    }
+  }
   #centerContent {
     #top {
       grid-template-areas:
diff --git a/static/index.html b/static/index.html
index b6d144a3d..f34ddd136 100644
--- a/static/index.html
+++ b/static/index.html
@@ -175,6 +175,7 @@
     </div>
     <div id="ad_rich_media" class="hidden"></div>
     <div id="backgroundLoader" style="display: none"></div>
+    <div id="bannerCenter"></div>
     <div id="notificationCenter">
       <div class="history"></div>
     </div>
@@ -190,14 +191,6 @@
     >
       Important information about your account. Please click this message.
     </div>
-    <div class="merchBanner hidden">
-      <img src="images/merchdropwebsite2.png" alt="" />
-      <div class="text">
-        We've got brand new merch designs over at
-        <a href="https://monkeytype.store" target="_blank">monkeytype.store</a>
-      </div>
-      <i class="fas closeButton fa-times"></i>
-    </div>
 
     <div id="simplePopupWrapper" class="popupWrapper hidden">
       <div id="simplePopup" popupId=""></div>
@@ -4933,7 +4926,6 @@
   </body>
   <!-- The core Firebase JS SDK is always required and must be listed first -->
   <script src="/__/firebase/8.4.2/firebase-app.js"></script>
-
   <!-- TODO: Add SDKs for Firebase products that you want to use
      https://firebase.google.com/docs/web/setup#available-libraries -->
   <script src="/__/firebase/8.4.2/firebase-analytics.js"></script>