Replace rails-assets-perfect-scrollbar with rails-assets-utatti-perfect-scrollbar

closes #7772

.eslintrc

@@ -10,16 +10,17 @@
     "autosize": false,
     "Backbone": false,
     "Bloodhound": false,
+    "blueimp": false,
     "gon": false,
     "Handlebars": false,
     "HandlebarsTemplates": false,
     "ImagePaths": false,
     "jsxc": false,
     "L": false,
-    "Routes": false,
     "OSM": false,
+    "PerfectScrollbar": false,
     "qq": false,
-    "blueimp": false,
+    "Routes": false,
 
     "loginAs": true,
     "logout": true,

Gemfile

@@ -120,7 +120,7 @@ source "https://rails-assets.org" do
   gem "rails-assets-jquery.are-you-sure",                 "1.9.0"
   gem "rails-assets-jquery-placeholder",                  "2.3.1"
   gem "rails-assets-jquery-textchange",                   "0.2.3"
-  gem "rails-assets-perfect-scrollbar",                   "0.6.16"
+  gem "rails-assets-utatti-perfect-scrollbar",            "1.3.0"
 end
 
 gem "markdown-it-html5-embed", "1.0.0"

Gemfile.lock

@@ -553,8 +553,8 @@ GEM
     rails-assets-markdown-it-sanitizer (0.4.3)
     rails-assets-markdown-it-sub (1.0.0)
     rails-assets-markdown-it-sup (1.0.0)
-    rails-assets-perfect-scrollbar (0.6.16)
     rails-assets-underscore (1.8.3)
+    rails-assets-utatti-perfect-scrollbar (1.3.0)
     rails-controller-testing (1.0.2)
       actionpack (~> 5.x, >= 5.0.1)
       actionview (~> 5.x, >= 5.0.1)
@@ -867,7 +867,7 @@ DEPENDENCIES
   rails-assets-markdown-it-sanitizer (= 0.4.3)!
   rails-assets-markdown-it-sub (= 1.0.0)!
   rails-assets-markdown-it-sup (= 1.0.0)!
-  rails-assets-perfect-scrollbar (= 0.6.16)!
+  rails-assets-utatti-perfect-scrollbar (= 1.3.0)!
   rails-controller-testing (= 1.0.2)
   rails-i18n (= 5.1.1)
   rails-timeago (= 2.16.0)

app/assets/javascripts/app/app.js

@@ -14,7 +14,7 @@
 //= require_tree ./collections
 //= require_tree ./views
 
-//= require perfect-scrollbar/perfect-scrollbar.jquery
+//= require utatti-perfect-scrollbar/dist/perfect-scrollbar
 
 var app = {
   collections: {},

app/assets/javascripts/app/views/notification_dropdown_view.js

@@ -12,7 +12,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
     this.dropdown = $("#notification-dropdown");
     this.dropdownNotifications = this.dropdown.find(".notifications");
     this.ajaxLoader = this.dropdown.find(".ajax-loader");
-    this.perfectScrollbarInitialized = false;
+    this.perfectScrollbar = null;
     this.dropdownNotifications.scroll(this.dropdownScroll.bind(this));
     this.bindCollectionEvents();
   },
@@ -106,18 +106,17 @@ app.views.NotificationDropdown = app.views.Base.extend({
   },
 
   updateScrollbar: function() {
-    if(this.perfectScrollbarInitialized) {
+    if (this.perfectScrollbar) {
-      this.dropdownNotifications.perfectScrollbar("update");
+      this.perfectScrollbar.update();
     } else {
-      this.dropdownNotifications.perfectScrollbar();
+      this.perfectScrollbar = new PerfectScrollbar(this.dropdownNotifications[0]);
-      this.perfectScrollbarInitialized = true;
     }
   },
 
   destroyScrollbar: function() {
-    if(this.perfectScrollbarInitialized) {
+    if (this.perfectScrollbar) {
-      this.dropdownNotifications.perfectScrollbar("destroy");
+      this.perfectScrollbar.destroy();
-      this.perfectScrollbarInitialized = false;
+      this.perfectScrollbar = null;
     }
   }
 });

app/assets/stylesheets/_application.scss

@@ -1,4 +1,4 @@
-@import 'perfect-scrollbar';
+@import 'utatti-perfect-scrollbar/css/perfect-scrollbar';
 
 @import 'color-variables';
 @import 'bootstrap-complete';

features/step_definitions/notifications_steps.rb

@@ -32,7 +32,7 @@ Then "the notification dropdown should be visible" do
 end
 
 Then "the notification dropdown scrollbar should be visible" do
-  expect(find(:css, ".ps-active-y")).to be_visible
+  expect(find(:css, ".ps--active-y")).to be_visible
 end
 
 Then /^there should be (\d+) notifications loaded$/ do |n|

spec/javascripts/app/views/notification_dropdown_view_spec.js

@@ -73,41 +73,34 @@ describe("app.views.NotificationDropdown", function() {
 
   describe("updateScrollbar", function() {
     it("Initializes perfectScrollbar", function() {
-      this.view.perfectScrollbarInitialized = false;
+      this.view.perfectScrollbar = null;
-      spyOn($.fn, "perfectScrollbar");
+      spyOn(window, "PerfectScrollbar");
       this.view.updateScrollbar();
-      expect($.fn.perfectScrollbar).toHaveBeenCalledWith();
+      expect(window.PerfectScrollbar).toHaveBeenCalledWith(this.view.dropdownNotifications[0]);
-      expect($.fn.perfectScrollbar.calls.mostRecent().object).toEqual(this.view.dropdownNotifications);
+      expect(this.view.perfectScrollbar).not.toBeNull();
-      expect(this.view.perfectScrollbarInitialized).toBeTruthy();
     });
 
     it("Updates perfectScrollbar", function() {
-      this.view.perfectScrollbarInitialized = true;
+      this.view.perfectScrollbar = new PerfectScrollbar(this.view.dropdownNotifications[0]);
-      this.view.dropdownNotifications.perfectScrollbar();
+      spyOn(this.view.perfectScrollbar, "update");
-      spyOn($.fn, "perfectScrollbar");
       this.view.updateScrollbar();
-      expect($.fn.perfectScrollbar).toHaveBeenCalledWith("update");
+      expect(this.view.perfectScrollbar.update).toHaveBeenCalled();
-      expect($.fn.perfectScrollbar.calls.mostRecent().object).toEqual(this.view.dropdownNotifications);
-      expect(this.view.perfectScrollbarInitialized).toBeTruthy();
     });
   });
 
   describe("destroyScrollbar", function() {
     it("destroys perfectScrollbar", function() {
-      this.view.perfectScrollbarInitialized = true;
+      this.view.perfectScrollbar = new PerfectScrollbar(this.view.dropdownNotifications[0]);
-      this.view.dropdownNotifications.perfectScrollbar();
+      var spy = jasmine.createSpy();
-      spyOn($.fn, "perfectScrollbar");
+      spyOn(this.view.perfectScrollbar, "destroy").and.callFake(spy);
       this.view.destroyScrollbar();
-      expect($.fn.perfectScrollbar).toHaveBeenCalledWith("destroy");
+      expect(spy).toHaveBeenCalled();
-      expect($.fn.perfectScrollbar.calls.mostRecent().object).toEqual(this.view.dropdownNotifications);
+      expect(this.view.perfectScrollbar).toBeNull();
-      expect(this.view.perfectScrollbarInitialized).toBeFalsy();
     });
 
     it("doesn't destroy perfectScrollbar if it isn't initialized", function() {
-      this.view.perfectScrollbarInitialized = false;
+      this.view.perfectScrollbar = null;
-      spyOn($.fn, "perfectScrollbar");
+      expect(this.view.destroyScrollbar).not.toThrow();
-      this.view.destroyScrollbar();
-      expect($.fn.perfectScrollbar).not.toHaveBeenCalled();
     });
   });