Improved typing perfomance

app/css/app.css

@@ -932,7 +932,7 @@ div.im_message_video_thumb {
 }
 .im_message_date {
   color: #adadad;
-  font-size: 0.8em;
+  font-size: 0.85em;
 }
 div.im_message_author,
 div.im_message_body {

app/index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
   <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
   <link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/>
-  <link rel="stylesheet" href="css/app.css?16"/>
+  <link rel="stylesheet" href="css/app.css?17"/>
   <link rel="icon" href="favicon.ico" type="image/x-icon" />
 
   <meta property="og:title" content="Webogram">
@@ -34,7 +34,7 @@
   <script type="text/javascript" src="vendor/console-polyfill/console-polyfill.js?1"></script>
   <script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
   <script type="text/javascript" src="vendor/jquery.nanoscroller/nanoscroller.js"></script>
-  <script type="text/javascript" src="vendor/jquery.emojiarea/jquery.emojiarea.js?3"></script>
+  <script type="text/javascript" src="vendor/jquery.emojiarea/jquery.emojiarea.js?4"></script>
 
   <script type="text/javascript" src="vendor/angular/angular.js?1"></script>
   <script type="text/javascript" src="vendor/angular/angular-route.js?1"></script>
@@ -53,9 +53,9 @@
   <script type="text/javascript" src="js/util.js"></script>
   <script type="text/javascript" src="js/app.js?12"></script>
   <script type="text/javascript" src="js/services.js?13"></script>
-  <script type="text/javascript" src="js/controllers.js?20"></script>
+  <script type="text/javascript" src="js/controllers.js?21"></script>
   <script type="text/javascript" src="js/filters.js?3"></script>
-  <script type="text/javascript" src="js/directives.js?14"></script>
+  <script type="text/javascript" src="js/directives.js?15"></script>
 
 </body>
 </html>

app/js/controllers.js

@@ -451,42 +451,17 @@ angular.module('myApp.controllers', [])
 
     $scope.$watch('curDialog.peer', resetDraft);
     $scope.$on('user_update', angular.noop);
+    $scope.$on('ui_typing', onTyping);
 
     $scope.draftMessage = {text: ''};
+    $scope.$watch('draftMessage.text', onMessageChange);
+    $scope.$watch('draftMessage.files', onFilesSelected);
 
-    var lastTyping = false;
-    $scope.$watch('draftMessage.text', function (newVal) {
-      // console.log('ctrl text changed', newVal);
-      // console.trace('ctrl text changed', newVal);
-      AppMessagesManager.readHistory($scope.curDialog.inputPeer);
-
-      if (newVal.length) {
-        var backupDraftObj = {};
-        backupDraftObj['draft' + $scope.curDialog.peerID] = newVal;
-        AppConfigManager.set(backupDraftObj);
-        // console.log('draft save', backupDraftObj);
-      } else {
-        AppConfigManager.remove('draft' + $scope.curDialog.peerID);
-        // console.log('draft delete', 'draft' + $scope.curDialog.peerID);
-      }
-
-      var now = +new Date();
-      if (newVal === undefined || !newVal.length || now - lastTyping < 5000) {
-        return;
-      }
-      lastTyping = now;
-
-      MtpApiManager.invokeApi('messages.setTyping', {
-        peer: $scope.curDialog.inputPeer,
-        typing: true
-      });
-    });
 
     $scope.sendMessage = sendMessage;
 
-    $scope.$watch('draftMessage.files', onFilesSelected);
-
     function sendMessage (e) {
+      $scope.$broadcast('ui_message_before_send');
 
       $timeout(function () {
         var text = $scope.draftMessage.text;
@@ -527,6 +502,29 @@ angular.module('myApp.controllers', [])
       }
     }
 
+    function onMessageChange(newVal) {
+      // console.log('ctrl text changed', newVal);
+      // console.trace('ctrl text changed', newVal);
+      AppMessagesManager.readHistory($scope.curDialog.inputPeer);
+
+      if (newVal.length) {
+        var backupDraftObj = {};
+        backupDraftObj['draft' + $scope.curDialog.peerID] = newVal;
+        AppConfigManager.set(backupDraftObj);
+        // console.log('draft save', backupDraftObj);
+      } else {
+        AppConfigManager.remove('draft' + $scope.curDialog.peerID);
+        // console.log('draft delete', 'draft' + $scope.curDialog.peerID);
+      }
+    }
+
+    function onTyping () {
+      MtpApiManager.invokeApi('messages.setTyping', {
+        peer: $scope.curDialog.inputPeer,
+        typing: true
+      });
+    }
+
     function onFilesSelected (newVal) {
       if (!angular.isArray(newVal) || !newVal.length) {
         return;

app/js/directives.js

@@ -208,7 +208,6 @@ angular.module('myApp.directives', ['myApp.filters'])
         } else {
           $(sendFormWrap1).css({height: 'auto'});
           $(sendPanelWrap).removeClass('im_panel_fixed_bottom');
-          updateSizes();
         }
       });
 
@@ -272,7 +271,7 @@ angular.module('myApp.directives', ['myApp.filters'])
           emojiButton = $('.im_emoji_btn', element)[0],
           editorElement = messageField,
           dragStarted, dragTimeout,
-          emojiArea = $(messageField).emojiarea({button: emojiButton}),
+          emojiArea = $(messageField).emojiarea({button: emojiButton, norealTime: true}),
           emojiMenu = $('.emoji-menu', element)[0],
           richTextarea = $('.emoji-wysiwyg-editor', element)[0];
 
@@ -281,20 +280,18 @@ angular.module('myApp.directives', ['myApp.filters'])
         $(richTextarea).addClass('form-control');
         $(richTextarea).attr('placeholder', $(messageField).attr('placeholder'));
 
-        var h = $(richTextarea).height();
+        var updatePromise;
-        $(richTextarea).on('keydown keyup change', function (e) {
+        $(richTextarea).on('keyup', function (e) {
-          scope.$emit('ui_editor_change', {start: e.type == 'keydown'});
+          scope.$emit('ui_editor_change', {start: false});
-          var newH = $(richTextarea).height();
+          updateHeight();
-          if (h != newH) {
+
-            h = newH;
+          scope.draftMessage.text = richTextarea.innerText;
-            scope.$emit('ui_editor_resize');
+
-          }
+          $timeout.cancel(updatePromise);
+          updatePromise = $timeout(updateValue, 1000);
         });
       }
 
-      // $(emojiMenu.firstChild).addClass('nano').nanoScroller({preventPageScrolling: true, tabIndex: -1});
-
-
       fileSelects.on('change', function () {
         var self = this;
         scope.$apply(function () {
@@ -310,40 +307,64 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       var sendOnEnter = true;
       $(editorElement).on('keydown', function (e) {
-        if (e.keyCode != 13) {
+        if (e.keyCode == 13) {
-          return;
+          var submit = false;
-        }
+          if (sendOnEnter && !e.shiftKey) {
-        var submit = false;
+            submit = true;
-        if (sendOnEnter && !e.shiftKey) {
+          } else if (!sendOnEnter && (e.ctrlKey || e.metaKey)) {
-          submit = true;
+            submit = true;
-        } else if (!sendOnEnter && (e.ctrlKey || e.metaKey)) {
+          }
-          submit = true;
+
+          if (submit) {
+            scope.$emit('ui_editor_change', {start: false});
+            updateHeight();
+            $(element).trigger('submit');
+            return cancelEvent(e);
+          }
         }
 
-        if (submit) {
+        if (richTextarea) {
-          $(element).trigger('submit');
+          scope.$emit('ui_editor_change', {start: true});
-          return cancelEvent(e);
+          updateHeight();
         }
       });
 
-      if (richTextarea) {
+      var lastTyping = 0;
-        scope.$watch('draftMessage.text', function (newVal) {
+      $(editorElement).on('keyup', function (e) {
-          // console.log('dir text change', newVal);
+        var now = +new Date();
-          if (!newVal.length && !messageField.value.length) {
+        if (now - lastTyping < 5000) {
-            $timeout(function () {
+          return;
-              updateField();
+        }
-            }, 0);
+        lastTyping = now;
-          }
+        scope.$emit('ui_typing');
-        });
+      });
-      }
 
       function updateField () {
-        var html = $('<div>').text(scope.draftMessage.text || '').html();
+        if (richTextarea) {
-        html = html.replace(/\n/g, '<br/>');
+          $timeout.cancel(updatePromise);
-        $(richTextarea).html(html);
+          var html = $('<div>').text(scope.draftMessage.text || '').html();
-        $(richTextarea).trigger('change');
+          html = html.replace(/\n/g, '<br/>');
+          $(richTextarea).html(html);
+          updateHeight();
+        }
       }
 
+      function updateValue () {
+        if (richTextarea) {
+          $(richTextarea).trigger('change');
+          updateHeight();
+        }
+      }
+
+      var height = $(richTextarea).height();
+      function updateHeight () {
+        var newHeight = $(richTextarea).height();
+        if (height != newHeight) {
+          height = newHeight;
+          scope.$emit('ui_editor_resize');
+        }
+      };
+
       $('body').on('dragenter dragleave dragover drop', onDragDropEvent);
 
       scope.$on('ui_peer_change', focusField);
@@ -351,6 +372,8 @@ angular.module('myApp.directives', ['myApp.filters'])
       scope.$on('ui_history_change', focusField);
       scope.$on('ui_message_send', focusField);
       scope.$on('ui_peer_draft', updateField);
+      scope.$on('ui_message_before_send', updateValue);
+
 
       scope.$on('$destroy', function cleanup() {
         $('body').off('dragenter dragleave dragover drop', onDragDropEvent);
@@ -360,7 +383,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       function focusField () {
         onContentLoaded(function () {
-          $(editorElement).focus();
+          editorElement.focus();
         });
       }
 
@@ -416,14 +439,20 @@ angular.module('myApp.directives', ['myApp.filters'])
 
     function link (scope, element, attrs) {
       var counter = 0;
-      scope.$watch('thumb.location', function (newVal) {
+
+      var cachedSrc = MtpApiFileManager.getCachedFile(scope.thumb && scope.thumb.location);
+      if (cachedSrc) {
+        element.attr('src', cachedSrc);
+      }
+
+      scope.$watch('thumb.location', function (newLocation) {
         var counterSaved = ++counter;
-        if (!scope.thumb || !scope.thumb.location) {
+        if (!newLocation) {
           element.attr('src', scope.thumb && scope.thumb.placeholder || 'img/blank.gif');
           return;
         }
 
-        var cachedSrc = MtpApiFileManager.getCachedFile(location);
+        var cachedSrc = MtpApiFileManager.getCachedFile(newLocation);
         if (cachedSrc) {
           element.attr('src', cachedSrc);
           return;

app/vendor/jquery.emojiarea/jquery.emojiarea.js

@@ -249,7 +249,7 @@
 	var EmojiArea_WYSIWYG = function($textarea, options) {
 		var self = this;
 
-		this.options = options;
+		this.options = options || {};
 		this.$textarea = $textarea;
 		this.$editor = $('<div>').addClass('emoji-wysiwyg-editor');
 		this.$editor.text($textarea.val());
@@ -257,8 +257,12 @@
 		/*! MODIFICATION START
 			Following code was modified by Igor Zhukov, in order to improve rich text paste
 		*/
+		var changeEvents = 'blur change';
+		if (!this.options.norealTime) {
+			changeEvents += ' keyup';
+		}
+		this.$editor.on(changeEvents, function(e) { return self.onChange.apply(self, [e]); });
 		this.$editor.on('paste', function(e) { return self.onPaste.apply(self, [e]); });
-		this.$editor.on('blur keyup', function(e) { return self.onChange.apply(self, [e]); });
 		/*! MODIFICATION END */
 
 		this.$editor.on('mousedown focus', function() { document.execCommand('enableObjectResizing', false, false); });