RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-22 13:06:08 +03:00
Code Issues Projects Releases Wiki Activity

Add more keyboard support

Browse Source 
When the main container is focused, you can now move the highlighted
result by using the up and down arrows on the keyboard.

This does not yet keep the highlighted result visible at all times,
and it only is implemented on single selects, but that will come in
the future.
This commit is contained in:
Kevin Brown 2014-10-18 11:28:42 -04:00
parent cc9419928e
commit 8dfd6d6960
9 changed files with 288 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
dist/js/select2.amd.full.js vendored
View File

@ -305,6 +305,10 @@ define('select2/results',[
container.on('results:select', function () {
var $highlighted = self.$results.find('.highlighted');
if ($highlighted.length === 0) {
return;
}
var data = $highlighted.data('data');
if ($highlighted.attr('aria-selected') == 'true') {
@ -318,6 +322,49 @@ define('select2/results',[
}
});
container.on('results:previous', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
// If we are already at te top, don't move further
if (currentIndex === 0) {
return;
}
var nextIndex = currentIndex - 1;
// If none are highlighted, highlight the first
if ($highlighted.length === 0) {
nextIndex = 0;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
container.on('results:next', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
var nextIndex = currentIndex + 1;
// If we are at the last option, stay there
if (nextIndex >= $options.length) {
return;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
var $this = $(this);
@ -477,6 +524,10 @@ define('select2/selection/single',[
if (container.isOpen()) {
if (key == KEYS.ENTER) {
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@ -1239,6 +1290,12 @@ define('select2/core',[
this.selection.on('results:select', function () {
self.trigger('results:select');
});
this.selection.on('results:previous', function () {
self.trigger('results:previous');
});
this.selection.on('results:next', function () {
self.trigger('results:next');
});
this.selection.on('unselected', function (params) {
self.trigger('unselect', params);

57
dist/js/select2.amd.js vendored
View File

@ -305,6 +305,10 @@ define('select2/results',[
container.on('results:select', function () {
var $highlighted = self.$results.find('.highlighted');
if ($highlighted.length === 0) {
return;
}
var data = $highlighted.data('data');
if ($highlighted.attr('aria-selected') == 'true') {
@ -318,6 +322,49 @@ define('select2/results',[
}
});
container.on('results:previous', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
// If we are already at te top, don't move further
if (currentIndex === 0) {
return;
}
var nextIndex = currentIndex - 1;
// If none are highlighted, highlight the first
if ($highlighted.length === 0) {
nextIndex = 0;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
container.on('results:next', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
var nextIndex = currentIndex + 1;
// If we are at the last option, stay there
if (nextIndex >= $options.length) {
return;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
var $this = $(this);
@ -477,6 +524,10 @@ define('select2/selection/single',[
if (container.isOpen()) {
if (key == KEYS.ENTER) {
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@ -1239,6 +1290,12 @@ define('select2/core',[
this.selection.on('results:select', function () {
self.trigger('results:select');
});
this.selection.on('results:previous', function () {
self.trigger('results:previous');
});
this.selection.on('results:next', function () {
self.trigger('results:next');
});
this.selection.on('unselected', function (params) {
self.trigger('unselect', params);

57
dist/js/select2.full.js vendored
View File

@ -9843,6 +9843,10 @@ define('select2/results',[
container.on('results:select', function () {
var $highlighted = self.$results.find('.highlighted');
if ($highlighted.length === 0) {
return;
}
var data = $highlighted.data('data');
if ($highlighted.attr('aria-selected') == 'true') {
@ -9856,6 +9860,49 @@ define('select2/results',[
}
});
container.on('results:previous', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
// If we are already at te top, don't move further
if (currentIndex === 0) {
return;
}
var nextIndex = currentIndex - 1;
// If none are highlighted, highlight the first
if ($highlighted.length === 0) {
nextIndex = 0;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
container.on('results:next', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
var nextIndex = currentIndex + 1;
// If we are at the last option, stay there
if (nextIndex >= $options.length) {
return;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
var $this = $(this);
@ -10015,6 +10062,10 @@ define('select2/selection/single',[
if (container.isOpen()) {
if (key == KEYS.ENTER) {
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@ -10777,6 +10828,12 @@ define('select2/core',[
this.selection.on('results:select', function () {
self.trigger('results:select');
});
this.selection.on('results:previous', function () {
self.trigger('results:previous');
});
this.selection.on('results:next', function () {
self.trigger('results:next');
});
this.selection.on('unselected', function (params) {
self.trigger('unselect', params);

4
dist/js/select2.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

57
dist/js/select2.js vendored
View File

@ -734,6 +734,10 @@ define('select2/results',[
container.on('results:select', function () {
var $highlighted = self.$results.find('.highlighted');
if ($highlighted.length === 0) {
return;
}
var data = $highlighted.data('data');
if ($highlighted.attr('aria-selected') == 'true') {
@ -747,6 +751,49 @@ define('select2/results',[
}
});
container.on('results:previous', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
// If we are already at te top, don't move further
if (currentIndex === 0) {
return;
}
var nextIndex = currentIndex - 1;
// If none are highlighted, highlight the first
if ($highlighted.length === 0) {
nextIndex = 0;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
container.on('results:next', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
var nextIndex = currentIndex + 1;
// If we are at the last option, stay there
if (nextIndex >= $options.length) {
return;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
var $this = $(this);
@ -906,6 +953,10 @@ define('select2/selection/single',[
if (container.isOpen()) {
if (key == KEYS.ENTER) {
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@ -1668,6 +1719,12 @@ define('select2/core',[
this.selection.on('results:select', function () {
self.trigger('results:select');
});
this.selection.on('results:previous', function () {
self.trigger('results:previous');
});
this.selection.on('results:next', function () {
self.trigger('results:next');
});
this.selection.on('unselected', function (params) {
self.trigger('unselect', params);

2
dist/js/select2.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
src/js/select2/core.js vendored
View File

@ -81,6 +81,12 @@ define([
this.selection.on('results:select', function () {
self.trigger('results:select');
});
this.selection.on('results:previous', function () {
self.trigger('results:previous');
});
this.selection.on('results:next', function () {
self.trigger('results:next');
});
this.selection.on('unselected', function (params) {
self.trigger('unselect', params);

47
src/js/select2/results.js vendored
View File

@ -166,6 +166,10 @@ define([
container.on('results:select', function () {
var $highlighted = self.$results.find('.highlighted');
if ($highlighted.length === 0) {
return;
}
var data = $highlighted.data('data');
if ($highlighted.attr('aria-selected') == 'true') {
@ -179,6 +183,49 @@ define([
}
});
container.on('results:previous', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
// If we are already at te top, don't move further
if (currentIndex === 0) {
return;
}
var nextIndex = currentIndex - 1;
// If none are highlighted, highlight the first
if ($highlighted.length === 0) {
nextIndex = 0;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
container.on('results:next', function () {
var $highlighted = self.$results.find('.highlighted');
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
var nextIndex = currentIndex + 1;
// If we are at the last option, stay there
if (nextIndex >= $options.length) {
return;
}
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
var $this = $(this);

4
src/js/select2/selection/single.js vendored
View File

@ -53,6 +53,10 @@ define([
if (container.isOpen()) {
if (key == KEYS.ENTER) {
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {