r4sas/webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity

Improved typing perfomance

Browse Source
This commit is contained in:
Igor Zhukov 2014-02-03 22:39:29 +04:00
parent 8aa10dfadc
commit 1a6e43c934
5 changed files with 109 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/css/app.css
View File

@ -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 {

8
app/index.html
View File

@ -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>

56
app/js/controllers.js
View File

@ -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;

113
app/js/directives.js
View File

@ -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 = $('<div>').text(scope.draftMessage.text || '').html();
html = html.replace(/\n/g, '<br/>');
$(richTextarea).html(html);
$(richTextarea).trigger('change');
if (richTextarea) {
$timeout.cancel(updatePromise);
var html = $('<div>').text(scope.draftMessage.text || '').html();
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;

8
app/vendor/jquery.emojiarea/jquery.emojiarea.js vendored
View File

@ -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); });