Add responsive <title> and favicons

diff --git a/app/archived.html b/app/archived.html
index de976587c862224914979a3d713f5d430ab635cc..decbf489f810acf55c551693053196631991adff 100644 (file)
--- a/app/archived.html
+++ b/app/archived.html
@@ -3,6 +3,7 @@
   <head>
     <title>todo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" id="favicon">
     <link rel="stylesheet" type="text/css" href="./style.css">
     <script src="./todos.js" defer></script>
   </head>

diff --git a/app/favicon-notify.ico b/app/favicon-notify.ico
new file mode 100644 (file)
index 0000000..d975b88
Binary files /dev/null and b/app/favicon-notify.ico differ

diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644 (file)
index 0000000..98d52cf
Binary files /dev/null and b/app/favicon.ico differ

diff --git a/app/index.html b/app/index.html
index 38a55776a891108327cea5a83ba3ac1f94beeffa..d94cf6f45b025f52ca21ad8f742e14f1f4bc5834 100644 (file)
--- a/app/index.html
+++ b/app/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>todo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" id="favicon">
     <link rel="stylesheet" type="text/css" href="./style.css">
     <script src="./todos.js" defer></script>
   </head>

diff --git a/app/settings.html b/app/settings.html
index a2c629bf6d7541ee6d88d0d3550bc5d9edc501b5..49c3ad194f96125f2fb3bae15aa22ca4e93590e3 100644 (file)
--- a/app/settings.html
+++ b/app/settings.html
@@ -3,6 +3,7 @@
   <head>
     <title>todo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" id="favicon">
     <link rel="stylesheet" type="text/css" href="./style.css">
     <script src="./settings.js" defer></script>
   </head>

diff --git a/app/settings.js b/app/settings.js
index 6ce9df7bf3cc0fc78bc1cda5ba2123a33a830ad8..d0083b3d8859275ed36c53661587c491a8954cd0 100644 (file)
--- a/app/settings.js
+++ b/app/settings.js
@@ -114,6 +114,24 @@ const dispatchThemesSelectUpdate = () => {
   }
 }
 
+const titleElement = document.getElementsByTagName("title")[0];
+const faviconElement = document.getElementById("favicon");
+
+const updateHeaders = (notify = todos.uncompleted.length > 0) => {
+
+  if (notify) {
+
+    titleElement.innerHTML = `todo (${todos.uncompleted.length})`;
+    faviconElement.href = "./favicon-notify.ico";
+  } else {
+
+    titleElement.innerHTML = "todo";
+    faviconElement.href = "./favicon.ico";
+  }
+}
+
+updateHeaders();
+
 const updateTheme = (force = false) => {
 
   if (theme.colorScheme != "default" || true) {

diff --git a/app/todos.js b/app/todos.js
index 356bf96638c0bd18a6e28e811c76e4a85db34692..c90b6734a77f96daae29a5315a0ca22bb03db444 100644 (file)
--- a/app/todos.js
+++ b/app/todos.js
@@ -62,6 +62,7 @@ if (page == "home") document.getElementById("createTodo").addEventListener("clic
     }
   ].concat(todos.uncompleted);
 
+  updateHeaders(true);
   hydrateUncompleted();
   applyListeners();
   document.getElementById("todo-uncompleted-0-description").focus();
@@ -268,8 +269,26 @@ const hydrateCompleted = () => {
     .join("");
 }
 
+const titleElement = document.getElementsByTagName("title")[0];
+const faviconElement = document.getElementById("favicon");
+
+const updateHeaders = (notify = todos.uncompleted.length > 0) => {
+
+  if (notify) {
+
+    titleElement.innerHTML = `todo (${todos.uncompleted.length})`;
+    faviconElement.href = "./favicon-notify.ico";
+  } else {
+
+    titleElement.innerHTML = "todo";
+    faviconElement.href = "./favicon.ico";
+  }
+}
+
 const hydrateTodos = () => {
 
+  updateHeaders();
+
   if (page == "archived") hydrateArchived();
   if (page == "home") {