Use event listeners instead of setting onkeyup manually.

This commit is contained in:
voussoir 2018-02-24 00:24:38 -08:00
parent 5a1d259780
commit 9c6cae7177
4 changed files with 45 additions and 45 deletions

View file

@ -84,7 +84,6 @@ If you are interested in helping, please raise an issue before making any pull r
- Fix album size cache when photo reload metadata and generally improve that validation.
- Better bookmark url validation.
- Create a textbox which gives autocomplete tag names.
- Clean up the textbox hooks & handlers and make them more like stackable decorators (entry with history + bind box to button).
### To do list: User permissions
Here are some thoughts about the kinds of features that need to exist within the permission system. I don't know how I'll actually manage it just yet. Possibly a `permissions` table in the database with `user_id | permission` where `permission` is some reliably-formatted string.

View file

@ -270,22 +270,6 @@ function post(url, data, callback)
request.send(data);
}
function bind_box_to_button(box, button, ctrl_enter)
{
box.onkeydown=function()
{
// Thanks Yaroslav Yakovlev
// http://stackoverflow.com/a/9343095
if (
(event.keyCode == 13 || event.keyCode == 10) &&
((ctrl_enter && event.ctrlKey) || (!ctrl_enter))
)
{
button.click();
}
};
}
function create_album_and_follow(parent)
{
var url = "/albums/create_album";
@ -316,38 +300,54 @@ function delete_all_children(element)
}
}
function entry_with_history_hook(box, button)
function bind_box_to_button(box, button, ctrl_enter)
{
//console.log(event.keyCode);
if (box.entry_history === undefined)
{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)
// Thanks Yaroslav Yakovlev
// http://stackoverflow.com/a/9343095
var bound_box_hook = function(event)
{
if (event.key !== "Enter")
{return;}
/* Up arrow */
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}
{return}
if (box.entry_history_pos == -1)
{
box.entry_history_pos = box.entry_history.length - 1;
}
{box.entry_history_pos = box.entry_history.length - 1;}
else if (box.entry_history_pos > 0)
{
box.entry_history_pos -= 1;
}
{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.keyCode == 27)
else if (event.key === "Escape")
{
box.value = "";
}

View file

@ -589,9 +589,9 @@ for (var index = 0; index < found_on_page.length; index += 1)
}
input_musts.onkeydown = function(){tag_input_hook(this, inputted_musts, "search_builder_musts_inputted")};
input_mays.onkeydown = function(){tag_input_hook(this, inputted_mays, "search_builder_mays_inputted")};
input_forbids.onkeydown = function(){tag_input_hook(this, inputted_forbids, "search_builder_forbids_inputted")};
input_musts.addEventListener("keyup", function(){tag_input_hook(this, inputted_musts, "search_builder_musts_inputted")});
input_mays.addEventListener("keyup", function(){tag_input_hook(this, inputted_mays, "search_builder_mays_inputted")});
input_forbids.addEventListener("keyup", function(){tag_input_hook(this, inputted_forbids, "search_builder_forbids_inputted")});
bind_box_to_button(input_expression, document.getElementById("search_go_button"));
</script>
</html>

View file

@ -147,7 +147,8 @@ body
var box = document.getElementById('add_tag_textbox');
var button = document.getElementById('add_tag_button');
var message_area = document.getElementById('message_area');
box.onkeydown = function(){entry_with_history_hook(box, button)};
box.addEventListener("keyup", entry_with_history_hook);
bind_box_to_button(box, button, false);
function submit_tag(callback)
{