mirror of
https://github.com/processwire/processwire.git
synced 2025-08-15 11:14:12 +02:00
Update InputfieldPageAutocomplete.js to initialize the autocomplete on focus event, rather than on document ready. This resolves a render time issue in AdminThemeUikit when there are a lot of autocomplete inputs present, per @Toutouwai
This commit is contained in:
Ryan Cramer
@@ -98,148 +98,150 @@ var InputfieldPageAutocomplete = {
|
|||||||
return allowed;
|
return allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
$input.autocomplete({
|
$input.one('focus', function() {
|
||||||
minLength: 2,
|
$input.autocomplete({
|
||||||
source: function(request, response) {
|
minLength: 2,
|
||||||
var term = request.term;
|
source: function(request, response) {
|
||||||
|
var term = request.term;
|
||||||
if(hasDisableChar(term)) {
|
|
||||||
response([]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
$icon.attr('class', 'fa fa-fw fa-spin fa-spinner');
|
|
||||||
|
|
||||||
if($input.hasClass('and_words') && term.indexOf(' ') > 0) {
|
|
||||||
// AND words mode
|
|
||||||
term = term.replace(/\s+/, ',');
|
|
||||||
}
|
|
||||||
term = encodeURIComponent(term);
|
|
||||||
var ajaxURL = url + '&' + searchField + operator + term;
|
|
||||||
|
|
||||||
$.getJSON(ajaxURL, function(data) {
|
if(hasDisableChar(term)) {
|
||||||
|
response([]);
|
||||||
$icon.attr('class', $icon.attr('data-class'));
|
return;
|
||||||
numFound = data.total;
|
|
||||||
|
|
||||||
if(data.total > 0) {
|
|
||||||
$icon.attr('class', 'fa fa-fw fa-angle-double-down');
|
|
||||||
|
|
||||||
} else if(isAddAllowed()) {
|
|
||||||
$icon.attr('class', 'fa fa-fw fa-plus-circle');
|
|
||||||
$note.show();
|
|
||||||
|
|
||||||
} else {
|
|
||||||
$icon.attr('class', 'fa fa-fw fa-frown-o');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
response($.map(data.matches, function(item) {
|
$icon.attr('class', 'fa fa-fw fa-spin fa-spinner');
|
||||||
return {
|
|
||||||
label: item[labelField],
|
if($input.hasClass('and_words') && term.indexOf(' ') > 0) {
|
||||||
value: item[labelField],
|
// AND words mode
|
||||||
page_id: item.id
|
term = term.replace(/\s+/, ',');
|
||||||
|
}
|
||||||
|
term = encodeURIComponent(term);
|
||||||
|
var ajaxURL = url + '&' + searchField + operator + term;
|
||||||
|
|
||||||
|
$.getJSON(ajaxURL, function(data) {
|
||||||
|
|
||||||
|
$icon.attr('class', $icon.attr('data-class'));
|
||||||
|
numFound = data.total;
|
||||||
|
|
||||||
|
if(data.total > 0) {
|
||||||
|
$icon.attr('class', 'fa fa-fw fa-angle-double-down');
|
||||||
|
|
||||||
|
} else if(isAddAllowed()) {
|
||||||
|
$icon.attr('class', 'fa fa-fw fa-plus-circle');
|
||||||
|
$note.show();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$icon.attr('class', 'fa fa-fw fa-frown-o');
|
||||||
}
|
}
|
||||||
}));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
select: function(event, ui) {
|
|
||||||
if(!ui.item) return;
|
|
||||||
var $t = $(this);
|
|
||||||
if($t.hasClass('no_list')) {
|
|
||||||
$t.val(ui.item.label).change();
|
|
||||||
$t.attr('data-selectedLabel', ui.item.label);
|
|
||||||
$t.closest('.InputfieldPageAutocomplete')
|
|
||||||
.find('.InputfieldPageAutocompleteData').val(ui.item.page_id).change();
|
|
||||||
$t.blur();
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
InputfieldPageAutocomplete.pageSelected($ol, ui.item);
|
|
||||||
$t.val('').focus();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}).blur(function() {
|
response($.map(data.matches, function(item) {
|
||||||
var $input = $(this);
|
return {
|
||||||
//if(!$input.val().length) $input.val('');
|
label: item[labelField],
|
||||||
$icon.attr('class', $icon.attr('data-class'));
|
value: item[labelField],
|
||||||
$note.hide();
|
page_id: item.id
|
||||||
if($input.hasClass('no_list')) {
|
}
|
||||||
if($value.val().length || $input.val().length) {
|
}));
|
||||||
if($input.hasClass('allow_any') || $input.hasClass('added_item')) {
|
});
|
||||||
// allow value to remain
|
},
|
||||||
|
select: function(event, ui) {
|
||||||
|
if(!ui.item) return;
|
||||||
|
var $t = $(this);
|
||||||
|
if($t.hasClass('no_list')) {
|
||||||
|
$t.val(ui.item.label).change();
|
||||||
|
$t.attr('data-selectedLabel', ui.item.label);
|
||||||
|
$t.closest('.InputfieldPageAutocomplete')
|
||||||
|
.find('.InputfieldPageAutocompleteData').val(ui.item.page_id).change();
|
||||||
|
$t.blur();
|
||||||
|
return false;
|
||||||
} else {
|
} else {
|
||||||
$input.val($input.attr('data-selectedLabel')).attr('placeholder', '');
|
InputfieldPageAutocomplete.pageSelected($ol, ui.item);
|
||||||
}
|
$t.val('').focus();
|
||||||
} else {
|
|
||||||
$input.val('').attr('placeholder', '').attr('data-selectedLabel', '');
|
|
||||||
}
|
|
||||||
//$(this).closest('.InputfieldPageAutocomplete').find('.InputfieldPageAutocompleteData').val('').change();
|
|
||||||
}
|
|
||||||
if($input.hasClass('focus-after-blur')) {
|
|
||||||
$input.removeClass('focus-after-blur');
|
|
||||||
setTimeout(function() {
|
|
||||||
$input.focus();
|
|
||||||
}, 250);
|
|
||||||
}
|
|
||||||
|
|
||||||
}).keyup(function() {
|
|
||||||
$icon.attr('class', $icon.attr('data-class'));
|
|
||||||
|
|
||||||
}).keydown(function(event) {
|
|
||||||
if(event.keyCode == 13) {
|
|
||||||
// prevents enter from submitting the form
|
|
||||||
event.preventDefault();
|
|
||||||
// instead we add the text entered as a new item
|
|
||||||
// if there is an .InputfieldPageAdd sibling, which indicates support for this
|
|
||||||
if(isAddAllowed()) {
|
|
||||||
if($.trim($input.val()).length < 1) {
|
|
||||||
$input.blur();
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
numAdded++;
|
}
|
||||||
// new items have a negative page_id
|
|
||||||
var page = { page_id: (-1 * numAdded), label: $input.val() };
|
}).blur(function() {
|
||||||
// add it to the list
|
var $input = $(this);
|
||||||
if(noList) {
|
//if(!$input.val().length) $input.val('');
|
||||||
// adding new item while using input as the label
|
$icon.attr('class', $icon.attr('data-class'));
|
||||||
$value.val(page.page_id);
|
$note.hide();
|
||||||
$("#_" + id.replace('Inputfield_', '') + '_add_items').val(page.label);
|
if($input.hasClass('no_list')) {
|
||||||
$input.addClass('added_item').blur();
|
if($value.val().length || $input.val().length) {
|
||||||
var $addNote = $note.siblings(".InputfieldPageAutocompleteNoteAdd");
|
if($input.hasClass('allow_any') || $input.hasClass('added_item')) {
|
||||||
if(!$addNote.length) {
|
// allow value to remain
|
||||||
var $addNote = $("<div class='notes InputfieldPageAutocompleteNote InputfieldPageAutocompleteNoteAdd'></div>");
|
} else {
|
||||||
$note.after($addNote);
|
$input.val($input.attr('data-selectedLabel')).attr('placeholder', '');
|
||||||
}
|
}
|
||||||
$addNote.text($note.attr('data-adding') + ' ' + page.label);
|
|
||||||
$addNote.show();
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// adding new item to list
|
$input.val('').attr('placeholder', '').attr('data-selectedLabel', '');
|
||||||
InputfieldPageAutocomplete.pageSelected($ol, page);
|
|
||||||
$input.val('').blur().focus();
|
|
||||||
}
|
}
|
||||||
$note.hide();
|
//$(this).closest('.InputfieldPageAutocomplete').find('.InputfieldPageAutocompleteData').val('').change();
|
||||||
} else {
|
|
||||||
$(this).addClass('focus-after-blur').blur();
|
|
||||||
}
|
}
|
||||||
return false;
|
if($input.hasClass('focus-after-blur')) {
|
||||||
}
|
$input.removeClass('focus-after-blur');
|
||||||
|
setTimeout(function() {
|
||||||
if(numAdded && noList) {
|
$input.focus();
|
||||||
// some other key after an item already added, so remove added item info for potential new one
|
}, 250);
|
||||||
var $addNote = $note.siblings(".InputfieldPageAutocompleteNoteAdd");
|
|
||||||
var $addText = $("#_" + id.replace('Inputfield_', '') + '_add_items');
|
|
||||||
if($addNote.length && $addText.val() != $(this).val()) {
|
|
||||||
// added value has changed
|
|
||||||
$addNote.remove();
|
|
||||||
$value.val('');
|
|
||||||
$addText.val('');
|
|
||||||
$("#_" + id.replace('Inputfield_', '') + '_add_items').val('');
|
|
||||||
numAdded--;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
}).keyup(function() {
|
||||||
|
$icon.attr('class', $icon.attr('data-class'));
|
||||||
|
|
||||||
|
}).keydown(function(event) {
|
||||||
|
if(event.keyCode == 13) {
|
||||||
|
// prevents enter from submitting the form
|
||||||
|
event.preventDefault();
|
||||||
|
// instead we add the text entered as a new item
|
||||||
|
// if there is an .InputfieldPageAdd sibling, which indicates support for this
|
||||||
|
if(isAddAllowed()) {
|
||||||
|
if($.trim($input.val()).length < 1) {
|
||||||
|
$input.blur();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
numAdded++;
|
||||||
|
// new items have a negative page_id
|
||||||
|
var page = {page_id: (-1 * numAdded), label: $input.val()};
|
||||||
|
// add it to the list
|
||||||
|
if(noList) {
|
||||||
|
// adding new item while using input as the label
|
||||||
|
$value.val(page.page_id);
|
||||||
|
$("#_" + id.replace('Inputfield_', '') + '_add_items').val(page.label);
|
||||||
|
$input.addClass('added_item').blur();
|
||||||
|
var $addNote = $note.siblings(".InputfieldPageAutocompleteNoteAdd");
|
||||||
|
if(!$addNote.length) {
|
||||||
|
var $addNote = $("<div class='notes InputfieldPageAutocompleteNote InputfieldPageAutocompleteNoteAdd'></div>");
|
||||||
|
$note.after($addNote);
|
||||||
|
}
|
||||||
|
$addNote.text($note.attr('data-adding') + ' ' + page.label);
|
||||||
|
$addNote.show();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// adding new item to list
|
||||||
|
InputfieldPageAutocomplete.pageSelected($ol, page);
|
||||||
|
$input.val('').blur().focus();
|
||||||
|
}
|
||||||
|
$note.hide();
|
||||||
|
} else {
|
||||||
|
$(this).addClass('focus-after-blur').blur();
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(numAdded && noList) {
|
||||||
|
// some other key after an item already added, so remove added item info for potential new one
|
||||||
|
var $addNote = $note.siblings(".InputfieldPageAutocompleteNoteAdd");
|
||||||
|
var $addText = $("#_" + id.replace('Inputfield_', '') + '_add_items');
|
||||||
|
if($addNote.length && $addText.val() != $(this).val()) {
|
||||||
|
// added value has changed
|
||||||
|
$addNote.remove();
|
||||||
|
$value.val('');
|
||||||
|
$addText.val('');
|
||||||
|
$("#_" + id.replace('Inputfield_', '') + '_add_items').val('');
|
||||||
|
numAdded--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
var makeSortable = function($ol) {
|
var makeSortable = function($ol) {
|
||||||
$ol.sortable({
|
$ol.sortable({
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -177,7 +177,7 @@ class InputfieldPageAutocomplete extends Inputfield implements InputfieldHasArra
|
|||||||
$operator = $this->operator;
|
$operator = $this->operator;
|
||||||
$id = $this->id;
|
$id = $this->id;
|
||||||
$max = (int) $this->maxSelectedItems;
|
$max = (int) $this->maxSelectedItems;
|
||||||
$class = $this->useList ? 'has_list' : 'no_list';
|
$class = 'ui-autocomplete-input ' . ($this->useList ? 'has_list' : 'no_list');
|
||||||
if($this->useAndWords) $class .= " and_words";
|
if($this->useAndWords) $class .= " and_words";
|
||||||
if($this->allowAnyValue) $class .= " allow_any";
|
if($this->allowAnyValue) $class .= " allow_any";
|
||||||
|
|
||||||
|
|||||||
@@ -331,5 +331,7 @@ $(document).ready(function() {
|
|||||||
id: 'PageEditLinkTabs'
|
id: 'PageEditLinkTabs'
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#link_page_url_input').focus();
|
setTimeout(function() {
|
||||||
|
$('#link_page_url_input').focus();
|
||||||
|
}, 250);
|
||||||
});
|
});
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user