public/js/views/righttoolbar/rightToolbarView.js

   1 'use strict';
   2
   3 var Marionette = require('backbone.marionette');
   4 var _ = require('lodash');
   5 var context = require('gitter-web-client-context');
   6 var toggleClass = require('../../utils/toggle-class');
   7 var itemCollections = require('../../collections/instances/integrated-items');
   8 var PeopleCollectionView = require('../people/peopleCollectionView');
   9 var RepoInfoView = require('./repoInfo');
  10 var ActivityCompositeView = require('./activityCompositeView');
  11 var RepoInfoModel = require('../../collections/repo-info');
  12 const appEvents = require('../../utils/appevents');
  13
  14 require('../behaviors/isomorphic');
  15
  16 var RightToolbarLayout = Marionette.LayoutView.extend({
  17   className: 'right-toolbar right-toolbar--collapsible',
  18   behaviors: {
  19     Isomorphic: {
  20       repo_info: { el: '#repo-info', init: 'initRepo_infoRegion' },
  21       activity: { el: '#activity-region', init: 'initActivityRegion' },
  22       roster: { el: '#people-roster', init: 'initRosterRegion' }
  23     }
  24   },
  25
  26   ui: {
  27     header: '#toolbar-top-content',
  28     footer: '#zendesk-footer',
  29     rosterHeader: '#people-header',
  30     repoInfoHeader: '#info-header',
  31     toggleIcon: '.js-menu-toggle-icon'
  32   },
  33
  34   events: {
  35     'click #upgrade-auth': 'onUpgradeAuthClick',
  36     'click #people-header': 'showPeopleList',
  37     'click #info-header': 'showRepoInfo',
  38     'submit #upload-form': 'upload',
  39     'click @ui.toggleIcon': 'toggleMenu'
  40   },
  41
  42   childEvents: {
  43     'repoInfo:changeVisible': 'repoInfoChangeVisible'
  44   },
  45
  46   collectionEvents: {
  47     'add sync reset remove': 'onCollectionUpdate'
  48   },
  49
  50   modelEvents: {
  51     'change:isPinned': 'onPanelPinStateChange'
  52   },
  53
  54   constructor: function() {
  55     this.collection = itemCollections.roster;
  56     Marionette.LayoutView.prototype.constructor.apply(this, arguments);
  57   },
  58
  59   initialize: function(attrs) {
  60     this.iconOpts = _.extend({}, this.defaults, attrs.icon || {});
  61     this.iconHover = false;
  62     this.listenTo(context.troupe(), 'change:id', this.onRoomChange, this);
  63     appEvents.on('vue:right-toolbar:toggle', isVisible => this.toggleToolbar(isVisible));
  64     toggleClass(this.el, 'collapsed', !this.model.get('isPinned'));
  65   },
  66
  67   initRepo_infoRegion: function(optionsForRegion) {
  68     // Repo info
  69     return new RepoInfoView(
  70       optionsForRegion({
  71         model: new RepoInfoModel(),
  72         roomModel: context.troupe()
  73       })
  74     );
  75   },
  76
  77   initActivityRegion: function(optionsForRegion) {
  78     return new ActivityCompositeView(
  79       optionsForRegion({
  80         collection: itemCollections.events
  81       })
  82     );
  83   },
  84
  85   initRosterRegion: function(optionsForRegion) {
  86     return new PeopleCollectionView.ExpandableRosterView(
  87       optionsForRegion({
  88         rosterCollection: itemCollections.roster
  89       })
  90     );
  91   },
  92
  93   onPanelPinStateChange: function() {
  94     toggleClass(this.el, 'collapsed', !this.model.get('isPinned'));
  95   },
  96
  97   showPeopleList: function() {
  98     this.repo_info.$el.hide();
  99     this.roster.$el.show();
 100     this.ui.rosterHeader.addClass('selected');
 101     this.ui.repoInfoHeader.removeClass('selected');
 102   },
 103
 104   showRepoInfo: function() {
 105     this.roster.$el.hide();
 106     this.repo_info.$el.show();
 107     this.ui.rosterHeader.removeClass('selected');
 108     this.ui.repoInfoHeader.addClass('selected');
 109   },
 110
 111   repoInfoChangeVisible: function(child, visible) {
 112     //hide the 'REPO INFO' tab if we are not in a repo room
 113     this.ui.repoInfoHeader.toggleClass('hidden', !visible);
 114
 115     //move back to the people list if we are showing repo info for a non repo room
 116     if (this.ui.repoInfoHeader.hasClass('selected') && !visible) {
 117       this.showPeopleList();
 118     }
 119   },
 120
 121   onCollectionUpdate: function() {
 122     var peopleList = this.$el.find('#people-list');
 123     peopleList.toggleClass('hidden', !this.collection.length);
 124   },
 125
 126   toggleMenu: function() {
 127     this.model.set('isPinned', !this.model.get('isPinned'));
 128   },
 129
 130   toggleToolbar: function(newVisibleState) {
 131     toggleClass(this.el, 'hidden', !newVisibleState);
 132   }
 133 });
 134
 135 module.exports = RightToolbarLayout;