public/js/views/chat/chat-edit-view.js

   1 'use strict';
   2 var Marionette = require('backbone.marionette');
   3 var appEvents = require('../../utils/appevents');
   4 var hasScrollBars = require('../../utils/scrollbar-detect');
   5 var KeyboardEventMixin = require('../keyboard-events-mixin');
   6 var cocktail = require('backbone.cocktail');
   7 var isMobile = require('../../utils/is-mobile');
   8 var RAF = require('../../utils/raf');
   9
  10 var ChatEditView = Marionette.ItemView.extend({
  11   template: false,
  12
  13   events: {
  14     textInput: 'onTextInput',
  15     input: 'onInput',
  16     blur: 'onBlur'
  17   },
  18
  19   keyboardEvents: {
  20     'chat.edit.escape': 'onKeyEscape',
  21     'chat.edit.send': 'onKeySend'
  22   },
  23
  24   onRender: function() {
  25     if (hasScrollBars()) {
  26       this.$el.addClass('scroller');
  27     }
  28
  29     this.onInput();
  30     return this;
  31   },
  32
  33   onInput: function() {
  34     if (this.$el.val()) {
  35       this.expandTextareaIfNeeded();
  36     } else {
  37       this.shrinkTextarea();
  38     }
  39   },
  40
  41   onBlur: function() {
  42     var self = this;
  43
  44     if (isMobile()) {
  45       // if any listener does anthing to this.$el during the blur event,
  46       // then the dom node will throw a NotFoundError. So we delay until
  47       // the next event loop.
  48       RAF(function() {
  49         self.trigger('cancel');
  50       });
  51     } else {
  52       this.resetTextareaSize();
  53     }
  54   },
  55
  56   onKeyEscape: function() {
  57     this.trigger('cancel');
  58   },
  59
  60   onTextInput: function($event) {
  61     var event = $event.originalEvent;
  62     var key = event.data;
  63     if (isMobile() && key === '\n') {
  64       // google keyboard v4.1 on android doesnt actually send the correct
  65       // keyup/down events for the return key (code 13). This means that our
  66       // keyboardEvents dont fire, but we do have a "textInput" event that
  67       // we can fake it with.
  68       return this.onKeySend(event);
  69     }
  70   },
  71
  72   onKeySend: function(event) {
  73     this.trigger('save', this.$el.val());
  74     event.preventDefault();
  75   },
  76
  77   resetTextareaSize: function() {
  78     this.shrinkTextarea();
  79     this.expandTextareaIfNeeded();
  80   },
  81
  82   shrinkTextarea: function() {
  83     this.$el.css('height', '');
  84     appEvents.trigger('chatCollectionView:viewportResize', false);
  85   },
  86
  87   expandTextareaIfNeeded: function() {
  88     var $textarea = this.$el;
  89     var textarea = $textarea[0];
  90     var currentHeight = textarea.offsetHeight;
  91     var scrollHeight = textarea.scrollHeight;
  92     var maxHeight = window.innerHeight / 2;
  93
  94     var newHeight = Math.min(scrollHeight, maxHeight);
  95
  96     if (newHeight > currentHeight) {
  97       $textarea.css('height', newHeight);
  98       appEvents.trigger('chatCollectionView:viewportResize', true);
  99     }
 100   }
 101 });
 102
 103 cocktail.mixin(ChatEditView, KeyboardEventMixin);
 104
 105 module.exports = ChatEditView;