infopage/public/js/editor.js

208 lines
8.2 KiB
JavaScript
Raw Normal View History

2024-02-20 14:55:22 -05:00
function log(str) {
c++;
document.getElementById("log").innerText = str;
setTimeout(
function() {
--c;
if (!c) {
document.getElementById("log").innerText = " ";
}
}, 3000
);
}
function addToOutput(starting, json, key, title) {
starting += `<div class="added" style="text-align: center;"><div style="text-align: left; margin-bottom: 10px;" id='${key}'><h2>${title}</h2>`; // Title
for (let i = 0; i < json[key].length; i++) {
starting += `
<div id="${key}-${i}" data-id="${i}">
2024-03-28 21:36:08 -04:00
<select>
2024-02-20 14:55:22 -05:00
<option value="4"${json[key][i][1] == 4 ?" selected" : ""}>great</option>
<option value="3"${json[key][i][1] == 3 ?" selected" : ""}>good</option>
<option value="2"${json[key][i][1] == 2 ?" selected" : ""}>fine</option>
<option value="1"${json[key][i][1] == 1 ?" selected" : ""}>bad</option>
</select>
<input value="${escapeHTML(json[key][i][0], true)}" maxlength="48">
<svg onclick="dom('${key}-${i}').remove()">${icons.x}</svg>
</div>`;
}
starting += `</div><button onclick="add_input('${key}');">Add</button></div>`;
return starting;
}
2024-03-28 21:36:08 -04:00
function add_input(key, override) {
2024-02-20 14:55:22 -05:00
let x = document.createElement("div")
let q = [...document.querySelectorAll(`#${key} div[id^="${key}-"]`)];
2024-02-20 16:21:23 -05:00
let i = Number(q[q.length - 1] ? q[q.length - 1].dataset.id : "-1") + 1;
2024-02-20 14:55:22 -05:00
x.id = `${key}-${i}`;
x.setAttribute("data-id", i);
2024-03-28 21:36:08 -04:00
x.innerHTML = (override || `
<select>
2024-02-20 14:55:22 -05:00
<option value="4">great</option>
<option value="3" selected>good</option>
<option value="2">fine</option>
<option value="1">bad</option>
</select>
<input maxlength="48">
2024-03-28 21:36:08 -04:00
<svg onclick="dom('${x.id}').remove()">${icons.x}</svg>`).replaceAll("%i", i);
2024-02-20 14:55:22 -05:00
dom(key).append(x);
}
function updateColors() {
2024-02-26 17:33:35 -05:00
document.body.setAttribute("style", `--primary: ${colors.text}; --secondary-low-opacity: ${colors.text}22; --background: ${colors.background}; --background-low-opacity: ${colors.background}33; --accent: ${colors.accent}; --accent-low-opacity: ${colors.accent}66; --text: ${colors.text}; --text-low-opacity: ${colors.text}88;`);
2024-02-20 14:55:22 -05:00
}
2024-03-31 17:56:11 -04:00
function get_list(key, hasInput=true) {
2024-02-20 14:55:22 -05:00
let output = [];
[...document.querySelectorAll(`#${key} div[id^="${key}-"]`)].forEach((val, index) => {
2024-03-28 21:36:08 -04:00
if (!val.classList.contains("bad")) {
2024-03-31 17:56:11 -04:00
output.push(hasInput ? [val.querySelector("input").value, val.querySelector("select").value] : val.querySelector("select").value);
2024-03-28 21:36:08 -04:00
}
2024-02-20 14:55:22 -05:00
});
return output;
}
2024-03-28 21:36:08 -04:00
function validate_input(el) {
el = document.querySelector(`#${el.dataset.id} input`);
platform = document.querySelector(`#${el.dataset.id} select`).value;
value = el.value;
if (socialRegex[platform].regex.test(value)) {
el.classList.remove("bad");
} else {
el.classList.add("bad");
}
}
2024-02-20 14:55:22 -05:00
if (localStorage.getItem("token")) {
setCookie("token", localStorage.getItem("token"));
} else {
window.location.href = "/logout";
}
let colors, c;
2024-03-28 21:36:08 -04:00
let socialInput = "<select onchange=\"validate_input(this);\" data-id=\"social-%i\">";
for (const key of Object.keys(socialRegex)) {
socialInput += `<option value="${key}">${socialRegex[key].name}</option>`;
}
socialInput += `</select><input class="bad" oninput="validate_input(this);" data-id="social-%i"></div><svg onclick="dom('social-%i').remove()">${icons.x}</svg>`;
2024-03-31 17:56:11 -04:00
let flagInput = "<select data-id=\"flags-%i\">";
for (const key of Object.keys(flags)) {
flagInput += `<option value="${key}">${flags[key]}</option>`
}
flagInput += `</select><svg onclick="dom('flags-%i').remove()">${icons.x}</svg>`
2024-02-20 14:55:22 -05:00
fetch("/api/account/self", {
"method": "GET"
}).then((response) => (response.json()))
.then((json) => {
colors = json.colors;
updateColors();
let x = document.createElement("div");
let inner = `
<h2><input maxlength="64" placeholder="Display name..." id="input-display-name" value="${escapeHTML(json.display_name, true)}"></h2>
<div><textarea maxlength="512" placeholder="About me..." id="input-description">${escapeHTML(json.description)}</textarea></div>
<div>Text color: <input id="input-col-text" type="color" value="${colors.text}"></div>
<div>Background color: <input id="input-col-background" type="color" value="${colors.background}"></div>
2024-02-26 17:33:35 -05:00
<div>Accent color: <input id="input-col-accent" type="color" value="${colors.accent}"></div>
<div>Public: <input id="public" type="checkbox" ${json.public ? "checked" : ""}></div><br>
<a href="/home"><button>Home</button></a>
2024-02-22 19:42:05 -05:00
<a target="_blank" href="/u/${json.username}"><button>Preview</button></a>
2024-03-20 12:44:29 -04:00
<button onclick="navigator.clipboard.writeText('https://infopg.web.app/u/${json.username}'); log('Copied!');">Share</button>
2024-02-22 19:42:05 -05:00
<button id="save">Save</button><div id="log"> </div>
2024-02-20 14:55:22 -05:00
<div id="word-container">
`;
inner = addToOutput(inner, json, "names", "Names");
inner = addToOutput(inner, json, "pronouns", "Pronouns");
inner = addToOutput(inner, json, "honorifics", "Honorifics");
inner = addToOutput(inner, json, "compliments", "Compliments");
inner = addToOutput(inner, json, "relationship", "Relationship<br>Descriptions");
2024-03-28 21:36:08 -04:00
inner += `<div class="added wider" style="text-align: center;"><div style="text-align: left; margin-bottom: 10px;" id='social'><h2>Social Links</h2>`
let i = 0;
for (const link of (json.social || [])) {
inner += `<div id="social-${i}" data-id="${i}">${socialInput.split("</select")[0].replaceAll("%i", i).replace(`value="${link[1]}"`, `selected value="${link[1]}"`)}</select><input value="${escapeHTML(link[0], true)}" oninput="validate_input(this);" data-id="social-${i}"><svg onclick="dom('social-${i}').remove()">${icons.x}</svg></div>`;
i++;
}
2024-03-31 17:56:11 -04:00
inner += `</div><button onclick="add_input('social', '${socialInput.replaceAll("\"", "&quot;").replaceAll("\'", "\\\'")}');">Add</button></div></div>
<div class="added" style="text-align: center;"><div style="text-align: left; margin-bottom: 10px;" id='flags'><h2>Pride Flags</h2>`;
i = 0;
for (const flag of (json.flags || [])) {
inner += `<div id="social-${i}" data-id="${i}">${flagInput.split("</select")[0].replaceAll("%i", i).replace(`value="${flag}"`, `selected value="${flag}"`)}</select><svg onclick="dom('social-${i}').remove()">${icons.x}</svg></div>`;
i++;
}
inner += `</div><button onclick="add_input('flags', '${flagInput.replaceAll("\"", "&quot;").replaceAll("\'", "\\\'")}');">Add</button></div></div>`
2024-02-20 14:55:22 -05:00
x.id = "container";
x.innerHTML = inner;
document.body.append(x);
dom("input-description").addEventListener("input", function() {
let cursorPosition = this.selectionStart;
if (this.value.indexOf("\n") !== -1) {
--cursorPosition;
}
this.value = this.value.replaceAll("\n", "").replaceAll("\r", "");
this.setSelectionRange(cursorPosition, cursorPosition);
});
dom("save").addEventListener("click", function() {
fetch("/api/save", {
"method": "PATCH",
"body": JSON.stringify({
colors: colors,
display_name: dom("input-display-name").value,
description: dom("input-description").value,
names: get_list("names"),
pronouns: get_list("pronouns"),
honorifics: get_list("honorifics"),
compliments: get_list("compliments"),
2024-02-26 17:33:35 -05:00
relationship: get_list("relationship"),
2024-03-28 21:36:08 -04:00
social: get_list("social"),
2024-03-31 17:56:11 -04:00
flags: get_list("flags", false),
2024-02-26 17:33:35 -05:00
public: dom("public").checked
2024-02-20 14:55:22 -05:00
})
}).then((response) => (response.text()))
.then((text) => {
if (text === "200 OK") {
log("Saved!");
} else {
log("Something went wrong when saving!");
}
})
.catch((err) => {
log("Something went wrong when saving!");
})
});
dom("input-col-text").addEventListener("input", function() {
colors.text = this.value;
updateColors();
});
dom("input-col-accent").addEventListener("input", function() {
colors.accent = this.value;
updateColors();
});
dom("input-col-background").addEventListener("input", function() {
colors.background = this.value;
updateColors();
});
})
.catch((err) => {
2024-03-28 21:36:08 -04:00
document.body.innerHTML = `Something went wrong loading the page! Maybe try reloading?<br>Error: ${err}`;
2024-02-20 14:55:22 -05:00
});