Display a loading message when searching
Now when searching, a loading message is prepended to the top of the results. This replaces the old spinner image and allows for it to be translated across different languages. The loading message can be styled differently and is passed through the results formatters.
This commit is contained in:
parent
28c56e7885
commit
7e6782d580
27
dist/js/select2.amd.full.js
vendored
27
dist/js/select2.amd.full.js
vendored
@ -185,6 +185,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.displayMessage = function (params) {
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
|
||||
@ -196,6 +197,8 @@ define('select2/results',[
|
||||
};
|
||||
|
||||
Results.prototype.append = function (data) {
|
||||
this.hideLoading();
|
||||
|
||||
var $options = [];
|
||||
|
||||
if (data.length === 0) {
|
||||
@ -261,6 +264,26 @@ define('select2/results',[
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.showLoading = function (params) {
|
||||
this.hideLoading();
|
||||
|
||||
var loadingMore = this.options.get('translations').get('loadingMore');
|
||||
|
||||
var loading = {
|
||||
disabled: true,
|
||||
loading: true,
|
||||
text: loadingMore(params)
|
||||
};
|
||||
var $loading = this.option(loading);
|
||||
$loading.className += ' loading-results';
|
||||
|
||||
this.$results.prepend($loading);
|
||||
};
|
||||
|
||||
Results.prototype.hideLoading = function () {
|
||||
this.$results.find('.loading-results').remove();
|
||||
};
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
@ -353,6 +376,10 @@ define('select2/results',[
|
||||
}
|
||||
});
|
||||
|
||||
container.on('query', function (params) {
|
||||
self.showLoading(params);
|
||||
});
|
||||
|
||||
container.on('select', function () {
|
||||
if (!container.isOpen()) {
|
||||
return;
|
||||
|
27
dist/js/select2.amd.js
vendored
27
dist/js/select2.amd.js
vendored
@ -185,6 +185,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.displayMessage = function (params) {
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
|
||||
@ -196,6 +197,8 @@ define('select2/results',[
|
||||
};
|
||||
|
||||
Results.prototype.append = function (data) {
|
||||
this.hideLoading();
|
||||
|
||||
var $options = [];
|
||||
|
||||
if (data.length === 0) {
|
||||
@ -261,6 +264,26 @@ define('select2/results',[
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.showLoading = function (params) {
|
||||
this.hideLoading();
|
||||
|
||||
var loadingMore = this.options.get('translations').get('loadingMore');
|
||||
|
||||
var loading = {
|
||||
disabled: true,
|
||||
loading: true,
|
||||
text: loadingMore(params)
|
||||
};
|
||||
var $loading = this.option(loading);
|
||||
$loading.className += ' loading-results';
|
||||
|
||||
this.$results.prepend($loading);
|
||||
};
|
||||
|
||||
Results.prototype.hideLoading = function () {
|
||||
this.$results.find('.loading-results').remove();
|
||||
};
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
@ -353,6 +376,10 @@ define('select2/results',[
|
||||
}
|
||||
});
|
||||
|
||||
container.on('query', function (params) {
|
||||
self.showLoading(params);
|
||||
});
|
||||
|
||||
container.on('select', function () {
|
||||
if (!container.isOpen()) {
|
||||
return;
|
||||
|
27
dist/js/select2.full.js
vendored
27
dist/js/select2.full.js
vendored
@ -9720,6 +9720,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.displayMessage = function (params) {
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
|
||||
@ -9731,6 +9732,8 @@ define('select2/results',[
|
||||
};
|
||||
|
||||
Results.prototype.append = function (data) {
|
||||
this.hideLoading();
|
||||
|
||||
var $options = [];
|
||||
|
||||
if (data.length === 0) {
|
||||
@ -9796,6 +9799,26 @@ define('select2/results',[
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.showLoading = function (params) {
|
||||
this.hideLoading();
|
||||
|
||||
var loadingMore = this.options.get('translations').get('loadingMore');
|
||||
|
||||
var loading = {
|
||||
disabled: true,
|
||||
loading: true,
|
||||
text: loadingMore(params)
|
||||
};
|
||||
var $loading = this.option(loading);
|
||||
$loading.className += ' loading-results';
|
||||
|
||||
this.$results.prepend($loading);
|
||||
};
|
||||
|
||||
Results.prototype.hideLoading = function () {
|
||||
this.$results.find('.loading-results').remove();
|
||||
};
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
@ -9888,6 +9911,10 @@ define('select2/results',[
|
||||
}
|
||||
});
|
||||
|
||||
container.on('query', function (params) {
|
||||
self.showLoading(params);
|
||||
});
|
||||
|
||||
container.on('select', function () {
|
||||
if (!container.isOpen()) {
|
||||
return;
|
||||
|
4
dist/js/select2.full.min.js
vendored
4
dist/js/select2.full.min.js
vendored
File diff suppressed because one or more lines are too long
27
dist/js/select2.js
vendored
27
dist/js/select2.js
vendored
@ -613,6 +613,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.displayMessage = function (params) {
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
|
||||
@ -624,6 +625,8 @@ define('select2/results',[
|
||||
};
|
||||
|
||||
Results.prototype.append = function (data) {
|
||||
this.hideLoading();
|
||||
|
||||
var $options = [];
|
||||
|
||||
if (data.length === 0) {
|
||||
@ -689,6 +692,26 @@ define('select2/results',[
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.showLoading = function (params) {
|
||||
this.hideLoading();
|
||||
|
||||
var loadingMore = this.options.get('translations').get('loadingMore');
|
||||
|
||||
var loading = {
|
||||
disabled: true,
|
||||
loading: true,
|
||||
text: loadingMore(params)
|
||||
};
|
||||
var $loading = this.option(loading);
|
||||
$loading.className += ' loading-results';
|
||||
|
||||
this.$results.prepend($loading);
|
||||
};
|
||||
|
||||
Results.prototype.hideLoading = function () {
|
||||
this.$results.find('.loading-results').remove();
|
||||
};
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
@ -781,6 +804,10 @@ define('select2/results',[
|
||||
}
|
||||
});
|
||||
|
||||
container.on('query', function (params) {
|
||||
self.showLoading(params);
|
||||
});
|
||||
|
||||
container.on('select', function () {
|
||||
if (!container.isOpen()) {
|
||||
return;
|
||||
|
2
dist/js/select2.min.js
vendored
2
dist/js/select2.min.js
vendored
File diff suppressed because one or more lines are too long
@ -544,6 +544,8 @@ $.fn.select2.amd.require(
|
||||
},
|
||||
minimumInputLength: 1,
|
||||
templateResult: function (repo) {
|
||||
if (repo.loading) return repo.text;
|
||||
|
||||
var markup = '<div class="clearfix">' +
|
||||
'<div class="col-sm-1">' +
|
||||
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
|
||||
|
27
src/js/select2/results.js
vendored
27
src/js/select2/results.js
vendored
@ -31,6 +31,7 @@ define([
|
||||
|
||||
Results.prototype.displayMessage = function (params) {
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
|
||||
@ -42,6 +43,8 @@ define([
|
||||
};
|
||||
|
||||
Results.prototype.append = function (data) {
|
||||
this.hideLoading();
|
||||
|
||||
var $options = [];
|
||||
|
||||
if (data.length === 0) {
|
||||
@ -107,6 +110,26 @@ define([
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.showLoading = function (params) {
|
||||
this.hideLoading();
|
||||
|
||||
var loadingMore = this.options.get('translations').get('loadingMore');
|
||||
|
||||
var loading = {
|
||||
disabled: true,
|
||||
loading: true,
|
||||
text: loadingMore(params)
|
||||
};
|
||||
var $loading = this.option(loading);
|
||||
$loading.className += ' loading-results';
|
||||
|
||||
this.$results.prepend($loading);
|
||||
};
|
||||
|
||||
Results.prototype.hideLoading = function () {
|
||||
this.$results.find('.loading-results').remove();
|
||||
};
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
@ -199,6 +222,10 @@ define([
|
||||
}
|
||||
});
|
||||
|
||||
container.on('query', function (params) {
|
||||
self.showLoading(params);
|
||||
});
|
||||
|
||||
container.on('select', function () {
|
||||
if (!container.isOpen()) {
|
||||
return;
|
||||
|
Loading…
x
Reference in New Issue
Block a user