startpage/static/customize.js

window.addEventListener("load", main);

function main() {
	const bgColor = document.querySelector("#bg-color");
	const fgColor = document.querySelector("#fg-color");
	const borderRadius = document.querySelector("#border-radius");

	bgColor.addEventListener("change", () => document.body.style.backgroundColor = bgColor.value);
	fgColor.addEventListener("change", () => document.body.style.color = fgColor.value);
	borderRadius.addEventListener("change", () => document.querySelector(":root").style.setProperty("--bookmark-border-radius", borderRadius.value));

	const save = document.querySelector("#button");
	save.addEventListener("click", saveChanges);

	const addBookmark = document.querySelector("#add-bookmark");
	const firstBookmark = document.querySelector(".customizer");

	addBookmark.style.width = `${firstBookmark.offsetWidth}px`;
	addBookmark.style.height = `${firstBookmark.offsetHeight}px`;
	addBookmark.style.lineHeight = `${firstBookmark.offsetHeight}px`;

	addBookmark.addEventListener("click", () => {
		const bookmark = firstBookmark.cloneNode(true);
		initBookmark(bookmark);
		clearBookmarkData(bookmark);
		document.querySelector("#customize-container").insertBefore(bookmark, addBookmark);
	});

	document.querySelectorAll(".customizer").forEach(initBookmark);
}

function saveChanges() {
	const bookmarks = [];
	document.querySelectorAll(".customizer").forEach(element => bookmarks.push(buildDataForBoomark(element)));
	
	const settings = {
		background_color: document.querySelector("#bg-color").value,
		foreground_color: document.querySelector("#fg-color").value,
		search_query: document.querySelector("#search-string").value,
		border_radius: document.querySelector("#border-radius").value
	};

	const data = { bookmarks, settings }
	console.log(data);

	fetch("/save-changes", {
		method: "POST",
		body: JSON.stringify(data)
	}).then(() => {
		window.location = "/";
	})
}

function buildDataForBoomark(element) {
	const form = element.querySelector("form");

	const title = form.querySelector("#bookmark-name");
	const link = form.querySelector("#bookmark-link");
	const image = form.querySelector("#bookmark-image");
	const imageSize = form.querySelector("#bookmark-imagesize");
	const iconPadding = form.querySelector("#bookmark-iconpadding");
	const color = form.querySelector("#bookmark-color");
	const hideBorder = form.querySelector("#bookmark-border");
	const order = form.querySelector("#bookmark-order");

	return {
		title: title.value,
		image: image.value,
		image_size: imageSize.value,
		icon_padding: iconPadding.value,
		color: color.value,
		link: link.value,
		hide_border: hideBorder.checked,
		order: parseInt(order.value)
	};
}

function clearBookmarkData(bookmark) {
	const a = bookmark.querySelector(".bookmark");
	const form = bookmark.querySelector("form");
	const bg = a.querySelector(".background");

	const title = form.querySelector("#bookmark-name");
	const link = form.querySelector("#bookmark-link");
	const image = form.querySelector("#bookmark-image");
	const imageSize = form.querySelector("#bookmark-imagesize");
	const iconPadding = form.querySelector("#bookmark-iconpadding");
	const color = form.querySelector("#bookmark-color");
	const hideBorder = form.querySelector("#bookmark-border");
	const order = form.querySelector("#bookmark-order");

	let orderValue = 0;
	document.querySelectorAll(".customizer").forEach(element => {
		orderValue = Math.max(orderValue, element.querySelector("#bookmark-order").value);
	});

	title.value = "";
	link.value = "";
	image.value = "";
	imageSize.value = "contain";
	iconPadding.value = "";
	color.value = "#ffffff";
	hideBorder.value = false;
	order.value = orderValue + 10;
	bg.style.backgroundImage = "";
	a.style.backgroundColor = "#ffffff";
}

function initBookmark(bookmark) {
	const a = bookmark.querySelector(".bookmark");
	const del = bookmark.querySelector(".delete");
	const form = bookmark.querySelector("form");
	const bg = a.querySelector(".background");

	const title = form.querySelector("#bookmark-name");
	const link = form.querySelector("#bookmark-link");
	const image = form.querySelector("#bookmark-image");
	const imageSize = form.querySelector("#bookmark-imagesize");
	const iconPadding = form.querySelector("#bookmark-iconpadding");
	const color = form.querySelector("#bookmark-color");
	const hideBorder = form.querySelector("#bookmark-border");

	del.addEventListener("click", () => {
		const question = title.value == "" ? "Do you want to delete this bookmark?" : `Do you want to delete '${title.value}'?`
		if (confirm(question)) {
			bookmark.parentElement.removeChild(bookmark);
		}
	});

	link.addEventListener("change", () => a.setAttribute("href", link.value));
	image.addEventListener("change", () => bg.style.backgroundImage = `url(${image.value})`);
	imageSize.addEventListener("change", () => bg.style.backgroundSize = imageSize.value);
	iconPadding.addEventListener("change", () => a.style.padding = iconPadding.value);
	color.addEventListener("change", () => a.style.backgroundColor = color.value);
	hideBorder.addEventListener("change", () => a.style.boxShadow = hideBorder.checked ? "" : "0px 0px 3px black");
}