jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #3549 from evazion/fix-autocomplete-autofocus

Browse Source 
Autocomplete: Fix issues with Enter key
This commit is contained in:
Albert Yi
2018-02-15 11:19:32 -08:00
committed by GitHub
parent 8d3e3dd523 0e259bd4f6
commit 26b260f1c8
1 changed files with 48 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
app/assets/javascripts/autocomplete.js.erb
View File

@@ -45,28 +45,17 @@
Danbooru.Autocomplete.initialize_mention_autocomplete = function() { Danbooru.Autocomplete.initialize_mention_autocomplete = function() {
var $fields = $(".autocomplete-mentions textarea"); var $fields = $(".autocomplete-mentions textarea");
$fields.on("keydown.danbooru.autocomplete.tab", null, "tab", Danbooru.Autocomplete.on_tab);
$fields.autocomplete({ $fields.autocomplete({
delay: 500, delay: 500,
minLength: 2, minLength: 2,
autoFocus: true, autoFocus: false,
focus: function() { focus: function() {
return false; return false;
}, },
select: function(event, ui) { select: function(event, ui) {
var before_caret_text = this.value.substring(0, this.selectionStart).replace(/\S+$/, ui.item.value + " "); Danbooru.Autocomplete.insert_completion(this, ui.item.value);
var after_caret_text = this.value.substring(this.selectionStart);
this.value = before_caret_text;
// Preserve original caret position to prevent it from jumping to the end
var original_start = this.selectionStart;
this.value += after_caret_text;
this.selectionStart = this.selectionEnd = original_start;
// Prevent the enter key from submitting the tag edit form (Danbooru.Upload.initialize_enter_on_tags).
event.stopImmediatePropagation();
// Prevent the tab key from moving the focus to the next element.
event.preventDefault();
return false; return false;
}, },
source: function(req, resp) { source: function(req, resp) {
@@ -102,32 +91,21 @@
var $fields_multiple = $('[data-autocomplete="tag-query"], [data-autocomplete="tag-edit"]'); var $fields_multiple = $('[data-autocomplete="tag-query"], [data-autocomplete="tag-edit"]');
var $fields_single = $('[data-autocomplete="tag"]'); var $fields_single = $('[data-autocomplete="tag"]');
$fields_multiple.on("keydown.danbooru.autocomplete.tab", null, "tab", Danbooru.Autocomplete.on_tab);
$fields_multiple.autocomplete({ $fields_multiple.autocomplete({
delay: 100, delay: 100,
autoFocus: true, autoFocus: false,
focus: function() { focus: function() {
return false; return false;
}, },
select: function(event, ui) { select: function(event, ui) {
var query = Danbooru.Autocomplete.parse_query(this.value, this.selectionStart); // Prevent Danbooru.Upload.initialize_enter_on_tags from running if the
if (event.key === "Enter" && query.term === ui.item.value) { // Enter key is used to select a tag from the autocomplete menu.
$(this).parents("form").submit(); if (event.key === "Enter") {
return false; event.stopImmediatePropagation();
} }
var before_caret_text = this.value.substring(0, this.selectionStart); Danbooru.Autocomplete.insert_completion(this, ui.item.value);
var after_caret_text = this.value.substring(this.selectionStart);
var prefixes = "-|~|" + "<%= TagCategory.mapping.keys.map {|category| category + ':'}.join('|') %>";
var regexp = new RegExp("(" + prefixes + ")?\\S+$", "g");
this.value = before_caret_text.replace(regexp, "$1" + ui.item.value + " ");
// Preserve original caret position to prevent it from jumping to the end
var original_start = this.selectionStart;
this.value += after_caret_text;
this.selectionStart = this.selectionEnd = original_start;
event.stopImmediatePropagation();
event.preventDefault();
return false; return false;
}, },
source: function(req, resp) { source: function(req, resp) {
@@ -281,6 +259,43 @@
return { metatag: metatag, term: term }; return { metatag: metatag, term: term };
}; };
// Update the input field with the item currently focused in the
// autocomplete menu, then position the caret just after the inserted completion.
Danbooru.Autocomplete.insert_completion = function(input, completion) {
var before_caret_text = input.value.substring(0, input.selectionStart).trim();
var after_caret_text = input.value.substring(input.selectionStart).trim();
var prefixes = "-|~|" + "<%= TagCategory.mapping.keys.map {|category| category + ':'}.join('|') %>";
var regexp = new RegExp("(" + prefixes + ")?\\S+$", "g");
before_caret_text = before_caret_text.replace(regexp, "$1") + completion + " ";
input.value = before_caret_text + after_caret_text;
input.selectionStart = input.selectionEnd = before_caret_text.length;
};
// If we press tab while the autocomplete menu is open but nothing is
// focused, complete the first item and close the menu.
Danbooru.Autocomplete.on_tab = function(event) {
var input = this;
var autocomplete = $(input).autocomplete("instance");
var $autocomplete_menu = autocomplete.menu.element;
if (!$autocomplete_menu.is(":visible")) {
return;
}
if ($autocomplete_menu.has(".ui-state-focus").length === 0) {
var $first_item = $autocomplete_menu.find(".ui-menu-item").first();
var completion = $first_item.data().uiAutocompleteItem.value;
Danbooru.Autocomplete.insert_completion(input, completion);
autocomplete.close();
}
// Prevent the tab key from moving focus to the next element.
event.preventDefault();
};
Danbooru.Autocomplete.render_item = function(list, item) { Danbooru.Autocomplete.render_item = function(list, item) {
var $link = $("<a/>"); var $link = $("<a/>");