Comunic/ComunicWeb
1
0
Fork 0
mirror of https://github.com/pierre42100/ComunicWeb synced 2024-11-22 20:19:21 +00:00
Code Issues Projects Releases Wiki Activity

Added emoji picker in the conversation system

Browse Source
This commit is contained in:
Pierre 2018-04-21 08:38:45 +02:00
parent 7d7fb2c499
commit a773170e55
5 changed files with 61 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/components/conversations/windows.css
View File

@ -29,15 +29,28 @@
padding-right:8px;
}
#conversationsElem .create-message-form .btn.btn-add-emoji,
#conversationsElem .create-message-form .btn.btn-add-image {
background: none;
color: #808080;
}
#conversationsElem .create-message-form .btn.btn-add-emoji:hover,
#conversationsElem .create-message-form .btn.btn-add-image:hover{
color: black;
}
#conversationsElem .create-message-form .btn.btn-add-emoji {
padding-left: 4px;
padding-right: 2px;
}
#conversationsElem .create-message-form .btn.btn-add-image {
padding-left: 2px;
padding-right: 5px;
}
/**
* Conversation settings pane
*/

2
assets/css/components/emoji/picker.css
View File

@ -9,6 +9,6 @@
}
.wdt-emoji-popup {
z-index: 2;
z-index: 1000;
margin-top: 7px;
}

8
assets/js/common/utils.js
View File

@ -426,6 +426,14 @@ function add_space(target){
}
/**
* Get the current absolute position bottom of the screen
*
* @return {number} The bottom on the screen
*/
function abs_height_bottom_screen(){
return window.scrollY + $(window).height();
}
/**
* Page URL update detection

30
assets/js/components/conversations/chatWindows.js
View File

@ -165,6 +165,36 @@ ComunicWeb.components.conversations.chatWindows = {
class: "input-group-btn",
});
//Add emojie button
var emojiButton = createElem2({
appendTo: buttonGroup,
type: "button",
elemType: "button",
class: "btn btn-flat btn-add-emoji",
});
//Add image icon
createElem2({
type: "i",
appendTo: emojiButton,
class: "fa fa-smile-o"
});
//Make emojie button lives
ComunicWeb.components.emoji.picker.addPicker(inputText, emojiButton, function(){
//Make the emojie picker visible
wdtEmojiBundle.popup.style.top = (abs_height_bottom_screen()-357)+"px";
//Make the smile button visible
var currLeft = Number(wdtEmojiBundle.popup.style.left.replace("px", ""));
var potentialLeft = currLeft - 20;
if(potentialLeft > 0)
wdtEmojiBundle.popup.style.left = potentialLeft + "px";
});
//Add image button
var imageButton = createElem2({
appendTo: buttonGroup,

14
assets/js/components/emoji/picker.js
View File

@ -75,8 +75,10 @@ ComunicWeb.components.emoji.picker = {
*
* @param {HTMLElement} elem Target element
* @param {HTMLElement} trigger Alternative element to trigger picker
* @param {function} afterPicker Optionnal function to call once the openPicker
* function has been called on trigger click
*/
addPicker: function(elem, trigger){
addPicker: function(elem, trigger, afterPicker){
//Make sure the system is ready
this.init();
@ -87,13 +89,15 @@ ComunicWeb.components.emoji.picker = {
return;
}
trigger.addEventListener('click', wdtEmojiBundle.openPicker);
trigger.addEventListener('click', function(e){
wdtEmojiBundle.openPicker.call(this, e);
if(afterPicker)
afterPicker(e);
});
var parent = elem.parentNode;
parent.className += ' wdt-emoji-picker-parent';
if (elem.className.includes('wdt-emoji-open-on-colon')) {
parent.addEventListener('keyup', wdtEmojiBundle.onKeyup)
}
elem.className += ' wdt-emoji-bundle-enabled wdt-emoji-picker-ready';
}