diff --git a/app/css/app.css b/app/css/app.css index 2286ca99..392036f3 100644 --- a/app/css/app.css +++ b/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 { diff --git a/app/index.html b/app/index.html index b29a6014..abbbc437 100644 --- a/app/index.html +++ b/app/index.html @@ -7,7 +7,7 @@ - + @@ -34,7 +34,7 @@ - + @@ -53,9 +53,9 @@ - + - + diff --git a/app/js/controllers.js b/app/js/controllers.js index 44905979..7dcbbf4a 100644 --- a/app/js/controllers.js +++ b/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; diff --git a/app/js/directives.js b/app/js/directives.js index 7d6cc8ca..c719de02 100644 --- a/app/js/directives.js +++ b/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(); - $(richTextarea).on('keydown keyup change', function (e) { - scope.$emit('ui_editor_change', {start: e.type == 'keydown'}); - var newH = $(richTextarea).height(); - if (h != newH) { - h = newH; - scope.$emit('ui_editor_resize'); - } + var updatePromise; + $(richTextarea).on('keyup', function (e) { + scope.$emit('ui_editor_change', {start: false}); + updateHeight(); + + scope.draftMessage.text = richTextarea.innerText; + + $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) { - return; - } - var submit = false; - if (sendOnEnter && !e.shiftKey) { - submit = true; - } else if (!sendOnEnter && (e.ctrlKey || e.metaKey)) { - submit = true; + if (e.keyCode == 13) { + var submit = false; + if (sendOnEnter && !e.shiftKey) { + 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) { - $(element).trigger('submit'); - return cancelEvent(e); + if (richTextarea) { + scope.$emit('ui_editor_change', {start: true}); + updateHeight(); } }); - if (richTextarea) { - scope.$watch('draftMessage.text', function (newVal) { - // console.log('dir text change', newVal); - if (!newVal.length && !messageField.value.length) { - $timeout(function () { - updateField(); - }, 0); - } - }); - } + var lastTyping = 0; + $(editorElement).on('keyup', function (e) { + var now = +new Date(); + if (now - lastTyping < 5000) { + return; + } + lastTyping = now; + scope.$emit('ui_typing'); + }); function updateField () { - var html = $('
').text(scope.draftMessage.text || '').html(); - html = html.replace(/\n/g, '
'); - $(richTextarea).html(html); - $(richTextarea).trigger('change'); + if (richTextarea) { + $timeout.cancel(updatePromise); + var html = $('
').text(scope.draftMessage.text || '').html(); + html = html.replace(/\n/g, '
'); + $(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; diff --git a/app/vendor/jquery.emojiarea/jquery.emojiarea.js b/app/vendor/jquery.emojiarea/jquery.emojiarea.js index 92a1e132..b932594c 100644 --- a/app/vendor/jquery.emojiarea/jquery.emojiarea.js +++ b/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 = $('
').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); });