public/js/views/layouts/chat-toolbar-input.js

   1 'use strict';
   2
   3 const debug = require('debug-proxy')('app:chat-toolbar-input');
   4 var context = require('gitter-web-client-context');
   5 var appEvents = require('../../utils/appevents');
   6 var ChatInputView = require('../chat/chatInputView');
   7 var cocktail = require('backbone.cocktail');
   8 var KeyboardEventsMixin = require('../keyboard-events-mixin');
   9 var unreadItemsClient = require('../../components/unread-items-client');
  10 var UnreadBannerView = require('../app/unreadBannerView');
  11 var ChatToolbarLayout = require('./chat-toolbar');
  12 var CollaboratorsView = require('../app/collaboratorsView');
  13 var JoinRoomView = require('../chat/join-room-view');
  14
  15 require('../behaviors/isomorphic');
  16
  17 var ChatToolbarInputLayout = ChatToolbarLayout.extend({
  18   monitorUnreadItems: true,
  19   keyboardEvents: {
  20     backspace: 'onKeyBackspace',
  21     quote: 'onKeyQuote'
  22   },
  23
  24   modelEvents: {
  25     'change:roomMember': '_roomMemberChanged'
  26   },
  27
  28   behaviors: {
  29     Isomorphic: {
  30       chat: {
  31         el: '#content-wrapper',
  32         init: 'initChatRegion' // Declared in super
  33       },
  34
  35       toolbar: {
  36         el: '#right-toolbar-layout',
  37         init: 'initToolbarRegion' // Declared in super
  38       },
  39
  40       input: {
  41         el: '#chat-input',
  42         init: 'initInputRegion'
  43       },
  44
  45       header: {
  46         el: '#header-wrapper',
  47         init: 'initHeaderRegion' // Declared in super
  48       },
  49
  50       // TODO Move to chat-toolbar layout and
  51       // decide how are they gonna look like in mobile
  52       bannerTop: {
  53         el: '#unread-banner',
  54         init: 'initBannerTopRegion'
  55       },
  56
  57       // TODO same ^^^
  58       bannerBottom: {
  59         el: '#bottom-unread-banner',
  60         init: 'initBannerBottomRegion'
  61       },
  62
  63       collaborators: {
  64         el: '#collaborators-container',
  65         init: 'initCollaboratorsView'
  66       }
  67     }
  68   },
  69
  70   initInputRegion: function(optionsForRegion) {
  71     if (this.model.get('roomMember')) {
  72       debug('Already a room member so showing chat input');
  73       return new ChatInputView(
  74         optionsForRegion({
  75           model: context.troupe(),
  76           collection: this.options.chatCollection
  77         })
  78       );
  79     } else {
  80       debug('Not a room member so showing join room button');
  81       return new JoinRoomView(optionsForRegion({}, { rerender: true }));
  82     }
  83   },
  84
  85   initBannerTopRegion: function(optionsForRegion) {
  86     return new UnreadBannerView.Top(
  87       optionsForRegion({
  88         model: unreadItemsClient.acrossTheFold()
  89       })
  90     );
  91   },
  92
  93   initBannerBottomRegion: function(optionsForRegion) {
  94     return new UnreadBannerView.Bottom(
  95       optionsForRegion({
  96         model: unreadItemsClient.acrossTheFold()
  97       })
  98     );
  99   },
 100
 101   initCollaboratorsView: function(optionsForRegion) {
 102     return new CollaboratorsView(optionsForRegion());
 103   },
 104
 105   _roomMemberChanged: function() {
 106     var inputRegion = this.regionManager.get('input');
 107
 108     if (this.model.get('roomMember')) {
 109       inputRegion.show(
 110         new ChatInputView({
 111           model: context.troupe(),
 112           collection: this.options.chatCollection
 113         })
 114       );
 115     } else {
 116       if (!this.model.get('aboutToLeave')) {
 117         inputRegion.show(new JoinRoomView({}));
 118       }
 119     }
 120   },
 121
 122   onKeyBackspace: function(e) {
 123     e.stopPropagation();
 124     e.preventDefault();
 125   },
 126
 127   onKeyQuote: function(e) {
 128     e.preventDefault();
 129     e.stopPropagation();
 130     this.quoteText();
 131   },
 132
 133   getSelectionText: function() {
 134     var text = '';
 135     if (window.getSelection) {
 136       text = window.getSelection().toString();
 137     } else if (document.selection && document.selection.type != 'Control') {
 138       text = document.selection.createRange().text;
 139     }
 140     return text;
 141   },
 142
 143   quoteText: function() {
 144     var selectedText = this.getSelectionText();
 145     if (selectedText.length > 0) {
 146       appEvents.trigger('input.append', '> ' + selectedText, { newLine: true });
 147     }
 148   }
 149 });
 150
 151 cocktail.mixin(ChatToolbarInputLayout, KeyboardEventsMixin);
 152
 153 module.exports = ChatToolbarInputLayout;