back to top but in progress

Author: rmisio

css/obBase.css

@@ -6247,3 +6247,17 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   background-color: #eeeae1;
   height: 100%;  
 }
+
+.backToTop {
+  position: fixed;
+  bottom: 0;
+  right: 73px;
+  padding: 10px;
+  background-color: #086A9E;
+  transform: translateY(100%);
+  transition: transform 300ms ease;
+}
+
+.backToTop.slideUp {
+  transform: translateY(0);
+}

js/templates/backToTop.html

@@ -0,0 +1 @@
+<div class="backToTop <% 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/views/homeVw.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var __ = require('underscore'),
+    $ = require('jquery'),
     Backbone = require('backbone'),
-    $ = require('jquery');
-Backbone.$ = $;
-var loadTemplate = require('../utils/loadTemplate'),
+    velocity = require('velocity-animate'),
+    loadTemplate = require('../utils/loadTemplate'),
     baseVw = require('./baseVw'),
     itemShortView = require('./itemShortVw'),
     itemShortModel = require('../models/itemShortMd'),
@@ -27,7 +27,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,46 +151,50 @@ 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();
-      }
-
-      //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);
-      }
+    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');
+        }
 
+        //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();
+        }
 
+        //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');
+      });
     });
   },
 
@@ -397,7 +402,16 @@ module.exports = baseVw.extend({
 
   unblockUserClick: function(e) {
     this.userModel.unblockUser(e.view.model.get('guid'));
-  },  
+  },
+
+  clickBackToTop: function() {
+    this.obContainer.velocity('scroll', {
+      offset: 0,
+      complete: () => {
+        this.$backToTop.removeClass('slideUp');
+      }
+    });
+  },
 
   onScroll: function(){
     if(this.obContainer[0].scrollTop + this.obContainer[0].clientHeight + 200 > this.obContainer[0].scrollHeight && !this.searchItemsText){
@@ -411,6 +425,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(){

package.json

@@ -41,6 +41,7 @@
     "sortablejs": "^1.4.2",
     "taggle": "1.6.1",
     "underscore": "1.8.3",
+    "velocity-animate": "^1.2.3",
     "winreg": "^1.1.1",
     "yargs": "^4.1.0"
   },