Add toast notification option

m-h-c-t · Jul 28, 2024 · b13701f · b13701f
1 parent d137a29
commit b13701f
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 57 deletions.
diff --git a/src/css/user-notify.css b/src/css/user-notify.css
@@ -1,82 +1,96 @@
-@supports (-webkit-user-select: none) {
-  /* 
-    Chrome injected CSS is at the user level and not the author level like FF so !important is needed b/c the 
-    page CSS will have priority otherwise
-  */
-  .huntersHornMessageView--mhct_success {
-    border-image-source: url("chrome-extension://__MSG_@@extension_id__/images/sandwich-board-success.png") !important;
-  }
-  .huntersHornMessageView--mhct_warning {
-    border-image-source: url("chrome-extension://__MSG_@@extension_id__/images/sandwich-board-warning.png") !important;
-  }
-  .huntersHornMessageView--mhct_error {
-    border-image-source: url("chrome-extension://__MSG_@@extension_id__/images/sandwich-board-error.png") !important;
-  }
+/* 
+  Chrome injected CSS is at the user level and not the author level like FF so !important is needed b/c the 
+  page CSS will have priority otherwise
+*/
+.huntersHornMessageView--mhct_success {
+  border-image-source: url("chrome-extension://__MSG_@@extension_id__/images/sandwich-board-success.png") !important;
+}
+.huntersHornMessageView--mhct_warning {
+  border-image-source: url("chrome-extension://__MSG_@@extension_id__/images/sandwich-board-warning.png") !important;
+}
+.huntersHornMessageView--mhct_error {
+  border-image-source: url("chrome-extension://__MSG_@@extension_id__/images/sandwich-board-error.png") !important;
+}
 
-  .huntersHornMessageView--mhct_success .huntersHornMessageView__content::before,
-  .huntersHornMessageView--mhct_warning .huntersHornMessageView__content::before,
-  .huntersHornMessageView--mhct_error .huntersHornMessageView__content::before {
-    background-image: url("chrome-extension://__MSG_@@extension_id__/images/icon64.png");
-  }
+.huntersHornMessageView--mhct_success
+  .huntersHornMessageView__content::before,
+.huntersHornMessageView--mhct_warning
+  .huntersHornMessageView__content::before,
+.huntersHornMessageView--mhct_error .huntersHornMessageView__content::before {
+  background-image: url("chrome-extension://__MSG_@@extension_id__/images/icon64.png") !important;
 }
-@supports (-moz-user-select: none) {
+
+@-moz-document url-prefix() {
   .huntersHornMessageView--mhct_success {
-    border-image-source: url("moz-extension://__MSG_@@extension_id__/images/sandwich-board-success.png");
+    border-image-source: url("moz-extension://__MSG_@@extension_id__/images/sandwich-board-success.png") !important;
   }
   .huntersHornMessageView--mhct_warning {
-    border-image-source: url("moz-extension://__MSG_@@extension_id__/images/sandwich-board-warning.png");
+    border-image-source: url("moz-extension://__MSG_@@extension_id__/images/sandwich-board-warning.png") !important;
   }
   .huntersHornMessageView--mhct_error {
-    border-image-source: url("moz-extension://__MSG_@@extension_id__/images/sandwich-board-error.png");
+    border-image-source: url("moz-extension://__MSG_@@extension_id__/images/sandwich-board-error.png") !important;
   }
 
-  .huntersHornMessageView--mhct_success .huntersHornMessageView__content::before,
-  .huntersHornMessageView--mhct_warning .huntersHornMessageView__content::before,
+  .huntersHornMessageView--mhct_success
+    .huntersHornMessageView__content::before,
+  .huntersHornMessageView--mhct_warning
+    .huntersHornMessageView__content::before,
   .huntersHornMessageView--mhct_error .huntersHornMessageView__content::before {
-    background-image: url("moz-extension://__MSG_@@extension_id__/images/icon64.png");
+    background-image: url("moz-extension://__MSG_@@extension_id__/images/icon64.png") !important;
   }
 }
 
 .huntersHornMessageView--mhct_success .huntersHornMessageView__content:before,
 .huntersHornMessageView--mhct_warning .huntersHornMessageView__content:before,
 .huntersHornMessageView--mhct_error .huntersHornMessageView__content:before {
-    content: '';
-    display: block;
-    width: 63px;
-    height: 40px;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-size: contain
+  content: "";
+  display: block;
+  width: 63px;
+  height: 40px;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
 }
 
-.mhct-banner {
-  z-index: 100;
-  position: fixed;
-  top: 0;
-  padding: 1em;
+.mhct-msg-display {
+  box-shadow: 0px 1px 3px -1px black;
   font-size: larger;
-  width: 100%;
-  text-align: center;
-  box-shadow: 0px 1px 4px 0px black;
   opacity: 0%;
+  padding: 1em;
   pointer-events: none;
+  position: fixed;
+  text-align: center;
+  transition: all 0.4s;
+  z-index: 100;
+}
+
+.mhct-msg-display.mhct-banner {
   font-weight: 600;
-  transition: all .4s;
+  top: 0;
+  width: 100%;
 }
 
-.mhct-banner--active {
-  opacity: 95%;
+.mhct-msg-display.mhct-toast {
+  border-radius: 10px;
+  font-weight: 400;
+  bottom: 10px;
+  right: 10px;
+  width: auto;
 }
 
-.mhct-banner-success {
+.mhct-msg-display--active {
+  opacity: 1;
+}
+
+.mhct-msg-display.mhct-success {
   background: lightgreen;
   border: 1px solid green;
 }
-.mhct-banner-error {
+.mhct-msg-display.mhct-error {
   background: pink;
   border: 1px solid red;
 }
-.mhct-banner-warning {
+.mhct-msg-display.mhct-warning {
   background: gold;
   border: 1px solid darkgoldenrod;
-}
+}
diff --git a/src/options.html b/src/options.html
@@ -35,6 +35,7 @@
                             <select id="message_display" class="pull-right">
                                 <option value="hud">HUD</option>
                                 <option value="banner">Banner</option>
+                                <option value="toast">Toast</option>
                             </select>
                         </div>
                     </label>

diff --git a/src/scripts/content.js b/src/scripts/content.js
@@ -12,9 +12,23 @@ extension_version.setAttribute("type", "hidden");
 extension_version.setAttribute("value", chrome.runtime.getManifest().version);
 document.body.appendChild(extension_version);
 
-const mhctBanner = document.createElement('div');
-mhctBanner.classList.add('mhct-banner');
-document.body.appendChild(mhctBanner);
+async function createMessageDiv() {
+    const settings = await getSettings();
+    switch (settings.message_display) {
+        case 'hud': {
+            HornHud.init();
+            break;
+        }
+        case 'toast':
+        case 'banner': {
+            const mhctMsg = document.createElement('div');
+            mhctMsg.classList.add('mhct-msg-display', `mhct-${settings.message_display}`);
+            document.body.appendChild(mhctMsg);
+            break;
+        }
+    }
+}
+createMessageDiv();
 
 async function showDarkMode() {
     const settings = await new Promise((resolve) => {
@@ -206,15 +220,17 @@ window.addEventListener("message",
 
         if (settings.message_display === 'hud') {
             await HornHud.showMessage(message, type);
-        } else if (settings.message_display === 'banner') {
+        } else {
+            const mhctMsg = document.querySelector('.mhct-msg-display');
+            if (mhctMsg == null) {
+                return;
+            }
 
-            mhctBanner.textContent = `MHCT Helper: ${message}`;
-            mhctBanner.classList.add(`mhct-banner-${type}`);
-            mhctBanner.classList.add('mhct-banner--active');
+            mhctMsg.textContent = `MHCT Helper: ${message}`;
+            mhctMsg.classList.add('mhct-msg-display--active', `mhct-${type}`);
 
             setTimeout(() => {
-                mhctBanner.classList.remove(`mhct-banner-${type}`);
-                mhctBanner.classList.remove('mhct-banner--active');
+                mhctMsg.classList.remove('mhct-msg-display--active', `mhct-${type}`);
             }, 1500 + 2000 * (type !== "success"));
         }
     }