public/js/views/chat/chat-input-buttons.js

   1 'use strict';
   2
   3 var Marionette = require('backbone.marionette');
   4 var template = require('./tmpl/chat-input-buttons.hbs');
   5 var platformKeys = require('../../utils/platform-keys');
   6 var cocktail = require('backbone.cocktail');
   7 var KeyboardEventsMixin = require('../keyboard-events-mixin');
   8 var isMobile = require('../../utils/is-mobile');
   9 require('../behaviors/tooltip');
  10
  11 var ChatInputButtons = Marionette.ItemView.extend({
  12   template: template,
  13
  14   behaviors: {
  15     Tooltip: {
  16       '.js-toggle-compose-mode': {
  17         titleFn: 'getComposeModeTitle',
  18         placement: 'left',
  19         customUpdateEvent: 'updateComposeTooltipText'
  20       },
  21       '.js-markdown-help': { titleFn: 'getShowMarkdownTitle', placement: 'left' }
  22     }
  23   },
  24
  25   ui: {
  26     composeToggle: '.js-toggle-compose-mode'
  27   },
  28
  29   events: {
  30     'click .js-toggle-compose-mode': 'toggleComposeMode'
  31   },
  32
  33   modelEvents: {
  34     'change:isComposeModeEnabled': 'composeModeChanged'
  35   },
  36
  37   keyboardEvents: {
  38     'chat.toggle': 'toggleComposeMode'
  39   },
  40
  41   getComposeModeTitle: function() {
  42     var mode = this.model.get('isComposeModeEnabled') ? 'chat' : 'compose';
  43     return 'Switch to ' + mode + ' mode (' + platformKeys.cmd + ' + /)';
  44   },
  45
  46   getShowMarkdownTitle: function() {
  47     return 'Markdown help (' + platformKeys.cmd + ' + ' + platformKeys.gitter + ' + m)';
  48   },
  49
  50   toggleComposeMode: function() {
  51     // compose mode is always off for mobile
  52     if (isMobile()) return;
  53
  54     this.model.set('isComposeModeEnabled', !this.model.get('isComposeModeEnabled'));
  55   },
  56
  57   composeModeChanged: function() {
  58     this.ui.composeToggle[0].setAttribute(
  59       'data-compose-mode',
  60       this.model.get('isComposeModeEnabled')
  61     );
  62     this.ui.composeToggle[0].setAttribute('aria-label', this.getComposeModeTitle());
  63     this.trigger('updateComposeTooltipText');
  64   },
  65
  66   serializeData: function() {
  67     var data = this.model.toJSON();
  68
  69     data.composeModeMessage = this.getComposeModeTitle();
  70     data.markdownHelpMessage = this.getShowMarkdownTitle();
  71
  72     return data;
  73   }
  74 });
  75
  76 cocktail.mixin(ChatInputButtons, KeyboardEventsMixin);
  77
  78 module.exports = ChatInputButtons;