Skip to content

Commit

Permalink
Fixing hovers and removing mouse out event
Browse files Browse the repository at this point in the history
  • Loading branch information
@dahliacreative
dahliacreative committed Jul 28, 2016
1 parent bb2da1a commit d202b7d
Show file tree
Hide file tree
Showing 8 changed files with 37 additions and 13 deletions.
14 changes: 11 additions & 3 deletions dist/selectron.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,8 @@ Selectron.prototype.clearSearchTerm = function() {
// --------------------------------------------------------------------------
Selectron.prototype.closeOptions = function() {
if(!this.optionsAreHovered) {
var hovered = this.options.find('.selectron__option--is-hovered');
hovered.removeClass('selectron__option--is-hovered');
this.options.removeClass('selectron__options--is-open selectron__options--is-overflowing');
this.trigger.removeClass('selectron__trigger--is-open selectron__trigger--is-overflowing');
this.isOpen = false;
Expand Down Expand Up @@ -149,6 +151,7 @@ Selectron.prototype.handleKeyStrokes = function(e) {
if(this.searchTerm === "") {
if(!this.isOpen) {
this.openOptions();
return;
} else {
this.closeOptions();
this.updateSelection(hovered);
Expand Down Expand Up @@ -206,7 +209,10 @@ Selectron.prototype.openOptions = function() {
optionsBottom = this.options.offset().top + this.options.height(),
scrollPosition = win.scrollTop(),
windowHeight = win.height(),
isOverflowing = optionsBottom > (windowHeight + scrollPosition);
isOverflowing = optionsBottom > (windowHeight + scrollPosition),
selected = this.options.find('.selectron__option--is-selected');

selected.addClass('selectron__option--is-hovered');

this.options
.addClass('selectron__options--is-open')
Expand Down Expand Up @@ -308,7 +314,6 @@ Selectron.prototype.registerEvents = function() {
},
'mouseleave': function() {
self.optionsAreHovered = false;
self.options.find('.selectron__option--is-hovered').removeClass('selectron__option--is-hovered');
}
});
};
Expand All @@ -323,7 +328,10 @@ Selectron.prototype.toggleOptions = function(e) {
optionsBottom = this.options.offset().top + this.options.height(),
scrollPosition = win.scrollTop(),
windowHeight = win.height(),
isOverflowing = optionsBottom > (windowHeight + scrollPosition);
isOverflowing = optionsBottom > (windowHeight + scrollPosition),
selected = this.options.find('.selectron__option--is-selected');

selected.toggleClass('selectron__option--is-hovered');

this.options
.toggleClass('selectron__options--is-open')
Expand Down
2 changes: 2 additions & 0 deletions src/javascripts/selectron.closeOptions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
// --------------------------------------------------------------------------
Selectron.prototype.closeOptions = function() {
if(!this.optionsAreHovered) {
var hovered = this.options.find('.selectron__option--is-hovered');
hovered.removeClass('selectron__option--is-hovered');
this.options.removeClass('selectron__options--is-open selectron__options--is-overflowing');
this.trigger.removeClass('selectron__trigger--is-open selectron__trigger--is-overflowing');
this.isOpen = false;
Expand Down
1 change: 1 addition & 0 deletions src/javascripts/selectron.handleKeyStrokes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ Selectron.prototype.handleKeyStrokes = function(e) {
if(this.searchTerm === "") {
if(!this.isOpen) {
this.openOptions();
return;
} else {
this.closeOptions();
this.updateSelection(hovered);
Expand Down
5 changes: 4 additions & 1 deletion src/javascripts/selectron.openOptions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ Selectron.prototype.openOptions = function() {
optionsBottom = this.options.offset().top + this.options.height(),
scrollPosition = win.scrollTop(),
windowHeight = win.height(),
isOverflowing = optionsBottom > (windowHeight + scrollPosition);
isOverflowing = optionsBottom > (windowHeight + scrollPosition),
selected = this.options.find('.selectron__option--is-selected');

selected.addClass('selectron__option--is-hovered');

this.options
.addClass('selectron__options--is-open')
Expand Down
1 change: 0 additions & 1 deletion src/javascripts/selectron.registerEvents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ Selectron.prototype.registerEvents = function() {
},
'mouseleave': function() {
self.optionsAreHovered = false;
self.options.find('.selectron__option--is-hovered').removeClass('selectron__option--is-hovered');
}
});
};
5 changes: 4 additions & 1 deletion src/javascripts/selectron.toggleOptions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ Selectron.prototype.toggleOptions = function(e) {
optionsBottom = this.options.offset().top + this.options.height(),
scrollPosition = win.scrollTop(),
windowHeight = win.height(),
isOverflowing = optionsBottom > (windowHeight + scrollPosition);
isOverflowing = optionsBottom > (windowHeight + scrollPosition),
selected = this.options.find('.selectron__option--is-selected');

selected.toggleClass('selectron__option--is-hovered');

this.options
.toggleClass('selectron__options--is-open')
Expand Down
14 changes: 11 additions & 3 deletions tests/selectron.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,8 @@ Selectron.prototype.clearSearchTerm = function() {
// --------------------------------------------------------------------------
Selectron.prototype.closeOptions = function() {
if(!this.optionsAreHovered) {
var hovered = this.options.find('.selectron__option--is-hovered');
hovered.removeClass('selectron__option--is-hovered');
this.options.removeClass('selectron__options--is-open selectron__options--is-overflowing');
this.trigger.removeClass('selectron__trigger--is-open selectron__trigger--is-overflowing');
this.isOpen = false;
Expand Down Expand Up @@ -149,6 +151,7 @@ Selectron.prototype.handleKeyStrokes = function(e) {
if(this.searchTerm === "") {
if(!this.isOpen) {
this.openOptions();
return;
} else {
this.closeOptions();
this.updateSelection(hovered);
Expand Down Expand Up @@ -206,7 +209,10 @@ Selectron.prototype.openOptions = function() {
optionsBottom = this.options.offset().top + this.options.height(),
scrollPosition = win.scrollTop(),
windowHeight = win.height(),
isOverflowing = optionsBottom > (windowHeight + scrollPosition);
isOverflowing = optionsBottom > (windowHeight + scrollPosition),
selected = this.options.find('.selectron__option--is-selected');

selected.addClass('selectron__option--is-hovered');

this.options
.addClass('selectron__options--is-open')
Expand Down Expand Up @@ -308,7 +314,6 @@ Selectron.prototype.registerEvents = function() {
},
'mouseleave': function() {
self.optionsAreHovered = false;
self.options.find('.selectron__option--is-hovered').removeClass('selectron__option--is-hovered');
}
});
};
Expand All @@ -323,7 +328,10 @@ Selectron.prototype.toggleOptions = function(e) {
optionsBottom = this.options.offset().top + this.options.height(),
scrollPosition = win.scrollTop(),
windowHeight = win.height(),
isOverflowing = optionsBottom > (windowHeight + scrollPosition);
isOverflowing = optionsBottom > (windowHeight + scrollPosition),
selected = this.options.find('.selectron__option--is-selected');

selected.toggleClass('selectron__option--is-hovered');

this.options
.toggleClass('selectron__options--is-open')
Expand Down
8 changes: 4 additions & 4 deletions tests/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
<select>
<option value="">Please select something</option>
<optgroup label="Cool People">
<option value="Max">Max</option>
<option value="Miles">Miles</option>
<option value="Millie">Millie</option>
<option value="Max">Max Millions</option>
<option value="Miles">Miles Davis</option>
<option value="Millie">Millie Molly</option>
</optgroup>
<optgroup label="Not Cool People">
<option value="Other">Everyone Else</option>
<option value="Boom">Secret</option>
<option value="Boom">Secret Option</option>
</optgroup>
</select>

Expand Down

0 comments on commit d202b7d

Please sign in to comment.