split javascript file into multiple
This commit is contained in:
+1
-1
@@ -79,7 +79,7 @@
|
|||||||
<div id="projects-section"></div>
|
<div id="projects-section"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="scripts/main_page.js"></script>
|
<script type="module" src="scripts/main.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
export function setCookie(name, value, maxAge) {
|
||||||
|
document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCookie(name) {
|
||||||
|
const cookies = document.cookie.split("; ");
|
||||||
|
|
||||||
|
for (let c of cookies) {
|
||||||
|
const [key, value] = c.split("=");
|
||||||
|
if (key === name) return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
export async function loadContent(lang) {
|
||||||
|
const response = await fetch(`./lang/${lang}.json`);
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function loadImageConfig() {
|
||||||
|
const response = await fetch("./config/img_config.json");
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
export function formatDate(date, locale) {
|
||||||
|
const dateObj = new Date(date);
|
||||||
|
|
||||||
|
if (isNaN(dateObj.getTime())) {
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Intl.DateTimeFormat(locale || "de-DE", {
|
||||||
|
dateStyle: "medium"
|
||||||
|
}).format(dateObj);
|
||||||
|
}
|
||||||
|
|
||||||
|
// "from <start> to <end>", with the wording taken from the language file.
|
||||||
|
export function formatDateRange(item) {
|
||||||
|
const startDate = formatDate(item.start, item.locale);
|
||||||
|
const endDate = formatDate(item.end, item.locale);
|
||||||
|
|
||||||
|
return item.from + "\n" + startDate + "\n" + item.to + "\n" + endDate;
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
// Creates an element with an optional class name and text content.
|
||||||
|
export function el(tag, className, text) {
|
||||||
|
const element = document.createElement(tag);
|
||||||
|
if (className) element.className = className;
|
||||||
|
if (text !== undefined) element.textContent = text;
|
||||||
|
return element;
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { loadContent, loadImageConfig } from "./core/data.js";
|
||||||
|
import { detectLanguage, setupLanguageDropdown } from "./ui/language.js";
|
||||||
|
import { setupThemeToggle } from "./ui/theme.js";
|
||||||
|
import { createNavbar, setupMobileNavbar, hideMobileNavbar } from "./ui/navbar.js";
|
||||||
|
import { setupScrollRestoration, restoreScroll, setupScrollSpy } from "./ui/scroll.js";
|
||||||
|
import { renderSidebarTop } from "./sections/sidebar.js";
|
||||||
|
import { renderIntroduction } from "./sections/introduction.js";
|
||||||
|
import { renderWork } from "./sections/work.js";
|
||||||
|
import { renderProjects } from "./sections/projects.js";
|
||||||
|
|
||||||
|
const lang = detectLanguage();
|
||||||
|
|
||||||
|
// Each control exists twice: sidebar (desktop) and mobile bar.
|
||||||
|
setupThemeToggle("themeToggle", ["themeToggle2"]);
|
||||||
|
setupThemeToggle("themeToggle2", ["themeToggle"]);
|
||||||
|
setupLanguageDropdown(lang, "lang-button", "lang-menu", "lang-dropdown");
|
||||||
|
setupLanguageDropdown(lang, "lang-button2", "lang-menu2", "lang-dropdown2");
|
||||||
|
|
||||||
|
setupScrollRestoration();
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
const data = await loadContent(lang);
|
||||||
|
const imageConfig = await loadImageConfig();
|
||||||
|
|
||||||
|
document.getElementById("website_title").textContent = data.title_website;
|
||||||
|
|
||||||
|
setupMobileNavbar();
|
||||||
|
const navbar = createNavbar();
|
||||||
|
const container = document.getElementById("projects-section");
|
||||||
|
|
||||||
|
renderSidebarTop(data);
|
||||||
|
renderIntroduction(data, navbar);
|
||||||
|
renderWork(container, navbar, data);
|
||||||
|
renderProjects(container, navbar, data, imageConfig);
|
||||||
|
|
||||||
|
restoreScroll();
|
||||||
|
setupScrollSpy();
|
||||||
|
hideMobileNavbar();
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
@@ -1,459 +0,0 @@
|
|||||||
let lang = getCookie("lang");
|
|
||||||
if (lang == null) {
|
|
||||||
lang = navigator.language.split("-")[0];
|
|
||||||
}
|
|
||||||
if (lang != "en" && lang != "de") {
|
|
||||||
lang = "en";
|
|
||||||
}
|
|
||||||
|
|
||||||
document.documentElement.lang = lang;
|
|
||||||
|
|
||||||
function setupLangDropdown(buttonId, menuId, dropdownId, themeToggle, themeToggleOthers) {
|
|
||||||
const toggle = document.getElementById(themeToggle);
|
|
||||||
const toggleElements = themeToggleOthers.map(id => document.getElementById(id));
|
|
||||||
|
|
||||||
toggle.addEventListener("change", () => {
|
|
||||||
document.documentElement.classList.toggle("dark", toggle.checked);
|
|
||||||
if (toggle.checked) {
|
|
||||||
setCookie("theme", "dark", 60 * 60 * 24 * 7);
|
|
||||||
toggleElements.forEach(element => {
|
|
||||||
element.checked = true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
setCookie("theme", "light", 60 * 60 * 24 * 7);
|
|
||||||
toggleElements.forEach(element => {
|
|
||||||
element.checked = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
const theme = getCookie("theme");
|
|
||||||
|
|
||||||
if (theme === "dark") {
|
|
||||||
document.documentElement.classList.add("dark");
|
|
||||||
toggle.checked = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const button = document.getElementById(buttonId);
|
|
||||||
const menu = document.getElementById(menuId);
|
|
||||||
const dropdown = document.getElementById(dropdownId);
|
|
||||||
const items = menu.querySelectorAll(".lang-item");
|
|
||||||
|
|
||||||
button.textContent = lang;
|
|
||||||
|
|
||||||
button.addEventListener("click", (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
items.forEach(item => {
|
|
||||||
item.classList.toggle("hidden", item.dataset.lang == lang);
|
|
||||||
});
|
|
||||||
|
|
||||||
menu.classList.toggle("hidden");
|
|
||||||
dropdown.classList.toggle("show-border");
|
|
||||||
});
|
|
||||||
|
|
||||||
items.forEach(item => {
|
|
||||||
item.addEventListener("click", () => {
|
|
||||||
const lang_selected = item.dataset.lang;
|
|
||||||
|
|
||||||
button.textContent = item.textContent;
|
|
||||||
|
|
||||||
menu.classList.add("hidden");
|
|
||||||
dropdown.classList.remove("show-border");
|
|
||||||
|
|
||||||
items.forEach(el => el.classList.add("hidden"));
|
|
||||||
|
|
||||||
setCookie("lang", lang_selected, "3600");
|
|
||||||
location.reload();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener("click", (e) => {
|
|
||||||
if (!e.target.closest(`#${dropdownId}`)) {
|
|
||||||
menu.classList.add("hidden");
|
|
||||||
dropdown.classList.remove("show-border");
|
|
||||||
items.forEach(el => el.classList.add("hidden"));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
setupLangDropdown("lang-button", "lang-menu", "lang-dropdown", "themeToggle", ["themeToggle2"]);
|
|
||||||
setupLangDropdown("lang-button2", "lang-menu2", "lang-dropdown2", "themeToggle2", ["themeToggle"]);
|
|
||||||
|
|
||||||
history.scrollRestoration = "manual";
|
|
||||||
|
|
||||||
function saveScroll() {
|
|
||||||
sessionStorage.setItem("scrollY", window.scrollY);
|
|
||||||
}
|
|
||||||
|
|
||||||
function restoreScroll() {
|
|
||||||
const scrollY = sessionStorage.getItem("scrollY");
|
|
||||||
if (scrollY !== null) {
|
|
||||||
|
|
||||||
document.documentElement.style.scrollBehavior = "auto";
|
|
||||||
|
|
||||||
window.scrollTo(0, parseInt(scrollY));
|
|
||||||
|
|
||||||
document.documentElement.style.scrollBehavior = "smooth";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("beforeunload", saveScroll);
|
|
||||||
|
|
||||||
function setupObserver() {
|
|
||||||
const sections = document.querySelectorAll("[data-nav]");
|
|
||||||
const navLinks = document.querySelectorAll(".nav-link");
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(entries => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
|
|
||||||
navLinks.forEach(link => {
|
|
||||||
link.classList.toggle(
|
|
||||||
"active",
|
|
||||||
link.dataset.target === entry.target.id
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, {
|
|
||||||
threshold: 0,
|
|
||||||
rootMargin: "-10% 0px -80% 0px"
|
|
||||||
});
|
|
||||||
|
|
||||||
sections.forEach(section => observer.observe(section));
|
|
||||||
}
|
|
||||||
|
|
||||||
function createDate(date, lang){
|
|
||||||
const dateObj = new Date(date);
|
|
||||||
|
|
||||||
if (isNaN(dateObj.getTime())) {
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
|
|
||||||
const formattedDate = new Intl.DateTimeFormat(lang || 'de-DE', {
|
|
||||||
dateStyle: 'medium'
|
|
||||||
}).format(dateObj);
|
|
||||||
|
|
||||||
return formattedDate
|
|
||||||
}
|
|
||||||
|
|
||||||
function StartEndDate(item){
|
|
||||||
const startDate = createDate(item.start, item.locale);
|
|
||||||
const endDate = createDate(item.end, item.locale);
|
|
||||||
|
|
||||||
return item.from + "\n" + startDate + "\n" + item.to + "\n" + endDate;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadData() {
|
|
||||||
const response = await fetch(`./lang/${lang}.json`);
|
|
||||||
const image_response = await fetch(`./config/img_config.json`)
|
|
||||||
const image_config = await image_response.json()
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
const website_title = document.getElementById("website_title");
|
|
||||||
website_title.textContent = data.title_website;
|
|
||||||
|
|
||||||
const introduction = document.getElementById("introduction");
|
|
||||||
const container = document.getElementById("projects-section");
|
|
||||||
const navbar = document.getElementById("navbar");
|
|
||||||
const sidebar_top = document.getElementById("sidebar-top-content");
|
|
||||||
|
|
||||||
const navbar_mobile = document.getElementById("navbar-mobile");
|
|
||||||
const button_mobile2 = document.getElementById("button-mobile");
|
|
||||||
|
|
||||||
document.addEventListener("click", (e) => {
|
|
||||||
if (!e.target.closest("#navbar-mobile") && !e.target.closest("#button-mobile") && !navbar_mobile.classList.contains("inactive")) {
|
|
||||||
navbar_mobile.classList.add("inactive");
|
|
||||||
button_mobile2.classList.remove("inactive");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const navbar_mobile_links = document.getElementById("navbar-mobile-links");
|
|
||||||
const button_navbar_mobile = document.createElement("button");
|
|
||||||
const button_mobile = document.getElementById("button-mobile");
|
|
||||||
button_navbar_mobile.textContent = "";
|
|
||||||
button_mobile.textContent = "";
|
|
||||||
button_navbar_mobile.classList = "button-mobile navbar";
|
|
||||||
navbar_mobile_links.appendChild(button_navbar_mobile);
|
|
||||||
button_navbar_mobile.addEventListener("click", () => {
|
|
||||||
navbar_mobile.classList.toggle("inactive");
|
|
||||||
button_mobile.classList.toggle("inactive");
|
|
||||||
});
|
|
||||||
button_mobile.addEventListener("click", () => {
|
|
||||||
navbar_mobile.classList.toggle("inactive");
|
|
||||||
button_mobile.classList.toggle("inactive");
|
|
||||||
});
|
|
||||||
|
|
||||||
const sidebar_top_status = document.createElement("p");
|
|
||||||
sidebar_top_status.textContent = data.status;
|
|
||||||
sidebar_top.appendChild(sidebar_top_status);
|
|
||||||
|
|
||||||
const sidebar_top_profession = document.createElement("p");
|
|
||||||
sidebar_top_profession.textContent = data.profession;
|
|
||||||
sidebar_top.appendChild(sidebar_top_profession);
|
|
||||||
|
|
||||||
const sidebar_top_workplace = document.createElement("p");
|
|
||||||
sidebar_top_workplace.textContent = data.workplace;
|
|
||||||
sidebar_top.appendChild(sidebar_top_workplace);
|
|
||||||
|
|
||||||
const headline_introduction = document.createElement("h1");
|
|
||||||
headline_introduction.textContent = data.title_introduction;
|
|
||||||
introduction.appendChild(headline_introduction);
|
|
||||||
|
|
||||||
const content_introduction = document.createElement("p");
|
|
||||||
content_introduction.textContent = data.content_introduction;
|
|
||||||
introduction.appendChild(content_introduction);
|
|
||||||
|
|
||||||
const github_link_introduction = document.createElement("a");
|
|
||||||
github_link_introduction.textContent = "GitHub ↗"
|
|
||||||
github_link_introduction.className = "text-link introduction";
|
|
||||||
github_link_introduction.href = "https://github.com/marvinkrausser";
|
|
||||||
github_link_introduction.target = "_blank";
|
|
||||||
github_link_introduction.rel = "noopener noreferrer";
|
|
||||||
introduction.appendChild(github_link_introduction);
|
|
||||||
|
|
||||||
create_navbar_entry(navbar, navbar_mobile_links, data.title_introduction, "introduction", 0);
|
|
||||||
|
|
||||||
const navbar_group_work = document.createElement("li");
|
|
||||||
navbar_group_work.className = "navbar-group";
|
|
||||||
navbar_group_work.textContent = data.navbar_group_work
|
|
||||||
navbar.appendChild(navbar_group_work);
|
|
||||||
|
|
||||||
|
|
||||||
data.content_work.forEach((item, j) => {
|
|
||||||
const project = document.createElement("section");
|
|
||||||
project.className = "project-section";
|
|
||||||
project.id = item.id;
|
|
||||||
project.setAttribute("data-nav", item.id);
|
|
||||||
container.appendChild(project);
|
|
||||||
|
|
||||||
create_navbar_entry(navbar, navbar_mobile_links, item.title, item.id, j + 1);
|
|
||||||
|
|
||||||
|
|
||||||
const header = document.createElement("div");
|
|
||||||
header.className = "section-header";
|
|
||||||
project.appendChild(header);
|
|
||||||
|
|
||||||
const headerTitle = document.createElement("h1");
|
|
||||||
headerTitle.className = "section-title";
|
|
||||||
headerTitle.textContent = item.title;
|
|
||||||
header.appendChild(headerTitle);
|
|
||||||
|
|
||||||
const headerDescRole = document.createElement("p");
|
|
||||||
headerDescRole.className = "section-desc";
|
|
||||||
headerDescRole.textContent = item.description;
|
|
||||||
header.appendChild(headerDescRole);
|
|
||||||
|
|
||||||
const headerDescCompany = document.createElement("p");
|
|
||||||
headerDescCompany.className = "section-desc";
|
|
||||||
headerDescCompany.textContent = StartEndDate(item) + "\n" + item.at + "\n" + item.company;
|
|
||||||
header.appendChild(headerDescCompany);
|
|
||||||
|
|
||||||
|
|
||||||
const techs = document.createElement("div");
|
|
||||||
techs.className = "tags";
|
|
||||||
header.appendChild(techs);
|
|
||||||
|
|
||||||
item.tech.forEach(tech_json => {
|
|
||||||
const tech = document.createElement("span");
|
|
||||||
tech.className = "tag";
|
|
||||||
tech.textContent = tech_json;
|
|
||||||
techs.appendChild(tech);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const tasks = document.createElement("div");
|
|
||||||
tasks.className = "tasks-div";
|
|
||||||
project.appendChild(tasks);
|
|
||||||
|
|
||||||
item.tasks.forEach(task_json => {
|
|
||||||
const task = document.createElement("div");
|
|
||||||
task.className = "task-div";
|
|
||||||
|
|
||||||
|
|
||||||
const taskTitle = document.createElement("span");
|
|
||||||
taskTitle.className = "task-title";
|
|
||||||
taskTitle.textContent = task_json.title + ": ";
|
|
||||||
task.appendChild(taskTitle);
|
|
||||||
|
|
||||||
const taskContent = document.createElement("span");
|
|
||||||
taskContent.className = "task-content";
|
|
||||||
taskContent.textContent = task_json.content;
|
|
||||||
task.appendChild(taskContent);
|
|
||||||
|
|
||||||
tasks.appendChild(task);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
const navbar_group_projects = document.createElement("li");
|
|
||||||
navbar_group_projects.className = "navbar-group";
|
|
||||||
navbar_group_projects.textContent = data.navbar_group_projects
|
|
||||||
navbar.appendChild(navbar_group_projects);
|
|
||||||
|
|
||||||
data.content_projects.forEach((item, j) => {
|
|
||||||
const project = document.createElement("section");
|
|
||||||
project.className = "project-section";
|
|
||||||
project.id = item.id;
|
|
||||||
project.setAttribute("data-nav", item.id);
|
|
||||||
container.appendChild(project);
|
|
||||||
|
|
||||||
create_navbar_entry(navbar, navbar_mobile_links, item.title, item.id, j + 1);
|
|
||||||
|
|
||||||
const header = document.createElement("div");
|
|
||||||
header.className = "section-header";
|
|
||||||
project.appendChild(header);
|
|
||||||
|
|
||||||
const headerTitle = document.createElement("h1");
|
|
||||||
headerTitle.className = "section-title";
|
|
||||||
headerTitle.textContent = item.title;
|
|
||||||
header.appendChild(headerTitle);
|
|
||||||
|
|
||||||
const headerDesc = document.createElement("p");
|
|
||||||
headerDesc.className = "section-desc";
|
|
||||||
headerDesc.textContent = item.description;
|
|
||||||
header.appendChild(headerDesc);
|
|
||||||
|
|
||||||
const tags = document.createElement("div");
|
|
||||||
tags.className = "tags";
|
|
||||||
header.appendChild(tags);
|
|
||||||
|
|
||||||
item.tags.forEach(tag_json => {
|
|
||||||
const tag = document.createElement("span");
|
|
||||||
tag.className = "tag";
|
|
||||||
tag.textContent = tag_json;
|
|
||||||
tags.appendChild(tag);
|
|
||||||
});
|
|
||||||
|
|
||||||
const content_blocks = document.createElement("div");
|
|
||||||
content_blocks.className = "content-blocks";
|
|
||||||
project.appendChild(content_blocks);
|
|
||||||
|
|
||||||
item.blocks.forEach((content, i) => {
|
|
||||||
const content_block = document.createElement("div");
|
|
||||||
content_block.className = "content-block";
|
|
||||||
content_blocks.appendChild(content_block);
|
|
||||||
|
|
||||||
const block_image = document.createElement("div");
|
|
||||||
|
|
||||||
const image = document.createElement("img");
|
|
||||||
const image_id = content.image;
|
|
||||||
const image_object = image_config.images.find(img => img.id === image_id);
|
|
||||||
image.className = image_object.image_pos;
|
|
||||||
image.src = image_object.image;
|
|
||||||
image.loading = "lazy";
|
|
||||||
block_image.appendChild(image);
|
|
||||||
|
|
||||||
const block_text = document.createElement("div");
|
|
||||||
|
|
||||||
const text_title = document.createElement("h2");
|
|
||||||
text_title.textContent = content.heading;
|
|
||||||
block_text.appendChild(text_title);
|
|
||||||
|
|
||||||
const parts = content.text.split("--link--");
|
|
||||||
const text_content = document.createElement("div");
|
|
||||||
text_content.className = "text-content";
|
|
||||||
block_text.appendChild(text_content);
|
|
||||||
|
|
||||||
parts.forEach((part, i) => {
|
|
||||||
const text = document.createElement("span");
|
|
||||||
text.textContent = part;
|
|
||||||
text_content.appendChild(text);
|
|
||||||
|
|
||||||
if (i < parts.length - 1) {
|
|
||||||
const link_list = content.links;
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = link_list[i].link;
|
|
||||||
a.textContent = link_list[i].desc;
|
|
||||||
a.target = "_blank";
|
|
||||||
a.rel = "noopener noreferrer";
|
|
||||||
a.className = "text-link";
|
|
||||||
|
|
||||||
text_content.appendChild(a);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (i % 2 == 1) {
|
|
||||||
block_image.className = "block-image right";
|
|
||||||
block_text.className = "block-text left";
|
|
||||||
content_block.appendChild(block_text);
|
|
||||||
content_block.appendChild(block_image);
|
|
||||||
} else {
|
|
||||||
block_image.className = "block-image left";
|
|
||||||
block_text.className = "block-text right";
|
|
||||||
content_block.appendChild(block_image);
|
|
||||||
content_block.appendChild(block_text);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const github_link = document.createElement("div");
|
|
||||||
github_link.className = "link-row";
|
|
||||||
project.appendChild(github_link);
|
|
||||||
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = item.github;
|
|
||||||
link.target = "_blank";
|
|
||||||
link.rel = "noopener noreferrer";
|
|
||||||
link.className = "text-link";
|
|
||||||
link.textContent = data.github_desc;
|
|
||||||
github_link.appendChild(link);
|
|
||||||
});
|
|
||||||
restoreScroll();
|
|
||||||
setupObserver();
|
|
||||||
|
|
||||||
navbar_mobile.classList.add("inactive");
|
|
||||||
}
|
|
||||||
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
function create_navbar_entry(navbar, navbar_mobile_links, title, id, j) {
|
|
||||||
const navbar_item = document.createElement("li");
|
|
||||||
navbar_item.className = "navbar-item";
|
|
||||||
navbar.appendChild(navbar_item);
|
|
||||||
|
|
||||||
const navbar_link = document.createElement("a");
|
|
||||||
navbar_link.className = "nav-link";
|
|
||||||
navbar_link.href = `#${id}`;
|
|
||||||
|
|
||||||
const idx = document.createElement("span");
|
|
||||||
idx.className = "idx";
|
|
||||||
idx.textContent = String(j).padStart(2, "0") + "\u00A0\u00A0\u00A0";
|
|
||||||
navbar_link.appendChild(idx);
|
|
||||||
|
|
||||||
const text = document.createTextNode(title);
|
|
||||||
navbar_link.appendChild(text);
|
|
||||||
navbar_link.dataset.target = id;
|
|
||||||
navbar_item.appendChild(navbar_link);
|
|
||||||
|
|
||||||
create_navbar_entry_mobile(navbar_mobile_links, title, id)
|
|
||||||
}
|
|
||||||
|
|
||||||
function create_navbar_entry_mobile(navbar_mobile_links, title, id) {
|
|
||||||
const navbar_item = document.createElement("li");
|
|
||||||
navbar_item.className = "navbar-item-mobile";
|
|
||||||
navbar_mobile_links.appendChild(navbar_item);
|
|
||||||
|
|
||||||
const navbar_link = document.createElement("a");
|
|
||||||
navbar_link.className = "nav-link-mobile";
|
|
||||||
navbar_link.href = `#${id}`;
|
|
||||||
navbar_link.textContent = title;
|
|
||||||
navbar_item.appendChild(navbar_link);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setCookie(name, value, maxAge) {
|
|
||||||
document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCookie(name) {
|
|
||||||
const cookies = document.cookie.split("; ");
|
|
||||||
|
|
||||||
for (let c of cookies) {
|
|
||||||
const [key, value] = c.split("=");
|
|
||||||
if (key === name) return value;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { el } from "../core/dom.js";
|
||||||
|
|
||||||
|
// Shared skeleton of work and project sections: <section> + header with title,
|
||||||
|
// plus the matching navbar entry.
|
||||||
|
export function createSection(container, navbar, item, index) {
|
||||||
|
const section = el("section", "project-section");
|
||||||
|
section.id = item.id;
|
||||||
|
section.setAttribute("data-nav", item.id);
|
||||||
|
container.appendChild(section);
|
||||||
|
|
||||||
|
navbar.addEntry(item.title, item.id, index + 1);
|
||||||
|
|
||||||
|
const header = el("div", "section-header");
|
||||||
|
section.appendChild(header);
|
||||||
|
header.appendChild(el("h1", "section-title", item.title));
|
||||||
|
|
||||||
|
return { section, header };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function appendDescription(header, text) {
|
||||||
|
header.appendChild(el("p", "section-desc", text));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function appendTags(header, tags) {
|
||||||
|
const tagList = el("div", "tags");
|
||||||
|
header.appendChild(tagList);
|
||||||
|
|
||||||
|
tags.forEach(tag => {
|
||||||
|
tagList.appendChild(el("span", "tag", tag));
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { el } from "../core/dom.js";
|
||||||
|
|
||||||
|
export function renderIntroduction(data, navbar) {
|
||||||
|
const introduction = document.getElementById("introduction");
|
||||||
|
|
||||||
|
introduction.appendChild(el("h1", "", data.title_introduction));
|
||||||
|
introduction.appendChild(el("p", "", data.content_introduction));
|
||||||
|
|
||||||
|
const githubLink = el("a", "text-link introduction", "GitHub ↗");
|
||||||
|
githubLink.href = "https://github.com/marvinkrausser";
|
||||||
|
githubLink.target = "_blank";
|
||||||
|
githubLink.rel = "noopener noreferrer";
|
||||||
|
introduction.appendChild(githubLink);
|
||||||
|
|
||||||
|
navbar.addEntry(data.title_introduction, "introduction", 0);
|
||||||
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
import { el } from "../core/dom.js";
|
||||||
|
import { createSection, appendDescription, appendTags } from "./common.js";
|
||||||
|
|
||||||
|
export function renderProjects(container, navbar, data, imageConfig) {
|
||||||
|
navbar.addGroup(data.navbar_group_projects);
|
||||||
|
|
||||||
|
data.content_projects.forEach((item, index) => {
|
||||||
|
const { section, header } = createSection(container, navbar, item, index);
|
||||||
|
|
||||||
|
appendDescription(header, item.description);
|
||||||
|
appendTags(header, item.tags);
|
||||||
|
|
||||||
|
const blocks = el("div", "content-blocks");
|
||||||
|
section.appendChild(blocks);
|
||||||
|
item.blocks.forEach((block, i) => {
|
||||||
|
blocks.appendChild(createBlock(block, i, imageConfig));
|
||||||
|
});
|
||||||
|
|
||||||
|
section.appendChild(createGithubLink(item.github, data.github_desc));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// One image + text block. Odd blocks put the image on the right.
|
||||||
|
function createBlock(block, index, imageConfig) {
|
||||||
|
const contentBlock = el("div", "content-block");
|
||||||
|
const blockImage = createImage(block.image, imageConfig);
|
||||||
|
const blockText = createText(block);
|
||||||
|
|
||||||
|
if (index % 2 == 1) {
|
||||||
|
blockImage.className = "block-image right";
|
||||||
|
blockText.className = "block-text left";
|
||||||
|
contentBlock.appendChild(blockText);
|
||||||
|
contentBlock.appendChild(blockImage);
|
||||||
|
} else {
|
||||||
|
blockImage.className = "block-image left";
|
||||||
|
blockText.className = "block-text right";
|
||||||
|
contentBlock.appendChild(blockImage);
|
||||||
|
contentBlock.appendChild(blockText);
|
||||||
|
}
|
||||||
|
|
||||||
|
return contentBlock;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createImage(imageId, imageConfig) {
|
||||||
|
const blockImage = el("div");
|
||||||
|
const imageObject = imageConfig.images.find(img => img.id === imageId);
|
||||||
|
|
||||||
|
const image = el("img", imageObject.image_pos);
|
||||||
|
image.src = imageObject.image;
|
||||||
|
image.loading = "lazy";
|
||||||
|
blockImage.appendChild(image);
|
||||||
|
|
||||||
|
return blockImage;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createText(block) {
|
||||||
|
const blockText = el("div");
|
||||||
|
blockText.appendChild(el("h2", "", block.heading));
|
||||||
|
|
||||||
|
// "--link--" in the text marks where the next entry of block.links goes.
|
||||||
|
const parts = block.text.split("--link--");
|
||||||
|
const textContent = el("div", "text-content");
|
||||||
|
blockText.appendChild(textContent);
|
||||||
|
|
||||||
|
parts.forEach((part, i) => {
|
||||||
|
textContent.appendChild(el("span", "", part));
|
||||||
|
|
||||||
|
if (i < parts.length - 1) {
|
||||||
|
const link = el("a", "text-link", block.links[i].desc);
|
||||||
|
link.href = block.links[i].link;
|
||||||
|
link.target = "_blank";
|
||||||
|
link.rel = "noopener noreferrer";
|
||||||
|
textContent.appendChild(link);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return blockText;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createGithubLink(url, text) {
|
||||||
|
const row = el("div", "link-row");
|
||||||
|
|
||||||
|
const link = el("a", "text-link", text);
|
||||||
|
link.href = url;
|
||||||
|
link.target = "_blank";
|
||||||
|
link.rel = "noopener noreferrer";
|
||||||
|
row.appendChild(link);
|
||||||
|
|
||||||
|
return row;
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { el } from "../core/dom.js";
|
||||||
|
|
||||||
|
// Status / profession / workplace lines below the name.
|
||||||
|
export function renderSidebarTop(data) {
|
||||||
|
const content = document.getElementById("sidebar-top-content");
|
||||||
|
|
||||||
|
content.appendChild(el("p", "", data.status));
|
||||||
|
content.appendChild(el("p", "", data.profession));
|
||||||
|
content.appendChild(el("p", "", data.workplace));
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { el } from "../core/dom.js";
|
||||||
|
import { formatDateRange } from "../core/dates.js";
|
||||||
|
import { createSection, appendDescription, appendTags } from "./common.js";
|
||||||
|
|
||||||
|
export function renderWork(container, navbar, data) {
|
||||||
|
navbar.addGroup(data.navbar_group_work);
|
||||||
|
|
||||||
|
data.content_work.forEach((item, index) => {
|
||||||
|
const { section, header } = createSection(container, navbar, item, index);
|
||||||
|
|
||||||
|
appendDescription(header, item.description);
|
||||||
|
appendDescription(header, formatDateRange(item) + "\n" + item.at + "\n" + item.company);
|
||||||
|
appendTags(header, item.tech);
|
||||||
|
|
||||||
|
section.appendChild(createTasks(item.tasks));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTasks(tasks) {
|
||||||
|
const tasksDiv = el("div", "tasks-div");
|
||||||
|
|
||||||
|
tasks.forEach(task => {
|
||||||
|
const taskDiv = el("div", "task-div");
|
||||||
|
taskDiv.appendChild(el("span", "task-title", task.title + ": "));
|
||||||
|
taskDiv.appendChild(el("span", "task-content", task.content));
|
||||||
|
tasksDiv.appendChild(taskDiv);
|
||||||
|
});
|
||||||
|
|
||||||
|
return tasksDiv;
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import { getCookie, setCookie } from "../core/cookies.js";
|
||||||
|
|
||||||
|
const SUPPORTED_LANGUAGES = ["en", "de"];
|
||||||
|
|
||||||
|
// Language from cookie, else browser language, else "en".
|
||||||
|
export function detectLanguage() {
|
||||||
|
let lang = getCookie("lang");
|
||||||
|
if (lang == null) {
|
||||||
|
lang = navigator.language.split("-")[0];
|
||||||
|
}
|
||||||
|
if (!SUPPORTED_LANGUAGES.includes(lang)) {
|
||||||
|
lang = "en";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.documentElement.lang = lang;
|
||||||
|
return lang;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setupLanguageDropdown(lang, buttonId, menuId, dropdownId) {
|
||||||
|
const button = document.getElementById(buttonId);
|
||||||
|
const menu = document.getElementById(menuId);
|
||||||
|
const dropdown = document.getElementById(dropdownId);
|
||||||
|
const items = menu.querySelectorAll(".lang-item");
|
||||||
|
|
||||||
|
button.textContent = lang;
|
||||||
|
|
||||||
|
button.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
items.forEach(item => {
|
||||||
|
item.classList.toggle("hidden", item.dataset.lang == lang);
|
||||||
|
});
|
||||||
|
|
||||||
|
menu.classList.toggle("hidden");
|
||||||
|
dropdown.classList.toggle("show-border");
|
||||||
|
});
|
||||||
|
|
||||||
|
items.forEach(item => {
|
||||||
|
item.addEventListener("click", () => {
|
||||||
|
const lang_selected = item.dataset.lang;
|
||||||
|
|
||||||
|
button.textContent = item.textContent;
|
||||||
|
|
||||||
|
menu.classList.add("hidden");
|
||||||
|
dropdown.classList.remove("show-border");
|
||||||
|
|
||||||
|
items.forEach(el => el.classList.add("hidden"));
|
||||||
|
|
||||||
|
setCookie("lang", lang_selected, "3600");
|
||||||
|
location.reload();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("click", (e) => {
|
||||||
|
if (!e.target.closest(`#${dropdownId}`)) {
|
||||||
|
menu.classList.add("hidden");
|
||||||
|
dropdown.classList.remove("show-border");
|
||||||
|
items.forEach(el => el.classList.add("hidden"));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
import { el } from "../core/dom.js";
|
||||||
|
|
||||||
|
const navbarMobile = () => document.getElementById("navbar-mobile");
|
||||||
|
const openButton = () => document.getElementById("button-mobile");
|
||||||
|
|
||||||
|
// Mobile bar: open/close buttons and closing on outside click.
|
||||||
|
export function setupMobileNavbar() {
|
||||||
|
const navbar = navbarMobile();
|
||||||
|
const button = openButton();
|
||||||
|
const links = document.getElementById("navbar-mobile-links");
|
||||||
|
|
||||||
|
const toggle = () => {
|
||||||
|
navbar.classList.toggle("inactive");
|
||||||
|
button.classList.toggle("inactive");
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("click", (e) => {
|
||||||
|
if (!e.target.closest("#navbar-mobile") && !e.target.closest("#button-mobile") && !navbar.classList.contains("inactive")) {
|
||||||
|
navbar.classList.add("inactive");
|
||||||
|
button.classList.remove("inactive");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const closeButton = el("button", "button-mobile navbar", "");
|
||||||
|
links.appendChild(closeButton);
|
||||||
|
closeButton.addEventListener("click", toggle);
|
||||||
|
|
||||||
|
button.textContent = "";
|
||||||
|
button.addEventListener("click", toggle);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hideMobileNavbar() {
|
||||||
|
navbarMobile().classList.add("inactive");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Desktop sidebar navigation and mobile bar links, filled together.
|
||||||
|
export function createNavbar() {
|
||||||
|
const desktop = document.getElementById("navbar");
|
||||||
|
const mobile = document.getElementById("navbar-mobile-links");
|
||||||
|
|
||||||
|
return {
|
||||||
|
addGroup(title) {
|
||||||
|
desktop.appendChild(el("li", "navbar-group", title));
|
||||||
|
},
|
||||||
|
|
||||||
|
addEntry(title, id, index) {
|
||||||
|
addDesktopEntry(desktop, title, id, index);
|
||||||
|
addMobileEntry(mobile, title, id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function addDesktopEntry(navbar, title, id, index) {
|
||||||
|
const item = el("li", "navbar-item");
|
||||||
|
navbar.appendChild(item);
|
||||||
|
|
||||||
|
const link = el("a", "nav-link");
|
||||||
|
link.href = `#${id}`;
|
||||||
|
link.dataset.target = id;
|
||||||
|
item.appendChild(link);
|
||||||
|
|
||||||
|
link.appendChild(el("span", "idx", String(index).padStart(2, "0") + " "));
|
||||||
|
link.appendChild(document.createTextNode(title));
|
||||||
|
}
|
||||||
|
|
||||||
|
function addMobileEntry(navbar, title, id) {
|
||||||
|
const item = el("li", "navbar-item-mobile");
|
||||||
|
navbar.appendChild(item);
|
||||||
|
|
||||||
|
const link = el("a", "nav-link-mobile", title);
|
||||||
|
link.href = `#${id}`;
|
||||||
|
item.appendChild(link);
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
// Scroll position restore across reloads (e.g. after switching language).
|
||||||
|
|
||||||
|
function saveScroll() {
|
||||||
|
sessionStorage.setItem("scrollY", window.scrollY);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setupScrollRestoration() {
|
||||||
|
history.scrollRestoration = "manual";
|
||||||
|
window.addEventListener("beforeunload", saveScroll);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function restoreScroll() {
|
||||||
|
const scrollY = sessionStorage.getItem("scrollY");
|
||||||
|
if (scrollY !== null) {
|
||||||
|
|
||||||
|
document.documentElement.style.scrollBehavior = "auto";
|
||||||
|
|
||||||
|
window.scrollTo(0, parseInt(scrollY));
|
||||||
|
|
||||||
|
document.documentElement.style.scrollBehavior = "smooth";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Highlights the sidebar link of the section currently in view.
|
||||||
|
export function setupScrollSpy() {
|
||||||
|
const sections = document.querySelectorAll("[data-nav]");
|
||||||
|
const navLinks = document.querySelectorAll(".nav-link");
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(entries => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
link.classList.toggle(
|
||||||
|
"active",
|
||||||
|
link.dataset.target === entry.target.id
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
threshold: 0,
|
||||||
|
rootMargin: "-10% 0px -80% 0px"
|
||||||
|
});
|
||||||
|
|
||||||
|
sections.forEach(section => observer.observe(section));
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { getCookie, setCookie } from "../core/cookies.js";
|
||||||
|
|
||||||
|
const THEME_MAX_AGE = 60 * 60 * 24 * 7;
|
||||||
|
|
||||||
|
// Wires a dark-mode toggle and keeps the other toggles (sidebar / mobile bar) in sync.
|
||||||
|
export function setupThemeToggle(toggleId, otherToggleIds) {
|
||||||
|
const toggle = document.getElementById(toggleId);
|
||||||
|
const otherToggles = otherToggleIds.map(id => document.getElementById(id));
|
||||||
|
|
||||||
|
toggle.addEventListener("change", () => {
|
||||||
|
document.documentElement.classList.toggle("dark", toggle.checked);
|
||||||
|
setCookie("theme", toggle.checked ? "dark" : "light", THEME_MAX_AGE);
|
||||||
|
otherToggles.forEach(other => {
|
||||||
|
other.checked = toggle.checked;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (getCookie("theme") === "dark") {
|
||||||
|
document.documentElement.classList.add("dark");
|
||||||
|
toggle.checked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
/* Work / career sections.
|
/* Work / career sections.
|
||||||
DOM (see loadData in main_page.js):
|
DOM (see scripts/sections/work.js):
|
||||||
.section-header > h1 + p.section-desc (role) + p.section-desc (dates, company) + .tags
|
.section-header > h1 + p.section-desc (role) + p.section-desc (dates, company) + .tags
|
||||||
.tasks-div > .task-div > span.task-title + span.task-content */
|
.tasks-div > .task-div > span.task-title + span.task-content */
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user