function create_studysheet_entry(title, username, term_count, created, modified, sheet_id, author_id, is_private) {
// convert viewership to boolean
// 1 = public, 0 = private
icon_name = "Public"
if (is_private) {
icon_name = "Lock"
}
let html = `
${title}
${username}
${term_count}
Created: ${created}
Modified: ${modified}
`
let obj = htmlToObj(html);
obj.querySelector(".studysheet-user-container").addEventListener("click", function(event) {
event.stopPropagation();
window.location.href = `/user/${author_id}`
})
obj.addEventListener("click", function(event) {
window.location.href = `/studysheet/${sheet_id}/view`
})
return obj;
}
function buildNote(id, is_multi, note_contents, is_editor=true) {
let arr_id = id.split(".");
arr_id = arr_id[arr_id.length-1];
let multi_class = is_multi ? "multi" : "";
let events = ""
if (is_editor){
events = `onfocus="request_lock('${arr_id}-notes')" onfocusout="unlock_term('${arr_id}-notes')"`
}
let html_data = `
`
let obj = htmlToObj(html_data);
obj.querySelector(".comment").value = note_contents;
if (!is_editor) {
obj.querySelector(".comment").style.pointerEvents = "none";
}
obj.querySelectorAll("textarea").forEach(textarea => {
textarea.addEventListener("input", function() {
textarea_resize(this)
id_to_pass = this.parentNode.id.replace("-notes", "").split(".")
socket.emit("creator", {"intents":"change_studysheet", "subintents":"set_term_data", "args":{"id_path":id_to_pass, "field": "notes", "content":this.value},"nonce":get_nonce()})
});
});
return obj;
}
function buildImageContainer(id, term_image_id, answer_image_id, is_editor=true) {
let html_data = `
`
let obj = htmlToObj(html_data);
if (term_image_id != null) {
console.log(obj)
obj.querySelector(".image-term").style.display = "block";
obj.querySelector(".image-term").src = "/api/image/" + term_image_id;
}
if (answer_image_id != null) {
obj.querySelector(".image-answer").style.display = "block";
obj.querySelector(".image-answer").src = "/api/image/" + answer_image_id;
}
if (is_editor) {
obj.querySelector(".image-term").addEventListener("click", function() {
removeImage(id, "term");
});
obj.querySelector(".image-term").style.cursor = "pointer";
obj.querySelector(".image-answer").addEventListener("click", function() {
removeImage(id, "answer");
});
obj.querySelector(".image-answer").style.cursor = "pointer";
}
return obj
}
function buildTerm(id, term, definition, is_multi, is_multi_head, note_associated=false, is_editor=true, has_star=false) {
// id is a string in the format id.id.id
// arr_id is just the unique id of the term
// note status can be one of three types - "none", "has", or "is"
// "none" means there are no notes
// "has" means that there are notes associated with the term, but this is not the note object
// "is" means that this is the note object
// i swear if i write note one more time im gonna top map so much
let arr_id = id.split(".");
arr_id = arr_id[arr_id.length-1];
let multi_class = is_multi ? "multi" : "";
let events_t = ""
let events_d = ""
let multi_button_event = ""
let notes_event = ""
let delete_event = ""
let term_image_event = ""
let definition_image_event = ""
if (is_editor){
events_t = `onfocus="request_lock('${arr_id}-term')" onfocusout="unlock_term('${arr_id}-term')"`
events_d = `onfocus="request_lock('${arr_id}-answer')" onfocusout="unlock_term('${arr_id}-answer')"`
multi_button_event = `onclick="add_term('${id}')"`
notes_event = `onclick="add_note('${id}')"`
delete_event = `onclick="delete_term('${id}')"`
term_image_event = `onclick="add_image('${id}', 'term')"`;
definition_image_event = `onclick="add_image('${id}', 'answer')"`;
}
let left_options = `
`
if (is_multi_head) {
left_options = `
`
} else if (is_multi) {
left_options = ``
}
let html_data = `
${left_options}
`
let obj = htmlToObj(html_data);
if (note_associated) {
obj.setAttribute("data-has-notes", "true");
}
if (!has_star) {
obj.querySelector(".star").remove();
} else {
obj.querySelector(".star").addEventListener("click", function() {
// if its selected remove the class
if (this.classList.contains("selected")) {
this.classList.remove("selected");
} else {
this.classList.add("selected");
}
let id_to_pass = this.parentNode.id
onlyStarred(false)
fetch("/api/studysheet/" + studysheet_id + "/star/" + id_to_pass).then(response => {
return response.json();
}).then(data => {
console.log(data)
})
});
}
obj.querySelector(".term").value = term;
obj.querySelector(".definition").value = definition;
if (!is_editor) {
obj.querySelector(".term").style.pointerEvents = "none";
obj.querySelector(".definition").style.pointerEvents = "none";
obj.querySelector(".left-options").style.display = "none";
obj.querySelector(".drag-handle").style.display = "none";
}
if (is_multi_head) {
obj.querySelector(".definition").remove()
}
// if (is_multi){
// obj.querySelector("#add-multi-button").remove()
// }
obj.querySelectorAll("textarea").forEach(textarea => {
textarea.addEventListener("input", function() {
textarea_resize(this)
let field = this.className; // one of term, definition
if (field == "definition"){
field = "answer";
}
id_to_pass = this.parentNode.id.split(".")
socket.emit("creator", {"intents":"change_studysheet", "subintents":"set_term_data", "args":{"id_path":id_to_pass, "field":field, "content":this.value},"nonce":get_nonce()})
});
if (!is_editor) {
textarea.style.borderBottomWidth = "0px";
}
});
return obj;
}
const originalAppend = Element.prototype.append;
Element.prototype.append = function (...args) {
originalAppend.apply(this, args);
args[0].querySelectorAll("textarea").forEach(textarea => {
textarea_resize(textarea)
})
};
function textarea_resize(area){
area.style.height = "0";
area.style.height = (area.scrollHeight + window.getComputedStyle(area).borderBottomWidth.replace("px", "") * 1) + "px";
if (area.parentNode.className.includes("term-container")) {
let textareas = area.parentNode.querySelectorAll("textarea")
let tallestHeight = 0;
textareas.forEach(textarea => {
let height = textarea.style.height.replace("px", "") * 1;
if (height > tallestHeight) {
tallestHeight = height;
}
});
textareas.forEach(textarea => {
textarea.style.height = tallestHeight + "px";
});
}
}