favorite

Author: hoang.tran12

popup/helpers/storage.js

@@ -20,22 +20,42 @@ const createVariableSaver = (key, defaultValue = null) => ({
   },
 });
 
-const createScriptsSaver = (key) => ({
-  add: async (script) => {
-    let current = await localStorage.get(key, []);
-    current = current.filter((id) => id != script.id); // remove duplicate
-    current.unshift(script.id); // only save script id
-    await localStorage.set(key, current);
-  },
-  clear: async () => {
+const createScriptsSaver = (key) => {
+  const getIds = async () =>
+    (await localStorage.get(key, [])).filter(
+      (savedScriptId) => savedScriptId in allScripts
+    );
+  const has = async (script) => {
+    let current = await getIds();
+    let exist = current.findIndex((id) => id === script.id) >= 0;
+    return exist;
+  };
+  const add = async (script, addToHead = true) => {
+    let current = await getIds();
+    let newList = current.filter((id) => id != script.id); // remove duplicate
+    if (addToHead) newList.unshift(script.id); // only save script id
+    else newList.push(script.id);
+    await localStorage.set(key, newList);
+  };
+  const remove = async (script) => {
+    let current = await getIds();
+    let newList = current.filter((id) => id !== script.id);
+    await localStorage.set(key, newList);
+    console.log("removed ", script);
+  };
+  const toggle = async (script) => {
+    let exist = await has(script);
+    if (exist) await remove(script);
+    else await add(script);
+  };
+  const clear = async () => {
     await localStorage.set(key, []);
-  },
-  get: async () => {
-    return (await localStorage.get(key, []))
-      .filter((savedScriptId) => savedScriptId in allScripts)
-      .map((savedScriptId) => allScripts[savedScriptId]);
-  },
-});
+  };
+  const get = async () =>
+    (await getIds()).map((savedScriptId) => allScripts[savedScriptId]);
+
+  return { add, remove, has, toggle, clear, getIds, get };
+};
 
 export const langSaver = createVariableSaver("useful-scripts-lang");
 export const activeTabIdSaver = createVariableSaver(

popup/index.js

@@ -1,8 +1,13 @@
 import config from "../config.js";
-import { isTitle, tabs } from "./tabs.js";
+import { allScripts } from "../scripts/index.js";
+import { isTitle, refreshSpecialTabs, specialTabs, tabs } from "./tabs.js";
 import { getFlag, t, toggleLang } from "./helpers/lang.js";
 import { checkBlackWhiteList, runScriptInCurrentTab } from "./helpers/utils.js";
-import { activeTabIdSaver, recentScriptsSaver } from "./helpers/storage.js";
+import {
+  activeTabIdSaver,
+  favoriteScriptsSaver,
+  recentScriptsSaver,
+} from "./helpers/storage.js";
 
 const tabDiv = document.querySelector("div.tab");
 const contentDiv = document.querySelector("div.content");
@@ -24,18 +29,31 @@ async function initLanguage() {
 }
 
 async function createTabs() {
+  // prepare tabs
+  await refreshSpecialTabs();
+
   // clear UI
   tabDiv.innerHTML = "";
   contentDiv.innerHTML = "";
 
   // make new UI
-  for (let tab of tabs) {
+  const allTabs = [...specialTabs, ...tabs];
+  for (let tab of allTabs) {
     // create tab button
     const tabBtn = document.createElement("button");
     tabBtn.className = "tablinks";
     tabBtn.innerHTML = t(tab.name);
     tabBtn.type = "button";
     tabBtn.setAttribute("content-id", tab.id);
+
+    // show scripts count
+    if (tab.showCount) {
+      let avaiCount = tab.scripts.filter((script) => !isTitle(script)).length;
+      let allCount = Object.keys(allScripts).length;
+      tabBtn.innerHTML += ` (${avaiCount}/${allCount})`;
+    }
+
+    // custom style
     if (tab.style && typeof tab.style === "object")
       Object.entries(tab.style).forEach(([key, value]) => {
         tabBtn.style[key] = value;
@@ -50,7 +68,7 @@ async function createTabs() {
 
   // open tab
   let activeTabId = await activeTabIdSaver.get();
-  activeTabId && openTab(tabs.find((tab) => tab.id === activeTabId));
+  activeTabId && openTab(allTabs.find((tab) => tab.id === activeTabId));
 }
 
 async function openTab(tab) {
@@ -65,22 +83,26 @@ async function openTab(tab) {
     .classList.add("active");
 }
 
-function createTabContent(tab) {
+async function createTabContent(tab) {
   // create tab content
   const contentContainer = document.createElement("div");
   contentContainer.className = "tabcontent";
 
   // create button for scripts in tabcontent
   if (!tab.scripts?.length) {
     const emptyText = document.createElement("h3");
-    emptyText.innerText = t({
-      en: "Nothing here yet...",
-      vi: "Chưa có gì ở đây hết...",
+    emptyText.style.padding = "30px 0";
+    emptyText.style.color = "#19143b";
+    emptyText.innerHTML = t({
+      en: `<i class="fa-solid fa-circle-info"></i> Nothing here yet...`,
+      vi: `<i class="fa-solid fa-circle-info"></i> Chưa có gì ở đây hết...`,
     });
     contentContainer.appendChild(emptyText);
   } else {
+    const favoriteScriptIds = await favoriteScriptsSaver.getIds();
     tab.scripts.forEach((script) => {
-      contentContainer.appendChild(createScriptButton(script));
+      let isFavorite = favoriteScriptIds.find((id) => script.id === id);
+      contentContainer.appendChild(createScriptButton(script, isFavorite));
     });
   }
 
@@ -89,7 +111,7 @@ function createTabContent(tab) {
   contentDiv.appendChild(contentContainer);
 }
 
-function createScriptButton(script) {
+function createScriptButton(script, isFavorite = false) {
   // Section title
   if (isTitle(script)) {
     const title = document.createElement("h3");
@@ -144,6 +166,19 @@ function createScriptButton(script) {
   title.innerText = t(script.name);
   button.appendChild(title);
 
+  // add to favorite button
+  const addFavoriteBtn = document.createElement("i");
+  addFavoriteBtn.className = isFavorite
+    ? "fa-solid fa-star active"
+    : "fa-regular fa-star";
+  addFavoriteBtn.onclick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    favoriteScriptsSaver.toggle(script).then(createTabs);
+  };
+  button.appendChild(addFavoriteBtn);
+
   // tooltip
   const tooltip = document.createElement("span");
   tooltip.classList.add("tooltiptext");

popup/styles/style.css

@@ -82,7 +82,7 @@ a:hover {
 }
 
 .tabcontent {
-    animation: fadeEffect 1s;
+    animation: fadeEffect .3s;
 }
 
 .section-title {
@@ -122,6 +122,27 @@ a:hover {
     transition: all 50ms;
 }
 
+.content button i {
+    opacity: 0;
+    width: 0;
+    transition: all .2s;
+}
+
+.content button i.active {
+    color: #0048ad;
+}
+
+.content button i:hover {
+    transform: scale(1.8);
+}
+
+.content button:hover i,
+.content button i.active {
+    width: auto;
+    margin-left: 5px;
+    opacity: 1;
+}
+
 .content button .btn-title {
     vertical-align: middle;
 }

popup/tabs.js

@@ -7,6 +7,21 @@ import { favoriteScriptsSaver, recentScriptsSaver } from "./helpers/storage.js";
 const createTitle = (en, vi) => ({ name: { en, vi } });
 const isTitle = (script) => !script.func && !script.file && !script.link;
 
+const specialTabs = [
+  {
+    ...CATEGORY.recently,
+    scripts: [],
+  },
+  {
+    ...CATEGORY.favorite,
+    scripts: [],
+  },
+  {
+    ...CATEGORY.available,
+    scripts: [],
+  },
+];
+
 const tabs = [
   {
     ...CATEGORY.search,
@@ -351,30 +366,16 @@ async function getAvailableScriptsInTabs(_tabs) {
   return result;
 }
 
-tabs.unshift(
-  {
-    ...CATEGORY.recently,
-    scripts: await recentScriptsSaver.get(),
-  },
-  {
-    ...CATEGORY.favorite,
-    scripts: await favoriteScriptsSaver.get(),
-  },
-  {
-    ...CATEGORY.available,
-    scripts: await getAvailableScriptsInTabs(tabs),
-  }
-);
+async function refreshSpecialTabs() {
+  // add data to special tabs
+  let recentTab = specialTabs.find((tab) => tab.id === CATEGORY.recently.id);
+  if (recentTab) recentTab.scripts = await recentScriptsSaver.get();
 
-// add script count to tab name
-tabs.forEach((tab) => {
-  if (tab.showCount) {
-    let avaiCount = tab.scripts.filter((script) => !isTitle(script)).length;
-    let allCount = Object.keys(s).length;
+  let favoriteTab = specialTabs.find((tab) => tab.id === CATEGORY.favorite.id);
+  if (favoriteTab) favoriteTab.scripts = await favoriteScriptsSaver.get();
 
-    tab.name.vi += ` (${avaiCount}/${allCount})`;
-    tab.name.en += ` (${avaiCount}/${allCount})`;
-  }
-});
+  let avaiab = specialTabs.find((tab) => tab.id === CATEGORY.available.id);
+  if (avaiab) avaiab.scripts = await getAvailableScriptsInTabs(tabs);
+}
 
-export { isTitle, tabs };
+export { isTitle, refreshSpecialTabs, tabs, specialTabs };