Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use bootstrap dropdown to render the emoji picker

Browse Source
This commit is contained in:
JC Brand 2018-03-09 14:49:56 +01:00
parent 8bddd0d7f4
commit 9825d6e777
9 changed files with 60 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/converse.css
View File

@ -5227,12 +5227,14 @@ body.reset {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
background-color: #fff;
bottom: 100%;
bottom: 2rem;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
font-size: 12px;
margin: 0;
margin-bottom: 0;
min-width: 20rem;
position: absolute;
right: 0; }
right: 0;
top: auto;
z-index: 1000; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; }
@ -5244,7 +5246,7 @@ body.reset {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
overflow: hidden;
@ -5275,6 +5277,11 @@ body.reset {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
display: flex;
flex-direction: row;
justify-content: space-between; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,

17
css/inverse.css
View File

@ -5277,12 +5277,14 @@ body {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
background-color: #fff;
bottom: 100%;
bottom: 2rem;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
font-size: 12px;
margin: 0;
margin-bottom: 0;
min-width: 20rem;
position: absolute;
right: 0; }
right: 0;
top: auto;
z-index: 1000; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; }
@ -5294,7 +5296,7 @@ body {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
overflow: hidden;
@ -5325,6 +5327,11 @@ body {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
display: flex;
flex-direction: row;
justify-content: space-between; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,

19
sass/_chatbox.scss
View File

@ -375,12 +375,15 @@
}
.toolbar-menu {
background-color: #fff;
bottom: 100%;
bottom: 2rem;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
font-size: 12px;
margin: 0;
margin-bottom: 0;
min-width: 20rem;
position: absolute;
right: 0;
top: auto;
z-index: $zindex-dropdown;
a {
color: $link-color;
}
@ -392,7 +395,7 @@
}
&.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
}
&.emoji-toolbar {
overflow: hidden;
@ -430,6 +433,14 @@
}
&.toggle-smiley {
.emoji-toolbar {
.emoji-category-picker {
ul {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.emoji-category-picker,
.emoji-skintone-picker {
li:hover {

67
src/converse-chatview.js
View File

@ -9,7 +9,6 @@
(function (root, factory) {
define([
"converse-core",
"converse-chatboxes",
"bootstrap",
"emojione",
"xss",
@ -25,11 +24,11 @@
"tpl!spinner",
"tpl!spoiler_button",
"tpl!spoiler_message",
"tpl!toolbar"
"tpl!toolbar",
"converse-chatboxes"
], factory);
}(this, function (
converse,
dummy,
bootstrap,
emojione,
xss,
@ -66,7 +65,7 @@
*
* NB: These plugins need to have already been loaded via require.js.
*/
dependencies: ["converse-chatboxes", "converse-disco"],
dependencies: ["converse-chatboxes", "converse-disco", "converse-dropdown"],
overrides: {
// Overrides mentioned here will be picked up by converse.js's
@ -80,6 +79,8 @@
this.__super__.registerGlobalEventHandlers();
_converse.root.addEventListener(
'click', function (ev) {
// FIXME
return;
if (_.includes(ev.target.classList, 'toggle-toolbar-menu') ||
_.includes(ev.target.classList, 'insert-emoji')) {
return;
@ -151,7 +152,7 @@
}
});
_converse.EmojiPickerView = Backbone.NativeView.extend({
_converse.EmojiPickerView = Backbone.VDOMView.extend({
className: 'emoji-picker-container',
events: {
'click .emoji-category-picker li.emoji-category': 'chooseCategory',
@ -161,11 +162,10 @@
initialize () {
this.model.on('change:current_skintone', this.render, this);
this.model.on('change:current_category', this.render, this);
this.setScrollPosition = _.debounce(this.setScrollPosition, 50);
},
render () {
var emojis_html = tpl_emojis(
toHTML () {
return tpl_emojis(
_.extend(
this.model.toJSON(), {
'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
@ -175,12 +175,6 @@
'shouldBeHidden': this.shouldBeHidden
}
));
this.el.innerHTML = emojis_html;
_.forEach(this.el.querySelectorAll('.emoji-picker'), (el) => {
el.addEventListener('scroll', this.setScrollPosition.bind(this));
});
this.restoreScrollPosition();
return this;
},
shouldBeHidden (shortname, current_skintone, toned_emojis) {
@ -200,20 +194,6 @@
return false;
},
restoreScrollPosition () {
const current_picker = _.difference(
this.el.querySelectorAll('.emoji-picker'),
this.el.querySelectorAll('.emoji-picker.hidden')
);
if (current_picker.length === 1 && this.model.get('scroll_position')) {
current_picker[0].scrollTop = this.model.get('scroll_position');
}
},
setScrollPosition (ev) {
this.model.save('scroll_position', this.content);
},
chooseSkinTone (ev) {
ev.preventDefault();
ev.stopPropagation();
@ -1005,32 +985,12 @@
},
toggleEmojiMenu (ev) {
const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
const dropdown = new bootstrap.Dropdown(dropdown_el, true);
dropdown.toggle();
return;
if (u.hasClass('insert-emoji', ev.target)) {
return;
if (_.isUndefined(this.dropdown)) {
this.renderEmojiPicker();
const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
this.dropdown = new bootstrap.Dropdown(dropdown_el, true);
this.dropdown.toggle();
}
if (!_.isUndefined(ev)) {
ev.stopPropagation();
if (ev.target.classList.contains('emoji-category-picker') ||
ev.target.classList.contains('emoji-skintone-picker') ||
ev.target.classList.contains('emoji-category')) {
return;
}
}
const elements = _.difference(
_converse.root.querySelectorAll('.toolbar-menu'),
[this.emoji_picker_view.el]
);
u.slideInAllElements(elements)
.then(_.partial(
u.slideToggleElement,
this.emoji_picker_view.el))
.then(this.focus.bind(this));
},
toggleCall (ev) {
@ -1139,7 +1099,6 @@
}
this.setChatState(_converse.ACTIVE);
this.scrollDown();
this.renderEmojiPicker();
if (focus) {
this.focus();
}

1
src/converse-core.js
View File

@ -74,6 +74,7 @@
'converse-core',
'converse-disco',
'converse-dragresize',
'converse-dropdown',
'converse-fullscreen',
'converse-headline',
'converse-mam',

8
src/templates/chatroom_toolbar.html
View File

@ -1,10 +1,6 @@
{[ if (o.use_emoji) { ]}
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown dropup">
<a class="btn dropdown-toggle" title="{{{o.label_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
<div class="emoji-picker dropdown-menu"
style="top: auto; bottom: 2em; height: 10em; overflow-y: scroll"
></div>
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropup">
<div class="emoji-picker dropdown-menu toolbar-menu"></div>
</li>
{[ } ]}
{[ if (o.show_call_button) { ]}

2
src/templates/emojis.html
View File

@ -1,3 +1,4 @@
<div class="emoji-picker-container">
{[ _.forEach(o.emojis_by_category, function (obj, category) { ]}
<ul class="emoji-picker emoji-picker-{{{category}}} {[ if (o.current_category !== category) { ]} hidden {[ } ]}">
{[ _.forEach(o.emojis_by_category[category], function (emoji) { ]}
@ -28,3 +29,4 @@
</ul>
</li>
</ul>
</div>

5
src/templates/toolbar.html
View File

@ -1,7 +1,6 @@
{[ if (o.use_emoji) { ]}
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown">
<a class="btn dropdown-toggle" title="{{{o.label_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
<span class="emoji-picker dropdown-menu"></a>
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropup">
<div class="emoji-picker dropdown-menu toolbar-menu"></div>
</li>
{[ } ]}
{[ if (o.show_call_button) { ]}

1
src/utils.js
View File

@ -321,6 +321,7 @@
steps = duration/17; // We assume 17ms per animation which is ~60FPS
let height = original_height;
debugger;
el.style.overflow = 'hidden';
function draw () {