Synchronize Etiquette common.js and YCDL common.js.
This commit is contained in:
parent
b3d3e4ae6c
commit
d2d8a69d39
1 changed files with 187 additions and 37 deletions
|
|
@ -1,5 +1,7 @@
|
||||||
var common = {};
|
var common = {};
|
||||||
|
|
||||||
|
common.INPUT_TYPES = new Set(["INPUT", "TEXTAREA"]);
|
||||||
|
|
||||||
common._request =
|
common._request =
|
||||||
function _request(method, url, callback)
|
function _request(method, url, callback)
|
||||||
{
|
{
|
||||||
|
|
@ -11,8 +13,8 @@ function _request(method, url, callback)
|
||||||
if (callback != null)
|
if (callback != null)
|
||||||
{
|
{
|
||||||
var response = {
|
var response = {
|
||||||
"data": JSON.parse(request.responseText),
|
"meta": {},
|
||||||
"meta": {}
|
"data": JSON.parse(request.responseText)
|
||||||
};
|
};
|
||||||
response["meta"]["request_url"] = url;
|
response["meta"]["request_url"] = url;
|
||||||
response["meta"]["status"] = request.status;
|
response["meta"]["status"] = request.status;
|
||||||
|
|
@ -40,49 +42,80 @@ function post(url, data, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
common.bind_box_to_button =
|
common.bind_box_to_button =
|
||||||
function bind_box_to_button(box, button)
|
function bind_box_to_button(box, button, ctrl_enter)
|
||||||
{
|
{
|
||||||
box.onkeydown=function()
|
// Thanks Yaroslav Yakovlev
|
||||||
|
// http://stackoverflow.com/a/9343095
|
||||||
|
var bound_box_hook = function(event)
|
||||||
{
|
{
|
||||||
if (event.keyCode == 13)
|
if (event.key !== "Enter")
|
||||||
{
|
{return;}
|
||||||
button.click();
|
|
||||||
}
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
common.entry_with_history_hook =
|
common.entry_with_history_hook =
|
||||||
function entry_with_history_hook(box, button)
|
function entry_with_history_hook(event)
|
||||||
{
|
{
|
||||||
//console.log(event.keyCode);
|
//console.log(event);
|
||||||
if (box.entry_history === undefined)
|
var box = event.target;
|
||||||
{box.entry_history = [];}
|
|
||||||
if (box.entry_history_pos === undefined)
|
|
||||||
{box.entry_history_pos = -1;}
|
|
||||||
if (event.keyCode == 13)
|
|
||||||
{
|
|
||||||
/* Enter */
|
|
||||||
box.entry_history.push(box.value);
|
|
||||||
button.click();
|
|
||||||
box.value = "";
|
|
||||||
}
|
|
||||||
else if (event.keyCode == 38)
|
|
||||||
{
|
|
||||||
|
|
||||||
/* Up arrow */
|
if (box.entry_history === undefined)
|
||||||
if (box.entry_history.length == 0)
|
{box.entry_history = [];}
|
||||||
{return}
|
|
||||||
if (box.entry_history_pos == -1)
|
if (box.entry_history_pos === undefined)
|
||||||
{
|
{box.entry_history_pos = -1;}
|
||||||
box.entry_history_pos = box.entry_history.length - 1;
|
|
||||||
}
|
if (event.key === "Enter")
|
||||||
else if (box.entry_history_pos > 0)
|
{
|
||||||
{
|
box.entry_history.push(box.value);
|
||||||
box.entry_history_pos -= 1;
|
|
||||||
}
|
|
||||||
box.value = box.entry_history[box.entry_history_pos];
|
|
||||||
}
|
}
|
||||||
else if (event.keyCode == 27)
|
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 = "";
|
box.value = "";
|
||||||
}
|
}
|
||||||
|
|
@ -126,6 +159,122 @@ function init_atag_merge_params()
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
common.init_button_with_confirm =
|
||||||
|
function init_button_with_confirm()
|
||||||
|
{
|
||||||
|
/*
|
||||||
|
To create a button that requires a second confirmation step, assign it the
|
||||||
|
class "button_with_confirm".
|
||||||
|
|
||||||
|
Required:
|
||||||
|
data-onclick: String that would normally be the button's onclick.
|
||||||
|
|
||||||
|
Optional:
|
||||||
|
data-prompt: Text that appears next to the confirm button. Default is
|
||||||
|
"Are you sure?".
|
||||||
|
data-prompt-class
|
||||||
|
|
||||||
|
data-confirm: Text inside the confirm button. Default is to inherit the
|
||||||
|
original button's text.
|
||||||
|
data-confirm-class
|
||||||
|
|
||||||
|
data-cancel: Text inside the cancel button. Default is "Cancel".
|
||||||
|
data-cancel-class
|
||||||
|
|
||||||
|
data-holder-class: CSS class for the new span that holds the menu.
|
||||||
|
*/
|
||||||
|
var buttons = Array.from(document.getElementsByClassName("button_with_confirm"));
|
||||||
|
buttons.forEach(function(button)
|
||||||
|
{
|
||||||
|
button.classList.remove("button_with_confirm");
|
||||||
|
|
||||||
|
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");
|
||||||
|
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")[0];
|
||||||
|
if (input)
|
||||||
|
{
|
||||||
|
input.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.refresh =
|
common.refresh =
|
||||||
function refresh()
|
function refresh()
|
||||||
{
|
{
|
||||||
|
|
@ -136,5 +285,6 @@ common.on_pageload =
|
||||||
function on_pageload()
|
function on_pageload()
|
||||||
{
|
{
|
||||||
common.init_atag_merge_params();
|
common.init_atag_merge_params();
|
||||||
|
common.init_button_with_confirm();
|
||||||
}
|
}
|
||||||
document.addEventListener("DOMContentLoaded", common.on_pageload);
|
document.addEventListener("DOMContentLoaded", common.on_pageload);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue