Convert BackToTop to a backbone view

app/assets/javascripts/app/app.js

@@ -115,6 +115,7 @@ var app = {
       new app.views.AspectMembership({el: this});
     });
     app.sidebar = new app.views.Sidebar();
+    app.backToTop = new app.views.BackToTop();
   },
 
   /* mixpanel wrapper function */

app/assets/javascripts/app/views/back_to_top_view.js

+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+
+app.views.BackToTop = Backbone.View.extend({
+  events: {
+    "click #back-to-top": "backToTop"
+  },
+
+  initialize: function() {
+    var throttledScroll = _.throttle(this.toggleVisibility, 250);
+    $(window).scroll(throttledScroll);
+  },
+
+  backToTop: function(evt) {
+    evt.preventDefault();
+    $("html, body").animate({scrollTop: 0});
+  },
+
+  toggleVisibility: function() {
+    if($("html, body").scrollTop() > 1000) {
+      $("#back-to-top").addClass("visible");
+    } else {
+      $("#back-to-top").removeClass("visible");
+    }
+  }
+});
+// @license-end

app/assets/javascripts/diaspora.js

@@ -68,7 +68,6 @@
   Diaspora.BasePage = function(body) {
     $.extend(this, Diaspora.BaseWidget);
     $.extend(this, {
-      backToTop: this.instantiate("BackToTop", body.find("#back-to-top")),
       directionDetector: this.instantiate("DirectionDetector"),
       events: function() { return Diaspora.page.eventsContainer.data("events"); },
       flashMessages: this.instantiate("FlashMessages"),

app/assets/javascripts/widgets/back-to-top.js

-// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
-
-(function() {
-  var BackToTop = function() {
-    var self = this;
-
-    this.subscribe("widget/ready", function(evt, button) {
-      $.extend(self, {
-        button: button,
-        body: $("html, body"),
-        window: $(window)
-      });
-
-      self.button.click(self.backToTop);
-
-      var throttledScroll = _.throttle($.proxy(self.toggleVisibility, self), 250);
-      self.window.scroll(throttledScroll);
-    });
-
-    this.backToTop = function(evt) {
-      evt.preventDefault();
-      self.body.animate({scrollTop: 0});
-    };
-
-    this.toggleVisibility = function() {
-      self.button[
-        (self.body.scrollTop() > 1000) ?
-          'addClass' :
-          'removeClass'
-      ]('visible');
-    };
-  };
-
-  Diaspora.Widgets.BackToTop = BackToTop;
-})();
-// @license-end

spec/javascripts/app/views/back_to_top_view_spec.js

+describe("app.views.BackToTop", function() {
+  beforeEach(function() {
+    spec.loadFixture("aspects_index");
+    this.view = new app.views.BackToTop();
+  });
+
+  describe("backToTop", function() {
+    it("scrolls to the top of the page", function() {
+      var spy = spyOn($.fn, "animate");
+      this.view.backToTop($.Event());
+      expect(spy).toHaveBeenCalledWith({scrollTop: 0});
+    });
+  });
+
+  describe("toggleVisibility", function() {
+    it("toggles the button visibility depending on the scroll position", function() {
+      expect($("#back-to-top")).not.toHaveClass("visible");
+      var spy = spyOn($.fn, "scrollTop").and.returnValue(1000);
+      this.view.toggleVisibility();
+      expect($("#back-to-top")).not.toHaveClass("visible");
+      spy.and.returnValue(1001);
+      this.view.toggleVisibility();
+      expect($("#back-to-top")).toHaveClass("visible");
+      spy.and.returnValue(1000);
+      this.view.toggleVisibility();
+      expect($("#back-to-top")).not.toHaveClass("visible");
+    });
+  });
+});

spec/javascripts/widgets/back-to-top-spec.js

-describe("Diaspora.Widgets.BackToTop", function() {
-  var backToTop;
-  beforeEach(function() {
-    spec.loadFixture("aspects_index");
-    backToTop = Diaspora.BaseWidget.instantiate("BackToTop", $("#back-to-top"));
-    $.fx.off = true;
-  });
-
-  describe("integration", function() {
-    beforeEach(function() {
-      backToTop = new Diaspora.Widgets.BackToTop();
-
-      spyOn(backToTop, "backToTop");
-      spyOn(backToTop, "toggleVisibility");
-
-      backToTop.publish("widget/ready", [$("#back-to-top")]);
-    });
-
-    it("calls backToTop when the button is clicked", function() {
-      backToTop.button.click();
-
-      expect(backToTop.backToTop).toHaveBeenCalled();
-    });
-  });
-
-  describe("backToTop", function() {
-    it("animates scrollTop to 0", function() {
-      backToTop.backToTop($.Event());
-
-      expect($("body").scrollTop()).toEqual(0);
-    });
-  });
-
-  describe("toggleVisibility", function() {
-    it("adds a visibility class to the button", function() {
-      var spy = spyOn(backToTop.body, "scrollTop").and.returnValue(999);
-
-      backToTop.toggleVisibility();
-
-      expect(backToTop.button.hasClass("visible")).toBe(false);
-
-      spy.and.returnValue(1001);
-
-      backToTop.toggleVisibility();
-
-      expect(backToTop.button.hasClass("visible")).toBe(true);
-    });
-  });
-
-  afterEach(function() {
-    $.fx.off = false;
-  });
-});