UI-5: Fox emojis on Linux and Windows

Author: roier-rodriguez

bower.json

@@ -16,6 +16,7 @@
   ],
   "dependencies": {
     "angular": "angularjs#^1.7.5",
-    "emoji-js": "^0.3.0"
+    "emoji-js": "^0.3.0",
+    "angular-sanitize": "^1.7.5"
   }
 }

gruntfile.js

@@ -18,6 +18,7 @@ module.exports = function(grunt) {
 				dest: 'public/js/lib.min.js',
 				src: [
 					'bower_components/angular/angular.min.js',
+					'bower_components/angular-sanitize/angular-sanitize.js',
 					'source/js/lib/emoji.min.js'
 				]
 			},

public/css/styles.css

@@ -3,26 +3,34 @@
 // build: 19/12/2018
 
 firebase.initializeApp({"apiKey":"AIzaSyBebYtKOqOxENgVbTfiNhWAxh4cr_Vn7Ec","authDomain":"rewards-cee1a.firebaseapp.com","databaseURL":"https://rewards-cee1a.firebaseio.com","projectId":"rewards-cee1a","storageBucket":"rewards-cee1a.appspot.com","messagingSenderId":"376174432289"});
-const app = angular.module('rewards', []);
-
+const app = angular.module('rewards', ['ngSanitize']);
 const emoji = new EmojiConvertor();
-
-app.filter("emojis", function() {
-	return function(input) {
-		const emojiReplace = emoji.replace_colons(input);
-		if (emojiReplace !== input) {
-			return emojiReplace;
-		}
-		return "";
-	};
-});
+emoji.replace_mode = 'img';
+
+app.filter("emojis", [
+	'$sce', function($sce) {
+		return (input) => {
+			const emojiReplace = emoji.replace_colons(input);
+			if (emojiReplace !== input) {
+				return $sce.trustAsHtml(emojiReplace);
+			}
+			return "";
+		};
+	}
+]);
 
 app.filter("length", function() {
 	return function(input) {
 		return Object.keys(input || {}).length;
 	};
 });
 
+app.factory('emojiService', [
+	() => ({
+		replace_mode: emoji.replace_mode
+	})
+]);
+
 if (window.location.hostname === 'rewards.io'){
 	const port = '4201';
 	var livereload = document.createElement('script');
@@ -31,10 +39,10 @@ if (window.location.hostname === 'rewards.io'){
 }
 
 app.controller('LeaderboardController', [
-	'$scope', '$log', 'leaderboardService', 'configService',
-	($scope, $log, $leaderboard, $config) => {
+	'$scope', '$log', 'leaderboardService', 'configService', 'emojiService',
+	($scope, $log, $leaderboard, $config, $emoji) => {
 		const images = ['image_1024', 'image_512', 'image_original'];
-
+		$scope.emoji = $emoji;
 		$scope.config = $config;
 		$scope.fetchLeaderboard = () => {
 			$leaderboard.getValid().then((leaderboard) => {
@@ -60,8 +68,9 @@ app.controller('LeaderboardController', [
 ]);
 
 app.controller('RewardsController', [
-	'$scope', '$log', 'rewardsService',
-	($scope, $log, $rewards) => {
+	'$scope', '$log', 'rewardsService', 'emojiService',
+	($scope, $log, $rewards, $emoji) => {
+		$scope.emoji = $emoji;
 		$scope.fetchRewards = () => {
 			$scope.newReward = null;
 			$rewards.getAll().then((rewards) => {