Merge pull request #1789 from OpenBazaar/listUpdates

Various optimizations to the item list and user list views.
OpenBazaar · Sep 28, 2016 · 9cd563c · 9cd563c
2 parents 0937411 + a002f8f
commit 9cd563c
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 61 deletions.
diff --git a/css/obBase.css b/css/obBase.css
@@ -341,7 +341,7 @@ h6, .h6 {
 #obContainer {
   transition: width 0.5s ease;
   width: calc(100% - 47px);
-  height: calc(100% - 50px);
+  height: calc(100% - 74px);
   overflow-y: scroll;
   padding-top: 20px;
   -webkit-app-region: no-drag;
@@ -4818,6 +4818,23 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   right: 303px;
 }
 
+.userShort {
+  border-bottom: solid 1px rgba(255,255,255,0.08);
+  box-sizing: border-box;
+}
+
+.userShort .userShortWrapper {
+  padding: 20px 15px;
+}
+
+.userList .userShort {
+  height: 116px; /* fix the height to prevent a reflow when the wrapper is hidden */
+}
+
+.userList .userShort.outOfScroll .userShortWrapper {
+  display: none;
+}
+
 .addressBox {
   padding: 10px;
   font-size: 15px;

diff --git a/js/templates/itemShort.html b/js/templates/itemShort.html
@@ -9,7 +9,9 @@
 <div class="gridItem clearfix custCol-border <% if(ob.hidden){ %>div-fadeExtra<% } %>">
 
   <div class="itemImg row10 color-secondary custCol-secondary overflowHidden js-item" data-id="<%= ob.contract_hash %>">
-    <div class="itemImg <% if(ob.cloak){ %> nsfw <% } %>" style="background-image: url(<%= ob.imageURL %>), url(imgs/defaultItem.png);"></div>
+    <div class="itemImg <% if(ob.cloak){ %> nsfw <% } %>" style="background-image: url(imgs/defaultItem.png);">
+      <object height="230" width="250" type="image/jpg" data="<%= ob.imageURL %>" ></object>
+    </div>
   </div>
   <div class="table">
     <div>

diff --git a/js/templates/userShort.html b/js/templates/userShort.html
@@ -1,4 +1,4 @@
-<div class="rowItem padding2015
+<div class="userShortWrapper
       <% if(ob.isBlank) { %>
       js-blankMod
        <% } %>"
@@ -42,7 +42,7 @@
             <%= polyglot.t('Unfollow') %>
           </a>
           <a class="btn btn-txt btn-secondary custCol-secondary textOpacity65 btn-latched js-userShortFollow padding0 <% if(ob.ownFollowing){ %> hide <% } %>">
-            <span class="ion-person-add fontSize10 marginRight2 textOpacity1"></span> 
+            <span class="ion-person-add fontSize10 marginRight2 textOpacity1"></span>
             <%= polyglot.t('Follow') %>
           </a>
         <% } %>
@@ -92,4 +92,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>
diff --git a/js/views/itemListVw.js b/js/views/itemListVw.js
@@ -18,9 +18,16 @@ module.exports = baseVw.extend({
       return !model.get('pinned');
     };
     this.itemsShort.sort();
-    //this.listenTo(this.options.userModel, 'change', function(){
-    //  self.render();
-    //});
+
+    this.showPerScroll = 18;
+    this.nextToShow = 0;
+    this.$container = $('#obContainer');
+
+    //listen to scrolling on container
+    this.scrollHandler = __.bind(
+        __.throttle(this.onScroll, 100), this
+    );
+    this.$container.on('scroll', this.scrollHandler);
 
     // as of now, our base view doesn't support registerChild happening
     // before the view is fully initialized, hence the timeout here:
@@ -34,28 +41,56 @@ module.exports = baseVw.extend({
     //clear the list
     this.$el.empty();
     if (this.itemsShort.models.length > 0) {
-      __.each(this.itemsShort.models, function(item){
-        if (item.toJSON().category == self.category || self.category == "all") {
-          self.renderContract(item);
-        }
-      }, this);
+      this.renderItemSet(this.nextToShow, this.showPerScroll);
     } else {
       self.renderNoneFound();
     }
     this.trigger("rendered");
   },
 
+  renderItemSet: function(start, end){
+    let renderSet = [];
+
+    if (start >= this.itemsShort.models.length) return;
+
+    renderSet = __.filter(this.itemsShort.models, function(value, index){
+      return (index >= start) && (index < end);
+    });
+
+    __.each(renderSet, (item) => {
+      if (item.toJSON().category == this.category || this.category == "all") {
+        this.renderContract(item);
+      }
+    }, this);
+
+    this.nextToShow = end;
+  },
+
   renderContract: function(item){
     var itemShort = new itemShortView({
       model: item,
       parentEl: this.$el
     });
-    // this.$el.append(itemShort.render().$el);
     this.registerChild(itemShort);
   },
 
   renderNoneFound: function(){
     var simpleMessage = new simpleMessageView({title: this.options.title, message: this.options.message, el: this.$el});
     this.registerChild(simpleMessage);
+  },
+
+  onScroll: function(){
+    if (this.$el.is(":visible")){
+
+      if (this.$container[0].scrollTop + this.$container[0].clientHeight + 200 > this.$container[0].scrollHeight &&
+          this.$el[0].hasChildNodes()) {
+        this.renderItemSet(this.nextToShow, this.nextToShow + this.showPerScroll);
+      }
+    }
+  },
+
+  remove: function(){
+    this.$container.off('scroll', this.scrollHandler);
   }
+
 });
diff --git a/js/views/userListVw.js b/js/views/userListVw.js
@@ -18,14 +18,13 @@ module.exports = Backbone.View.extend({
      options.ownFollowing: array of guids this user is following
      options.hideFollow: boolean, hide follow button
      options.reverse: should the list of users be reversed?
-     options.perFetch: the number of users returned per fetch (optional, only applies to the get_followers api)
      options.followerCount: the total number of followers (optional, only applise to the get_followers api)
      */
     //the model must be passed in by the constructor
     this.usersShort = new usersShortCollection(this.model);
     this.options.reverse && this.usersShort.models.reverse();
     this.subViews = [];
-    this.showPerScroll = 30;
+    this.showPerScroll = 10;
     this.nextUserToShow = 0;
     this.fetchedUsers = this.usersShort.length;
     this.totalUsers = this.options.followerCount;
@@ -49,7 +48,7 @@ module.exports = Backbone.View.extend({
     var self = this;
 
     if (this.usersShort.models.length > 0) {
-      this.listWrapper = $('<div class="list flexRow flexExpand border0 custCol-border"></div>');
+      this.listWrapper = $('<div class="list userList"></div>');
       this.renderUserSet(this.nextUserToShow, this.showPerScroll);
       this.$el.html(this.listWrapper);
     } else {
@@ -58,26 +57,29 @@ module.exports = Backbone.View.extend({
   },
 
   renderUserSet: function(start, end){
-    var self = this,
-        renderSet = __.filter(this.usersShort.models, function(value, index){
-          return (index >= start) && (index < end);
-        });
-
-    __.each(renderSet, function(user) {
-      user.set('avatarURL', self.options.serverUrl+"get_image?hash="+user.get('avatar_hash')+"&guid="+user.get('guid'));
-      if (self.options.ownFollowing.indexOf(user.get('guid')) != -1){
+    let renderSet = [];
+
+    if (start >= this.totalUsers) return;
+
+    renderSet = __.filter(this.usersShort.models, function(value, index){
+      return (index >= start) && (index < end);
+    });
+
+    __.each(renderSet, (user) => {
+      user.set('avatarURL', this.options.serverUrl+"get_image?hash="+user.get('avatar_hash')+"&guid="+user.get('guid'));
+      if (this.options.ownFollowing.indexOf(user.get('guid')) != -1){
         user.set("ownFollowing", true);
       }
-      user.set('hideFollow', self.options.hideFollow);
-      self.renderUser(user);
+      user.set('hideFollow', this.options.hideFollow);
+      this.renderUser(user);
     }, this);
 
     //if at least one user was added, trigger call so parent can refresh searches
     if (renderSet.length > 0){
       this.trigger('usersAdded');
     }
 
-    this.nextUserToShow = this.nextUserToShow >= this.fetchedUsers ? this.nextUserToShow : this.nextUserToShow + this.showPerScroll;
+    this.nextUserToShow = this.nextUserToShow >= this.fetchedUsers ? this.nextUserToShow : end;
 
     if (this.fetchedUsers < this.totalUsers && this.$el.is(':visible')){
       this.trigger('fetchMoreUsers');
@@ -93,9 +95,13 @@ module.exports = Backbone.View.extend({
   },
 
   onScroll: function(){
-    if (this.$container[0].scrollTop + this.$container[0].clientHeight + 200 > this.$container[0].scrollHeight &&
-        this.listWrapper && this.listWrapper[0].hasChildNodes() && this.listWrapper.is(":visible")) {
-      this.renderUserSet(this.nextUserToShow, this.nextUserToShow + this.showPerScroll);
+    if (!this.userShortHeight) this.userShortHeight = this.listWrapper[0].firstElementChild.offsetHeight;
+    if (this.listWrapper.is(":visible")){
+
+      if (this.$container[0].scrollTop + this.$container[0].clientHeight + 200 > this.$container[0].scrollHeight &&
+          this.listWrapper && this.listWrapper[0].hasChildNodes()) {
+        this.renderUserSet(this.nextUserToShow, this.nextUserToShow + this.showPerScroll);
+      }
     }
   },
 

diff --git a/js/views/userPageVw.js b/js/views/userPageVw.js
@@ -359,8 +359,6 @@ UserPageVw = pageVw.extend({
     } else {
       config.connectText = window.polyglot.t('pageConnectingMessages.userConnect').replace('${guid}', this.pageID);
       config.failedText = window.polyglot.t('pageConnectingMessages.userFail');
-      // 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.';
-      // 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.';
     }
 
     return config;
@@ -385,13 +383,6 @@ UserPageVw = pageVw.extend({
         self.fetchFollowing();
         self.getIsModerator();
         self.fetchListings();
-        /*
-        //save state of the page
-        self.undoCustomAttributes.background_color = self.model.get('page').profile.background_color;
-        self.undoCustomAttributes.primary_color = self.model.get('page').profile.primary_color;
-        self.undoCustomAttributes.secondary_color = self.model.get('page').profile.secondary_color;
-        self.undoCustomAttributes.text_color = self.model.get('page').profile.text_color;
-        */
         self.setCustomStyles();
         self.setState(self.state, self.currentItemHash, { replaceHistory: true });
         self.$backToTop = self.$('.backToTop');
@@ -417,9 +408,11 @@ UserPageVw = pageVw.extend({
           smallImage: "stretch",
           maxZoom: 5,
           $preview: self.$('.headerCropperPreview'),
-          onFileReaderError: function(data){console.log(data);},
+          onFileReaderError: function(data){
+            console.log(data);
+          },
           onFileChange: function(){
-            if(self.headerCropper.cropit('isZoomable')){
+            if (self.headerCropper.cropit('isZoomable')){
               $('.js-bannerRangeInput').removeClass('hide');
             }
           },
@@ -503,10 +496,10 @@ UserPageVw = pageVw.extend({
       this.tabClick(this.$el.find('.js-storeTab'), this.$el.find('.js-item'));
       this.renderItem(hash);
       this.$obContainer.scrollTop(352);
-    }else if (state === "listingOld") {
+    } else if (state === "listingOld") {
       this.tabClick(this.$el.find(".js-storeTab"), this.$el.find(".js-item"));
       this.$obContainer.scrollTop(352);
-    }else if(state === "listingNew"){
+    } else if (state === "listingNew"){
       this.tabClick(this.$el.find(".js-storeTab"), this.$el.find(".js-store"));
       this.$obContainer.scrollTop(352);
       this.addTabToHistory('listingNew', options.replaceHistory);
@@ -671,7 +664,6 @@ UserPageVw = pageVw.extend({
     var self = this;
     this.listings.fetch({
       data: self.userProfileFetchParameters,
-      //timeout: 5000,
       success: function (model) {
         if (self.isRemoved()) return;
         self.cachedListings = model.get('listings'); //cache for rerendering
@@ -824,7 +816,7 @@ UserPageVw = pageVw.extend({
         if (followerArray.length || this.followerFetchTotal == 0){
           //always render the first time so the no followers message is shown for no followers
           this.renderFollowers(followerArray, this.followerFetchTotal);
-          this.setFollowersPlaceholder(this.followerFetchTotal, this.followerFetchStart)
+          this.setFollowersPlaceholder(this.followerFetchTotal, this.followerFetchStart);
         }
       },
       error: function(){
@@ -947,7 +939,6 @@ UserPageVw = pageVw.extend({
         hideFollow: true,
         serverUrl: this.options.userModel.get('serverUrl'),
         reverse: true,
-        perFetch: 30,
         followerCount: followerCount
       });
       this.registerChild(this.followerList);
@@ -1692,21 +1683,25 @@ UserPageVw = pageVw.extend({
   },
 
   moreButtonsOwnPageClick: function(){
-    if ($('.js-extraButtonsOwnPage').hasClass('hide')){
-      $('.js-extraButtonsOwnPage').removeClass('hide');
-      $('.js-moreButtonsOwnPage').html('x');
+    var extBtn = $('.js-extraButtonsOwnPage'),
+        moreExtBtn = $('.js-moreButtonsOwnPage');
+    if (extBtn.hasClass('hide')){
+      extBtn.removeClass('hide');
+      moreExtBtn.html('x');
     } else {
-      $('.js-extraButtonsOwnPage').addClass('hide');
-      $('.js-moreButtonsOwnPage').html('...');
+      extBtn.addClass('hide');
+      moreExtBtn.html('...');
     }
   },
   moreButtonsNotOwnPageClick: function(){
-    if ($('.js-extraButtonsNotOwnPage').hasClass('hide')){
-      $('.js-extraButtonsNotOwnPage').removeClass('hide');
-      $('.js-moreButtonsNotOwnPage').html('x');
+    var extBtn = $('.js-extraButtonsNotOwnPage'),
+        moreExtBtn = $('.js-moreButtonsNotOwnPage');
+    if (extBtn.hasClass('hide')){
+      extBtn.removeClass('hide');
+      moreExtBtn.html('x');
     } else {
-      $('.js-extraButtonsNotOwnPage').addClass('hide');
-      $('.js-moreButtonsNotOwnPage').html('...');
+      extBtn.addClass('hide');
+      moreExtBtn.html('...');
     }
   },
 

diff --git a/js/views/userShortVw.js b/js/views/userShortVw.js
@@ -9,7 +9,7 @@ var loadTemplate = require('../utils/loadTemplate'),
 
 module.exports = baseVw.extend({
 
-  className: "flexRow borderBottom custCol-border js-userShortView",
+  className: "custCol-border userShort js-userShortView",
 
   events: {
     'click .js-userShort': 'userClick',
@@ -21,7 +21,7 @@ module.exports = baseVw.extend({
     this.listenTo(window.obEventBus, "blockingUser", function(e){
       if (e.guid == this.model.get('guid')) {
         this.model.set('isBlocked', true);
-      }      
+      }
     });
 
     this.listenTo(window.obEventBus, "unblockingUser", function(e){
@@ -34,7 +34,7 @@ module.exports = baseVw.extend({
     var localAvatar = this.model.get('avatarURL') || this.model.get('serverUrl')+"get_image?hash="+this.model.avatar_hash+"&guid="+this.model.get('guid');
     localAvatar && localStorage.setItem('userAvatar-'+this.model.get('guid'), localAvatar);
 
-    this.render();        
+    this.render();
   },
 
   render: function(){
@@ -62,4 +62,4 @@ module.exports = baseVw.extend({
     this.$el.find('.js-userShortUnfollow').addClass('hide');
     this.$el.find('.js-userShortFollow').removeClass('hide');
   }
-});
+});