Increase Clarity & Unification

- Made Text Highlight Universal. - Changed Header Functions to Local Names to decrease conflict. - Updated documentation for header. - Change variables to be more specific named. - Add IDs to Home Tabs.
stanieldev · Nov 10, 2024 · 8c4a95e · 8c4a95e
1 parent 4d8842c
commit 8c4a95e
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 47 deletions.
diff --git a/.resources/styles/theme_light.css b/.resources/styles/theme_light.css
@@ -6,7 +6,7 @@
 }
 
 /* Increased accessibility  */
-.sdev-header__text-highlight {
+.sdev__text-highlight {
     text-decoration: underline !important;
 }
 .sdev-header__nav-link:hover {

diff --git a/.templates/header/README.md b/.templates/header/README.md
@@ -3,6 +3,7 @@ This template is used for creating a website header at the top of my webpages.
 
 ## Usage
 To use this template, place the following code in the header of your HTML file:
+
 ```html
 <!-- Load Template HTML -->
 <script
@@ -11,8 +12,11 @@ To use this template, place the following code in the header of your HTML file:
         crossorigin="anonymous">
 </script>
 <script defer>
-    $(function(){ $("#page-header").load("/.templates/header/header.html",
-        function(){ $("#sdev-header__nav_XXXX").addClass("sdev-header__text-highlight"); });
+    $(function () {
+        $("#page-header").load("/.templates/header/header.html",
+            function () {
+                $("#sdev-header__nav_XXXX").addClass("sdev__text-highlight");
+            });
     });
 </script>
 ```

diff --git a/.templates/header/header.css b/.templates/header/header.css
@@ -12,18 +12,6 @@
     --sdev-header__theme-transition: var(--theme-transition, 0.25s);
 }
 
-/* Overriding Classes */
-.sdev-header__text-highlight {
-    /* Text */
-    color: var(--text-highlight) !important;
-
-    /* Cursor */
-    cursor: default !important;
-
-    /* Transition */
-    transition: var(--sdev-header__theme-transition) !important;
-}
-
 /* Box Classes */
 .sdev-header__padded-row-list {
     /* Geometry */

diff --git a/.templates/header/header.html b/.templates/header/header.html
@@ -41,6 +41,7 @@
     <meta name="twitter:image" content="header.ico">
 
     <!-- Page Style(s) -->
+    <link rel="stylesheet" href="/.templates/page/default.css">
     <link rel="stylesheet" href="/.templates/header/header.css">
 
     <!-- Page Script(s) -->
@@ -56,7 +57,7 @@
 
     <!-- Directory Container -->
     <div id="sdev-header__directory" class="sdev-header__padded-row-list">
-        <img id="sdev-header__directory-icon" src="/.resources/icons/favicon.ico" alt="Logo" onclick="favicon()">
+        <img id="sdev-header__directory-icon" src="/.resources/icons/favicon.ico" alt="Logo" onclick="sdev_header__favicon()">
         <nav id="sdev-header__navbar" class="sdev-header__padded-row-list">
             <a class="sdev-header__nav-link" id="sdev-header__nav-home" href="/home">Home</a>|
             <a class="sdev-header__nav-link" id="sdev-header__nav-about-me" href="/about-me">About</a>|
@@ -70,6 +71,7 @@
     <div id="sdev-header__settings" class="sdev-header__padded-row-list">
         <div id="sdev-header__language" class="sdev-header__padded-row-list">
             <a class="sdev-header__lang-link" onclick="switchLanguage('EN')">EN</a>|
+            <a class="sdev-header__lang-link" onclick="switchLanguage('ES')">ES</a>|
             <a class="sdev-header__lang-link" onclick="switchLanguage('FR')">FR</a>
         </div>
         <div id="sdev-header__theme" class="sdev-header__padded-row-list">

diff --git a/.templates/header/header.js b/.templates/header/header.js
@@ -1,4 +1,4 @@
-function favicon() {
+function sdev_header__favicon() {
 	const audio = new Audio("/.resources/audio/favicon.mp3");
 	const L = 0.25; const R = 1.25;
 	audio.playbackRate = Math.random() * (R - L) + L;

diff --git a/.templates/page/default.css b/.templates/page/default.css
@@ -18,7 +18,7 @@ body {
 }
 
 /* Overriding Classes */
-.text-highlight {
+.sdev__text-highlight {
     /* Text */
     color: var(--text-highlight) !important;
 

diff --git a/.templates/scripts/switchLanguage.js b/.templates/scripts/switchLanguage.js
@@ -1,7 +1,7 @@
 // Constants
 DEFAULT_LANGUAGE = "EN";
 LANGUAGE_PARENT_ID = "sdev-header__language";
-TEXT_HIGHLIGHT_CLASS = "sdev-header__text-highlight";
+LANGUAGE_TEXT_HIGHLIGHT_CLASS = "sdev__text-highlight";
 loadLangStartup();
 
 // Page Startup
@@ -10,7 +10,7 @@ function loadLangStartup() {
 	// Add the highlight to the current language
 	const langID = fetchLocalStorage("lang", DEFAULT_LANGUAGE);
 	const langHTML = fetchObjectHTML(LANGUAGE_PARENT_ID, langID);
-		  langHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
+		  langHTML.classList.add(LANGUAGE_TEXT_HIGHLIGHT_CLASS);
 
 	// Load the content for the language
 	loadLangContent(langID);
@@ -25,11 +25,11 @@ function switchLanguage(langID) {
 	// Remove the highlight from the previous language
 	const previousLangID = fetchLocalStorage("lang");
 	const previousLangHTML = fetchObjectHTML(LANGUAGE_PARENT_ID, previousLangID);
-		  previousLangHTML.classList.remove(TEXT_HIGHLIGHT_CLASS);
+		  previousLangHTML.classList.remove(LANGUAGE_TEXT_HIGHLIGHT_CLASS);
 
 	// Highlight the clicked language
 	const langHTML = fetchObjectHTML(LANGUAGE_PARENT_ID, langID);
-		  langHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
+		  langHTML.classList.add(LANGUAGE_TEXT_HIGHLIGHT_CLASS);
 
 	// Save the selected language to the local storage
 	localStorage.setItem("lang", langID);

diff --git a/.templates/scripts/switchTheme.js b/.templates/scripts/switchTheme.js
@@ -1,7 +1,7 @@
 // Constants
 DEFAULT_THEME = "dark";
-TOGGLE_HTML = document.getElementById("sdev-header__theme-icon");
-BODY = document.getElementsByTagName("body")[0];
+THEME_TOGGLE_HTML = document.getElementById("sdev-header__theme-icon");
+PAGE_BODY_HTML = document.getElementsByTagName("body")[0];
 loadThemeStartup();
 
 // Page Startup
@@ -21,12 +21,12 @@ function switchTheme() {
 	if (current_theme === "dark") {
 		localStorage.setItem("theme", "light");  // Swap the theme in the local storage
 		loadLightMode();                         // Load the light mode
-		BODY.style.transition = "var(--theme-transition, 0.25s)";
+		PAGE_BODY_HTML.style.transition = "var(--theme-transition, 0.25s)";
 	}
 	else if (current_theme === "light") {
 		localStorage.setItem("theme", "dark");  // Swap the theme in the local storage
 		loadDarkMode();                         // Load the dark mode
-		BODY.style.transition = "var(--theme-transition, 0.25s)";
+		PAGE_BODY_HTML.style.transition = "var(--theme-transition, 0.25s)";
 	}
 	else {
 		console.error("Invalid Theme: " + current_theme);
@@ -36,15 +36,15 @@ function switchTheme() {
 // Load Themes
 function loadDarkMode() {
 	console.debug("Selected Theme: Dark");
-	TOGGLE_HTML.src = "/.resources/images/moon.png";
-	TOGGLE_HTML.style.filter = "invert(100%)";
+	THEME_TOGGLE_HTML.src = "/.resources/images/moon.png";
+	THEME_TOGGLE_HTML.style.filter = "invert(100%)";
 	delLightMode();
 	setDarkMode();
 }
 function loadLightMode() {
 	console.debug("Selected Theme: Light");
-	TOGGLE_HTML.src = "/.resources/images/sun.png";
-	TOGGLE_HTML.style.filter = "invert(0%)";
+	THEME_TOGGLE_HTML.src = "/.resources/images/sun.png";
+	THEME_TOGGLE_HTML.style.filter = "invert(0%)";
 	delDarkMode();
 	setLightMode();
 }

diff --git a/home/home.css b/home/home.css
@@ -1,5 +1,6 @@
-/* CSS Variables */
+/* Universal CSS Variables */
 :root {
+    /* Variables */
     --page-padding: 50px;
     --tab-spacing: 50px;
 }

diff --git a/home/index.html b/home/index.html
@@ -14,7 +14,7 @@
     </script>
     <script defer>
 		$(function(){ $("#page-header").load("/.templates/header/header.html",
-            function(){ $("#sdev-header__nav-home").addClass("sdev-header__text-highlight"); });
+            function(){ $("#sdev-header__nav-home").addClass("sdev__text-highlight"); });
         });
 		// $(function(){ $("#page-footer").load("/.templates/footer/footer.html"); });
     </script>
@@ -39,10 +39,10 @@
 <div id="TBD">
     <div id="title" class="sdev-row-list">Stanley Goodwin</div>
     <nav id="tile-grid-selector" class="tab-bar sdev-row-list">
-        <div class="tab" onclick="switchTab('home')">Home</div>
-        <div class="tab" onclick="switchTab('about')">About</div>
-        <div class="tab" onclick="switchTab('portfolio')">Portfolio</div>
-        <div class="tab" onclick="switchTab('contact')">Contact</div>
+        <div class="tab" id="tab-home" onclick="switchTab('home')">Home</div>
+        <div class="tab" id="tab-about" onclick="switchTab('about')">About</div>
+        <div class="tab" id="tab-portfolio" onclick="switchTab('portfolio')">Portfolio</div>
+        <div class="tab" id="tab-contact" onclick="switchTab('contact')">Contact</div>
     </nav>
     <div class="tile-grid"></div>
 </div>

diff --git a/home/switchTab.js b/home/switchTab.js
@@ -1,16 +1,16 @@
 // Constants
 DEFAULT_TAB = "home".toLowerCase();
-PARENT = "tile-grid-selector";
-TEXT_HIGHLIGHT_CLASS = "text-highlight";
+TAB_PARENT_ID = "tile-grid-selector";
+TAB_TEXT_HIGHLIGHT_CLASS = "sdev__text-highlight";
 loadTab();
 
 // Page Startup
 function loadTab() {
 
 	// Add the highlight to the current tab
 	const tabID = fetchLocalStorage("tab", DEFAULT_TAB);
-	const tabHTML = fetchObjectHTML(PARENT, tabID);
-	      tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
+	const tabHTML = fetchObjectHTML(TAB_PARENT_ID, tabID);
+	      tabHTML.classList.add(TAB_TEXT_HIGHLIGHT_CLASS);
 
 	// Load the content for the tab
 	loadTabContent(tabID);
@@ -19,20 +19,17 @@ function loadTab() {
 // Switch Tabs
 function switchTab(childPseudoID) {
 
-	// Convert the tabID to lowercase
-	childPseudoID = childPseudoID.toLowerCase();
-
 	// If the tab is already highlighted, ignore the click
 	if (fetchLocalStorage("tab") === childPseudoID) { return; }
 
 	// Remove the highlight from the previous tab
 	const previousTabID = fetchLocalStorage("tab");
-	const previousTabHTML = fetchObjectHTML(PARENT, previousTabID);
-	      previousTabHTML.classList.remove(TEXT_HIGHLIGHT_CLASS);
+	const previousTabHTML = fetchObjectHTML(TAB_PARENT_ID, previousTabID);
+	      previousTabHTML.classList.remove(TAB_TEXT_HIGHLIGHT_CLASS);
 
 	// Highlight the clicked tab
-	const tabHTML = fetchObjectHTML(PARENT, childPseudoID);
-	      tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
+	const tabHTML = fetchObjectHTML(TAB_PARENT_ID, childPseudoID);
+	      tabHTML.classList.add(TAB_TEXT_HIGHLIGHT_CLASS);
 
 	// Save the selected tab to the local storage
 	localStorage.setItem("tab", childPseudoID);