From b042394bfffcdba1bd2116aea06d8d1ed18203d9 Mon Sep 17 00:00:00 2001
From: Dave9123 <dave.turmawan@outlook.com>
Date: Fri, 17 May 2024 10:08:26 +0700
Subject: [PATCH] Custom favicon support

---
 static/worksheets/api/newloader.js | 51 ++++++++++++++++++++++++------
 static/worksheets/settings.html    |  5 +++
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/static/worksheets/api/newloader.js b/static/worksheets/api/newloader.js
index 3aacce6..f5a77f1 100644
--- a/static/worksheets/api/newloader.js
+++ b/static/worksheets/api/newloader.js
@@ -1,26 +1,56 @@
 // Get the form and form elements
 const form = document.getElementById('settings-form');
 const faviconSelect = form.elements['favicon'];
+const faviconURL = document.getElementById('faviconurl');
 const siteNameInput = form.elements['site-name'];
 const button = form.querySelector('button');
+const favicon = document.querySelector('link[rel="icon"]');
 
 // Get the saved settings, or set default values
 const savedSettings = JSON.parse(localStorage.getItem('site-settings')) || {};
 const defaultFavicon = '/worksheets/assets/favicon/gmail-16-16.png';
 const defaultSiteName = 'Inbox';
 
-// Set the default values
-faviconSelect.value = savedSettings.favicon || defaultFavicon;
-siteNameInput.value = savedSettings.siteName || defaultSiteName;
-
 // Apply the settings site-wide
-const favicon = document.querySelector('link[rel="icon"]');
-favicon.href = faviconSelect.value;
-document.title = siteNameInput.value;
+document.title = savedSettings.siteName || defaultSiteName;
+const options = Array.from(faviconSelect.options);
+
+// Check if the saved favicon is in the options
+const matchingOption = options.find(option => option.value === savedSettings.favicon);
+
+if (matchingOption) {
+  // If a matching option is found, set the select value to that
+  faviconSelect.value = savedSettings.favicon;
+  faviconURL.value = savedSettings.favicon;
+  favicon.href = savedSettings.favicon;
+} else if (savedSettings.custom) {
+  // If no matching option is found and custom is true, set the select value to "Custom"
+  faviconSelect.value = "Custom";
+  faviconURL.value = savedSettings.favicon;
+  favicon.href = savedSettings.favicon;
+} else {
+  // If no matching option and custom is false, use the default favicon
+  faviconSelect.value = defaultFavicon;
+  faviconURL.value = defaultFavicon;
+  favicon.href = defaultFavicon;
+}
+
+siteNameInput.value = savedSettings.siteName || defaultSiteName;
 
 // Update favicon and save settings when changed
 faviconSelect.addEventListener('change', () => {
-  favicon.href = faviconSelect.value;
+  if (faviconSelect.value === "Custom") {
+    favicon.href = faviconURL.value;
+  } else {
+    faviconURL.value = faviconSelect.value;
+    favicon.href = faviconSelect.value;
+  }
+  saveSettings();
+});
+
+faviconURL.addEventListener('change', () => {
+  faviconSelect.value = "Custom";
+  favicon.href = faviconURL.value;
   saveSettings();
 });
 
@@ -39,8 +69,9 @@ button.addEventListener('click', (event) => {
 // Save the settings to localStorage
 function saveSettings() {
   const settings = {
-    favicon: faviconSelect.value,
-    siteName: siteNameInput.value
+    favicon: faviconSelect.value === "Custom" ? faviconURL.value : faviconSelect.value,
+    siteName: siteNameInput.value,
+    custom: faviconSelect.value === "Custom"
   };
   localStorage.setItem('site-settings', JSON.stringify(settings));
   console.log("Settings saved!");
diff --git a/static/worksheets/settings.html b/static/worksheets/settings.html
index de87fc8..c445199 100644
--- a/static/worksheets/settings.html
+++ b/static/worksheets/settings.html
@@ -72,8 +72,13 @@ <h1>Tab Cloak</h1>
                     <option value="/worksheets/assets/favicon/logo.png">Astroid Logo</option>
                     <option value="/worksheets/assets/favicon/gmail-16-16.png">Gmail Logo</option>
                     <option value="/worksheets/assets/favicon/classroom-32-32.png">Classroom Logo</option>
+                    <option id="custom" value="Custom" disabled>Custom</option>
                   </select>
                   <br>
+                  <label for="faviconurl">Favicon URL:</label>
+                  <br>
+                  <input type="text" id="faviconurl">
+                  <br>
                   <label for="site-name">Site Name:</label>
                   <br>
                   <input type="text" id="site-name" name="site-name" value="My Site">