✨ Added toasts for different actions

prateek3255 · May 30, 2021 · e3f42a1 · e3f42a1
1 parent 5e522ac
commit e3f42a1
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 8 deletions.
diff --git a/background.js b/background.js
@@ -51,6 +51,9 @@ chrome.runtime.onInstalled.addListener(details => {
 //   });
 // };
 
+// This updates the popup icon based on whether
+// the tab has a saved scroll or not when the user
+// is switching between tabs
 chrome.tabs.onActivated.addListener(() => {
   chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
     const url = getUrlWithoutHash(tabs[0].url);
@@ -66,13 +69,22 @@ chrome.tabs.onActivated.addListener(() => {
   });
 });
 
-chrome.tabs.onUpdated.addListener(tabId => {
+// This runs when a page on a tab is loaded and
+// if it has a saved scroll then fetch the latest
+// scroll
+chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
   chrome.tabs.get(tabId, tab => {
     const url = getUrlWithoutHash(tab.url);
 
-    if (url) {
+    if (url && changeInfo.status === 'complete') {
       chrome.storage.local.get('scroll-mark', data => {
         const scrollMarkData = data['scroll-mark'];
+
+        chrome.scripting.insertCSS({
+          target: { tabId },
+          files: ['contentScripts/index.css'],
+        });
+
         if (scrollMarkData && scrollMarkData[url] !== undefined) {
           executeGetScroll(tabId, null, true);
           setActiveIcon();
@@ -84,6 +96,8 @@ chrome.tabs.onUpdated.addListener(tabId => {
   });
 });
 
+// This listens for messages from content scripts
+// and updates popup icon accordingly
 chrome.runtime.onMessage.addListener(request => {
   if (request === 'setActive') {
     setActiveIcon();
@@ -92,6 +106,8 @@ chrome.runtime.onMessage.addListener(request => {
   }
 });
 
+// This listends for keyboard shortcuts and
+// performs actions accordingly
 chrome.commands.onCommand.addListener(command => {
   chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
     const currentTabId = tabs[0].id;

diff --git a/contentScripts/delete.js b/contentScripts/delete.js
@@ -1,4 +1,4 @@
-import { getURL, getItemFromStorage } from './index';
+import { getURL, getItemFromStorage, showToast } from './index';
 
 (async function () {
   const url = getURL();
@@ -9,12 +9,15 @@ import { getURL, getItemFromStorage } from './index';
 
   let updatedURLData;
 
+  let scrollName = '';
+
   const shouldClearAll = (await getItemFromStorage('clear-all'))['clear-all'];
 
   if (Array.isArray(urlData) && !shouldClearAll) {
     const currentScrollData = await getItemFromStorage('current-scroll-id');
     const id = currentScrollData['current-scroll-id'];
 
+    scrollName = urlData.find(item => item.uuid === id).scrollName;
     updatedURLData = urlData.filter(item => item.uuid !== id);
 
     if (updatedURLData.length === 0) {
@@ -28,6 +31,7 @@ import { getURL, getItemFromStorage } from './index';
       if (updatedURLData === undefined) {
         chrome.runtime.sendMessage('setInactive');
       }
+      showToast(`Deleted Scrroll <b>${scrollName}</b>`, 'red');
     });
   }
 })();
diff --git a/contentScripts/get.js b/contentScripts/get.js
@@ -1,11 +1,12 @@
-import { getURL, getItemFromStorage } from './index';
+import { getURL, getItemFromStorage, showToast } from './index';
 
 (async function () {
   const url = getURL();
   const data = await getItemFromStorage('scroll-mark');
 
   const scrollMarkData = data['scroll-mark'];
   let offset = null;
+  let item = null;
   const urlData = scrollMarkData[url];
 
   if (typeof urlData.offset === 'number') {
@@ -14,8 +15,6 @@ import { getURL, getItemFromStorage } from './index';
     const latestScroll = await getItemFromStorage('fetch-latest-item');
     const shouldFetchLatestItem = latestScroll['fetch-latest-item'];
 
-    let item = null;
-
     if (shouldFetchLatestItem) {
       item = urlData.reduce((prev, current) => (prev.offset > current.offset ? prev : current), { offset: 0 });
     } else {
@@ -31,5 +30,6 @@ import { getURL, getItemFromStorage } from './index';
 
   if (offset) {
     window.scrollTo({ left: 0, top: offset, behavior: 'smooth' });
+    showToast(`Fetching scrroll <b>${item && item.scrollName ? item.scrollName : ''}</b>`, 'green');
   }
 })();
diff --git a/contentScripts/index.css b/contentScripts/index.css
@@ -0,0 +1,87 @@
+#scrroll-in-snackbar {
+  visibility: hidden;
+  min-width: 250px;
+  transform: translate(-50%);
+  color: #fff;
+  text-align: center;
+  border-radius: 32px;
+  font-family: system-ui;
+  font-weight: 600;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 30px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+}
+
+#scrroll-in-snackbar b {
+    font-weight: 900;
+    margin-left: 6px;
+}
+
+#scrroll-in-snackbar.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+#scrroll-in-snackbar.orange {
+    background-color: #e67e22;
+}
+
+#scrroll-in-snackbar.red {
+    background-color: #e74c3c;
+}
+
+#scrroll-in-snackbar.green {
+    background-color: #2ecc71;
+}
+
+
+
+@-webkit-keyframes fadein {
+  from {
+    bottom: 0;
+    opacity: 0;
+  }
+  to {
+    bottom: 30px;
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  from {
+    bottom: 0;
+    opacity: 0;
+  }
+  to {
+    bottom: 30px;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    bottom: 30px;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    bottom: 30px;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
diff --git a/contentScripts/index.js b/contentScripts/index.js
@@ -37,3 +37,18 @@ export const executeUpdateScroll = (tabId, scrollId) => {
   chrome.storage.local.set({ 'current-scroll-id': scrollId });
   executeScript(tabId, 'contentScripts/update.js');
 };
+
+export const showToast = (content, color) => {
+  const svgIcon = `<svg xmlns="http://www.w3.org/2000/svg" version="1.0" preserveAspectRatio="xMidYMid meet" viewBox="76.35 55.28 100.15 138.72" style="height:25px; margin-right:14px;"><g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)" fill="#4F80FF" stroke="none"><path d="M902 2000 c-54 -11 -96 -41 -115 -82 -19 -43 -32 -658 -17 -788 41 -338 209 -510 500 -510 247 0 398 121 472 375 22 78 23 91 23 497 0 405 -1 417 -21 445 -11 15 -38 37 -60 48 -37 19 -61 20 -389 22 -192 1 -369 -3 -393 -7z m416 -248 c8 -11 12 -55 12 -136 0 -131 -9 -156 -58 -156 -53 0 -62 22 -62 154 0 67 4 126 8 132 23 34 75 38 100 6z"></path></g></svg>`;
+  document.body.innerHTML += `<div id="scrroll-in-snackbar" class="${color}">${svgIcon} ${content}</div>`;
+
+  const x = document.getElementById('scrroll-in-snackbar');
+  x.className += ' show';
+  setTimeout(() => {
+    x.className = x.className.replace('show', '');
+    // Wait for animation to complete before removing from dom
+    setTimeout(() => {
+      x.remove();
+    }, 600);
+  }, 3000);
+};
diff --git a/contentScripts/save.js b/contentScripts/save.js
@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
-import { getURL, MAX_SCROLLS } from './index';
+import { getURL, MAX_SCROLLS, showToast } from './index';
 
 const url = getURL();
 
@@ -52,5 +52,6 @@ chrome.storage.local.get('scroll-mark', data => {
   const newData = scrollMarkData ? { ...scrollMarkData, [url]: updatedURLData } : { [url]: updatedURLData };
   chrome.storage.local.set({ 'scroll-mark': newData }, () => {
     chrome.runtime.sendMessage('setActive');
+    showToast(`Saved scrroll <b>${scrollName}</b>`, 'green');
   });
 });
diff --git a/contentScripts/update.js b/contentScripts/update.js
@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
-import { getURL, getItemFromStorage } from './index';
+import { getURL, getItemFromStorage, showToast } from './index';
 
 (async function () {
   const url = getURL();
@@ -22,8 +22,11 @@ import { getURL, getItemFromStorage } from './index';
   const currentScrollData = await getItemFromStorage('current-scroll-id');
   const id = currentScrollData['current-scroll-id'];
 
+  let scrollName = '';
+
   items = items.map(currentItem => {
     if (currentItem.uuid === id) {
+      scrollName = currentItem.scrollName;
       return {
         ...currentItem,
         offset,
@@ -36,5 +39,6 @@ import { getURL, getItemFromStorage } from './index';
   const newData = { ...scrollMarkData, [url]: items };
   chrome.storage.local.set({ 'scroll-mark': newData }, () => {
     chrome.runtime.sendMessage('setActive');
+    showToast(`Updated scrroll <b>${scrollName}</b>`, 'orange');
   });
 })();
diff --git a/rollup.config.js b/rollup.config.js
@@ -67,6 +67,10 @@ export default [
             src: ['images', 'manifest.json', 'utils'],
             dest: ['build'],
           },
+          {
+            src: ['contentScripts/index.css'],
+            dest: ['build/contentScripts'],
+          },
         ],
         verbose: true,
       }),