public/js/views/explore/explore-view.js

   1 'use strict';
   2
   3 var $ = require('jquery');
   4 var Marionette = require('backbone.marionette');
   5 var urlParse = require('url-parse');
   6 var appEvents = require('../../utils/appevents');
   7 var context = require('gitter-web-client-context');
   8 var modalRegion = require('../../components/modal-region');
   9 var LoginView = require('../modals/login-view');
  10 var ProfileMenu = require('../profile-menu/profile-menu-view');
  11 var template = require('./tmpl/explore-view.hbs');
  12 var itemTemplate = require('../../../templates/partials/room_card.hbs');
  13 var clientEnv = require('gitter-client-env');
  14
  15 require('../behaviors/isomorphic');
  16
  17 var TagPillView = Marionette.ItemView.extend({
  18   template: itemTemplate,
  19   tagName: 'li',
  20   events: {
  21     click: 'onClick'
  22   },
  23   initialize: function() {
  24     //console.log('tagPillView init');
  25   },
  26
  27   onClick: function() {
  28     //console.log('click tag pill');
  29   }
  30 });
  31
  32 var TagPillListView = Marionette.CollectionView.extend({
  33   childView: TagPillView,
  34   initialize: function() {
  35     //console.log('tagPillListView init');
  36   }
  37 });
  38
  39 var RoomCardView = Marionette.ItemView.extend({
  40   template: itemTemplate,
  41   tagName: 'div',
  42
  43   popEditTagsModal: function() {
  44     require.ensure(['../modals/edit-tags-view'], function(require) {
  45       var EditTagsView = require('../modals/edit-tags-view');
  46       var editTagsModal = new EditTagsView({
  47         roomId: 0 // FIXME: the room id
  48       });
  49       editTagsModal.show();
  50     });
  51   }
  52 });
  53
  54 var RoomCardListView = Marionette.CollectionView.extend({
  55   childView: RoomCardView,
  56   initialize: function() {
  57     //console.log('roomCardListView init');
  58   }
  59 });
  60
  61 var ExploreView = Marionette.LayoutView.extend({
  62   template: template,
  63   behaviors: {
  64     Isomorphic: {
  65       tagPillList: {
  66         el: '.js-explore-tag-pill-list',
  67         init: 'initTagPillListView'
  68       },
  69       roomCardList: {
  70         el: '.js-room-card-list',
  71         init: 'initRoomCardListView'
  72       }
  73     }
  74   },
  75   regions: {
  76     dialogRegion: 'body'
  77   },
  78   ui: {
  79     leftMenuToggle: '.js-header-view-left-menu-toggle',
  80     signInButton: '.js-sign-in',
  81     createRoomButton: '.js-explore-create-button'
  82   },
  83   events: {
  84     'click @ui.leftMenuToggle': 'onLeftMenuToggleClick',
  85     'click @ui.signInButton': 'popSignInModal',
  86     'click @ui.createRoomButton': 'popCreate'
  87   },
  88
  89   initRoomCardListView: function(optionsForRegion) {
  90     return new RoomCardListView(optionsForRegion({}));
  91   },
  92   initTagPillListView: function(optionsForRegion) {
  93     return new TagPillListView(optionsForRegion({}));
  94   },
  95
  96   initialize: function() {
  97     // TODO: Once we re-render on the client with a snapshot, this stuff can be removed
  98     $('.js-explore-tag-pill[data-needs-authentication]').on('click', this.popSignInModal);
  99     this.setupProfileMenu();
 100   },
 101
 102   serializeData: function() {
 103     var headlineNumbers = clientEnv.headlineNumbers || {};
 104
 105     return {
 106       isLoggedIn: context.isLoggedIn(),
 107       headlineGitterUsers: headlineNumbers.gitterUsers,
 108       headlineGitterRooms: headlineNumbers.gitterRooms,
 109       headlineGitterGroups: headlineNumbers.gitterGroups,
 110       headlineGitterCountries: headlineNumbers.gitterCountries
 111     };
 112   },
 113
 114   onRender: function() {
 115     this.setupProfileMenu();
 116   },
 117
 118   setupProfileMenu: function() {
 119     if (context.isLoggedIn()) {
 120       //If an instance of the profile menu exists destroy it to remove listeners etc
 121       if (this.profileMenu) {
 122         this.profileMenu.destroy();
 123       }
 124       //Make a new profile menu
 125       this.profileMenu = new ProfileMenu({ el: '#profile-menu' });
 126       //Render it
 127       this.profileMenu.render();
 128     }
 129   },
 130
 131   onLeftMenuToggleClick() {
 132     appEvents.trigger('dispatchVueAction', 'toggleLeftMenu', true);
 133   },
 134
 135   popSignInModal: function(e) {
 136     var href = $(e.currentTarget).attr('href');
 137     var parsedUrl = urlParse(href, true);
 138
 139     var modal = new LoginView(parsedUrl.query);
 140     modalRegion.show(modal);
 141     // hack this modal because we're not using history or routing here
 142     modal.navigable = false;
 143
 144     e.preventDefault();
 145   },
 146
 147   popCreate: function() {
 148     appEvents.trigger('route', 'createcommunity');
 149   }
 150 });
 151
 152 module.exports = ExploreView;