Fix overflow with perfect scrollbar

This commit is contained in:
Steffen van Bergerem 2015-06-21 23:24:21 +02:00
parent 188e554b7b
commit df12878371
2 changed files with 69 additions and 9 deletions

View file

@ -34,6 +34,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
this.resetParams();
this.ajaxLoader.show();
this.dropdown.addClass("dropdown-open");
this.updateScrollbar();
this.dropdownNotifications.addClass("loading");
this.getNotifications();
},
@ -43,10 +44,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
var inHovercard = $.contains(app.hovercard.el, evt.target);
if(!inDropdown && !inHovercard && this.dropdownShowing()){
this.dropdown.removeClass("dropdown-open");
if(this.perfectScrollbarInitialized) {
this.dropdownNotifications.perfectScrollbar("destroy");
this.perfectScrollbarInitialized = false;
}
this.destroyScrollbar();
}
},
@ -111,15 +109,27 @@ app.views.NotificationDropdown = app.views.Base.extend({
app.helpers.timeago(this.dropdownNotifications);
if(this.perfectScrollbarInitialized) {
this.dropdownNotifications.perfectScrollbar("destroy");
}
this.dropdownNotifications.perfectScrollbar();
this.perfectScrollbarInitialized = true;
this.updateScrollbar();
this.dropdownNotifications.removeClass("loading");
this.dropdownNotifications.scroll(function(){
self.dropdownScroll();
});
},
updateScrollbar: function() {
if(this.perfectScrollbarInitialized) {
this.dropdownNotifications.perfectScrollbar("update");
} else {
this.dropdownNotifications.perfectScrollbar();
this.perfectScrollbarInitialized = true;
}
},
destroyScrollbar: function() {
if(this.perfectScrollbarInitialized) {
this.dropdownNotifications.perfectScrollbar("destroy");
this.perfectScrollbarInitialized = false;
}
}
});
// @license-end

View file

@ -14,6 +14,11 @@ describe("app.views.NotificationDropdown", function() {
this.view.showDropdown();
expect(this.view.resetParams).toHaveBeenCalled();
});
it("Calls updateScrollbar()", function(){
spyOn(this.view, "updateScrollbar");
this.view.showDropdown();
expect(this.view.updateScrollbar).toHaveBeenCalled();
});
it("Changes CSS", function(){
expect($("#notification-dropdown")).not.toHaveClass("dropdown-open");
this.view.showDropdown();
@ -105,5 +110,50 @@ describe("app.views.NotificationDropdown", function() {
this.view.renderNotifications();
expect(this.view.hideAjaxLoader).toHaveBeenCalled();
});
it("Calls updateScrollbar()", function(){
spyOn(this.view, "updateScrollbar");
this.view.renderNotifications();
expect(this.view.updateScrollbar).toHaveBeenCalled();
});
});
context("updateScrollbar", function() {
it("Initializes perfectScrollbar", function(){
this.view.perfectScrollbarInitialized = false;
spyOn($.fn, "perfectScrollbar");
this.view.updateScrollbar();
expect($.fn.perfectScrollbar).toHaveBeenCalledWith();
expect($.fn.perfectScrollbar.calls.mostRecent().object).toEqual(this.view.dropdownNotifications);
expect(this.view.perfectScrollbarInitialized).toBeTruthy();
});
it("Updates perfectScrollbar", function(){
this.view.perfectScrollbarInitialized = true;
this.view.dropdownNotifications.perfectScrollbar();
spyOn($.fn, "perfectScrollbar");
this.view.updateScrollbar();
expect($.fn.perfectScrollbar).toHaveBeenCalledWith("update");
expect($.fn.perfectScrollbar.calls.mostRecent().object).toEqual(this.view.dropdownNotifications);
expect(this.view.perfectScrollbarInitialized).toBeTruthy();
});
});
context("destroyScrollbar", function() {
it("destroys perfectScrollbar", function(){
this.view.perfectScrollbarInitialized = true;
this.view.dropdownNotifications.perfectScrollbar();
spyOn($.fn, "perfectScrollbar");
this.view.destroyScrollbar();
expect($.fn.perfectScrollbar).toHaveBeenCalledWith("destroy");
expect($.fn.perfectScrollbar.calls.mostRecent().object).toEqual(this.view.dropdownNotifications);
expect(this.view.perfectScrollbarInitialized).toBeFalsy();
});
it("doesn't destroy perfectScrollbar if it isn't initialized", function(){
this.view.perfectScrollbarInitialized = false;
spyOn($.fn, "perfectScrollbar");
this.view.destroyScrollbar();
expect($.fn.perfectScrollbar).not.toHaveBeenCalled();
});
});
});