split javascript file into multiple
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user