Skip to content
This repository was archived by the owner on May 16, 2019. It is now read-only.

Commit 5d05800

Browse files
rmisiormisio
committed
finished up back to top butt on discover and user pages
1 parent f62072e commit 5d05800

File tree

7 files changed

+100
-76
lines changed

7 files changed

+100
-76
lines changed

‎css/obBase.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6250,14 +6250,16 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
62506250

62516251
.backToTop {
62526252
position: fixed;
6253-
bottom: 0;
6253+
bottom: 15px;
62546254
right: 73px;
62556255
padding: 10px;
62566256
background-color: #086A9E;
62576257
transform: translateY(100%);
6258-
transition: transform 300ms ease;
6258+
opacity: 0;
6259+
transition: all 300ms ease;
62596260
}
62606261

62616262
.backToTop.slideUp {
6263+
opacity: 1;
62626264
transform: translateY(0);
62636265
}

‎js/start.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,6 @@ var loadProfile = function(landingRoute, onboarded) {
404404
});
405405

406406
$('#sideBar').html(app.chatVw.render().el);
407-
$('html').addClass('chatLoaded');
408407

409408
app.router = new router({userModel: user, userProfile: userProfile, socketView: newSocketView});
410409

‎js/templates/backToTop.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div class="backToTop <% ob.className && print(ob.className) %>"><span class="icon ion-chevron-up"></span> Back To Top</div>
1+
<div class="backToTop clickable zIndex1 <% ob.className && print(ob.className) %>"><span class="icon ion-chevron-up"></span> Back To Top</div>

‎js/templates/userPage.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -589,6 +589,8 @@ <h1 class="page-userNameLarge floatLeft fancy-heading fontSize20 colorWhiteForce
589589
</div>
590590
</div>
591591

592+
<%= ob.backToTopTmpl() %>
593+
592594
<div class="overlay overlayObscurring hide js-blockedWarning">
593595
<div class="modalHolder">
594596
<div class="modal modal-navOffset">

‎js/views/homeVw.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
var __ = require('underscore'),
44
$ = require('jquery'),
55
Backbone = require('backbone'),
6-
velocity = require('velocity-animate'),
76
loadTemplate = require('../utils/loadTemplate'),
87
baseVw = require('./baseVw'),
98
itemShortView = require('./itemShortVw'),
@@ -405,8 +404,7 @@ module.exports = baseVw.extend({
405404
},
406405

407406
clickBackToTop: function() {
408-
this.obContainer.velocity('scroll', {
409-
offset: 0,
407+
this.obContainer.animate({ scrollTop: 0 }, {
410408
complete: () => {
411409
this.$backToTop.removeClass('slideUp');
412410
}

‎js/views/userPageVw.js‎

Lines changed: 92 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,8 @@ module.exports = baseVw.extend({
162162
'click .js-unblock': 'unblockUserClick',
163163
'click .js-showBlockedUser': 'showBlockedUser',
164164
'change .js-categories': 'categoryChanged',
165-
'click .js-showNSFWContent': 'clickShowNSFWContent'
165+
'click .js-showNSFWContent': 'clickShowNSFWContent',
166+
'click .backToTop': 'clickBackToTop'
166167
},
167168

168169
initialize: function (options) {
@@ -213,6 +214,7 @@ module.exports = baseVw.extend({
213214
this.showNSFW = options.skipNSFWmodal ? options.skipNSFWmodal : JSON.parse(localStorage.getItem('NSFWFilter'));
214215
this.showNSFWContent = this.showNSFW;
215216
this.currentItemHash = options.itemHash;
217+
this.$obContainer = $('#obContainer');
216218
//hold changes to the page for undoing, such as custom colors
217219
this.undoCustomAttributes = {
218220
profile: {
@@ -365,71 +367,97 @@ module.exports = baseVw.extend({
365367
//make sure container is cleared
366368
$('#content').html(this.$el);
367369

368-
loadTemplate('./js/templates/userPage.html', function(loadedTemplate) {
369-
self.setCustomStyles();
370-
self.$el.html(loadedTemplate(self.model.toJSON()));
371-
self.fetchReviews();
372-
self.fetchFollowing();
373-
self.getIsModerator();
374-
self.fetchListings();
375-
//save state of the page
376-
self.undoCustomAttributes.background_color = self.model.get('page').profile.background_color;
377-
self.undoCustomAttributes.primary_color = self.model.get('page').profile.primary_color;
378-
self.undoCustomAttributes.secondary_color = self.model.get('page').profile.secondary_color;
379-
self.undoCustomAttributes.text_color = self.model.get('page').profile.text_color;
380-
self.setCustomStyles();
381-
self.setState(self.state, self.currentItemHash, { replaceHistory: true });
382-
383-
//check if user is blocked
384-
if(!self.options.ownPage && isBlocked) {
385-
self.hideThisUser("blocked");
386-
}
370+
loadTemplate('./js/templates/backToTop.html', function(backToTopTmpl) {
371+
loadTemplate('./js/templates/userPage.html', function(loadedTemplate) {
372+
self.setCustomStyles();
373+
self.$el.html(loadedTemplate(
374+
__.extend(self.model.toJSON(), {
375+
backToTopTmpl: backToTopTmpl
376+
})
377+
));
378+
self.fetchReviews();
379+
self.fetchFollowing();
380+
self.getIsModerator();
381+
self.fetchListings();
382+
//save state of the page
383+
self.undoCustomAttributes.background_color = self.model.get('page').profile.background_color;
384+
self.undoCustomAttributes.primary_color = self.model.get('page').profile.primary_color;
385+
self.undoCustomAttributes.secondary_color = self.model.get('page').profile.secondary_color;
386+
self.undoCustomAttributes.text_color = self.model.get('page').profile.text_color;
387+
self.setCustomStyles();
388+
self.setState(self.state, self.currentItemHash, { replaceHistory: true });
389+
self.$backToTop = self.$('.backToTop');
390+
391+
//check if user is blocked
392+
if(!self.options.ownPage && isBlocked) {
393+
self.hideThisUser("blocked");
394+
}
387395

388-
if(!self.options.ownPage && !self.skipNSFWmodal && self.model.get('page').profile.nsfw && !self.showNSFW){
389-
self.hideThisUser("nsfw");
390-
}
396+
if(!self.options.ownPage && !self.skipNSFWmodal && self.model.get('page').profile.nsfw && !self.showNSFW){
397+
self.hideThisUser("nsfw");
398+
}
391399

392-
self.$el.find('#image-cropper').cropit({
393-
smallImage: "stretch",
394-
maxZoom: 5,
395-
onFileReaderError: function(data){console.log(data);},
396-
onFileChange: function(){
397-
$('.js-headerLoading').removeClass('fadeOut');
398-
if(self.$el.find('#image-cropper').cropit('isZoomable')){
399-
$('.js-bannerRangeInput').removeClass('hide');
400+
self.$el.find('#image-cropper').cropit({
401+
smallImage: "stretch",
402+
maxZoom: 5,
403+
onFileReaderError: function(data){console.log(data);},
404+
onFileChange: function(){
405+
$('.js-headerLoading').removeClass('fadeOut');
406+
if(self.$el.find('#image-cropper').cropit('isZoomable')){
407+
$('.js-bannerRangeInput').removeClass('hide');
408+
}
409+
},
410+
onImageLoaded: function(){$('.js-headerLoading').addClass('fadeOut');},
411+
onImageError: function(errorObject, errorCode, errorMessage){
412+
console.log(errorObject);
413+
console.log(errorCode);
414+
console.log(errorMessage);
400415
}
401-
},
402-
onImageLoaded: function(){$('.js-headerLoading').addClass('fadeOut');},
403-
onImageError: function(errorObject, errorCode, errorMessage){
404-
console.log(errorObject);
405-
console.log(errorCode);
406-
console.log(errorMessage);
407-
}
408-
});
409-
410-
var $userPageHeader = $('.user-page-header');
411-
412-
$("#obContainer").scroll(function(){
413-
if ($(this).scrollTop() > 400 && self.slimVisible === false ) {
414-
self.slimVisible = true;
415-
$('.user-page-header-slim').addClass('textOpacity1').addClass('top70');
416-
$userPageHeader.removeClass('shadow-inner1').addClass('zIndex4');
417-
$userPageHeader.find('.rowItem').hide();
418-
$('.user-page-navigation-buttons').addClass('positionFixed positionTop68');
419-
}
420-
if ($(this).scrollTop() < 400 && self.slimVisible === true ) {
421-
self.slimVisible = false;
422-
$('.user-page-header-slim').removeClass('top70');
423-
$userPageHeader.addClass('shadow-inner1').removeClass('zIndex4');
424-
$userPageHeader.find('.rowItem').show();
425-
$('.user-page-navigation-buttons').removeClass('positionFixed positionTop68');
426-
}
416+
});
417+
418+
self.scrollHandler = __.bind(
419+
__.throttle(self.onScroll, 100),
420+
self
421+
);
422+
423+
self.$obContainer.off('scroll', self.scrollHandler);
424+
self.$obContainer.on('scroll', self.scrollHandler);
427425
});
428426
});
429427

430428
return this;
431429
},
432430

431+
onScroll: function() {
432+
if (this.$obContainer.scrollTop() > 400 && this.slimVisible === false ) {
433+
this.slimVisible = true;
434+
this.$('.user-page-header-slim').addClass('textOpacity1 top70');
435+
this.$('.user-page-header').removeClass('shadow-inner1')
436+
.addClass('zIndex4')
437+
.find('.rowItem')
438+
.hide();
439+
this.$('.user-page-navigation-buttons').addClass('positionFixed positionTop68');
440+
this.$backToTop.addClass('slideUp');
441+
} else if (this.$obContainer.scrollTop() < 400 && this.slimVisible === true ) {
442+
this.slimVisible = false;
443+
this.$('.user-page-header-slim').removeClass('top70');
444+
this.$('.user-page-header').addClass('shadow-inner1')
445+
.removeClass('zIndex4')
446+
.find('.rowItem')
447+
.show();
448+
this.$('.user-page-navigation-buttons').removeClass('positionFixed positionTop68');
449+
this.$backToTop.removeClass('slideUp');
450+
}
451+
},
452+
453+
clickBackToTop: function() {
454+
this.$obContainer.animate({ scrollTop: 0 }, {
455+
complete: () => {
456+
this.$backToTop.removeClass('slideUp');
457+
}
458+
});
459+
},
460+
433461
setCustomStyles: function() {
434462
"use strict";
435463
var self = this,
@@ -460,13 +488,13 @@ module.exports = baseVw.extend({
460488
//clear old templates
461489
this.$el.find('.js-list4').html("");
462490
this.renderItem(hash);
463-
$('#obContainer').scrollTop(352);
491+
this.$obContainer.scrollTop(352);
464492
}else if(state === "listingOld") {
465493
this.tabClick(this.$el.find(".js-storeTab"), this.$el.find(".js-item"));
466-
$('#obContainer').scrollTop(352);
494+
this.$obContainer.scrollTop(352);
467495
}else if(state === "listingNew"){
468496
this.tabClick(this.$el.find(".js-storeTab"), this.$el.find(".js-store"));
469-
$('#obContainer').scrollTop(352);
497+
this.$obContainer.scrollTop(352);
470498
this.addTabToHistory('listingNew', options.replaceHistory);
471499
this.sellItem();
472500
} else if(state === "createStore") {
@@ -536,9 +564,7 @@ module.exports = baseVw.extend({
536564
this.$el.find('.js-unfollow').removeClass('confirm');
537565
this.$el.find('.js-removemoderator').removeClass('confirm');
538566
this.$el.find('.user-page-header-slim-bg-cover').removeClass('user-page-header-slim-bg-cover-customize');
539-
document.getElementById('obContainer').classList.remove("box-borderDashed");
540-
document.getElementById('obContainer').classList.remove("noScrollBar");
541-
document.getElementById('obContainer').classList.remove("overflowHidden");
567+
this.$obContainer[0].classList.remove("box-borderDashed", "noScrollBar", "overflowHidden");
542568
//unhide the ones that are needed
543569
if(this.options.ownPage === true) {
544570
if(state === "listing" || state === "listingOld") {
@@ -549,9 +575,7 @@ module.exports = baseVw.extend({
549575
this.$el.find('.js-pageCustomizationButtons').removeClass('hide');
550576
this.$el.find('#customizeControls').removeClass('hide');
551577
this.$el.find('.user-page-header-slim-bg-cover').addClass('user-page-header-slim-bg-cover-customize');
552-
document.getElementById('obContainer').classList.add("box-borderDashed");
553-
document.getElementById('obContainer').classList.add("noScrollBar");
554-
document.getElementById('obContainer').classList.add("overflowHidden");
578+
this.$obContainer[0].classList.add("box-borderDashed", "noScrollBar", "overflowHidden");
555579
} else {
556580
this.$el.find('.js-pageButtons').removeClass('hide');
557581
}
@@ -1108,7 +1132,7 @@ module.exports = baseVw.extend({
11081132
this.setControls('customize');
11091133
$('.user-page-content').addClass('pull-up4');
11101134
$('.user-page-header').addClass('shadow-inner1-strong');
1111-
$('#obContainer').animate({ scrollTop: "0" });
1135+
this.$obContainer.animate({ scrollTop: "0" });
11121136
},
11131137

11141138
hideColorRecommendations: function(e) {
@@ -1435,7 +1459,7 @@ module.exports = baseVw.extend({
14351459
"use strict";
14361460

14371461
this.setState(this.lastTab);
1438-
$('#obContainer').animate({ scrollTop: 0 });
1462+
this.$obContainer.animate({ scrollTop: 0 });
14391463

14401464
this.editing = false;
14411465
},

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@
4141
"sortablejs": "^1.4.2",
4242
"taggle": "1.6.1",
4343
"underscore": "1.8.3",
44-
"velocity-animate": "^1.2.3",
4544
"winreg": "^1.1.1",
4645
"yargs": "^4.1.0"
4746
},

0 commit comments

Comments
 (0)