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

Commit 96f3390

Browse files
rmisiormisio
committed
moving restoring of the scroll position into the views
1 parent 21709db commit 96f3390

File tree

5 files changed

+42
-114
lines changed

5 files changed

+42
-114
lines changed

‎js/router.js‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,6 @@ module.exports = Backbone.Router.extend({
158158
},
159159

160160
execute: function(callback, args, name) {
161-
console.log(`boom: ${Backbone.history.getFragment()}`);
162-
163161
if (this.historyAction == 'default') {
164162
this.historyPosition += 1;
165163
this.historySize = this.historyPosition;
@@ -251,47 +249,28 @@ module.exports = Backbone.Router.extend({
251249
// remove / detach any existing view
252250
if (this.view) {
253251
if (this.view.cacheExpires) {
254-
this.view.__cachedScrollPos = this.$obContainer[0].scrollTop;
252+
this.trigger('cache-will-detach', { view: this.view });
255253
this.view.$el.detach();
256-
this.trigger('cache-detach', { view: this.view });
254+
this.trigger('cache-detached', { view: this.view });
257255
} else {
258256
this.view.close ? this.view.close() : this.view.remove()
259257
}
260258
}
261259

262260
if (cached && (now - cached.cachedAt < cached.view.cacheExpires)) {
263261
// we have an un-expired cached view, let's reattach it
264-
console.log('using cached');
265262
this.view = cached.view;
266263

267264
$('#content').html(this.view.$el);
268265
this.view.delegateEvents();
266+
this.$obContainer[0].scrollTop = 0;
269267

270-
// if (this.view.__cachedAddressBarText) {
271-
// // ensure our address bar text reflects the state of the cached view
272-
// window.obEventBus.trigger('setAddressBar', {'addressText': this.view.__cachedAddressBarText});
273-
// } else {
274-
// window.obEventBus.trigger('setAddressBar', options.addressBarText);
275-
// }
276-
277-
this.trigger('cache-reattach', {
268+
this.trigger('cache-reattached', {
278269
view: this.view,
279270
route: requestedRoute
280271
});
281-
282-
if (this.view.restoreScrollPosition &&
283-
this.view.restoreScrollPosition.call(this.view, { route: requestedRoute })) {
284-
console.log('restore scroll');
285-
this.$obContainer[0].scrollTop = this.view.__cachedScrollPos || 0;
286-
} else {
287-
console.log('scroll top');
288-
this.$obContainer[0].scrollTop = 0;
289-
}
290272
} else {
291-
console.log('brand spanking new');
292273
this.view = new (Function.prototype.bind.apply(View, [null].concat(options.viewArgs)));
293-
// // clear address bar. Must happen after we set out view above.
294-
// window.obEventBus.trigger('setAddressBar', options.addressBarText);
295274
$('#content').html(this.view.$el);
296275
this.$obContainer[0].scrollTop = 0;
297276

@@ -378,8 +357,6 @@ module.exports = Backbone.Router.extend({
378357
},
379358

380359
home: function(state, searchText){
381-
!state && this.navigate('home/products', { replace: true });
382-
383360
this.newView(homeView, {
384361
viewArgs: {
385362
userModel: this.userModel,

‎js/views/homeVw.js‎

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ module.exports = pageVw.extend({
3838
this.userModel = options.userModel;
3939
this.userProfile = options.userProfile;
4040
this.socketView = options.socketView;
41-
this.state = options.state;
41+
this.state = options.state || 'products';
4242
this.searchItemsText = options.searchItemsText;
4343
this.slimVisible = false;
4444
this.itemViews = [];
@@ -50,6 +50,7 @@ module.exports = pageVw.extend({
5050
this.ownFollowing = [];
5151
this.onlyFollowing = true;
5252
this.showNSFW = JSON.parse(localStorage.getItem('NSFWFilter'));
53+
this.cachedScrollPositions = {};
5354

5455
this.model.set({user: this.options.userModel.toJSON(), page: this.userProfile.toJSON()});
5556

@@ -71,40 +72,31 @@ module.exports = pageVw.extend({
7172

7273
this.fetchOwnFollowing(this.render());
7374

74-
this.listenTo(app.router, 'cache-detach', this.onCacheDetach);
75-
this.listenTo(app.router, 'cache-reattach', this.onCacheReattach);
75+
this.listenTo(app.router, 'cache-will-detach', this.onCacheWillDetach);
76+
this.listenTo(app.router, 'cache-detached', this.onCacheDetached);
77+
this.listenTo(app.router, 'cache-reattached', this.onCacheReattached);
7678
},
7779

78-
restoreScrollPosition: function(opts) {
79-
var splitRoute = opts.route.split('/');
80-
// routeSearchText = splitRoute[2] || '',
81-
// cachedSearchText = this.searchItemsText || '';
82-
83-
if (splitRoute[1] === this.state) {
84-
return true;
85-
}
86-
},
87-
88-
onCacheReattach: function(e) {
80+
onCacheReattached: function(e) {
8981
var splitRoute = e.route.split('/'),
90-
state;
82+
state = splitRoute[1];
9183

9284
if (e.view !== this) return;
85+
state = state || this.state;
9386

94-
if (splitRoute.length > 1) {
95-
// if our routed state doesn't equal our state, we'll
96-
// reset the scroll position.
97-
splitRoute[1] !== this.state && $('#obContainer').scrollTop(0);
98-
99-
this.setState(splitRoute[1]);
100-
splitRoute.length > 2 && splitRoute[2] !== this.searchItemsText &&
101-
this.searchItems(splitRoute[2]);
102-
}
103-
87+
if (this.cachedScrollPositions[state]) this.obContainer[0].scrollTop = this.cachedScrollPositions[state];
88+
this.setState(state);
89+
splitRoute[2] && splitRoute[2] !== this.searchItemsText && this.searchItems(splitRoute[2]);
10490
this.obContainer.on('scroll', this.scrollHandler);
10591
},
10692

107-
onCacheDetach: function(e) {
93+
onCacheWillDetach: function(e) {
94+
if (e.view !== this) return;
95+
96+
this.cachedScrollPositions[this.state] = this.obContainer[0].scrollTop;
97+
},
98+
99+
onCacheDetached: function(e) {
108100
if (e.view !== this) return;
109101

110102
this.obContainer.off('scroll', this.scrollHandler);
@@ -332,6 +324,7 @@ module.exports = pageVw.extend({
332324
if (!state){
333325
state = "products";
334326
}
327+
335328
this.hideList();
336329
this.$el.find('.js-' + state).removeClass('hide');
337330
this.$el.find('.js-' + state + 'Tab').addClass('active');

‎js/views/pageVw.js‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,7 @@ var BaseVw = require('./baseVw'),
44
PageVw;
55

66
PageVw = BaseVw.extend({
7-
cacheExpires: 1000 * 60 * 20,
8-
9-
// should be function that returns a boolean
10-
restoreScrollPosition: function(opts) {
11-
var splitRoute = opts.route.split('/');
12-
13-
// !!!! if state will not be in the second position
14-
// in the route of your view (e.g. myPage/<state>) or
15-
// your view does not store it's state as a string in
16-
// this.state, then overwrite this method.
17-
18-
if (splitRoute[1] === this.state) {
19-
// if our routed state equals our cached state, we would
20-
// like to restore the cached scroll position.
21-
return true;
22-
}
23-
}
7+
cacheExpires: 1000 * 60 * 20
248
});
259

2610
// this must be a "static" method and overridden as such (if you

‎js/views/settingsVw.js‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ module.exports = pageVw.extend({
8282
this.subViews = []; //TODO: get rid of subviews, submodels, use proper remove method
8383
this.subModels = [];
8484
this.subModels.push(this.userProfile);
85+
this.cachedScrollPositions = {};
8586

8687
this.shownMods = []; //array of mods that have been shown, used to prevent duplicates
8788

@@ -123,26 +124,33 @@ module.exports = pageVw.extend({
123124
this.fetchModel();
124125

125126
this.$obContainer = $('#obContainer');
127+
128+
this.listenTo(app.router, 'cache-will-detach', this.onCacheWillDetach);
129+
this.listenTo(app.router, 'cache-detached', this.onCacheDetached);
130+
this.listenTo(app.router, 'cache-reattached', this.onCacheReattached);
126131
},
127132

128-
onCacheReattach: function(e) {
133+
onCacheReattached: function(e) {
129134
var splitRoute = e.route.split('/'),
130-
state;
135+
state = splitRoute[1];
131136

132137
if (e.view !== this) return;
138+
state = state || this.state;
133139

134140
this.blockedUsersScrollHandler &&
135141
this.$obContainer.on('scroll', this.blockedUsersScrollHandler);
136142

137-
if (splitRoute.length > 1) {
138-
// if our routed state doesn't equal our state, we'll
139-
// reset the scroll position.
140-
splitRoute[1] !== this.state && $('#obContainer').scrollTop(0);
141-
this.setState(splitRoute[1]);
142-
}
143+
if (this.cachedScrollPositions[state]) this.$obContainer[0].scrollTop = this.cachedScrollPositions[state];
144+
this.setState(state);
145+
},
146+
147+
onCacheWillDetach: function(e) {
148+
if (e.view !== this) return;
149+
150+
this.cachedScrollPositions[this.state] = this.$obContainer[0].scrollTop;
143151
},
144152

145-
onCacheDetach: function(e) {
153+
onCacheDetached: function(e) {
146154
if (e.view !== this) return;
147155

148156
this.blockedUsersScrollHandler &&

‎js/views/userPageVw.js‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -325,43 +325,9 @@ UserPageVw = pageVw.extend({
325325
}
326326
}
327327
});
328-
329-
this.listenTo(app.router, 'cache-detach', this.onCacheDetach);
330-
this.listenTo(app.router, 'cache-reattach', this.onCacheReattach);
331328
},
332329

333-
restoreScrollPosition: function(opts) {
334-
var splitRoute = opts.route.split('/');
335-
336-
if (splitRoute[2] === this.state) {
337-
return true;
338-
}
339-
},
340-
341-
onCacheReattach: function(e) {
342-
var splitRoute = e.route.split('/'),
343-
state;
344-
345-
if (e.view !== this) return;
346-
347-
// todo: cache the million dom queries for #obContainer
348-
// use in this view
349-
$('#obContainer').on('scroll', this.onScroll);
350-
this.setCustomStyles();
351-
352-
if (splitRoute.length > 2) {
353-
// if our routed state doesn't equal our state, we'll
354-
// reset the scroll position.
355-
splitRoute[2] !== this.state && $('#obContainer').scrollTop(0);
356-
this.setState(splitRoute[2], splitRoute[3], { replaceState: true });
357-
}
358-
},
359-
360-
onCacheDetach: function(e) {
361-
if (e.view !== this) return;
362-
363-
$('#obContainer').off('scroll', this.onScroll);
364-
},
330+
cacheExpires: 0,
365331

366332
loadingConfig: function() {
367333
var config = {

0 commit comments

Comments
 (0)