Added emojie picker

README.md

@@ -19,4 +19,5 @@ ComunicWeb would not exists without the following technologies developped by the
 - lightbox (https://github.com/ashleydw/lightbox)
 - VideoJS
 - jquery.hotkeys
-- bootstrap-wysiwyg (https://github.com/steveathon/bootstrap-wysiwyg/)
+- bootstrap-wysiwyg (https://github.com/steveathon/bootstrap-wysiwyg/)
+- wdt-emoji-bundle (http://ned.im/wdt-emoji-bundle)

assets/3rdparty/wdt-emoji/wdt-emoji-bundle.css

@@ -0,0 +1,483 @@
+.wdt-emoji-popup,
+.wdt-emoji-popup * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* hide unavailable fonts @todo - check fallbacks */
+body[data-wdt-emoji-bundle='google'] .wdt-emoji[data-has-img-google='false'],
+body[data-wdt-emoji-bundle='emojione'] .wdt-emoji[data-has-img-emojione='false'],
+body[data-wdt-emoji-bundle='google'] .wdt-emoji[data-has-img-google='false'],
+body[data-wdt-emoji-bundle='apple'] .wdt-emoji[data-has-img-apple='false'] {
+  display: none;
+}
+
+/* picker styles */
+.wdt-emoji-picker {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+
+  width: 20px;
+  height: 20px;
+}
+
+.wdt-emoji-picker:hover {
+  cursor: pointer;
+}
+
+.wdt-emoji-picker-parent {
+  position: relative;
+}
+
+.wdt-emoji-picker span.emoji-outer.emoji-sizer {
+  width: 18px;
+  height: 18px;
+
+  pointer-events: none;
+}
+
+/* bundle popup styles */
+.wdt-emoji-popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  visibility: hidden;
+
+  width: 357px;
+  max-width: 100%;
+  height: 357px;
+  max-height: 100%;
+
+  transition: opacity 50ms ease, bottom 1s ease-out;
+
+  opacity: 0;
+  border: 1px solid #dedede;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  background-color: #fff;
+}
+
+.wdt-emoji-popup.open {
+  visibility: visible;
+
+  opacity: 1;
+}
+
+#wdt-emoji-menu-header {
+  padding: 4px 0 0 7px;
+
+  border-bottom: 1px solid rgba(0, 0, 0, .15);
+  background: #f7f7f7;
+}
+
+.wdt-emoji-tab {
+  display: inline-block;
+
+  width: 28px;
+  margin-right: 2.5px;
+  padding: 4px;
+
+  transition: border-color 150ms ease-out;
+  text-align: center;
+
+  color: #9e9ea6;
+  border-bottom: 3px solid transparent;
+}
+
+.wdt-emoji-tab:hover {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.wdt-emoji-tab.active {
+  padding-top: 3px;
+
+  color: #9e9ea6;
+  border-bottom: 3px solid #e7543d;
+}
+
+#wdt-emoji-search,
+#wdt-emoji-search:focus {
+  font-size: 15px;
+  line-height: 20px;
+
+  width: 95%;
+  max-width: 100%;
+  height: 28px;
+  margin: .5rem 9px .6rem;
+  padding: 15px 2rem;
+
+  transition: border-color 150ms ease-out;
+
+  color: #444;
+  border: 1px solid #c5c5c5;
+  border-radius: 3px;
+  outline: none;
+}
+
+#wdt-emoji-search:focus {
+  border-color: #a0a0a0;
+}
+
+.wdt-emoji-popup h3 {
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 15px;
+
+  position: relative;
+
+  margin: 0;
+  padding: 8px;
+
+  color: #555;
+  background: rgba(255, 255, 255, .95);
+}
+
+.wdt-emoji-popup h3.sticky {
+  position: absolute;
+  z-index: 4;
+
+  width: 330px;
+}
+
+.wdt-emoji-scroll-wrapper {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  overflow-anchor: none;
+  height: 257px;
+  padding-bottom: 30px;
+}
+
+.wdt-emoji-sections {
+  padding: 0 5px;
+}
+
+.wdt-emoji {
+  line-height: 1rem;
+
+  position: relative;
+
+  display: inline-block;
+
+  margin-right: 2.5px !important;
+  margin-bottom: 1px;
+  padding: 6px;
+
+  -webkit-transition: background 500ms ease-out;
+  -moz-transition: background 500ms ease-out;
+  -ms-transition: background 500ms ease-out;
+  -o-transition: background 500ms ease-out;
+  transition: background 500ms ease-out;
+  text-align: center;
+
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+}
+
+.wdt-emoji.not-matched {
+  display: none;
+}
+
+.wdt-emoji:hover {
+  cursor: pointer;
+}
+
+.wdt-emoji.gray:hover {
+  background-color: rgba(175, 175, 175, .32);
+}
+
+.wdt-emoji.green:hover {
+  background-color: #b7e887;
+}
+
+.wdt-emoji.pink:hover {
+  background-color: #f3c1fd;
+}
+
+.wdt-emoji.yellow:hover {
+  background-color: #f9ef67;
+}
+
+.wdt-emoji.blue:hover {
+  background-color: #b5e0fe;
+}
+
+.wdt-emoji-tab .emoji-outer {
+  width: 18px;
+  height: 18px;
+}
+
+span.emoji {
+  display: -moz-inline-box;
+  display: inline-block;
+
+  width: 1em;
+  height: 1em;
+
+  vertical-align: baseline;
+  text-indent: -9999px;
+
+  background-repeat: no-repeat;
+  background-position: 50%, 50%;
+  background-size: 1em;
+  background-size: contain;
+
+  -moz-box-orient: vertical;
+  *vertical-align: auto;
+  *zoom: 1;
+  *display: inline;
+}
+
+span.emoji-sizer {
+  font-size: 1em;
+  line-height: .81em;
+}
+
+span.emoji-outer {
+  display: -moz-inline-box;
+  display: inline-block;
+
+  width: 22px;
+  height: 22px;
+  margin-top: -2px;
+
+  vertical-align: middle;
+
+  *display: inline;
+}
+
+span.emoji-inner {
+  display: -moz-inline-box;
+  display: inline-block;
+
+  width: 100%;
+  height: 100%;
+
+  vertical-align: baseline;
+  text-indent: -9999px;
+
+  *vertical-align: auto;
+  *zoom: 1;
+}
+
+img.emoji {
+  width: 1em;
+  height: 1em;
+}
+
+#wdt-emoji-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  padding-bottom: .4rem;
+
+  border-top: 1px solid rgba(0, 0, 0, .15);
+  background: #f7f7f7;
+}
+
+#wdt-emoji-no-result {
+  font-size: 10px;
+  font-weight: 400;
+
+  clear: both;
+
+  padding: 20px;
+
+  text-align: center;
+
+  color: #bababa;
+}
+
+#wdt-emoji-preview {
+  padding: .3rem 0 0 .7rem;
+
+  -webkit-transition: opacity .1s ease-in .1s;
+  -moz-transition: opacity .1s ease-in .1s;
+  transition: opacity .1s ease-in .1s;
+
+  opacity: 0;
+}
+
+#wdt-emoji-preview-img {
+  font-size: 2rem;
+  line-height: 2rem;
+
+  float: left;
+
+  width: 46px;
+  height: 54px;
+  padding: .6rem .5rem 0 .1rem;
+
+  vertical-align: middle;
+}
+
+#wdt-emoji-preview-bundle {
+  font-size: 17px;
+  font-weight: bold;
+
+  position: absolute;
+  bottom: 19px;
+  left: 14px;
+
+  -webkit-transition: opacity .1s ease-in .1s;
+  -moz-transition: opacity .1s ease-in .1s;
+  transition: opacity .1s ease-in .1s;
+
+  opacity: 1;
+  color: #989ba0;
+}
+
+#wdt-emoji-search-result-title,
+#wdt-emoji-no-result {
+  display: none;
+}
+
+#wdt-emoji-search-result-title.wdt-show,
+#wdt-emoji-no-result.wdt-show {
+  display: block;
+
+  margin: 0 5px;
+}
+
+.wdt-inline {
+  display: inline;
+}
+
+.wdt-search-on {
+  display: none;
+}
+
+.wdt-emoji-popup.preview-mode #wdt-emoji-preview-bundle {
+  opacity: 0;
+}
+
+.wdt-emoji-popup.preview-mode #wdt-emoji-preview {
+  opacity: 1;
+}
+
+#wdt-emoji-preview-img span.emoji-outer.emoji-sizer {
+  position: relative;
+  top: 3px;
+  left: 4px;
+
+  width: 40px;
+  height: 40px;
+}
+
+#wdt-emoji-preview-text {
+  font-size: 13px;
+
+  position: relative;
+  top: 9px;
+  left: 10px !important;
+
+  color: #777;
+}
+
+#wdt-emoji-preview-name {
+  font-weight: bold;
+
+  position: relative;
+  left: 3px;
+
+  color: #444;
+}
+
+.wdt-emoji-popup-mobile-closer {
+  font-size: 25px !important;
+  font-weight: bold;
+  line-height: 35px;
+
+  position: absolute;
+  top: -35px;
+  left: 50%;
+
+  visibility: hidden;
+
+  width: 40px;
+  height: 35px;
+
+  transform: translateX(-50%);
+  text-align: center;
+
+  opacity: 0;
+  color: #444;
+  border: 1px solid rgba(0, 0, 0, .1);
+  border-bottom-color: #e7543d;
+  border-radius: 50% 50% 0 0;
+  background-color: rgba(255, 255, 255, .8);
+}
+
+/* iPhone 2G-4S-5-5S in portrait */
+@media only screen
+and (min-device-width: 320px)
+and (max-device-width: 480px)
+and (orientation: portrait) {
+  .wdt-emoji-picker {
+    display: none;
+  }
+
+  .wdt-emoji-tab {
+    width: 24px;
+  }
+
+  .wdt-emoji {
+    margin-right: 0 !important;
+  }
+
+  #wdt-emoji-footer {
+    display: none;
+  }
+
+  .wdt-emoji-scroll-wrapper {
+    height: 170px;
+  }
+
+  .wdt-emoji-popup {
+    height: 206px;
+
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+  }
+
+  #wdt-emoji-search {
+    display: none;
+  }
+
+  .wdt-emoji-popup-mobile-closer {
+    visibility: visible;
+
+    opacity: 1;
+  }
+
+  .wdt-emoji-popup h3.sticky {
+    width: 300px;
+  }
+}
+
+/* iPhone 6 in portrait */
+@media only screen
+and (min-device-width: 375px)
+and (max-device-width: 667px)
+and (orientation: portrait) {
+  .wdt-emoji {
+    margin-right: -1px !important;
+  }
+
+  .wdt-emoji-tab {
+    width: 30px;
+  }
+
+  .wdt-emoji-popup h3.sticky {
+    width: 359px;
+  }
+}

assets/css/components/comments/form.css

@@ -12,6 +12,15 @@
 	margin-top: 0px;
 }
 
+.comment-creation-form .input-group-btn .comment-emoji-select .btn {
+	padding-left: 4px;
+	padding-right: 2px;
+}
+.comment-creation-form .input-group-btn .comment-image-select .btn {
+	padding-left: 2px;
+	padding-right: 5px;
+}
+
 .comment-creation-form .comment-image-select {
 	margin-bottom: -2px !important;
 }
@@ -20,6 +29,7 @@
 	display: none;
 }
 
-.comment-creation-form .comment-image-select a {
+.comment-creation-form .comment-image-select a,
+.comment-creation-form .comment-emoji-select a {
 	color: black;
 }

assets/css/components/emoji/parser.css

@@ -8,5 +8,6 @@
  * Emoji images global style
  */
 .emoji {
-	height: 2em;
+	width: auto !important;
+	height: 2em !important;
 }

assets/css/components/emoji/picker.css

@@ -0,0 +1,14 @@
+/**
+ * Emoji picker stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+#emojiPicker {
+	height: 0;
+}
+
+.wdt-emoji-popup {
+	z-index: 2;
+	margin-top: 7px;
+}

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';
+	}
+
+}

system/config/dev.config.php

@@ -48,7 +48,10 @@ class Dev {
 		"3rdparty/adminLTE/plugins/datepicker/datepicker3.css",
 
 		//VideoJS
-		//"3rdparty/videojs/6.4.0/video-js.min.css"
+		//"3rdparty/videojs/6.4.0/video-js.min.css",
+
+		//Emoji picker
+		"3rdparty/wdt-emoji/wdt-emoji-bundle.css",
 	);
 
 	/**
@@ -101,7 +104,11 @@ class Dev {
 		"3rdparty/adminLTE/plugins/datepicker/bootstrap-datepicker.js",
 
 		//VideoJS
-		//"3rdparty/videojs/6.4.0/video.min.js"
+		//"3rdparty/videojs/6.4.0/video.min.js",
+
+		//Emoji picker
+		"3rdparty/wdt-emoji/emoji.min.js",
+		"3rdparty/wdt-emoji/wdt-emoji-bundle.js",
 	);
 
 	/**
@@ -139,6 +146,7 @@ class Dev {
 
 			//Emojies
 			"css/components/emoji/parser.css",
+			"css/components/emoji/picker.css",
 
 			//Posts component
 			"css/components/posts/ui.css",
@@ -265,6 +273,7 @@ class Dev {
 			//Emojies
 			"js/components/emoji/parser.js",
 			"js/components/emoji/list.js",
+			"js/components/emoji/picker.js",
 
 			//Like button
 			"js/components/like/button.js",