From a773170e55d0c677d5130bc886e05aa4882a5dd7 Mon Sep 17 00:00:00 2001
From: Pierre <pierre@hubert.fr>
Date: Sat, 21 Apr 2018 08:38:45 +0200
Subject: [PATCH] Added emoji picker in the conversation system

---
 .../css/components/conversations/windows.css  | 13 ++++++++
 assets/css/components/emoji/picker.css        |  2 +-
 assets/js/common/utils.js                     |  8 +++++
 .../components/conversations/chatWindows.js   | 30 +++++++++++++++++++
 assets/js/components/emoji/picker.js          | 14 +++++----
 5 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/assets/css/components/conversations/windows.css b/assets/css/components/conversations/windows.css
index d858c9c6..a98966cb 100644
--- a/assets/css/components/conversations/windows.css
+++ b/assets/css/components/conversations/windows.css
@@ -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 
  */
diff --git a/assets/css/components/emoji/picker.css b/assets/css/components/emoji/picker.css
index 49095db9..55333ab4 100644
--- a/assets/css/components/emoji/picker.css
+++ b/assets/css/components/emoji/picker.css
@@ -9,6 +9,6 @@
 }
 
 .wdt-emoji-popup {
-	z-index: 2;
+	z-index: 1000;
 	margin-top: 7px;
 }
diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js
index b00225c7..365f1690 100644
--- a/assets/js/common/utils.js
+++ b/assets/js/common/utils.js
@@ -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
diff --git a/assets/js/components/conversations/chatWindows.js b/assets/js/components/conversations/chatWindows.js
index 642eecdf..5afcfc88 100644
--- a/assets/js/components/conversations/chatWindows.js
+++ b/assets/js/components/conversations/chatWindows.js
@@ -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,
diff --git a/assets/js/components/emoji/picker.js b/assets/js/components/emoji/picker.js
index 4c21c1e4..950ef989 100644
--- a/assets/js/components/emoji/picker.js
+++ b/assets/js/components/emoji/picker.js
@@ -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';
 	}