public/js/views/layouts/chat-embed.js

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