diff --git a/app/js/directives.js b/app/js/directives.js index 57e2f207..0824928b 100755 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -1082,10 +1082,14 @@ angular.module('myApp.directives', ['myApp.filters']) }); }, onEmojiSelected: function (code) { - composer.onEmojiSelected(code); + $scope.$apply(function () { + composer.onEmojiSelected(code); + }) }, onStickerSelected: function (docID) { - $scope.draftMessage.sticker = docID; + $scope.$apply(function () { + $scope.draftMessage.sticker = docID; + }); } }); diff --git a/app/js/lib/utils.js b/app/js/lib/utils.js index 60cea630..77a25605 100644 --- a/app/js/lib/utils.js +++ b/app/js/lib/utils.js @@ -103,7 +103,7 @@ function getFieldSelection (field) { sel.text = txt + c; len = dup.text.indexOf(c); - sel.moveStart('character',-1); + sel.moveStart('character', -1); sel.text = ''; // if (browser.msie && len == -1) { @@ -112,6 +112,51 @@ function getFieldSelection (field) { return len; } +function getFieldValue(field) { + if (!field) { + return ''; + } + if (field.tagName == 'INPUT' || field.tagName == 'TEXTAREA') { + return field.value; + } + var lines = []; + var line = []; + getFieldElementValue(field, lines, line); + if (line.length) { + lines.push(line.join('')); + } + return lines.join('\n'); +} + +function getFieldElementValue(node, lines, line) { + if (node.nodeType == 3) { // TEXT + line.push(node.nodeValue); + return; + } + if (node.nodeType != 1) { // NON-ELEMENT + return; + } + var isBlock = node.tagName == 'DIV' || node.tagName == 'P'; + var curChild; + if (isBlock && line.length || node.tagName == 'BR') { + lines.push(line.join('')); + line.splice(0, line.length); + } + else if (node.tagName == 'IMG') { + if (node.alt) { + line.push(node.alt); + } + } + var curChild = node.firstChild; + while (curChild) { + getFieldElementValue(curChild, lines, line); + curChild = curChild.nextSibling; + } + if (isBlock && line.length) { + lines.push(line.join('')); + line.splice(0, line.length); + } +} function onContentLoaded (cb) { setTimeout(cb, 0); diff --git a/app/js/message_composer.js b/app/js/message_composer.js index 8ea739f3..bd01a19d 100644 --- a/app/js/message_composer.js +++ b/app/js/message_composer.js @@ -380,8 +380,9 @@ EmojiPanel.prototype.update = function () { function MessageComposer (textarea, options) { this.textareaEl = $(textarea); - this.textareaEl.on('keyup keydown', this.onKeyEvent.bind(this)); - this.textareaEl.on('focus blur', this.onFocusBlur.bind(this)); + this.setUpInput(); + // this.textareaEl.on('keyup keydown', this.onKeyEvent.bind(this)); + // this.textareaEl.on('focus blur', this.onFocusBlur.bind(this)); this.autoCompleteEl = $('').appendTo(document.body); @@ -404,6 +405,29 @@ function MessageComposer (textarea, options) { this.isActive = false; } +MessageComposer.prototype.setUpInput = function () { + if ('contentEditable' in document.body) { + this.setUpContenteditable(); + } else { + this.setUpPlaintext(); + } +} + +MessageComposer.prototype.setUpContenteditable = function () { + this.textareaEl.hide(); + this.contentEditableEl = $('
'); + + this.textareaEl[0].parentNode.insertBefore(this.contentEditableEl[0], this.textareaEl[0]); + + this.contentEditableEl.on('keyup keydown', this.onKeyEvent.bind(this)); + this.contentEditableEl.on('focus blur', this.onFocusBlur.bind(this)); +} + +MessageComposer.prototype.setUpPlaintext = function () { + this.textareaEl.on('keyup keydown', this.onKeyEvent.bind(this)); + this.textareaEl.on('focus blur', this.onFocusBlur.bind(this)); +} + MessageComposer.prototype.onKeyEvent = function (e) { var self = this; if (e.type == 'keyup') { @@ -445,9 +469,12 @@ MessageComposer.prototype.onKeyEvent = function (e) { } MessageComposer.prototype.checkAutocomplete = function () { - var textarea = this.textareaEl[0]; + var textarea = this.contentEditableEl ? this.contentEditableEl[0] : this.textareaEl; var pos = getFieldSelection(textarea); - var value = this.textareaEl[0].value.substr(0, pos); + var value = getFieldValue(textarea).substr(0, pos); + + console.log(pos, value); + var matches = value.match(/:([A-Za-z_0-z\+-]*)$/); if (matches) { if (this.previousQuery == matches[0]) {