Removes Twitter and adds Mastodon & Bluesky

javierarce · Nov 26, 2024 · 357f99e · 357f99e
1 parent 842fc09
commit 357f99e
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 90 deletions.
diff --git a/favicon b/favicon
diff --git a/favicons/bluesky.png b/favicons/bluesky.png
diff --git a/favicons/mastodon.png b/favicons/mastodon.png
diff --git a/favicons/twitter.ico b/favicons/twitter.ico
diff --git a/index.html b/index.html
@@ -1,27 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>Favicon Chameleon. Makes your tab disappear when nobody is paying attention.</title>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link href="favicons/default.ico" rel="shortcut icon" type="image/x-icon">
-
-    <link rel="stylesheet" href="/style.css">
-
-    <script src="/script.js" defer></script>
-
-    <script type="text/javascript">
-      window.onload = () => {
-        new Chameleon(['twitter', 'gmail', 'tumblr'])
-      }
-    </script>
-  </head>  
-  <body>
-    <p>
-      Ok, now jump to another tab.
-    </p>
-  </body>
+
+<head>
+  <title>Favicon Chameleon. Makes your tab disappear when nobody is paying attention.</title>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link href="favicons/default.ico" rel="shortcut icon" type="image/x-icon">
+
+  <link rel="stylesheet" href="/style.css">
+
+  <script src="/script.js" defer></script>
+
+  <script type="text/javascript">
+    window.onload = () => {
+      new Chameleon(['mastodon', 'bluesky', 'gmail', 'tumblr'])
+    }
+  </script>
+</head>
+
+<body>
+  <p>
+    Ok, now jump to another tab.
+  </p>
+</body>
+
 </html>
diff --git a/script.js b/script.js
@@ -1,111 +1,130 @@
-const SERVICES = { 
+const SERVICES = {
   tumblr: () => {
-    let title = 'Tumblr'
-    let favicon = 'favicons/tumblr.ico'
+    let title = "Tumblr";
+    let favicon = "favicons/tumblr.ico";
 
     return {
-      title, favicon
-    }
+      title,
+      favicon,
+    };
   },
 
-  twitter: () => {
-    let title = 'Twitter'
-    let favicon = 'favicons/twitter.ico'
+  mastodon: () => {
+    let title = "Home - Mastodon";
+    let favicon = "favicons/mastodon.png";
 
     return {
-      title, favicon
-    }
+      title,
+      favicon,
+    };
+  },
+
+  bluesky: () => {
+    let title = "Following — Bluesky";
+    let favicon = "favicons/bluesky.png";
+
+    return {
+      title,
+      favicon,
+    };
   },
 
   gmail: () => {
-    let title      = 'Inbox'
-    let count      = Math.round(Math.random() * 12)
-    let emailCount = count
-    let gmailIcon  = 'favicons/gmail_'
+    let title = "Inbox";
+    let count = Math.round(Math.random() * 12);
+    let emailCount = count;
+    let gmailIcon = "favicons/gmail_";
 
     if (count === 11) {
-      count      = 50
-      emailCount = `${count}+`
+      count = 50;
+      emailCount = `${count}+`;
     } else if (count === 12) {
-      count      = 100
-      emailCount = `${count}+`
+      count = 100;
+      emailCount = `${count}+`;
     }
 
-    let favicon = `${gmailIcon}${count}.png`
+    let favicon = `${gmailIcon}${count}.png`;
 
     if (emailCount) {
-      title = `Inbox (${emailCount})`
+      title = `Inbox (${emailCount})`;
     }
 
     return {
-      title, favicon
-    }
-  } 
-}
+      title,
+      favicon,
+    };
+  },
+};
 
 class Chameleon {
-  constructor (enabledServices) {
-    this.enabledServices = enabledServices
-    this.services = SERVICES
-    this.hidden = 'hidden'
-    this.visibilityChange = 'visibilitychange'
-
-    this.favicon = document.querySelector("[rel='shortcut icon']").href
-    this.title = document.title
-    
-    this.init()
+  constructor(enabledServices) {
+    this.enabledServices = enabledServices;
+    this.services = SERVICES;
+    this.hidden = "hidden";
+    this.visibilityChange = "visibilitychange";
+
+    this.favicon = document.querySelector("[rel='shortcut icon']").href;
+    this.title = document.title;
+
+    this.init();
   }
 
-  init () {
-    if (typeof document.mozHidden !== 'undefined') {
-      this.hidden = 'mozHidden'
-      this.visibilityChange = 'mozvisibilitychange'
-    } else if (typeof document.msHidden !== 'undefined') {
-      this.hidden = 'msHidden'
-      this.visibilityChange = 'msvisibilitychange'
-    } else if (typeof document.webkitHidden !== 'undefined') {
-      this.hidden = 'webkitHidden'
-      this.visibilityChange = 'webkitvisibilitychange'
+  init() {
+    if (typeof document.mozHidden !== "undefined") {
+      this.hidden = "mozHidden";
+      this.visibilityChange = "mozvisibilitychange";
+    } else if (typeof document.msHidden !== "undefined") {
+      this.hidden = "msHidden";
+      this.visibilityChange = "msvisibilitychange";
+    } else if (typeof document.webkitHidden !== "undefined") {
+      this.hidden = "webkitHidden";
+      this.visibilityChange = "webkitvisibilitychange";
     }
 
-    document.addEventListener(this.visibilityChange, this.handleVisibilityChange.bind(this), false)
+    document.addEventListener(
+      this.visibilityChange,
+      this.handleVisibilityChange.bind(this),
+      false,
+    );
   }
 
-  setDefaultFavicon () {
-    let title = this.title
-    let favicon = this.favicon
+  setDefaultFavicon() {
+    let title = this.title;
+    let favicon = this.favicon;
 
-    this.updateFavicon({ title, favicon})
+    this.updateFavicon({ title, favicon });
   }
 
-  updateFavicon (data) {
-
-    let randomString = "?v=" + Math.round(Math.random() * 10000000)
-    let link  = document.createElement('link')
+  updateFavicon(data) {
+    let randomString = "?v=" + Math.round(Math.random() * 10000000);
+    let link = document.createElement("link");
 
-    link.type = 'image/x-icon'
-    link.rel  = 'shortcut icon'
-    link.href = data.favicon + randomString
+    link.type = "image/x-icon";
+    link.rel = "shortcut icon";
+    link.href = data.favicon + randomString;
 
-    document.getElementsByTagName('head')[0].querySelector("[rel='shortcut icon']").remove()
-    document.getElementsByTagName('head')[0].appendChild(link)
-    document.title = data.title
+    document
+      .getElementsByTagName("head")[0]
+      .querySelector("[rel='shortcut icon']")
+      .remove();
+    document.getElementsByTagName("head")[0].appendChild(link);
+    document.title = data.title;
   }
 
-  enableService () {
-    let i = Math.round(Math.random() * (this.enabledServices.length - 1))
-    let service = this.enabledServices[i]
+  enableService() {
+    let i = Math.round(Math.random() * (this.enabledServices.length - 1));
+    let service = this.enabledServices[i];
 
     if (service && this.services[service]) {
-      this.updateFavicon(this.services[service]())
+      this.updateFavicon(this.services[service]());
     }
   }
 
-  handleVisibilityChange () {
+  handleVisibilityChange() {
     if (document[this.hidden]) {
-      this.enableService()
+      this.enableService();
     } else {
-      this.setDefaultFavicon()
+      this.setDefaultFavicon();
     }
   }
 }