etiquette/frontends/etiquette_flask/static/js/common.js

270 lines
8.1 KiB
JavaScript
Raw Normal View History

2018-07-23 02:12:08 +00:00
var common = {};
2018-07-23 02:12:08 +00:00
common.INPUT_TYPES = new Set(["INPUT", "TEXTAREA"]);
common._request =
function _request(method, url, callback)
2016-09-18 08:33:46 +00:00
{
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if (callback != null)
{
var response = {
2018-09-23 21:57:25 +00:00
"data": JSON.parse(request.responseText),
"meta": {}
};
response["meta"]["request_url"] = url;
response["meta"]["status"] = request.status;
callback(response);
2016-09-18 08:33:46 +00:00
}
}
};
var asynchronous = true;
request.open(method, url, asynchronous);
return request;
}
2018-07-23 02:12:08 +00:00
common.get =
function get(url, callback)
{
2018-07-23 02:12:08 +00:00
request = common._request("GET", url, callback);
request.send();
}
2018-07-23 02:12:08 +00:00
common.post =
function post(url, data, callback)
{
2018-07-23 02:12:08 +00:00
request = common._request("POST", url, callback);
2016-09-18 08:33:46 +00:00
request.send(data);
}
2018-07-23 02:12:08 +00:00
common.bind_box_to_button =
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);
}
common.create_message_bubble =
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);
}
common.delete_all_children =
function delete_all_children(element)
{
while (element.firstChild)
{
element.removeChild(element.firstChild);
}
}
2018-07-23 02:12:08 +00:00
common.entry_with_history_hook =
function entry_with_history_hook(event)
2016-10-10 03:50:13 +00:00
{
//console.log(event);
var box = event.target;
2016-10-10 03:50:13 +00:00
if (box.entry_history === undefined)
{box.entry_history = [];}
2016-10-10 03:50:13 +00:00
if (box.entry_history_pos === undefined)
{box.entry_history_pos = -1;}
if (event.key === "Enter")
2016-10-10 03:50:13 +00:00
{
box.entry_history.push(box.value);
}
else if (event.key === "ArrowUp")
2016-10-10 03:50:13 +00:00
{
if (box.entry_history.length == 0)
{return}
2016-10-10 03:50:13 +00:00
if (box.entry_history_pos == -1)
{box.entry_history_pos = box.entry_history.length - 1;}
2016-10-10 03:50:13 +00:00
else if (box.entry_history_pos > 0)
{box.entry_history_pos -= 1;}
2016-10-10 03:50:13 +00:00
box.value = box.entry_history[box.entry_history_pos];
setTimeout(function(){box.selectionStart = box.value.length;}, 0);
2016-10-10 03:50:13 +00:00
}
else if (event.key === "Escape")
2016-10-10 03:50:13 +00:00
{
box.value = "";
}
else
{
box.entry_history_pos = -1;
}
}
2018-07-23 02:12:08 +00:00
common.html_to_element =
function html_to_element(html)
{
var template = document.createElement("template");
template.innerHTML = html;
return template.content.firstChild;
}
common.init_button_with_confirm =
function init_button_with_confirm()
{
/*
To create a button that requires confirmation, simply assign it the class
"button_with_confirm" and give it a data-onclick that would normally
be the onclick. The rest is taken care of automatically.
Optional:
data-prompt, otherwise "Are you sure?".
data-prompt-class
data-confirm, otherwise inherits the original button's text.
data-confirm-class
data-cancel, otherwise "Cancel".
data-cancel-class
*/
var buttons = document.getElementsByClassName("button_with_confirm");
for (var index = 0; index < buttons.length; index += 1)
{
var button = buttons[index];
var holder = document.createElement("span");
holder.classList.add("confirm_holder");
holder.classList.add(button.dataset.holderClass || "confirm_holder");
button.parentElement.insertBefore(holder, button);
button.parentElement.removeChild(button);
var holder_stage1 = document.createElement("span");
holder_stage1.classList.add("confirm_holder_stage1");
holder_stage1.appendChild(button);
holder.appendChild(holder_stage1);
var holder_stage2 = document.createElement("span");
holder_stage2.classList.add("confirm_holder_stage2");
holder_stage2.classList.add("hidden");
holder.appendChild(holder_stage2);
var prompt;
var input_source;
if (button.dataset.isInput)
{
prompt = document.createElement("input");
prompt.placeholder = button.dataset.prompt || "";
input_source = prompt;
}
else
{
prompt = document.createElement("span");
prompt.innerText = (button.dataset.prompt || "Are you sure?") + " ";
input_source = undefined;
}
prompt.className = button.dataset.promptClass || "";
holder_stage2.appendChild(prompt)
delete button.dataset.prompt;
delete button.dataset.promptClass;
var button_confirm = document.createElement("button");
2018-09-23 21:57:25 +00:00
button_confirm.innerText = (button.dataset.confirm || button.innerText).trim();
button_confirm.className = button.dataset.confirmClass || "";
button_confirm.input_source = input_source;
holder_stage2.appendChild(button_confirm);
holder_stage2.appendChild(document.createTextNode(" "));
if (button.dataset.isInput)
{
common.bind_box_to_button(prompt, button_confirm);
}
delete button.dataset.confirm;
delete button.dataset.confirmClass;
delete button.dataset.isInput;
var button_cancel = document.createElement("button");
button_cancel.innerText = button.dataset.cancel || "Cancel";
button_cancel.className = button.dataset.cancelClass || "";
holder_stage2.appendChild(button_cancel);
delete button.dataset.cancel;
delete button.dataset.cancelClass;
// If this is stupid, let me know.
var confirm_onclick = button.dataset.onclick + `
;
var holder = event.target.parentElement.parentElement;
holder.getElementsByClassName("confirm_holder_stage1")[0].classList.remove("hidden");
holder.getElementsByClassName("confirm_holder_stage2")[0].classList.add("hidden");
`
button_confirm.onclick = Function(confirm_onclick);
button.removeAttribute("onclick");
button.onclick = function(event)
{
var holder = event.target.parentElement.parentElement;
holder.getElementsByClassName("confirm_holder_stage1")[0].classList.add("hidden");
holder.getElementsByClassName("confirm_holder_stage2")[0].classList.remove("hidden");
var input = holder.getElementsByTagName("input");
if (input)
{
input[0].focus();
}
}
button_cancel.onclick = function(event)
{
var holder = event.target.parentElement.parentElement;
holder.getElementsByClassName("confirm_holder_stage1")[0].classList.remove("hidden");
holder.getElementsByClassName("confirm_holder_stage2")[0].classList.add("hidden");
}
delete button.dataset.onclick;
}
}
common.normalize_tagname =
function normalize_tagname(tagname)
{
tagname = tagname.trim();
tagname = tagname.toLocaleLowerCase();
tagname = tagname.split(".");
tagname = tagname[tagname.length-1];
tagname = tagname.split("+")[0];
tagname = tagname.replace(new RegExp(" ", 'g'), "_");
tagname = tagname.replace(new RegExp("-", 'g'), "_");
return tagname;
}
common.refresh =
function refresh()
{
window.location.reload();
}
common.on_pageload =
function on_pageload()
{
common.init_button_with_confirm();
}
document.addEventListener("DOMContentLoaded", common.on_pageload);