Skip to content
Permalink
Browse files

[IMP] mail: cleant the emoji widget (mixin, text_emojis, char_emojis)

Task #2117238
  • Loading branch information...
std-odoo committed Nov 8, 2019
1 parent f86f29b commit 11ec0bbb1501fa43714260ad0df7ca2a4b3f2069
@@ -9,8 +9,7 @@ var emojis = require('mail.emojis');
*
* It's used to:
*
* - handle the click on an emoji from a dropdown panel and add it to the related textarea
* - replace the emoji code with the actual character, ex: ' :) ' -> ' 😊 '
* - handle the click on an emoji from a dropdown panel and add it to the related textarea/input
* - format text and wrap the emojis around <span class="o_mail_emoji"> to make them look nicer
*
* Methods are based on the collections of emojis available in mail.emojis
@@ -25,31 +24,19 @@ return {
* This method should be bound to a click event on an emoji.
* (used in textarea's emojis dropdown list)
*
* It assumes that a '_getTargetTextArea' method is defined that will return the related
* $textarea element.
*
* Some code from 'basic_composer.js' was copy/pasted to handle the cursor position in the
* textarea and handle text replacement if text was selected by the user.
* It assumes that a ``_getTargetTextInput`` method is defined that will return the related
* textarea/input element in which the emoji will be inserted.
*
* @param {MouseEvent} ev
*/
_onEmojiClick: function (ev) {
ev.preventDefault();

var $target = $(ev.currentTarget);
var $textarea = this._getTargetTextArea($target);
var unicode = event.target.dataset.emojiUnicode;
var textInput = this._getTargetTextInput(ev.currentTarget);
var selectionStart = textInput.selectionStart;

// copy/pasted from 'basic_composer.js'
var inputElement = $textarea.get(0);
var cursorPosition = inputElement ? dom.getSelectionRange(inputElement) : {start: 0, end: 0};
var inputVal = $textarea.val();
var leftSubstring = inputVal.substring(0, cursorPosition.start);
var rightSubstring = inputVal.substring(cursorPosition.end);
var newInputVal = [leftSubstring , $target.text().trim(), rightSubstring].join("");
var newCursorPosition = newInputVal.length - rightSubstring.length;
$textarea.val(newInputVal);
$textarea.focus();
$textarea[0].setSelectionRange(newCursorPosition, newCursorPosition);
textInput.value = textInput.value.slice(0, selectionStart) + unicode + textInput.value.slice(selectionStart);
textInput.focus();
textInput.setSelectionRange(selectionStart + unicode.length, selectionStart + unicode.length);
},

//--------------------------------------------------------------------------
@@ -6,7 +6,6 @@ var core = require('web.core');
var emojis = require('mail.emojis');
var registry = require('web.field_registry');
var MailEmojisMixin = require('mail.emoji_mixin');
var _onEmojiClickMixin = MailEmojisMixin._onEmojiClick;
var QWeb = core.qweb;

/*
@@ -19,7 +18,6 @@ var FieldEmojiCommon = {
*/
init: function () {
this._super.apply(this, arguments);
this._updatePreview =_.throttle(this._updatePreview, 1000, {leading: false});
this.emojis = emojis;
},

@@ -33,18 +31,11 @@ var FieldEmojiCommon = {
* @override
*/
on_attach_callback: function () {
var self = this;

if (!this.$emojisIcon) {
this.$emojisIcon = $(QWeb.render(
'mail.EmojisDropdown', {
widget: this,
emojisDropdownId: 'emojis_dropdown'
}
));
this.$emojisIcon.find('.o_mail_emoji').on('click', function (ev) {
self._onEmojiClick(ev);
self._isDirty = true;
this.$emojisIcon = $(QWeb.render('mail.EmojisDropdown', {widget: this}));
this.$emojisIcon.find('.o_mail_emoji').on('click', (ev) => {
this._onEmojiClick(ev);
this._isDirty = true;
});
this.$el.after(this.$emojisIcon);
}
@@ -72,57 +63,18 @@ var FieldEmojiCommon = {
}
},

/**
* Overridden because we need to add the Emoji to the input AND trigger
* the 'change' event to refresh the various post previews.
*
* @override
* @private
*/
_onEmojiClick: function () {
_onEmojiClickMixin.apply(this, arguments);
this.$input.trigger('change');
},

/**
*
* By default, the 'change' event is only triggered when the textarea is blurred.
*
* We override this method because we want to update the various post previews while
* the user is typing his message (and not only on blur).
*
* @override
* @private
*/
_onKeydown: function () {
this._super.apply(this, arguments);
this._updatePreview();
},

//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------

/**
* Used by MailEmojisMixin, check its document for more info.
*
* @param {$.Element} $emoji
* @private
*/
_getTargetTextArea($emoji) {
return this.$el;
_getTargetTextInput() {
return this.el;
},

/**
* Triggers the 'change' event to refresh the various post previews.
* This method is throttled to run at most once every second.
* (to avoid spamming the server while the user is typing his message)
*
* @private
*/
_updatePreview: function () {
this.$input.trigger('change');
}
};

/**
@@ -14,10 +14,10 @@
}

.o_mail_emojis_dropdown {
height: 35px;
height: 25px;
width: 40px;
float: right;
margin-top: -35px;
margin-top: -33px;

.dropdown-toggle:after {
display: none;
@@ -1,18 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<div t-name="mail.EmojisDropdown" t-attf-class="o_mail_emojis_dropdown o_mail_add_emoji dropdown">
<div t-name="mail.EmojisDropdown" class="o_mail_emojis_dropdown o_mail_add_emoji dropdown">
<button class="btn btn-block dropdown-toggle px-3 py-1"
type="button" t-att-id="emojisDropdownId"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
title="Add an emoji">
<i class="fa fa-smile-o"></i>
<i class="fa fa-smile-o"/>
</button>
<div class="dropdown-menu dropdown-menu-right border-0 p-2" t-att-aria-labelledby="emojisDropdownId" style="width: 406px">
<t t-call="mail.Composer.emojis">
<t t-set="emojis" t-value="widget.emojis"></t>
</t>
<div class="dropdown-menu dropdown-menu-right border-0 p-2" style="width: 406px">
<t t-call="mail.emojisPicker"/>
</div>
</div>

<div t-name="mail.emojisPicker" class="o_mail_emoji_container">
<t t-foreach="widget.emojis" t-as="emoji">
<span
class="o_mail_emoji"
t-att-data-emoji="emoji.sources[0]"
t-att-data-emoji-unicode="emoji.unicode"
t-att-title="emoji.description"
t-att-aria-label="emoji.description">
<t t-raw="emoji.unicode"/>
</span>
</t>
</div>
</templates>

0 comments on commit 11ec0bb

Please sign in to comment.
You can’t perform that action at this time.