136 lines
5.0 KiB
JavaScript
136 lines
5.0 KiB
JavaScript
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 }
|
|
|
|
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.value ? "" : "0px 0px 3px black");
|
|
}
|