deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-04-30 04:52:51 +02:00
Code Issues Projects Releases Wiki Activity

Animate dropdown scroll

Browse source
This commit is contained in:
Josh Johnson 2016-05-05 21:31:09 +01:00
parent 345fe885c5
commit 158902f8ee
2 changed files with 45 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/scripts/dist/bundle.js vendored
View file

File diff suppressed because one or more lines are too long

47
assets/scripts/src/choices.js
View file

@ -502,13 +502,50 @@ export class Choices {
const containerScrollPos = this.dropdown.scrollTop + dropdownHeight;
// Difference between the option and scroll position
const scrollDiff = optionPos - containerScrollPos;
let endPoint;
const animateScroll = (time, endPoint, direction) => {
let continueAnimation = false;
let easing, distance;
const strength = 4;
if(direction > 0) {
easing = (endPoint - this.dropdown.scrollTop)/strength;
distance = easing > 1 ? easing : 1;
this.dropdown.scrollTop = this.dropdown.scrollTop + distance;
if(this.dropdown.scrollTop < endPoint) {
continueAnimation = true;
}
} else {
easing = (this.dropdown.scrollTop - endPoint)/strength;
distance = easing > 1 ? easing : 1;
this.dropdown.scrollTop = this.dropdown.scrollTop - distance;
if(this.dropdown.scrollTop > endPoint) {
continueAnimation = true;
}
}
if(continueAnimation) {
requestAnimationFrame((time) => {
animateScroll(time, endPoint, direction);
});
}
};
// Scroll dropdown to top of option
if(direction > 0) {
this.dropdown.scrollTop += scrollDiff;
endPoint = (this.dropdown.scrollTop + optionPos) - containerScrollPos;
requestAnimationFrame((time) => {
animateScroll(time, endPoint, 1);
});
} else {
this.dropdown.scrollTop = option.offsetTop;
endPoint = option.offsetTop;
requestAnimationFrame((time) => {
animateScroll(time, endPoint, -1);
});
}
}
@ -523,7 +560,7 @@ export class Choices {
highlightedOptions.forEach((el) => {
el.classList.remove(this.options.classNames.highlightedState);
});
if(el){
// Highlight given option
el.classList.add(this.options.classNames.highlightedState);
@ -533,8 +570,10 @@ export class Choices {
let el;
if(options.length > this.highlightPosition) {
// If we have an option to highlight
el = options[this.highlightPosition];
} else {
// Otherwise highlight the option before
el = options[options.length - 1];
}