Emoji Autocomplete (#3433)

* Implemented emoji autocomplete.

* Changed emoji access url.

* Reverted vendor css to default, moved all style changes to _tribute.less

* Made no-results overwriteable, added missing autocomplete to edit issue field.

Signed-off-by: modmew8 <modmew8@gmail.com>

public/js/index.js

@@ -571,6 +571,7 @@ function initRepository() {
                 $editContentZone.html($('#edit-content-form').html());
                 $textarea = $segment.find('textarea');
                 issuesTribute.attach($textarea.get());
+                emojiTribute.attach($textarea.get());
 
                 // Give new write/preview data-tab name to distinguish from others
                 var $editContentForm = $editContentZone.find('.ui.comment.form');

public/less/_tribute.less

@@ -0,0 +1,26 @@
+.tribute-container {
+	box-shadow: 0px 1px 3px 1px #c7c7c7;
+	ul {
+		background: #ffffff;
+	}
+	li {
+		padding: 8px 12px;
+		border-bottom: 1px solid #dcdcdc;
+		img {
+			display: inline-block;
+			vertical-align: middle;
+			width: 28px;
+			height: 28px;
+			margin-right: 5px;
+		}
+		span.fullname {
+			font-weight: normal;
+			font-size: 0.8rem;
+			margin-left: 3px;
+		}
+	}
+	li.highlight, li:hover {
+		background: #2185D0;
+		color: #ffffff;
+	}
+}

public/less/index.less

@@ -1,3 +1,4 @@
+@import "_tribute";
 @import "_emojify";
 @import "_base";
 @import "_markdown";

public/vendor/plugins/tribute/tribute.css

@@ -7,33 +7,20 @@
   max-width: 500px;
   overflow: auto;
   display: block;
-  box-shadow: 0px 1px 3px 1px #c7c7c7;
   z-index: 999999; }
   .tribute-container ul {
     margin: 0;
     margin-top: 2px;
     padding: 0;
     list-style: none;
-    background: #ffffff; }
+    background: #efefef; }
   .tribute-container li {
-    padding: 8px 12px;
-    border-bottom: 1px solid #dcdcdc;
+    padding: 5px 5px;
     cursor: pointer; }
     .tribute-container li.highlight, .tribute-container li:hover {
-      background: #2185D0;
-      color: #ffffff;}
-    .tribute-container li img {
-      display: inline-block;
-      vertical-align: middle;
-      width: 28px;
-      margin-right: 5px;
-    }
+      background: #ddd; }
     .tribute-container li span {
       font-weight: bold; }
-    .tribute-container li span.fullname {
-      font-weight: normal;
-      font-size: 0.8rem;
-      margin-left: 3px;}
     .tribute-container li.no-match {
       cursor: default; }
   .tribute-container .menu-highlighted {

templates/base/footer.tmpl

@@ -89,6 +89,38 @@
 		issuesTribute.attach(document.getElementById('content'))
 	</script>
 	{{end}}
+	<script>
+		var emojiTribute = new Tribute({
+			collection: [{
+				trigger: ':',
+				requireLeadingSpace: true,
+				values: function (text, cb) {
+					var array = emojify.emojiNames;
+					var data = [];
+					for(var j=0; j<array.length; j++) {
+						if(array[j].indexOf(text) !== -1) {
+							data.push(array[j]);
+							if(data.length > 5) {
+								break;
+							}
+						}
+					}
+					cb(data);
+				},
+				lookup: function (item) {
+					return item;
+				},
+				selectTemplate: function (item) {
+					if (typeof item === 'undefinied') return null;
+					return ':' + item.original + ':';
+				},
+				menuItemTemplate: function (item) {
+					return '<img class="emoji" src="{{AppSubUrl}}/vendor/plugins/emojify/images/' + item.original + '.png"/>' + item.original;
+				}
+			}]
+		});
+		emojiTribute.attach(document.getElementById('content'))
+	</script>
 {{end}}
 	<script src="{{AppSubUrl}}/vendor/plugins/autolink/autolink.js"></script>
 	<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>