From 0df09267390f693d8a14aab81e9a502eb80d1f21 Mon Sep 17 00:00:00 2001
From: Steffen van Bergerem <svbergerem@online.de>
Date: Sun, 2 Aug 2015 03:46:55 +0200
Subject: [PATCH] Convert BackToTop to a backbone view
---
app/assets/javascripts/app/app.js | 1 +
.../javascripts/app/views/back_to_top_view.js | 26 +++++++++
app/assets/javascripts/diaspora.js | 1 -
app/assets/javascripts/widgets/back-to-top.js | 36 -------------
.../app/views/back_to_top_view_spec.js | 29 ++++++++++
spec/javascripts/widgets/back-to-top-spec.js | 53 -------------------
6 files changed, 56 insertions(+), 90 deletions(-)
create mode 100644 app/assets/javascripts/app/views/back_to_top_view.js
delete mode 100644 app/assets/javascripts/widgets/back-to-top.js
create mode 100644 spec/javascripts/app/views/back_to_top_view_spec.js
delete mode 100644 spec/javascripts/widgets/back-to-top-spec.js
diff --git a/app/assets/javascripts/app/app.js b/app/assets/javascripts/app/app.js
index 11f5dd367a..841a0cbd2c 100644
--- a/app/assets/javascripts/app/app.js
+++ b/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 */
diff --git a/app/assets/javascripts/app/views/back_to_top_view.js b/app/assets/javascripts/app/views/back_to_top_view.js
new file mode 100644
index 0000000000..66c5164755
--- /dev/null
+++ b/app/assets/javascripts/app/views/back_to_top_view.js
@@ -0,0 +1,26 @@
+// @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
diff --git a/app/assets/javascripts/diaspora.js b/app/assets/javascripts/diaspora.js
index 0549057869..b4a70e1f40 100644
--- a/app/assets/javascripts/diaspora.js
+++ b/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"),
diff --git a/app/assets/javascripts/widgets/back-to-top.js b/app/assets/javascripts/widgets/back-to-top.js
deleted file mode 100644
index bde326774e..0000000000
--- a/app/assets/javascripts/widgets/back-to-top.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// @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
diff --git a/spec/javascripts/app/views/back_to_top_view_spec.js b/spec/javascripts/app/views/back_to_top_view_spec.js
new file mode 100644
index 0000000000..8cfed56967
--- /dev/null
+++ b/spec/javascripts/app/views/back_to_top_view_spec.js
@@ -0,0 +1,29 @@
+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");
+ });
+ });
+});
diff --git a/spec/javascripts/widgets/back-to-top-spec.js b/spec/javascripts/widgets/back-to-top-spec.js
deleted file mode 100644
index 35543969a4..0000000000
--- a/spec/javascripts/widgets/back-to-top-spec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-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;
- });
-});
--
GitLab