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

Fixed keyboard scrolling

Browse Source 
Now when scrolling through results with the keyboard, the
highlighted option will always be visible.
This commit is contained in:
Kevin Brown 2014-10-19 17:04:57 -04:00
parent 9ada3712f7
commit 9102cf9473
12 changed files with 158 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
dist/css/select2.css vendored
View File

@ -107,22 +107,22 @@
border-bottom-right-radius: 0; }
.select2-container.select2-theme-default .dropdown .search input {
border: 1px solid #aaa; }
.select2-container.select2-theme-default .dropdown .results {
.select2-container.select2-theme-default .dropdown .results > .options {
max-height: 200px;
overflow-y: scroll; }
.select2-container.select2-theme-default .dropdown .results .options .option.group {
padding: 0; }
.select2-container.select2-theme-default .dropdown .results .options .option.group .group-label {
cursor: default;
display: block;
padding: 6px; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true] {
color: #666; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
background-color: #ddd; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {
background-color: #5897fb;
color: white; }
overflow-y: auto; }
.select2-container.select2-theme-default .dropdown .results .options .option.group {
padding: 0; }
.select2-container.select2-theme-default .dropdown .results .options .option.group .group-label {
cursor: default;
display: block;
padding: 6px; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true] {
color: #666; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
background-color: #ddd; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {
background-color: #5897fb;
color: white; }
.s2-container {
margin: 0;

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

File diff suppressed because one or more lines are too long

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

@ -348,6 +348,16 @@ define('select2/results',[
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
var currentOffset = self.$results.offset().top;
var nextTop = $next.offset().top;
var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextTop - currentOffset < 0) {
self.$results.scrollTop(nextOffset);
}
});
container.on('results:next', function () {
@ -367,8 +377,17 @@ define('select2/results',[
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
console.log($next.offset().top, self.$results.parent().scrollTop());
//self.$results.parents().scrollTop($next.offset().top);
var currentOffset = self.$results.offset().top +
self.$results.outerHeight(false);
var nextBottom = $next.offset().top + $next.outerHeight(false);
var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextBottom > currentOffset) {
self.$results.scrollTop(nextOffset);
}
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
@ -545,7 +564,7 @@ define('select2/selection/single',[
// User exits the container
});
this.$selection.on('keyup', function (evt) {
this.$selection.on('keydown', function (evt) {
var key = evt.which;
if (container.isOpen()) {
@ -553,8 +572,12 @@ define('select2/selection/single',[
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
evt.preventDefault();
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
evt.preventDefault();
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@ -759,7 +782,7 @@ define('select2/data/base',[
};
BaseAdapter.prototype.generateResultId = function (data) {
var id = '';
var id = 'select2-result-';
for (var i = 0; i < 4; i++) {
var r = Math.floor(Math.random() * 16);

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

@ -348,6 +348,16 @@ define('select2/results',[
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
var currentOffset = self.$results.offset().top;
var nextTop = $next.offset().top;
var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextTop - currentOffset < 0) {
self.$results.scrollTop(nextOffset);
}
});
container.on('results:next', function () {
@ -367,8 +377,17 @@ define('select2/results',[
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
console.log($next.offset().top, self.$results.parent().scrollTop());
//self.$results.parents().scrollTop($next.offset().top);
var currentOffset = self.$results.offset().top +
self.$results.outerHeight(false);
var nextBottom = $next.offset().top + $next.outerHeight(false);
var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextBottom > currentOffset) {
self.$results.scrollTop(nextOffset);
}
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
@ -545,7 +564,7 @@ define('select2/selection/single',[
// User exits the container
});
this.$selection.on('keyup', function (evt) {
this.$selection.on('keydown', function (evt) {
var key = evt.which;
if (container.isOpen()) {
@ -553,8 +572,12 @@ define('select2/selection/single',[
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
evt.preventDefault();
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
evt.preventDefault();
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@ -759,7 +782,7 @@ define('select2/data/base',[
};
BaseAdapter.prototype.generateResultId = function (data) {
var id = '';
var id = 'select2-result-';
for (var i = 0; i < 4; i++) {
var r = Math.floor(Math.random() * 16);

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

@ -9886,6 +9886,16 @@ define('select2/results',[
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
var currentOffset = self.$results.offset().top;
var nextTop = $next.offset().top;
var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextTop - currentOffset < 0) {
self.$results.scrollTop(nextOffset);
}
});
container.on('results:next', function () {
@ -9905,8 +9915,17 @@ define('select2/results',[
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
console.log($next.offset().top, self.$results.parent().scrollTop());
//self.$results.parents().scrollTop($next.offset().top);
var currentOffset = self.$results.offset().top +
self.$results.outerHeight(false);
var nextBottom = $next.offset().top + $next.outerHeight(false);
var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextBottom > currentOffset) {
self.$results.scrollTop(nextOffset);
}
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
@ -10083,7 +10102,7 @@ define('select2/selection/single',[
// User exits the container
});
this.$selection.on('keyup', function (evt) {
this.$selection.on('keydown', function (evt) {
var key = evt.which;
if (container.isOpen()) {
@ -10091,8 +10110,12 @@ define('select2/selection/single',[
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
evt.preventDefault();
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
evt.preventDefault();
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@ -10297,7 +10320,7 @@ define('select2/data/base',[
};
BaseAdapter.prototype.generateResultId = function (data) {
var id = '';
var id = 'select2-result-';
for (var i = 0; i < 4; i++) {
var r = Math.floor(Math.random() * 16);

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

File diff suppressed because one or more lines are too long

31
dist/js/select2.js vendored
View File

@ -777,6 +777,16 @@ define('select2/results',[
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
var currentOffset = self.$results.offset().top;
var nextTop = $next.offset().top;
var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextTop - currentOffset < 0) {
self.$results.scrollTop(nextOffset);
}
});
container.on('results:next', function () {
@ -796,8 +806,17 @@ define('select2/results',[
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
console.log($next.offset().top, self.$results.parent().scrollTop());
//self.$results.parents().scrollTop($next.offset().top);
var currentOffset = self.$results.offset().top +
self.$results.outerHeight(false);
var nextBottom = $next.offset().top + $next.outerHeight(false);
var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextBottom > currentOffset) {
self.$results.scrollTop(nextOffset);
}
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
@ -974,7 +993,7 @@ define('select2/selection/single',[
// User exits the container
});
this.$selection.on('keyup', function (evt) {
this.$selection.on('keydown', function (evt) {
var key = evt.which;
if (container.isOpen()) {
@ -982,8 +1001,12 @@ define('select2/selection/single',[
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
evt.preventDefault();
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
evt.preventDefault();
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@ -1188,7 +1211,7 @@ define('select2/data/base',[
};
BaseAdapter.prototype.generateResultId = function (data) {
var id = '';
var id = 'select2-result-';
for (var i = 0; i < 4; i++) {
var r = Math.floor(Math.random() * 16);

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

File diff suppressed because one or more lines are too long

2
src/js/select2/data/base.js vendored
View File

@ -20,7 +20,7 @@ define([
};
BaseAdapter.prototype.generateResultId = function (data) {
var id = '';
var id = 'select2-result-';
for (var i = 0; i < 4; i++) {
var r = Math.floor(Math.random() * 16);

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

@ -209,6 +209,16 @@ define([
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
var currentOffset = self.$results.offset().top;
var nextTop = $next.offset().top;
var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextTop - currentOffset < 0) {
self.$results.scrollTop(nextOffset);
}
});
container.on('results:next', function () {
@ -228,8 +238,17 @@ define([
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
console.log($next.offset().top, self.$results.parent().scrollTop());
//self.$results.parents().scrollTop($next.offset().top);
var currentOffset = self.$results.offset().top +
self.$results.outerHeight(false);
var nextBottom = $next.offset().top + $next.outerHeight(false);
var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
if (nextIndex === 0) {
self.$results.scrollTop(0);
} else if (nextBottom > currentOffset) {
self.$results.scrollTop(nextOffset);
}
});
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {

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

@ -68,7 +68,7 @@ define([
// User exits the container
});
this.$selection.on('keyup', function (evt) {
this.$selection.on('keydown', function (evt) {
var key = evt.which;
if (container.isOpen()) {
@ -76,8 +76,12 @@ define([
self.trigger('results:select');
} else if (key == KEYS.UP) {
self.trigger('results:previous');
evt.preventDefault();
} else if (key == KEYS.DOWN) {
self.trigger('results:next');
evt.preventDefault();
}
} else {
if (key == KEYS.ENTER || key == KEYS.SPACE) {

6
src/scss/theme/default/layout.scss
View File

@ -78,8 +78,10 @@
}
.results {
max-height: 200px;
overflow-y: scroll;
&> .options {
max-height: 200px;
overflow-y: auto;
}
.options {
.option {