public/js/views/people/peopleCollectionView.js

   1 'use strict';
   2
   3 var Marionette = require('backbone.marionette');
   4 var context = require('gitter-web-client-context');
   5 var ModalView = require('../modals/modal');
   6 var AvatarView = require('../widgets/avatar');
   7 var collectionTemplate = require('./tmpl/peopleCollectionView.hbs');
   8 var remainingTempate = require('./tmpl/remainingView.hbs');
   9
  10 require('../behaviors/isomorphic');
  11
  12 var PeopleCollectionView = Marionette.CollectionView.extend({
  13   tagName: 'ul',
  14   className: 'roster',
  15   childView: AvatarView,
  16   childViewOptions: function(item) {
  17     var options = {
  18       tagName: 'li',
  19       showStatus: true,
  20       tooltipPlacement: 'left',
  21       screenReadUsername: true
  22     };
  23
  24     if (item && item.id) {
  25       var prerenderedUserEl = this.$el.find('.js-model-id-' + item.id)[0];
  26       if (prerenderedUserEl) {
  27         options.el = prerenderedUserEl;
  28       }
  29     }
  30
  31     return options;
  32   },
  33   collectionEvents: {
  34     reset: 'onCollectionReset'
  35   },
  36   onCollectionReset: function() {
  37     if (this.collection.length) return;
  38
  39     var el = this.el;
  40
  41     var child;
  42     while ((child = el.firstChild)) {
  43       el.removeChild(child);
  44     }
  45   }
  46 });
  47
  48 var RemainingView = Marionette.ItemView.extend({
  49   className: 'remaining',
  50
  51   template: remainingTempate,
  52
  53   modelEvents: {
  54     'change:id': 'render'
  55   },
  56
  57   serializeData: function() {
  58     var userCount = this.model.get('userCount');
  59     var isOneToOne = this.model.get('oneToOne');
  60     var isLoggedIn = context.isLoggedIn();
  61
  62     return {
  63       showAddButton: isLoggedIn && !isOneToOne,
  64       showPeopleButton: !isOneToOne,
  65       userCount: userCount,
  66       hasHiddenMembers: userCount > 25
  67     };
  68   }
  69 });
  70
  71 var ExpandableRosterView = Marionette.LayoutView.extend({
  72   template: collectionTemplate,
  73
  74   behaviors: {
  75     Isomorphic: {
  76       rosterRegion: { el: '#roster-region', init: 'initRosterRegion' },
  77       remainingRegion: { el: '#remaining-region', init: 'initRemainingRegion' }
  78     }
  79   },
  80
  81   initRosterRegion: function(optionsForRegion) {
  82     return new PeopleCollectionView(
  83       optionsForRegion({
  84         collection: this.options.rosterCollection,
  85         filter: function(child, index) {
  86           // jshint unused:true
  87           return index < 25; // Only show the first 25 users
  88         }
  89       })
  90     );
  91   },
  92
  93   initRemainingRegion: function(optionsForRegion) {
  94     return new RemainingView(
  95       optionsForRegion({
  96         model: context.troupe()
  97       })
  98     );
  99   }
 100 });
 101
 102 var AllUsersModal = ModalView.extend({
 103   initialize: function(options) {
 104     options = options || {};
 105     options.title = 'People';
 106     ModalView.prototype.initialize.call(this, options);
 107     this.view = new PeopleCollectionView(options);
 108   }
 109 });
 110
 111 module.exports = {
 112   ExpandableRosterView: ExpandableRosterView,
 113   Modal: AllUsersModal
 114 };