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

Commit a002f8f

Browse files
jjeffryesjjeffryes
committed
Various optimizations to the item list and user list views.
1 parent 03b8f10 commit a002f8f

File tree

7 files changed

+116
-61
lines changed

7 files changed

+116
-61
lines changed

‎css/obBase.css‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@ h6, .h6 {
341341
#obContainer {
342342
transition: width 0.5s ease;
343343
width: calc(100% - 47px);
344-
height: calc(100% - 50px);
344+
height: calc(100% - 74px);
345345
overflow-y: scroll;
346346
padding-top: 20px;
347347
-webkit-app-region: no-drag;
@@ -4818,6 +4818,23 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
48184818
right: 303px;
48194819
}
48204820

4821+
.userShort {
4822+
border-bottom: solid 1px rgba(255,255,255,0.08);
4823+
box-sizing: border-box;
4824+
}
4825+
4826+
.userShort .userShortWrapper {
4827+
padding: 20px 15px;
4828+
}
4829+
4830+
.userList .userShort {
4831+
height: 116px; /* fix the height to prevent a reflow when the wrapper is hidden */
4832+
}
4833+
4834+
.userList .userShort.outOfScroll .userShortWrapper {
4835+
display: none;
4836+
}
4837+
48214838
.addressBox {
48224839
padding: 10px;
48234840
font-size: 15px;

‎js/templates/itemShort.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
<div class="gridItem clearfix custCol-border <% if(ob.hidden){ %>div-fadeExtra<% } %>">
1010

1111
<div class="itemImg row10 color-secondary custCol-secondary overflowHidden js-item" data-id="<%= ob.contract_hash %>">
12-
<div class="itemImg <% if(ob.cloak){ %> nsfw <% } %>" style="background-image: url(<%= ob.imageURL %>), url(imgs/defaultItem.png);"></div>
12+
<div class="itemImg <% if(ob.cloak){ %> nsfw <% } %>" style="background-image: url(imgs/defaultItem.png);">
13+
<object height="230" width="250" type="image/jpg" data="<%= ob.imageURL %>" ></object>
14+
</div>
1315
</div>
1416
<div class="table">
1517
<div>

‎js/templates/userShort.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="rowItem padding2015
1+
<div class="userShortWrapper
22
<% if(ob.isBlank) { %>
33
js-blankMod
44
<% } %>"
@@ -42,7 +42,7 @@
4242
<%= polyglot.t('Unfollow') %>
4343
</a>
4444
<a class="btn btn-txt btn-secondary custCol-secondary textOpacity65 btn-latched js-userShortFollow padding0 <% if(ob.ownFollowing){ %> hide <% } %>">
45-
<span class="ion-person-add fontSize10 marginRight2 textOpacity1"></span>
45+
<span class="ion-person-add fontSize10 marginRight2 textOpacity1"></span>
4646
<%= polyglot.t('Follow') %>
4747
</a>
4848
<% } %>
@@ -92,4 +92,4 @@
9292
</div>
9393
</div>
9494
</div>
95-
</div>
95+
</div>

‎js/views/itemListVw.js‎

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,16 @@ module.exports = baseVw.extend({
1818
return !model.get('pinned');
1919
};
2020
this.itemsShort.sort();
21-
//this.listenTo(this.options.userModel, 'change', function(){
22-
// self.render();
23-
//});
21+
22+
this.showPerScroll = 18;
23+
this.nextToShow = 0;
24+
this.$container = $('#obContainer');
25+
26+
//listen to scrolling on container
27+
this.scrollHandler = __.bind(
28+
__.throttle(this.onScroll, 100), this
29+
);
30+
this.$container.on('scroll', this.scrollHandler);
2431

2532
// as of now, our base view doesn't support registerChild happening
2633
// before the view is fully initialized, hence the timeout here:
@@ -34,28 +41,56 @@ module.exports = baseVw.extend({
3441
//clear the list
3542
this.$el.empty();
3643
if (this.itemsShort.models.length > 0) {
37-
__.each(this.itemsShort.models, function(item){
38-
if (item.toJSON().category == self.category || self.category == "all") {
39-
self.renderContract(item);
40-
}
41-
}, this);
44+
this.renderItemSet(this.nextToShow, this.showPerScroll);
4245
} else {
4346
self.renderNoneFound();
4447
}
4548
this.trigger("rendered");
4649
},
4750

51+
renderItemSet: function(start, end){
52+
let renderSet = [];
53+
54+
if (start >= this.itemsShort.models.length) return;
55+
56+
renderSet = __.filter(this.itemsShort.models, function(value, index){
57+
return (index >= start) && (index < end);
58+
});
59+
60+
__.each(renderSet, (item) => {
61+
if (item.toJSON().category == this.category || this.category == "all") {
62+
this.renderContract(item);
63+
}
64+
}, this);
65+
66+
this.nextToShow = end;
67+
},
68+
4869
renderContract: function(item){
4970
var itemShort = new itemShortView({
5071
model: item,
5172
parentEl: this.$el
5273
});
53-
// this.$el.append(itemShort.render().$el);
5474
this.registerChild(itemShort);
5575
},
5676

5777
renderNoneFound: function(){
5878
var simpleMessage = new simpleMessageView({title: this.options.title, message: this.options.message, el: this.$el});
5979
this.registerChild(simpleMessage);
80+
},
81+
82+
onScroll: function(){
83+
if (this.$el.is(":visible")){
84+
85+
if (this.$container[0].scrollTop + this.$container[0].clientHeight + 200 > this.$container[0].scrollHeight &&
86+
this.$el[0].hasChildNodes()) {
87+
this.renderItemSet(this.nextToShow, this.nextToShow + this.showPerScroll);
88+
}
89+
}
90+
},
91+
92+
remove: function(){
93+
this.$container.off('scroll', this.scrollHandler);
6094
}
95+
6196
});

‎js/views/userListVw.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,13 @@ module.exports = Backbone.View.extend({
1818
options.ownFollowing: array of guids this user is following
1919
options.hideFollow: boolean, hide follow button
2020
options.reverse: should the list of users be reversed?
21-
options.perFetch: the number of users returned per fetch (optional, only applies to the get_followers api)
2221
options.followerCount: the total number of followers (optional, only applise to the get_followers api)
2322
*/
2423
//the model must be passed in by the constructor
2524
this.usersShort = new usersShortCollection(this.model);
2625
this.options.reverse && this.usersShort.models.reverse();
2726
this.subViews = [];
28-
this.showPerScroll = 30;
27+
this.showPerScroll = 10;
2928
this.nextUserToShow = 0;
3029
this.fetchedUsers = this.usersShort.length;
3130
this.totalUsers = this.options.followerCount;
@@ -49,7 +48,7 @@ module.exports = Backbone.View.extend({
4948
var self = this;
5049

5150
if (this.usersShort.models.length > 0) {
52-
this.listWrapper = $('<div class="list flexRow flexExpand border0 custCol-border"></div>');
51+
this.listWrapper = $('<div class="list userList"></div>');
5352
this.renderUserSet(this.nextUserToShow, this.showPerScroll);
5453
this.$el.html(this.listWrapper);
5554
} else {
@@ -58,26 +57,29 @@ module.exports = Backbone.View.extend({
5857
},
5958

6059
renderUserSet: function(start, end){
61-
var self = this,
62-
renderSet = __.filter(this.usersShort.models, function(value, index){
63-
return (index >= start) && (index < end);
64-
});
65-
66-
__.each(renderSet, function(user) {
67-
user.set('avatarURL', self.options.serverUrl+"get_image?hash="+user.get('avatar_hash')+"&guid="+user.get('guid'));
68-
if (self.options.ownFollowing.indexOf(user.get('guid')) != -1){
60+
let renderSet = [];
61+
62+
if (start >= this.totalUsers) return;
63+
64+
renderSet = __.filter(this.usersShort.models, function(value, index){
65+
return (index >= start) && (index < end);
66+
});
67+
68+
__.each(renderSet, (user) => {
69+
user.set('avatarURL', this.options.serverUrl+"get_image?hash="+user.get('avatar_hash')+"&guid="+user.get('guid'));
70+
if (this.options.ownFollowing.indexOf(user.get('guid')) != -1){
6971
user.set("ownFollowing", true);
7072
}
71-
user.set('hideFollow', self.options.hideFollow);
72-
self.renderUser(user);
73+
user.set('hideFollow', this.options.hideFollow);
74+
this.renderUser(user);
7375
}, this);
7476

7577
//if at least one user was added, trigger call so parent can refresh searches
7678
if (renderSet.length > 0){
7779
this.trigger('usersAdded');
7880
}
7981

80-
this.nextUserToShow = this.nextUserToShow >= this.fetchedUsers ? this.nextUserToShow : this.nextUserToShow + this.showPerScroll;
82+
this.nextUserToShow = this.nextUserToShow >= this.fetchedUsers ? this.nextUserToShow : end;
8183

8284
if (this.fetchedUsers < this.totalUsers && this.$el.is(':visible')){
8385
this.trigger('fetchMoreUsers');
@@ -93,9 +95,13 @@ module.exports = Backbone.View.extend({
9395
},
9496

9597
onScroll: function(){
96-
if (this.$container[0].scrollTop + this.$container[0].clientHeight + 200 > this.$container[0].scrollHeight &&
97-
this.listWrapper && this.listWrapper[0].hasChildNodes() && this.listWrapper.is(":visible")) {
98-
this.renderUserSet(this.nextUserToShow, this.nextUserToShow + this.showPerScroll);
98+
if (!this.userShortHeight) this.userShortHeight = this.listWrapper[0].firstElementChild.offsetHeight;
99+
if (this.listWrapper.is(":visible")){
100+
101+
if (this.$container[0].scrollTop + this.$container[0].clientHeight + 200 > this.$container[0].scrollHeight &&
102+
this.listWrapper && this.listWrapper[0].hasChildNodes()) {
103+
this.renderUserSet(this.nextUserToShow, this.nextUserToShow + this.showPerScroll);
104+
}
99105
}
100106
},
101107

‎js/views/userPageVw.js‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -359,8 +359,6 @@ UserPageVw = pageVw.extend({
359359
} else {
360360
config.connectText = window.polyglot.t('pageConnectingMessages.userConnect').replace('${guid}', this.pageID);
361361
config.failedText = window.polyglot.t('pageConnectingMessages.userFail');
362-
// config.connectTooltip = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere, lectus quis euismod vestibulum, sapien justo laoreet ante, sit amet mollis nibh diam cursus massa. Duis a eros dapibus, ultrices tortor nec, sodales magna.';
363-
// config.failedTooltip = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere, lectus quis euismod vestibulum, sapien justo laoreet ante, sit amet mollis nibh diam cursus massa. Duis a eros dapibus, ultrices tortor nec, sodales magna.';
364362
}
365363

366364
return config;
@@ -385,13 +383,6 @@ UserPageVw = pageVw.extend({
385383
self.fetchFollowing();
386384
self.getIsModerator();
387385
self.fetchListings();
388-
/*
389-
//save state of the page
390-
self.undoCustomAttributes.background_color = self.model.get('page').profile.background_color;
391-
self.undoCustomAttributes.primary_color = self.model.get('page').profile.primary_color;
392-
self.undoCustomAttributes.secondary_color = self.model.get('page').profile.secondary_color;
393-
self.undoCustomAttributes.text_color = self.model.get('page').profile.text_color;
394-
*/
395386
self.setCustomStyles();
396387
self.setState(self.state, self.currentItemHash, { replaceHistory: true });
397388
self.$backToTop = self.$('.backToTop');
@@ -417,9 +408,11 @@ UserPageVw = pageVw.extend({
417408
smallImage: "stretch",
418409
maxZoom: 5,
419410
$preview: self.$('.headerCropperPreview'),
420-
onFileReaderError: function(data){console.log(data);},
411+
onFileReaderError: function(data){
412+
console.log(data);
413+
},
421414
onFileChange: function(){
422-
if(self.headerCropper.cropit('isZoomable')){
415+
if (self.headerCropper.cropit('isZoomable')){
423416
$('.js-bannerRangeInput').removeClass('hide');
424417
}
425418
},
@@ -503,10 +496,10 @@ UserPageVw = pageVw.extend({
503496
this.tabClick(this.$el.find('.js-storeTab'), this.$el.find('.js-item'));
504497
this.renderItem(hash);
505498
this.$obContainer.scrollTop(352);
506-
}else if (state === "listingOld") {
499+
} else if (state === "listingOld") {
507500
this.tabClick(this.$el.find(".js-storeTab"), this.$el.find(".js-item"));
508501
this.$obContainer.scrollTop(352);
509-
}else if(state === "listingNew"){
502+
} else if (state === "listingNew"){
510503
this.tabClick(this.$el.find(".js-storeTab"), this.$el.find(".js-store"));
511504
this.$obContainer.scrollTop(352);
512505
this.addTabToHistory('listingNew', options.replaceHistory);
@@ -671,7 +664,6 @@ UserPageVw = pageVw.extend({
671664
var self = this;
672665
this.listings.fetch({
673666
data: self.userProfileFetchParameters,
674-
//timeout: 5000,
675667
success: function (model) {
676668
if (self.isRemoved()) return;
677669
self.cachedListings = model.get('listings'); //cache for rerendering
@@ -824,7 +816,7 @@ UserPageVw = pageVw.extend({
824816
if (followerArray.length || this.followerFetchTotal == 0){
825817
//always render the first time so the no followers message is shown for no followers
826818
this.renderFollowers(followerArray, this.followerFetchTotal);
827-
this.setFollowersPlaceholder(this.followerFetchTotal, this.followerFetchStart)
819+
this.setFollowersPlaceholder(this.followerFetchTotal, this.followerFetchStart);
828820
}
829821
},
830822
error: function(){
@@ -947,7 +939,6 @@ UserPageVw = pageVw.extend({
947939
hideFollow: true,
948940
serverUrl: this.options.userModel.get('serverUrl'),
949941
reverse: true,
950-
perFetch: 30,
951942
followerCount: followerCount
952943
});
953944
this.registerChild(this.followerList);
@@ -1692,21 +1683,25 @@ UserPageVw = pageVw.extend({
16921683
},
16931684

16941685
moreButtonsOwnPageClick: function(){
1695-
if ($('.js-extraButtonsOwnPage').hasClass('hide')){
1696-
$('.js-extraButtonsOwnPage').removeClass('hide');
1697-
$('.js-moreButtonsOwnPage').html('x');
1686+
var extBtn = $('.js-extraButtonsOwnPage'),
1687+
moreExtBtn = $('.js-moreButtonsOwnPage');
1688+
if (extBtn.hasClass('hide')){
1689+
extBtn.removeClass('hide');
1690+
moreExtBtn.html('x');
16981691
} else {
1699-
$('.js-extraButtonsOwnPage').addClass('hide');
1700-
$('.js-moreButtonsOwnPage').html('...');
1692+
extBtn.addClass('hide');
1693+
moreExtBtn.html('...');
17011694
}
17021695
},
17031696
moreButtonsNotOwnPageClick: function(){
1704-
if ($('.js-extraButtonsNotOwnPage').hasClass('hide')){
1705-
$('.js-extraButtonsNotOwnPage').removeClass('hide');
1706-
$('.js-moreButtonsNotOwnPage').html('x');
1697+
var extBtn = $('.js-extraButtonsNotOwnPage'),
1698+
moreExtBtn = $('.js-moreButtonsNotOwnPage');
1699+
if (extBtn.hasClass('hide')){
1700+
extBtn.removeClass('hide');
1701+
moreExtBtn.html('x');
17071702
} else {
1708-
$('.js-extraButtonsNotOwnPage').addClass('hide');
1709-
$('.js-moreButtonsNotOwnPage').html('...');
1703+
extBtn.addClass('hide');
1704+
moreExtBtn.html('...');
17101705
}
17111706
},
17121707

‎js/views/userShortVw.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ var loadTemplate = require('../utils/loadTemplate'),
99

1010
module.exports = baseVw.extend({
1111

12-
className: "flexRow borderBottom custCol-border js-userShortView",
12+
className: "custCol-border userShort js-userShortView",
1313

1414
events: {
1515
'click .js-userShort': 'userClick',
@@ -21,7 +21,7 @@ module.exports = baseVw.extend({
2121
this.listenTo(window.obEventBus, "blockingUser", function(e){
2222
if (e.guid == this.model.get('guid')) {
2323
this.model.set('isBlocked', true);
24-
}
24+
}
2525
});
2626

2727
this.listenTo(window.obEventBus, "unblockingUser", function(e){
@@ -34,7 +34,7 @@ module.exports = baseVw.extend({
3434
var localAvatar = this.model.get('avatarURL') || this.model.get('serverUrl')+"get_image?hash="+this.model.avatar_hash+"&guid="+this.model.get('guid');
3535
localAvatar && localStorage.setItem('userAvatar-'+this.model.get('guid'), localAvatar);
3636

37-
this.render();
37+
this.render();
3838
},
3939

4040
render: function(){
@@ -62,4 +62,4 @@ module.exports = baseVw.extend({
6262
this.$el.find('.js-userShortUnfollow').addClass('hide');
6363
this.$el.find('.js-userShortFollow').removeClass('hide');
6464
}
65-
});
65+
});

0 commit comments

Comments
 (0)