Skip to content

C
converse.js
Commit f3472e1b authored by JC Brand's avatar JC Brand
Browse files
Options

emoji: Add `initialize` API method and call when chat view gets created

parent 2f763975
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 48 deletions
spec/chatbox.js
View file @ f3472e1b
......@@ -440,6 +440,7 @@
const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
await test_utils.openChatBoxFor(_converse, contact_jid);
const view = _converse.chatboxviews.get(contact_jid);
await u.waitUntil(() => view.el.querySelector('.emoji-picker'));
const toolbar = view.el.querySelector('.chat-toolbar');
const counter = toolbar.querySelector('.message-limit');
expect(counter.textContent).toBe('200');
......
spec/emojis.js
View file @ f3472e1b
......@@ -23,6 +23,7 @@
const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
await test_utils.openChatBoxFor(_converse, contact_jid);
const view = _converse.chatboxviews.get(contact_jid);
await u.waitUntil(() => view.el.querySelector('.emoji-picker'));
const toolbar = view.el.querySelector('ul.chat-toolbar');
expect(toolbar.querySelectorAll('li.toggle-smiley__container').length).toBe(1);
toolbar.querySelector('a.toggle-smiley').click();
......@@ -43,6 +44,8 @@
const muc_jid = 'lounge@montague.lit';
await test_utils.openAndEnterChatRoom(_converse, muc_jid, 'romeo');
const view = _converse.chatboxviews.get(muc_jid);
await u.waitUntil(() => view.el.querySelector('.emoji-picker'));
const textarea = view.el.querySelector('textarea.chat-textarea');
textarea.value = ':gri';
......
src/converse-emoji-views.js
View file @ f3472e1b
......@@ -90,25 +90,22 @@ converse.plugins.add('converse-emoji-views', {
this.emoji_dropdown.toggle();
},
createEmojiPicker () {
async createEmojiPickerView () {
if (this.emoji_picker_view) {
this.insertEmojiPicker();
return;
} else {
await _converse.api.emojis.initialize()
this.emoji_picker_view = new _converse.EmojiPickerView({
'model': _converse.emojipicker,
'chatview': this
});
this.insertEmojiPicker();
}
if (!_converse.emojipicker) {
const id = `converse.emoji-${_converse.bare_jid}`;
_converse.emojipicker = new _converse.EmojiPicker({'id': id});
_converse.emojipicker.browserStorage = _converse.createStore(id);
_converse.emojipicker.fetch();
}
this.emoji_picker_view = new _converse.EmojiPickerView({'model': _converse.emojipicker});
this.emoji_picker_view.chatview = this;
this.insertEmojiPicker();
},
async createEmojiDropdown () {
createEmojiDropdown () {
if (!this.emoji_dropdown) {
await _converse.api.waitUntil('emojisInitialized');
const el = this.el.querySelector('.emoji-picker');
this.emoji_dropdown = new bootstrap.Dropdown(el, true);
this.emoji_dropdown.el = el;
......@@ -141,7 +138,8 @@ converse.plugins.add('converse-emoji-views', {
'keydown .emoji-search': 'onKeyDown'
},
async initialize () {
initialize (config) {
this.chatview = config.chatview;
this.onGlobalKeyDown = ev => this._onGlobalKeyDown(ev);
const body = document.querySelector('body');
......@@ -158,7 +156,6 @@ converse.plugins.add('converse-emoji-views', {
this.navigator.select(el);
!this.navigator.enabled && this.navigator.enable();
});
await _converse.api.waitUntil('emojisInitialized');
this.render();
},
......@@ -456,8 +453,15 @@ converse.plugins.add('converse-emoji-views', {
if (_converse.visible_toolbar_buttons.emoji) {
const html = tpl_emoji_button({'tooltip_insert_smiley': __('Insert emojis')});
view.el.querySelector('.chat-toolbar').insertAdjacentHTML('afterBegin', html);
view.createEmojiPicker();
view.createEmojiPickerView();
}
});
// The headlines box doesn't have a toolbar and doesn't show an emoji
// picker, but we still need to make sure that emojis have been
// initialized in order to show emojis in messages.
_converse.api.listen.on('headlinesBoxViewInitialized', () => _converse.api.emojis.initialize());
/************************ END Event Handlers ************************/
}
});
src/headless/converse-emoji.js
View file @ f3472e1b
......@@ -263,45 +263,66 @@ converse.plugins.add('converse-emoji', {
});
/************************ END Utils ************************/
async function initializeEmojis () {
if (_converse.emojis.json) {
return;
function createEmojiPicker () {
if (!_converse.emojipicker) {
const id = `converse.emoji-${_converse.bare_jid}`;
_converse.emojipicker = new _converse.EmojiPicker({'id': id});
_converse.emojipicker.browserStorage = _converse.createStore(id);
_converse.emojipicker.fetch();
}
const { default: json } = await import(/*webpackChunkName: "emojis" */ './emojis.json');
_converse.emojis.json = json;
_converse.emojis.categories = Object.keys(_converse.emojis.json);
_converse.emojis_map = _converse.emojis.categories.reduce((result, cat) => Object.assign(result, _converse.emojis.json[cat]), {});
_converse.emojis_list = Object.values(_converse.emojis_map);
_converse.emojis_list.sort((a, b) => a.sn < b.sn ? -1 : (a.sn > b.sn ? 1 : 0));
_converse.emoji_shortnames = _converse.emojis_list.map(m => m.sn);
const getShortNames = () => _converse.emoji_shortnames.map(s => s.replace(/[+]/g, "\\$&")).join('|');
_converse.emojis.shortnames_regex = new RegExp("<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|("+getShortNames()+")", "gi");
_converse.emojis.toned = getTonedEmojis();
}
_converse.api.listen.on('logout', () => {
_converse.emojipicker.destroy();
delete _converse.emojipicker;
});
/************************ BEGIN API ************************/
// We extend the default converse.js API to add methods specific to MUC groupchats.
Object.assign(_converse.api, {
/**
* Triggered once the JSON file representing emoji data has been
* fetched and its save to start calling emoji utility methods.
* @event _converse#emojisInitialized
* The "rooms" namespace groups methods relevant to chatrooms
* (aka groupchats).
*
* @namespace _converse.api.rooms
* @memberOf _converse.api
*/
_converse.api.trigger('emojisInitialized');
}
emojis: {
/**
* Initializes Emoji support by downloading the emojis JSON (and any applicable images).
* @method _converse.api.emojis.initialize
* @returns {Promise}
*/
async initialize () {
createEmojiPicker();
if (_converse.emojis.initialized) {
return _converse.emojis.initialized;
}
_converse.emojis.initialized = u.getResolveablePromise();
const { default: json } = await import(/*webpackChunkName: "emojis" */ './emojis.json');
_converse.emojis.json = json;
_converse.emojis.categories = Object.keys(_converse.emojis.json);
_converse.emojis_map = _converse.emojis.categories.reduce((result, cat) => Object.assign(result, _converse.emojis.json[cat]), {});
_converse.emojis_list = Object.values(_converse.emojis_map);
_converse.emojis_list.sort((a, b) => a.sn < b.sn ? -1 : (a.sn > b.sn ? 1 : 0));
_converse.emoji_shortnames = _converse.emojis_list.map(m => m.sn);
/************************ BEGIN Event Handlers ************************/
_converse.api.listen.on('clearSession', () => {
if (_converse.emojipicker) {
_converse.emojipicker.destroy();
delete _converse.emojipicker
}
});
const getShortNames = () => _converse.emoji_shortnames.map(s => s.replace(/[+]/g, "\\$&")).join('|');
_converse.emojis.shortnames_regex = new RegExp("<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|("+getShortNames()+")", "gi");
_converse.api.listen.on('chatBoxesInitialized', () => {
_converse.chatboxes.on(
'add',
chat => (chat.get('type') !== _converse.CONTROLBOX_TYPE) && initializeEmojis()
);
_converse.emojis.toned = getTonedEmojis();
_converse.emojis.initialized.resolve();
/**
* Triggered once the JSON file representing emoji data has been
* fetched and its save to start calling emoji utility methods.
* @event _converse#emojisInitialized
*/
_converse.api.trigger('emojisInitialized');
}
}
});
/************************ END Event Handlers ************************/
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7