From ce260e0f5c221cdc8bb20daf1c1482086fc4bcb0 Mon Sep 17 00:00:00 2001
From: calzoneman <calzoneman@gmail.com>
Date: Mon, 11 Jul 2016 23:55:07 -0700
Subject: [PATCH 1/2] Greatly improve performance of channel settings emote
 list

The channel settings emote list is now paginated and leverages the same
basic code as the emote browser, but with a different renderer.  Fixes
 #594 and kills an ugly function.
---
 templates/channeloptions.pug |  12 ++-
 www/js/callbacks.js          |   9 +--
 www/js/util.js               | 144 ++++++++++++++++++++++-------------
 3 files changed, 107 insertions(+), 58 deletions(-)

diff --git a/templates/channeloptions.pug b/templates/channeloptions.pug
index 3527dd87..dfff94e1 100644
--- a/templates/channeloptions.pug
+++ b/templates/channeloptions.pug
@@ -179,12 +179,22 @@ mixin emotes
       .form-group
         .col-sm-8.col-sm-offset-4
           button#cs-emotes-newsubmit.btn.btn-primary Create Emote
-    table.table.table-striped.table-condensed
+    form.form-inline
+      .form-group
+        input.emotelist-search.form-control(type="text", placeholder="Search")
+      .form-group
+        .checkbox
+          label
+            input.emotelist-alphabetical(type="checkbox")
+            | Sort alphabetically
+    .emotelist-paginator-container
+    table.emotelist-table.table.table-striped.table-condensed
       thead
         tr
           th Delete
           th Name
           th Image
+      tbody
 
     button#cs-emotes-export.btn.btn-default Export emote list
     button#cs-emotes-import.btn.btn-default Import emote list
diff --git a/www/js/callbacks.js b/www/js/callbacks.js
index ae309e85..581bbff5 100644
--- a/www/js/callbacks.js
+++ b/www/js/callbacks.js
@@ -968,10 +968,8 @@ Callbacks = {
 
     emoteList: function (data) {
         loadEmotes(data);
-        var tbl = $("#cs-emotes table");
-        tbl.data("entries", data);
-        formatCSEmoteList();
         EMOTELIST.handleChange();
+        CSEMOTELIST.handleChange();
     },
 
     updateEmote: function (data) {
@@ -981,15 +979,16 @@ Callbacks = {
             if (CHANNEL.emotes[i].name === data.name) {
                 found = true;
                 CHANNEL.emotes[i] = data;
-                formatCSEmoteList();
                 break;
             }
         }
 
         if (!found) {
             CHANNEL.emotes.push(data);
-            formatCSEmoteList();
         }
+
+        EMOTELIST.handleChange();
+        CSEMOTELIST.handleChange();
     },
 
     removeEmote: function (data) {
diff --git a/www/js/util.js b/www/js/util.js
index d2564c40..71232181 100644
--- a/www/js/util.js
+++ b/www/js/util.js
@@ -2477,58 +2477,6 @@ 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.keydown(function (ev) {
-                if (ev.keyCode === 13) {
-                    finish();
-                }
-            });
-        });
-    });
-}
-
 function formatTime(sec) {
     var h = Math.floor(sec / 3600) + "";
     var m = Math.floor((sec % 3600) / 60) + "";
@@ -3112,3 +3060,95 @@ function stopQueueSpinner(data) {
         $("#queueprogress").remove();
     }
 }
+
+function CSEmoteList(selector) {
+    EmoteList.call(this, selector);
+}
+
+CSEmoteList.prototype = Object.create(EmoteList.prototype);
+
+CSEmoteList.prototype.loadPage = function (page) {
+    var tbody = this.table.children[1];
+    tbody.innerHTML = "";
+
+    var start = page * this.itemsPerPage;
+    if (start >= this.emotes.length) {
+        return;
+    }
+    var end = Math.min(start + this.itemsPerPage, this.emotes.length);
+    var self = this;
+
+    for (var i = start; i < end; i++) {
+        var row = document.createElement("tr");
+        tbody.appendChild(row);
+
+        (function (emote) {
+            // Add delete button
+            var tdDelete = document.createElement("td");
+            var btnDelete = document.createElement("button");
+            btnDelete.className = "btn btn-xs btn-danger";
+            var pennJillette = document.createElement("span");
+            pennJillette.className = "glyphicon glyphicon-trash";
+            btnDelete.appendChild(pennJillette);
+            tdDelete.appendChild(btnDelete);
+            row.appendChild(tdDelete);
+
+            // Add emote name
+            // TODO: editable
+            var tdName = document.createElement("td");
+            var nameDisplay = document.createElement("code");
+            nameDisplay.textContent = emote.name;
+            tdName.appendChild(nameDisplay);
+            row.appendChild(tdName);
+
+            // Add emote image
+            var tdImage = document.createElement("td");
+            var urlDisplay = document.createElement("code");
+            urlDisplay.textContent = emote.image;
+            tdImage.appendChild(urlDisplay);
+            row.appendChild(tdImage);
+
+            // Add popover to display the image
+            var $urlDisplay = $(urlDisplay);
+            $urlDisplay.popover({
+                html: true,
+                trigger: "hover",
+                content: '<img src="' + emote.image + '" class="channel-emote">'
+            });
+
+            // Change the image for an emote
+            $urlDisplay.click(function (clickEvent) {
+                $(tdImage).find(".popover").remove();
+                $urlDisplay.detach();
+
+                var editInput = document.createElement("input");
+                editInput.className = "form-control";
+                editInput.type = "text";
+                editInput.value = emote.image;
+                tdImage.appendChild(editInput);
+                editInput.focus();
+
+                function save() {
+                    var val = editInput.value;
+                    tdImage.removeChild(editInput);
+                    tdImage.appendChild(urlDisplay);
+
+                    socket.emit("updateEmote", {
+                        name: emote.name,
+                        image: val
+                    });
+                }
+
+                editInput.onblur = save;
+                editInput.onkeyup = function (event) {
+                    if (event.keyCode === 13) {
+                        save();
+                    }
+                };
+            });
+        })(this.emotes[i]);
+    }
+};
+
+window.CSEMOTELIST = new CSEmoteList("#cs-emotes");
+window.CSEMOTELIST.sortAlphabetical = USEROPTS.emotelist_sort;

From d01d558ed6a9c91cbd38365eb2fd5facd3f2df37 Mon Sep 17 00:00:00 2001
From: calzoneman <calzoneman@gmail.com>
Date: Tue, 12 Jul 2016 23:04:07 -0700
Subject: [PATCH 2/2] Fill in incomplete CSEmoteList changes

---
 www/js/util.js | 101 ++++++++++++++++++++++++++-----------------------
 1 file changed, 54 insertions(+), 47 deletions(-)

diff --git a/www/js/util.js b/www/js/util.js
index 71232181..11ca1072 100644
--- a/www/js/util.js
+++ b/www/js/util.js
@@ -3014,53 +3014,6 @@ function onEmoteClicked(emote) {
 window.EMOTELIST = new EmoteList("#emotelist", onEmoteClicked);
 window.EMOTELIST.sortAlphabetical = USEROPTS.emotelist_sort;
 
-function showChannelSettings() {
-    hidePlayer();
-    $("#channeloptions").on("hidden.bs.modal", function () {
-        unhidePlayer();
-    });
-
-    $("#channeloptions").modal();
-}
-
-// There is a point where this file needed to stop and we have clearly passed
-// it but let's keep going and see what happens
-
-function startQueueSpinner(data) {
-    if ($("#queueprogress").length > 0) {
-        return;
-    }
-
-    var id = data.id;
-    if (data.type === "yp") {
-        id = "$any";
-    }
-
-    var progress = $("<div/>").addClass("progress").attr("id", "queueprogress")
-            .data("queue-id", id);
-    var progressBar = $("<div/>").addClass("progress-bar progress-bar-striped active")
-            .attr({
-                role: "progressbar",
-                "aria-valuenow": "100",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100",
-            }).css({
-                width: "100%"
-            }).appendTo(progress);
-    progress.appendTo($("#addfromurl"));
-}
-
-function stopQueueSpinner(data) {
-    var shouldRemove = (data !== null &&
-                        typeof data === 'object' &&
-                        $("#queueprogress").data("queue-id") === data.id);
-    shouldRemove = shouldRemove || data === null;
-    shouldRemove = shouldRemove || $("#queueprogress").data("queue-id") === "$any";
-    if (shouldRemove) {
-        $("#queueprogress").remove();
-    }
-}
-
 function CSEmoteList(selector) {
     EmoteList.call(this, selector);
 }
@@ -3077,6 +3030,7 @@ CSEmoteList.prototype.loadPage = function (page) {
     }
     var end = Math.min(start + this.itemsPerPage, this.emotes.length);
     var self = this;
+    this.page = page;
 
     for (var i = start; i < end; i++) {
         var row = document.createElement("tr");
@@ -3093,6 +3047,12 @@ CSEmoteList.prototype.loadPage = function (page) {
             tdDelete.appendChild(btnDelete);
             row.appendChild(tdDelete);
 
+            btnDelete.onclick = function deleteEmote() {
+                document.getElementById("cs-emotes-newname").value = emote.name;
+                document.getElementById("cs-emotes-newimage").value = emote.image;
+                socket.emit("removeEmote", emote);
+            };
+
             // Add emote name
             // TODO: editable
             var tdName = document.createElement("td");
@@ -3152,3 +3112,50 @@ CSEmoteList.prototype.loadPage = function (page) {
 
 window.CSEMOTELIST = new CSEmoteList("#cs-emotes");
 window.CSEMOTELIST.sortAlphabetical = USEROPTS.emotelist_sort;
+
+function showChannelSettings() {
+    hidePlayer();
+    $("#channeloptions").on("hidden.bs.modal", function () {
+        unhidePlayer();
+    });
+
+    $("#channeloptions").modal();
+}
+
+// There is a point where this file needed to stop and we have clearly passed
+// it but let's keep going and see what happens
+
+function startQueueSpinner(data) {
+    if ($("#queueprogress").length > 0) {
+        return;
+    }
+
+    var id = data.id;
+    if (data.type === "yp") {
+        id = "$any";
+    }
+
+    var progress = $("<div/>").addClass("progress").attr("id", "queueprogress")
+            .data("queue-id", id);
+    var progressBar = $("<div/>").addClass("progress-bar progress-bar-striped active")
+            .attr({
+                role: "progressbar",
+                "aria-valuenow": "100",
+                "aria-valuemin": "0",
+                "aria-valuemax": "100",
+            }).css({
+                width: "100%"
+            }).appendTo(progress);
+    progress.appendTo($("#addfromurl"));
+}
+
+function stopQueueSpinner(data) {
+    var shouldRemove = (data !== null &&
+                        typeof data === 'object' &&
+                        $("#queueprogress").data("queue-id") === data.id);
+    shouldRemove = shouldRemove || data === null;
+    shouldRemove = shouldRemove || $("#queueprogress").data("queue-id") === "$any";
+    if (shouldRemove) {
+        $("#queueprogress").remove();
+    }
+}