Fix overflow with perfect scrollbar
This commit is contained in:
parent
188e554b7b
commit
df12878371
2 changed files with 69 additions and 9 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue