Merge pull request #1554 from rmisio/1536

Adds a Back To Top button to the Discover and User pages

Author: jjeffryes

css/obBase.css

@@ -451,11 +451,11 @@ h6, .h6 {
 #sideBar {
   position: fixed;
   right: -183px;
-  top: 78px;
+  top: 75px;
   width:230px;
   background-color: #252525;
   border-left: 0;
-  height: calc(100% - 50px);
+  height: calc(100% - 71px);
   z-index: 0;
   transition: right 0.5s ease;
   color: #DDD;
@@ -6218,3 +6218,23 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   background-color: #eeeae1;
   height: 100%;  
 }
+
+.backToTop {
+  position: fixed;
+  bottom: 15px;
+  right: 73px;
+  padding: 10px;
+  background-color: #252525;
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 300ms ease, right 0.5s ease;
+}
+
+.backToTop.slideUp {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+#ov1.chatOpen .backToTop {
+  right: 303px;
+}

js/start.js

@@ -406,7 +406,6 @@ var loadProfile = function(landingRoute, onboarded) {
               });
 
               $('#sideBar').html(app.chatVw.render().el);
-              $('html').addClass('chatLoaded');
 
               app.router = new router({userModel: user, userProfile: userProfile, socketView: newSocketView});
 

js/templates/backToTop.html

@@ -0,0 +1 @@
+<div class="backToTop clickable zIndex1 <% ob.className && print(ob.className) %>"><span class="icon ion-chevron-up"></span> Back To Top</div>

js/templates/home.html

@@ -98,6 +98,7 @@ <h1 class="fancy-heading fontSize20 vCentered js-discoverHeading"><%= polyglot.t
       </div>
     </div>
   </div>
+  <%= ob.backToTopTmpl() %>
   <div class="js-feed minHeight650 rowTop30 hide alignCenter fontSize14">
     <h1 class="fancy-heading width100 fontweight500"><%= polyglot.t('ComingSoon') %></h1>
     <div class="row20">

js/templates/userPage.html

@@ -588,6 +588,8 @@ <h1 class="page-userNameLarge floatLeft fancy-heading fontSize20 colorWhiteForce
   </div>
 </div>
 
+<%= ob.backToTopTmpl({ className: 'custCol-secondary' }) %>
+
 <div class="overlay overlayObscurring hide js-blockedWarning">
   <div class="modalHolder">
     <div class="modal">

js/views/homeVw.js

@@ -1,10 +1,9 @@
 'use strict';
 
 var __ = require('underscore'),
+    $ = require('jquery'),
     Backbone = require('backbone'),
-    $ = require('jquery');
-Backbone.$ = $;
-var loadTemplate = require('../utils/loadTemplate'),
+    loadTemplate = require('../utils/loadTemplate'),
     baseVw = require('./baseVw'),
     itemShortView = require('./itemShortVw'),
     itemShortModel = require('../models/itemShortMd'),
@@ -27,7 +26,8 @@ module.exports = baseVw.extend({
     'focus .js-homeSearchItems': 'searchItemsFocus',
     'blur .js-homeSearchItems': 'searchItemsBlur',
     'click .js-homeListingsFollowed': 'clickListingsFollowed',
-    'click .js-homeListingsAll': 'clickListingsAll'
+    'click .js-homeListingsAll': 'clickListingsAll',
+    'click .backToTop': 'clickBackToTop'
   },
 
   initialize: function(options){
@@ -150,43 +150,51 @@ module.exports = baseVw.extend({
   render: function(){
     var self = this;
     $('#content').html(this.$el);
-    loadTemplate('./js/templates/home.html', function(loadedTemplate) {
-      self.$el.html(loadedTemplate());
-      self.setState(self.state, self.searchItemsText);
-      if (self.model.get('page').profile.vendor == true) {
-        self.$el.find('.js-homeCreateStore').addClass('hide');
-        self.$el.find('.js-homeMyPage').addClass('show');
-        self.$el.find('.js-homeCreateListing').addClass('show');
-      } else {
-        self.$el.find('.js-homeCreateStore').addClass('show');
-        self.$el.find('.js-homeCreateListing').addClass('hide');
-      }
 
-      //get vendors and items
-      self.loadingVendors = true;
-      self.socketView.getVendors(self.socketUsersID);
-      //set the filter
-      if (localStorage.getItem('homeShowAll') == "yes"){
-        self.setListingsAll();
-        self.loadAllItems();
-      } else {
-        self.setListingsFollowed();
-        self.loadFollowedItems();
-      }
+    loadTemplate('./js/templates/backToTop.html', function(backToTopTmpl) {
+      loadTemplate('./js/templates/home.html', function(loadedTemplate) {
+        self.$el.html(loadedTemplate({
+          backToTopTmpl: backToTopTmpl
+        }));
+
+        self.setState(self.state, self.searchItemsText);
+        if(self.model.get('page').profile.vendor == true) {
+          self.$el.find('.js-homeCreateStore').addClass('hide');
+          self.$el.find('.js-homeMyPage').addClass('show');
+          self.$el.find('.js-homeCreateListing').addClass('show');
+        }else{
+          self.$el.find('.js-homeCreateStore').addClass('show');
+          self.$el.find('.js-homeCreateListing').addClass('hide');
+        }
 
-      //listen to scrolling on container
-      self.scrollHandler = __.bind(
-        __.throttle(self.onScroll, 100),
-        self
-      );
-      self.obContainer.on('scroll', self.scrollHandler);
+        //get vendors and items
+        self.loadingVendors = true;
+        self.socketView.getVendors(self.socketUsersID);
+        //set the filter
+        if(localStorage.getItem('homeShowAll') == "yes"){
+          self.setListingsAll();
+          self.loadAllItems();
+        } else {
+          self.setListingsFollowed();
+          self.loadFollowedItems();
+        }
 
-      //populate search field
-      if (self.searchItemsText){
-        self.$el.find('.js-homeSearchItems').val("#" + self.searchItemsText);
-        self.$el.find('.js-homeListingToggle').addClass('hide');
-        $('#obContainer').scrollTop(0);
-      }
+        //listen to scrolling on container
+        self.scrollHandler = __.bind(
+          __.throttle(self.onScroll, 100),
+          self
+        );
+        self.obContainer.on('scroll', self.scrollHandler);
+
+        //populate search field
+        if(self.searchItemsText){
+          self.$el.find('.js-homeSearchItems').val("#" + self.searchItemsText);
+          self.$el.find('.js-homeListingToggle').addClass('hide');
+          $('#obContainer').scrollTop(0);
+        }
+
+        self.$backToTop = self.$('.backToTop');
+      });
     });
   },
 
@@ -393,7 +401,15 @@ module.exports = baseVw.extend({
 
   unblockUserClick: function(e) {
     this.userModel.unblockUser(e.view.model.get('guid'));
-  },  
+  },
+
+  clickBackToTop: function() {
+    this.obContainer.animate({ scrollTop: 0 }, {
+      complete: () => {
+        this.$backToTop.removeClass('slideUp');
+      }
+    });
+  },
 
   onScroll: function(){
     if (this.obContainer[0].scrollTop + this.obContainer[0].clientHeight + 200 > this.obContainer[0].scrollHeight && !this.searchItemsText){
@@ -407,6 +423,15 @@ module.exports = baseVw.extend({
         this.socketView.getVendors(this.socketUsersID);
       }
     }
+
+    if (
+      this.state === "products" && this.obContainer[0].scrollTop > 180 ||
+      this.state === "vendors" && this.obContainer[0].scrollTop > 140
+    ) {
+      this.$backToTop.addClass('slideUp');
+    } else {
+      this.$backToTop.removeClass('slideUp');
+    }
   },
 
   clearItems: function(){