1.3.0

- Took out `init` method to stop auto creating `cloakTitle` and `cloakFavicon`. - Changed `setTitle` and `setFavicon` to save to `localStorage` directly. - Updated `reset` so title and favicon stay unset until really needed. - Made `DOMContentLoaded` only set saved title and favicon if they exist in `localStorage`. - Simplified `cloakSelect` handling for updates. - Updated Docs to reflect changes
Parcoil · Jan 24, 2025 · 0075803 · 0075803
1 parent c2ee0ad
commit 0075803
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 72 deletions.
diff --git a/demo/docs.html b/demo/docs.html
@@ -98,22 +98,6 @@ <h4 class="text-xl font-semibold">Example:</h4>
                 </pre>
         </div>
 
-        <div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
-          <h3 class="text-2xl font-semibold">init()</h3>
-          <p>
-            Initializes the cloak settings by retrieving values from
-            <code>localStorage</code>.
-          </p>
-          <h4 class="text-xl font-semibold">Example:</h4>
-          <pre class="bg-base-300 p-4 rounded-lg">
-<code>
-document.addEventListener("DOMContentLoaded", () => {
-    cloak.init(); // Call this to set initial cloak settings
-});
-</code>
-                </pre>
-        </div>
-
         <div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
           <h3 class="text-2xl font-semibold">aboutBlank(url)</h3>
           <p>
@@ -137,7 +121,11 @@ <h3 class="text-2xl font-semibold">reset()</h3>
           <h4 class="text-xl font-semibold">Example:</h4>
           <pre class="bg-base-300 p-4 rounded-lg">
 <code>
+// Refreshes the page by default  
 cloak.reset();
+
+// You can also provide a boolean to prevent refreshing
+cloak.reset(false);
 </code>
                 </pre>
         </div>
@@ -146,7 +134,7 @@ <h4 class="text-xl font-semibold">Example:</h4>
 
     <footer class="p-4 bg-base-300 text-center mt-8 shadow">
       <p class="text-base-content">
-        &copy; 2024 Parcoil Network. All rights reserved.
+        &copy; 2024-2025 Parcoil Network. All rights reserved.
       </p>
     </footer>
   </body>

diff --git a/demo/index.html b/demo/index.html
@@ -63,7 +63,7 @@ <h2 id="cloakText" class="text-3xl font-bold mb-6">
 
     <footer class="p-4 bg-base-300 text-center">
       <p class="text-base-content">
-        &copy; 2024 Parcoil Network. All rights reserved.
+        &copy; 2024-2025 Parcoil Network. All rights reserved.
       </p>
     </footer>
 

diff --git a/demo/other.html b/demo/other.html
@@ -74,7 +74,7 @@ <h2 class="text-3xl font-bold mb-6">Select a Cloak:</h2>
 
     <footer class="p-4 bg-base-300 text-center">
       <p class="text-base-content">
-        &copy; 2024 Parcoil Network. All rights reserved.
+        &copy; 2024-2025 Parcoil Network. All rights reserved.
       </p>
     </footer>
 

diff --git a/demo/showcase.html b/demo/showcase.html
@@ -16,9 +16,9 @@
   <body class="min-h-screen bg-base-200">
     <div class="container mx-auto px-4 py-8">
       <main class="card bg-base-100 shadow-xl p-6">
-        <h1 class="text-3xl font-bold mb-6">CloakJS Showcase</h1>
+        <h1 class="text-3xl font-bold mb-6">Cloak.js Showcase</h1>
 
-        <p class="text-lg mb-8">Websites using CloakJS</p>
+        <p class="text-lg mb-8">Websites using Cloak.js</p>
 
         <div
           class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 justify-center items-center"
@@ -48,7 +48,7 @@ <h2 class="card-title">Lunaar.org</h2>
         </div>
       </main>
       <footer class="block mt-4 p-4 bg-base-300 rounded-lg footer">
-        &copy; 2024 Parcoil Network. All rights reserved.
+        &copy; 2024-2025 Parcoil Network. All rights reserved.
       </footer>
     </div>
     <script src="main.js"></script>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@parcoil/cloak",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Tab Cloaking lib",
   "main": "src/index.js",
   "repository": {

diff --git a/readme.md b/readme.md
@@ -1,6 +1,6 @@
-# CloakJS: Simplifying Tab Cloaking with JavaScript
+# Cloak.js: Simplifying Tab Cloaking with JavaScript
 
-CloakJS is a lightweight JavaScript library designed for easy tab cloaking.
+Cloak.js is a lightweight JavaScript library designed for easy tab cloaking.
 
 ## Demo
 
@@ -10,15 +10,15 @@ View a live demo at [http://cloak.parcoil.com/demo/](http://cloak.parcoil.com/de
 
 ## Get Started
 
-To start using CloakJS quickly use Jsdelivr:
+To start using Cloak.js quickly use Jsdelivr:
 
 ```html
 <script src="https://cdn.jsdelivr.net/gh/Parcoil/cloak@main/src/index.min.js"></script>
 ```
 
 ### Preparing Your Webpage
 
-Before using CloakJS, ensure your webpage is properly configured:
+Before using Cloak.js, ensure your webpage is properly configured:
 
 Ensure you have a favicon set:
 
@@ -60,9 +60,9 @@ To configure cloaks on your page:
 </script>
 ```
 
-## Using CloakJS APIs
+## Using Cloak.js APIs
 
-You can use the following APIs with CloakJS:
+You can use the following APIs with Cloak.js:
 
 - **getTitle()**: Get the current document title.
 

diff --git a/src/index.js b/src/index.js
@@ -8,68 +8,41 @@ const cloak = {
   setFavicon(url) {
     const icons = document.querySelectorAll('link[rel="icon"]');
     icons.forEach((icon) => (icon.href = url));
+    localStorage.setItem("cloakFavicon", url);
   },
   getTitle() {
     return document.title;
   },
   setTitle(newTitle) {
     document.title = newTitle;
+    localStorage.setItem("cloakTitle", newTitle);
   },
   setCloak(newTitle, url) {
     this.setTitle(newTitle);
     this.setFavicon(url);
-    localStorage.setItem("cloakTitle", newTitle);
-    localStorage.setItem("cloakFavicon", url);
   },
   init() {
-    let cloakTitle = localStorage.getItem("cloakTitle");
-    let cloakFavicon = localStorage.getItem("cloakFavicon");
-
-    if (!cloakTitle || !cloakFavicon) {
-      console.log(logo, "Initializing cloak settings...");
-      const newTitle = this.getTitle();
-      const newFavicon = this.getFavicon();
-      if (!cloakTitle) {
-        localStorage.setItem("cloakTitle", newTitle);
-      }
-      if (!cloakFavicon && newFavicon) {
-        localStorage.setItem("cloakFavicon", newFavicon);
-      }
-      cloakTitle = localStorage.getItem("cloakTitle");
-      cloakFavicon = localStorage.getItem("cloakFavicon");
-    }
-
-    this.setCloak(cloakTitle, cloakFavicon);
-  },
-  aboutBlank(url) {
-    if (!url) url = "https://www.google.com/search?q=how+many+seconds+in+a+day";
-    const newWindow = window.open();
-    const iframe = newWindow.document.createElement("iframe");
-    newWindow.document.body.style.margin = "0";
-    newWindow.document.body.style.height = "100vh";
-    iframe.src = window.location.href;
-    iframe.style.width = "100%";
-    iframe.style.height = "100%";
-    iframe.style.border = "none";
-    newWindow.document.body.appendChild(iframe);
-    window.location.replace(url);
+    console.warn(
+      logo,
+      "cloak.init() has been deprecated. theres no need to call it anymore."
+    );
   },
-  reset() {
+  reset(reload = true) {
     localStorage.removeItem("cloakTitle");
     localStorage.removeItem("cloakFavicon");
-    window.location.reload();
+    console.log(
+      logo,
+      "Cloak reset. Title and favicon will remain unset until needed."
+    );
+    if (reload === true) {
+      window.location.reload();
+    }
   },
 };
 
 window.cloak = cloak;
 
 document.addEventListener("DOMContentLoaded", () => {
-  let savedTitle = localStorage.getItem("cloakTitle");
-  let savedFavicon = localStorage.getItem("cloakFavicon");
-
-  cloak.setFavicon(savedFavicon);
-  cloak.setTitle(savedTitle);
-
   const cloakSelect = document.querySelector("[data-cloak-select]");
 
   if (cloakSelect) {
@@ -89,6 +62,11 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     });
   }
-});
 
-cloak.init();
+  const savedTitle = localStorage.getItem("cloakTitle");
+  const savedFavicon = localStorage.getItem("cloakFavicon");
+  if (savedTitle && savedFavicon) {
+    cloak.setTitle(savedTitle);
+    cloak.setFavicon(savedFavicon);
+  }
+});