var PARAGRAPH_TYPES = new Set(["P", "PRE"]); function Editor(elements, on_open, on_save, on_cancel) { /* This class wraps around display elements like headers and paragraphs, and creates inputs / textareas to edit them with. The placeholder text for the edit elements comes from the data-editor-placeholder attribute of the display elements if available. The on_open, on_save and on_cancel callbacks will receive two arguments: 1. This editor object. 2. the edit elements as either: If the display elements ALL have data-editor-id attributes, then a dictionary of {data-editor-id: edit_element, ...}. Otherwise, an array of [edit_element, ...] in their original order. When your callbacks are used, the default `open`, `save`, `cancel` methods are not called automatically. You should call them from within your function. */ this.cancel = function() { this.close(); }; this.close = function() { for (var index = 0; index < this.display_elements.length; index += 1) { this.display_elements[index].classList.remove("hidden"); this.edit_elements[index].classList.add("hidden"); } this.open_button.classList.remove("hidden") this.save_button.classList.add("hidden"); this.cancel_button.classList.add("hidden"); }; this.hide_spinner = function() { this.spinner.classList.add("hidden"); }; this.open = function() { for (var index = 0; index < this.display_elements.length; index += 1) { var display_element = this.display_elements[index]; var edit_element = this.edit_elements[index]; display_element.classList.add("hidden"); edit_element.classList.remove("hidden"); var empty_text = display_element.dataset.editorEmptyText; if (empty_text !== undefined && display_element.innerText == empty_text) { edit_element.value = ""; } else { edit_element.value = display_element.innerText; } } this.open_button.classList.add("hidden") this.save_button.classList.remove("hidden"); this.cancel_button.classList.remove("hidden"); }; this.save = function() { for (var index = 0; index < this.display_elements.length; index += 1) { var display_element = this.display_elements[index]; var edit_element = this.edit_elements[index]; if (display_element.dataset.editorEmptyText !== undefined && edit_element.value == "") { display_element.innerText = display_element.dataset.editorEmptyText; } else { display_element.innerText = edit_element.value; } } this.close(); }; this.show_spinner = function() { this.spinner.classList.remove("hidden"); }; this.display_elements = []; this.edit_elements = []; this.can_use_element_map = true; this.display_element_map = {}; this.edit_element_map = {}; this.misc_data = {}; for (var index = 0; index < elements.length; index += 1) { var display_element = elements[index]; var edit_element; if (PARAGRAPH_TYPES.has(display_element.tagName)) { edit_element = document.createElement("textarea"); edit_element.rows = 6; } else { edit_element = document.createElement("input"); edit_element.type = "text"; } edit_element.classList.add("editor_input"); edit_element.classList.add("hidden"); if (display_element.dataset.editorPlaceholder !== undefined) { edit_element.placeholder = display_element.dataset.editorPlaceholder; } if (this.can_use_element_map) { if (display_element.dataset.editorId !== undefined) { this.display_element_map[display_element.dataset.editorId] = display_element; this.edit_element_map[display_element.dataset.editorId] = edit_element; } else { this.can_use_element_map = false; this.edit_element_map = null; this.display_element_map = null; } } display_element.parentElement.insertBefore(edit_element, display_element.nextSibling); this.display_elements.push(display_element); this.edit_elements.push(edit_element); } var self = this; var binder = function(func, fallback) { if (func == undefined) { return fallback; } var bound = function() { if (this.can_use_element_map) { func(self, self.edit_element_map, self.display_element_map); } else { func(self, self.edit_elements, self.display_elements); } } return bound; } this.bound_open = binder(on_open, this.open); this.bound_save = binder(on_save, this.save); this.bound_cancel = binder(on_cancel, this.cancel); var last_element = this.edit_elements[this.edit_elements.length - 1]; var toolbox = document.createElement("div"); toolbox.classList.add("editor_toolbox"); last_element.parentElement.insertBefore(toolbox, last_element.nextSibling); this.open_button = document.createElement("button"); this.open_button.innerText = "Edit"; this.open_button.classList.add("editor_button"); this.open_button.classList.add("editor_open_button"); this.open_button.classList.add("green_button"); this.open_button.onclick = this.bound_open.bind(this); toolbox.appendChild(this.open_button); this.save_button = document.createElement("button"); this.save_button.innerText = "Save"; this.save_button.classList.add("editor_button"); this.save_button.classList.add("editor_save_button"); this.save_button.classList.add("green_button"); this.save_button.classList.add("hidden"); this.save_button.onclick = this.bound_save.bind(this); toolbox.appendChild(this.save_button); this.cancel_button = document.createElement("button"); this.cancel_button.innerText = "Cancel"; this.cancel_button.classList.add("editor_button"); this.cancel_button.classList.add("editor_cancel_button"); this.cancel_button.classList.add("red_button"); this.cancel_button.classList.add("hidden"); this.cancel_button.onclick = this.bound_cancel.bind(this); toolbox.appendChild(this.cancel_button); this.spinner = document.createElement("span"); this.spinner.innerText = "Submitting..."; this.spinner.classList.add("editor_spinner"); this.spinner.classList.add("hidden"); toolbox.appendChild(this.spinner); for (var index = 0; index < this.edit_elements.length; index += 1) { var edit_element = this.edit_elements[index]; if (edit_element.tagName == "TEXTAREA") { bind_box_to_button(edit_element, this.save_button, true); } else { bind_box_to_button(edit_element, this.save_button, false); } } } function create_message_bubble(message_area, message_positivity, message_text, lifespan) { if (lifespan === undefined) { lifespan = 8000; } var message = document.createElement("div"); message.className = "message_bubble " + message_positivity; var span = document.createElement("span"); span.innerHTML = message_text; message.appendChild(span); message_area.appendChild(message); setTimeout(function(){message_area.removeChild(message);}, lifespan); } function _request(method, url, callback) { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4) { if (callback != null) { var text = request.responseText; var response = { "data": JSON.parse(text), "meta": {} }; response["meta"]["request_url"] = url; response["meta"]["status"] = request.status; callback(response); } } }; var asynchronous = true; request.open(method, url, asynchronous); return request; } function get(url, callback) { request = _request("GET", url, callback); request.send(); } function post(url, data, callback) { request = _request("POST", url, callback); request.send(data); } function create_album_and_follow(parent) { var url = "/albums/create_album"; var data = new FormData(); if (parent !== undefined) { data.append("parent", parent); } function receive_callback(response) { if (response["meta"]["status"] == 200 && response["data"]["id"]) { window.location.href = "/album/" + response["data"]["id"]; } else { console.log(response); } } post(url, data, receive_callback); } function delete_all_children(element) { while (element.firstChild) { element.removeChild(element.firstChild); } } function bind_box_to_button(box, button, ctrl_enter) { // Thanks Yaroslav Yakovlev // http://stackoverflow.com/a/9343095 var bound_box_hook = function(event) { if (event.key !== "Enter") {return;} ctrl_success = !ctrl_enter || (event.ctrlKey) if (! ctrl_success) {return;} button.click(); } box.addEventListener("keyup", bound_box_hook); } function entry_with_history_hook(event) { //console.log(event); var box = event.target; if (box.entry_history === undefined) {box.entry_history = [];} if (box.entry_history_pos === undefined) {box.entry_history_pos = -1;} if (event.key === "Enter") { box.entry_history.push(box.value); } else if (event.key === "ArrowUp") { if (box.entry_history.length == 0) {return} if (box.entry_history_pos == -1) {box.entry_history_pos = box.entry_history.length - 1;} else if (box.entry_history_pos > 0) {box.entry_history_pos -= 1;} box.value = box.entry_history[box.entry_history_pos]; setTimeout(function(){box.selectionStart = box.value.length;}, 0); } else if (event.key === "Escape") { box.value = ""; } else { box.entry_history_pos = -1; } } function html_to_element(html) { var template = document.createElement("template"); template.innerHTML = html; return template.content.firstChild; }