Added emojie picker

assets/js/common/functionsSchema.js

@@ -732,6 +732,13 @@ var ComunicWeb = {
 			list: {
 				//TODO : implement
 			},
+
+			/**
+			 * Emojie picker
+			 */
+			picker: {
+				//TODO : implement
+			},
 			
 		},
 

assets/js/components/comments/form.js

@@ -45,7 +45,7 @@ ComunicWeb.components.comments.form = {
 			appendTo: inputGroup,
 			type: "input",
 			elemType: "text",
-			class: "form-control",
+			class: "form-control wdt-emoji-open-on-colon",
 			placeholder: "New comment...",
 			name: "content"
 		});
@@ -58,6 +58,27 @@ ComunicWeb.components.comments.form = {
 			class: "input-group-btn"
 		});
 
+
+
+		//Add emoji pick button
+		var addEmojieLabel = createElem2({
+			appendTo: buttonsGroup,
+			type: "label",
+			class: "comment-emoji-select"
+		});
+
+		var imageLabel = createElem2({
+			appendTo: addEmojieLabel,
+			type: "a",
+			class: "btn btn-flat",
+			innerHTML: "<i class='fa fa-smile-o'></i>"
+		});
+
+		//Add a picker on the label
+		ComunicWeb.components.emoji.picker.addPicker(newCommentText, addEmojieLabel);
+
+
+
 		//Add image pick button
 		var addImageLabel = createElem2({
 			appendTo: buttonsGroup,
@@ -77,7 +98,7 @@ ComunicWeb.components.comments.form = {
 			type: "a",
 			class: "btn btn-flat",
 			innerHTML: "<i class='fa fa-picture-o'></i>"
-		})
+		});
 
 		//Add send button
 		var sendButton = createElem2({

assets/js/components/emoji/picker.js

@@ -0,0 +1,100 @@
+/**
+ * Emojies picker
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.emoji.picker = {
+
+	//Source code of the emojies picker
+	pickerSrc: '<div class="wdt-emoji-popup">'+
+	'<a href="#" class="wdt-emoji-popup-mobile-closer"> &times; </a>' +
+	'<div class="wdt-emoji-menu-content">' +
+	'	<div id="wdt-emoji-menu-header">' +
+	'		<a class="wdt-emoji-tab active" data-group-name="Recent"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="People"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Nature"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Foods"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Activity"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Places"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Objects"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Symbols"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Flags"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Custom"></a>' +
+	'	</div>' +
+	'	<div class="wdt-emoji-scroll-wrapper">' +
+	'		<div id="wdt-emoji-menu-items">' +
+	'			<input id="wdt-emoji-search" type="text" placeholder="Search">' +
+	'			<h3 id="wdt-emoji-search-result-title">Search Results</h3>' +
+	'			<div class="wdt-emoji-sections"></div>' +
+	'			<div id="wdt-emoji-no-result">No emoji found</div>' +
+	'		</div>' +
+	'	</div>' +
+	'	<div id="wdt-emoji-footer">' +
+	'		<div id="wdt-emoji-preview">' +
+	'			<span id="wdt-emoji-preview-img"></span>' +
+	'			<div id="wdt-emoji-preview-text">' +
+	'				<span id="wdt-emoji-preview-name"></span><br>' +
+	'				<span id="wdt-emoji-preview-aliases"></span>' +
+	'			</div>' +
+	'		</div>' +
+
+	'		<div id="wdt-emoji-preview-bundle">' +
+	'			<span>WDT Emoji Bundle</span>' +
+	'		</div>' +
+	'	</div>' +
+	'</div>' +
+	'</div>";',
+
+
+	/**
+	 * Initialize Emojie picker
+	 */
+	init: function(){
+
+		//Check if the picker has to be included in the page
+		var targetPicker = byId("emojiPicker");
+		if(!targetPicker){
+
+			targetPicker = createElem2({
+				appendTo: byId("wrapper"),
+				type: "div",
+				id: "emojiPicker",
+				innerHTML: this.pickerSrc
+			});
+
+			wdtEmojiBundle.defaults.emojiSheets.twitter = ComunicWeb.__config.assetsURL + "3rdparty/wdt-emoji/sheets/sheet_twitter_64_indexed_128.png";
+			wdtEmojiBundle.init('.wdt-emoji-bundle-enabled');
+			wdtEmojiBundle.changeType("twitter");
+		
+		}
+	},
+
+	/**
+	 * Add a picker for an element
+	 * 
+	 * @param {HTMLElement} elem Target element
+	 * @param {HTMLElement} trigger Alternative element to trigger picker
+	 */
+	addPicker: function(elem, trigger){
+
+		//Make sure the system is ready
+		this.init();
+
+		//Check if the default features of the framework can be used
+		if(!trigger){
+			wdtEmojiBundle.addPicker(elem);
+			return;
+		}
+
+		trigger.addEventListener('click', wdtEmojiBundle.openPicker);
+
+		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';
+	}
+
+}