Implement emotes

www/assets/js/callbacks.js

@@ -1036,6 +1036,9 @@ Callbacks = {
 
     emoteList: function (data) {
         loadEmotes(data);
+        var tbl = $("#cs-emotes table");
+        tbl.data("entries", data);
+        formatCSEmoteList();
     },
 
     updateEmote: function (data) {
@@ -1045,18 +1048,32 @@ Callbacks = {
             if (CHANNEL.emotes[i].name === data.name) {
                 found = true;
                 CHANNEL.emotes[i] = data;
+                formatCSEmoteList();
                 break;
             }
         }
 
         if (!found) {
             CHANNEL.emotes.push(data);
+            formatCSEmoteList();
         }
     },
 
-    deleteEmote: function (data) {
+    removeEmote: function (data) {
+        var found = -1;
+        for (var i = 0; i < CHANNEL.emotes.length; i++) {
+            if (CHANNEL.emotes[i].name === data.name) {
+                found = i;
+                break;
+            }
+        }
 
-    },
+        if (found !== -1) {
+            var row = $("code:contains('" + data.name + "')").parent().parent();
+            row.hide("fade", row.remove.bind(row));
+            CHANNEL.emotes.splice(i, 1);
+        }
+    }
 }
 
 var SOCKET_DEBUG = true;

www/assets/js/ui.js

@@ -609,6 +609,19 @@ $("#cs-chatfilters-newsubmit").click(function () {
     $("#cs-chatfilters-newreplace").val("");
 });
 
+$("#cs-emotes-newsubmit").click(function () {
+    var name = $("#cs-emotes-newname").val();
+    var image = $("#cs-emotes-newimage").val();
+
+    socket.emit("updateEmote", {
+        name: name,
+        image: image,
+    });
+
+    $("#cs-emotes-newname").val("");
+    $("#cs-emotes-newimage").val("");
+});
+
 $("#cs-chatfilters-export").click(function () {
     var callback = function (data) {
         socket.listeners("chatFilters").splice(
@@ -644,6 +657,38 @@ $("#cs-chatfilters-import").click(function () {
     socket.emit("importFilters", data);
 });
 
+$("#cs-emotes-export").click(function () {
+    var em = CHANNEL.emotes.map(function (f) {
+        return {
+            name: f.name,
+            image: f.image
+        };
+    });
+    $("#cs-emotes-exporttext").val(JSON.stringify(em));
+});
+
+$("#cs-emotes-import").click(function () {
+    var text = $("#cs-emotes-exporttext").val();
+    var choose = confirm("You are about to import emotes from the contents of the textbox below the import button.  If this is empty, it will clear all of your emotes.  Are you sure you want to continue?");
+    if (!choose) {
+        return;
+    }
+
+    if (text.trim() === "") {
+        text = "[]";
+    }
+
+    var data;
+    try {
+        data = JSON.parse(text);
+    } catch (e) {
+        alert("Invalid import data: " + e);
+        return;
+    }
+
+    socket.emit("importEmotes", data);
+});
+
 var toggleUserlist = function () {
     if ($("#userlist").css("display") === "none") {
         $("#userlist").show();

www/assets/js/util.js

@@ -1792,6 +1792,8 @@ function setupChanlogFilter(data) {
     Object.keys(keys).forEach(function (key) {
         $("<option/>").attr("value", key).text(key).appendTo(select);
     });
+
+    $("<option/>").attr("value", "chat").text("chat").prependTo(select);
 }
 
 function filterChannelLog() {
@@ -1800,6 +1802,9 @@ function filterChannelLog() {
     var getKey = function (ln) {
         var left = ln.indexOf("[", 1);
         var right = ln.indexOf("]", left);
+        if (left === -1) {
+            return false;
+        }
         return ln.substring(left+1, right);
     };
 
@@ -1815,7 +1820,10 @@ function filterChannelLog() {
 
     var show = [];
     (log.data("lines")||[]).forEach(function (ln) {
-        if (!filter || filter.indexOf(getKey(ln)) >= 0) {
+        var key = getKey(ln);
+        if (!filter || !key && filter.indexOf("chat") !== -1) {
+            show.push(ln);
+        } else if (filter.indexOf(key) >= 0) {
             show.push(ln);
         }
     });
@@ -2105,6 +2113,58 @@ function formatCSChatFilterList() {
     });
 }
 
+function formatCSEmoteList() {
+    var tbl = $("#cs-emotes table");
+    tbl.find("tbody").remove();
+    var entries = CHANNEL.emotes || [];
+    entries.forEach(function (f) {
+        var tr = $("<tr/>").appendTo(tbl);
+        var del = $("<button/>").addClass("btn btn-xs btn-danger")
+            .appendTo($("<td/>").appendTo(tr));
+        $("<span/>").addClass("glyphicon glyphicon-trash").appendTo(del);
+        del.click(function () {
+            socket.emit("removeEmote", f);
+        });
+        var name = $("<code/>").text(f.name).addClass("linewrap")
+            .appendTo($("<td/>").appendTo(tr));
+        var image = $("<code/>").text(f.image).addClass("linewrap")
+            .appendTo($("<td/>").appendTo(tr));
+        image.popover({
+            html: true,
+            trigger: "hover",
+            content: '<img src="' + f.image + '" class="channel-emote">'
+        });
+
+        image.click(function () {
+            var td = image.parent();
+            td.find(".popover").remove();
+            image.detach();
+            var edit = $("<input/>").addClass("form-control").attr("type", "text")
+                .appendTo(td);
+
+            edit.val(f.image);
+            edit.focus();
+
+            var finish = function () {
+                var val = edit.val();
+                edit.remove();
+                image.appendTo(td);
+                socket.emit("updateEmote", {
+                    name: f.name,
+                    image: val
+                });
+            };
+
+            edit.blur(finish);
+            edit.keyup(function (ev) {
+                if (ev.keyCode === 13) {
+                    finish();
+                }
+            });
+        });
+    });
+}
+
 function formatTime(sec) {
     var h = Math.floor(sec / 3600) + "";
     var m = Math.floor((sec % 3600) / 60) + "";