Misterzym
/
webogram
mirror of https://github.com/misterzym/webogram.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Improved typing perfomance

TitanNano-voice_recorder
Igor Zhukov 11 years ago
parent
8aa10dfadc
commit
1a6e43c934
5 changed files with 108 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/css/app.css
  2. 8
      app/index.html
  3. 56
      app/js/controllers.js
  4. 83
      app/js/directives.js
  5. 8
      app/vendor/jquery.emojiarea/jquery.emojiarea.js

2
app/css/app.css
Unescape 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
Unescape 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
Unescape 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;

83
app/js/directives.js
Unescape 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,19 +280,17 @@ 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();
// $(emojiMenu.firstChild).addClass('nano').nanoScroller({preventPageScrolling: true, tabIndex: -1});
scope.draftMessage.text = richTextarea.innerText;
$timeout.cancel(updatePromise);
updatePromise = $timeout(updateValue, 1000);
});
}
fileSelects.on('change', function () {
var self = this;
@ -310,9 +307,7 @@ angular.module('myApp.directives', ['myApp.filters'])
var sendOnEnter = true;
$(editorElement).on('keydown', function (e) {
if (e.keyCode != 13) {
return;
}
if (e.keyCode == 13) {
var submit = false;
if (sendOnEnter && !e.shiftKey) {
submit = true;
@ -321,28 +316,54 @@ angular.module('myApp.directives', ['myApp.filters'])
}
if (submit) {
scope.$emit('ui_editor_change', {start: false});
updateHeight();
$(element).trigger('submit');
return cancelEvent(e);
}
});
}
if (richTextarea) {
scope.$watch('draftMessage.text', function (newVal) {
// console.log('dir text change', newVal);
if (!newVal.length && !messageField.value.length) {
$timeout(function () {
updateField();
}, 0);
scope.$emit('ui_editor_change', {start: true});
updateHeight();
}
});
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 () {
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);
@ -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
Unescape 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); });

Write Preview
Loading…
Cancel
Save