Skip to content

Commit

Permalink
Fixed home
Browse files Browse the repository at this point in the history
  • Loading branch information
@stanieldev
stanieldev committed Nov 2, 2024
1 parent 69b4f35 commit 18e2b56
Show file tree
Hide file tree
Showing 7 changed files with 76 additions and 68 deletions.
16 changes: 8 additions & 8 deletions .templates/header/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@

<!-- Page Script(s) -->
<script src="/.templates/scripts/fetching.js"></script>
<script src="/.templates/header/header.js"></script>
<script src="/.templates/header/switchTheme.js"></script>
<script src="/.templates/header/switchLanguage.js"></script>
<script defer src="/.templates/header/header.js"></script>
<script defer src="/.templates/scripts/switchTheme.js"></script>
<script defer src="/.templates/scripts/switchLanguage.js"></script>
</head>


Expand All @@ -58,11 +58,11 @@
<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()">
<nav id="sdev-header__navbar" class="sdev-header__padded-row-list">
<a class="sdev-header__nav-link" href="/home">Home</a>|
<a class="sdev-header__nav-link" href="/about-me">About</a>|
<a class="sdev-header__nav-link" href="/portfolio">Portfolio</a>|
<a class="sdev-header__nav-link" href="/contact">Contact</a>|
<a class="sdev-header__nav-link" href="/console">Console</a>
<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>|
<a class="sdev-header__nav-link" id="sdev-header__nav_portfolio" href="/portfolio">Portfolio</a>|
<a class="sdev-header__nav-link" id="sdev-header__nav_contact" href="/contact">Contact</a>|
<a class="sdev-header__nav-link" id="sdev-header__nav_console" href="/console">Console</a>
</nav>
</div>

Expand Down
20 changes: 9 additions & 11 deletions .templates/header/switchLanguage.js → .templates/scripts/switchLanguage.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
// Constants
PARENT = "sdev-header__language";
DEFAULT_LANGUAGE = "EN";
TEXT_HIGHLIGHT_CLASS = "sdev-header__text-highlight";
PARENT_ID = "sdev-header__language";
HEADER_TEXT_HIGHLIGHT_CLASS = "sdev-header__text-highlight";
loadLangStartup();

// Page Startup
function loadLangStartup() {

// Fetch the language from the local storage
// Add the highlight to the current language
const langID = fetchLocalStorage("lang", DEFAULT_LANGUAGE);

// Highlight the stored language
const langHTML = fetchObjectHTML(PARENT, langID);
langHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
const langHTML = fetchObjectHTML(PARENT_ID, langID);
langHTML.classList.add(HEADER_TEXT_HIGHLIGHT_CLASS);

// Load the content for the language
loadLangContent(langID);
Expand All @@ -26,12 +24,12 @@ function switchLanguage(langID) {

// Remove the highlight from the previous language
const previousLangID = fetchLocalStorage("lang");
const previousLangHTML = fetchObjectHTML(PARENT, previousLangID);
previousLangHTML.classList.remove(TEXT_HIGHLIGHT_CLASS);
const previousLangHTML = fetchObjectHTML(PARENT_ID, previousLangID);
previousLangHTML.classList.remove(HEADER_TEXT_HIGHLIGHT_CLASS);

// Highlight the clicked language
const langHTML = fetchObjectHTML(PARENT, langID);
langHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
const langHTML = fetchObjectHTML(PARENT_ID, langID);
langHTML.classList.add(HEADER_TEXT_HIGHLIGHT_CLASS);

// Save the selected language to the local storage
localStorage.setItem("lang", langID);
Expand Down
45 changes: 19 additions & 26 deletions .templates/header/switchTheme.js → .templates/scripts/switchTheme.js
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,50 @@
// Constants
PARENT = "sdev-header__theme";
DEFAULT_THEME = "dark";
THEME_ICON_HTML = document.getElementById("sdev-header__theme-icon");
TOGGLE_HTML = document.getElementById("sdev-header__theme-icon");
BODY = document.getElementsByTagName("body")[0];
loadThemeStartup();

// Page Startup
function loadThemeStartup() {

// Fetch the theme from the local storage
const theme = fetchLocalStorage("theme", "light");

// Load the theme in the page
if (theme === "dark") { loadDarkMode(); }
const theme = fetchLocalStorage("theme", DEFAULT_THEME);
if (theme === "dark") { loadDarkMode(); }
else { loadLightMode(); }
}

// Switch Theme
function switchTheme() {

// Fetch the theme from the local storage
const theme = localStorage.getItem("theme");
const current_theme = fetchLocalStorage("theme");

// Change the theme
if (theme === "dark") {

// Swap the theme in the local storage
localStorage.setItem("theme", "light");

// Load the light mode
loadLightMode();
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)";
}
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)";
}
else {

// Swap the theme in the local storage
localStorage.setItem("theme", "dark");

// Load the dark mode
loadDarkMode();
console.error("Invalid Theme: " + current_theme);
}
}

// Load Themes
function loadDarkMode() {
console.debug("Selected Theme: Dark");
THEME_ICON_HTML.src = "/.resources/images/moon.png";
THEME_ICON_HTML.style.filter = "invert(100%)";
TOGGLE_HTML.src = "/.resources/images/moon.png";
TOGGLE_HTML.style.filter = "invert(100%)";
delLightMode();
setDarkMode();
}
function loadLightMode() {
console.debug("Selected Theme: Light");
THEME_ICON_HTML.src = "/.resources/images/sun.png";
THEME_ICON_HTML.style.filter = "invert(0%)";
TOGGLE_HTML.src = "/.resources/images/sun.png";
TOGGLE_HTML.style.filter = "invert(0%)";
delDarkMode();
setLightMode();
}
Expand Down
23 changes: 23 additions & 0 deletions .templates/scripts/toggles.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
function tabSwitch(ID, executable) {

// Constants
const TAB_HTML = document.getElementById(ID);
const PARENT_HTML = TAB_HTML.parentNode;

// Only highlight the selected tab
for (let i = 0; i < PARENT_HTML.children.length; i++) {
PARENT_HTML.children[i].classList.remove('text-highlight');
}
TAB_HTML.classList.add('text-highlight');

// Execute the function that corresponds to the tab
executable(ID);
}



// Page Startup
function loadLangStartup() {
const LANG = fetchLocalStorage("lang", "EN");
tabSwitch(LANG, switchLanguage);
}
16 changes: 7 additions & 9 deletions home/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,6 @@
--tab-spacing: 50px;
}





.text-highlight, .tab:hover {
text-decoration: underline !important;
}


/* Box Classes */
.tab-bar {
/* Geometry */
Expand All @@ -29,7 +20,14 @@
/* Box Objects */

/* Item Classes */
.tab {
/* Transition */
transition: var(--theme-transition);
}
.tab:hover {
/* Text */
color: var(--text-highlight);

/* Cursor */
cursor: pointer;
}
Expand Down
8 changes: 5 additions & 3 deletions home/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
crossorigin="anonymous">
</script>
<script defer>
$(function(){ $("#page-header").load("/.templates/header/header.html"); });
$(function(){ $("#page-header").load("/.templates/header/header.html",
function(){ $("#sdev-header__nav_home").addClass("sdev-header__text-highlight"); });
});
// $(function(){ $("#page-footer").load("/.templates/footer/footer.html"); });
</script>

Expand All @@ -23,8 +25,8 @@

<!-- Page Script(s) -->
<script src="/.templates/scripts/fetching.js"></script>
<script src="/home/home.js"></script>
<script src="/home/switchTab.js"></script>
<script defer src="/home/home.js"></script>
<script defer src="/home/switchTab.js"></script>
</head>


Expand Down
16 changes: 5 additions & 11 deletions home/switchTab.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,16 @@
// Constants
PARENT = "tile-grid-selector";
DEFAULT_TAB = "home".toLowerCase();
PARENT = "tile-grid-selector";
TEXT_HIGHLIGHT_CLASS = "text-highlight";
loadTab();


// TODO THIS IS BROKEN, FIX IT


// Page Startup
function loadTab() {

// Fetch the tab from the local storage
// Add the highlight to the current tab
const tabID = fetchLocalStorage("tab", DEFAULT_TAB);

// Highlight the stored tab
const tabHTML = fetchObjectHTML(PARENT, tabID);
tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS);

// Load the content for the tab
loadTabContent(tabID);
Expand All @@ -34,11 +28,11 @@ function switchTab(childPseudoID) {
// Remove the highlight from the previous tab
const previousTabID = fetchLocalStorage("tab");
const previousTabHTML = fetchObjectHTML(PARENT, previousTabID);
previousTabHTML.classList.remove(TEXT_HIGHLIGHT_CLASS);
previousTabHTML.classList.remove(TEXT_HIGHLIGHT_CLASS);

// Highlight the clicked tab
const tabHTML = fetchObjectHTML(PARENT, childPseudoID);
tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS);

// Save the selected tab to the local storage
localStorage.setItem("tab", childPseudoID);
Expand Down

0 comments on commit 18e2b56

Please sign in to comment.