Initial emote list implementation

www/js/callbacks.js

@@ -1028,6 +1028,7 @@ Callbacks = {
         var tbl = $("#cs-emotes table");
         tbl.data("entries", data);
         formatCSEmoteList();
+        EMOTELIST.emoteListChanged = true;
     },
 
     updateEmote: function (data) {

www/js/paginator.js

@@ -103,3 +103,107 @@
        return p;
     };
 })();
+
+function NewPaginator(numItems, itemsPerPage, pageLoader) {
+    this.numItems = numItems;
+    this.itemsPerPage = itemsPerPage;
+    this.elem = document.createElement("ul");
+    this.elem.className = "pagination";
+    this.btnBefore = 3;
+    this.btnAfter = 3;
+    this.pageLoader = pageLoader;
+}
+
+NewPaginator.prototype.makeButton = function (target, text) {
+    var li = document.createElement("li");
+    var btn = document.createElement("a");
+    btn.href = "javascript:void(0)";
+    btn.innerHTML = text;
+    var _this = this;
+    if (target !== null) {
+        btn.onclick = function (event) {
+            if (this.parentNode.className === "disabled") {
+                event.preventDefault();
+                return false;
+            }
+            _this.loadPage(target);
+        };
+    }
+
+    li.appendChild(btn);
+    return li;
+};
+
+NewPaginator.prototype.makeBreak = function () {
+    var btn = this.makeButton(null, "…");
+    btn.className = "disabled";
+    return btn;
+};
+
+NewPaginator.prototype.loadButtons = function (page) {
+    this.elem.innerHTML = "";
+
+    var first = this.makeButton(0, "First");
+    this.elem.appendChild(first);
+    if (page === 0) {
+        first.className = "disabled";
+    }
+
+    var prev = this.makeButton(page - 1, "«");
+    this.elem.appendChild(prev);
+    if (page === 0) {
+        prev.className = "disabled";
+    }
+
+    if (page > this.btnBefore) {
+        var sep = this.makeBreak();
+        this.elem.appendChild(sep);
+    }
+
+    var numPages = Math.ceil(this.numItems / this.itemsPerPage);
+    var numBtns = Math.min(this.btnBefore + this.btnAfter + 1, numPages);
+    var start;
+    if (page < this.btnBefore) {
+        start = 0;
+    } else if (page > numPages - this.btnAfter - 1) {
+        start = numPages - numBtns;
+    } else {
+        start = page - this.btnBefore;
+    }
+    var end = start + numBtns;
+
+    var _this = this;
+    for (var i = start; i < end; i++) {
+        (function (i) {
+            var btn = _this.makeButton(i, String(i + 1));
+            _this.elem.appendChild(btn);
+            if (i === page) {
+                btn.className = "disabled";
+            }
+        })(i);
+    }
+
+    if (page < numPages - this.btnAfter - 1) {
+        var sep = this.makeBreak();
+        this.elem.appendChild(sep);
+    }
+
+    var next = this.makeButton(page + 1, "&raquo;");
+    this.elem.appendChild(next);
+    if (page === numPages - 1) {
+        next.className = "disabled";
+    }
+
+    var last = this.makeButton(numPages - 1, "Last");
+    this.elem.appendChild(last);
+    if (page === numPages - 1) {
+        last.className = "disabled";
+    }
+};
+
+NewPaginator.prototype.loadPage = function (page) {
+    this.loadButtons(page);
+    if (this.pageLoader) {
+        this.pageLoader(page);
+    }
+};

www/js/ui.js

@@ -762,3 +762,7 @@ applyOpts();
         });
     }
 })();
+
+$("#emotelistbtn").click(function () {
+    EMOTELIST.show();
+});

www/js/util.js

@@ -2846,3 +2846,91 @@ function googlePlusSimulator2014(data) {
     data.contentType = data.meta.gpdirect[q].contentType;
     return data;
 }
+
+function EmoteList() {
+    this.modal = $("#emotelist");
+    this.modal.on("hiddn.bs.modal", unhidePlayer);
+    this.table = document.querySelector("#emotelist table");
+    this.cols = 5;
+    this.itemsPerPage = 25;
+    this.emotes = [];
+    this.emoteListChanged = true;
+    this.page = 0;
+}
+
+EmoteList.prototype.show = function () {
+    if (this.emoteListChanged) {
+        this.emotes = CHANNEL.emotes.slice().sort(function (a, b) {
+            var x = a.name.toLowerCase();
+            var y = b.name.toLowerCase();
+
+            if (x < y) {
+                return -1;
+            } else if (x > y) {
+                return 1;
+            } else {
+                return 0;
+            }
+        });
+        this.paginator = new NewPaginator(this.emotes.length, this.itemsPerPage,
+                this.loadPage.bind(this));
+        var container = document.getElementById("emotelist-paginator-container");
+        container.innerHTML = "";
+        container.appendChild(this.paginator.elem);
+        this.paginator.loadPage(this.page);
+        this.emoteListChanged = false;
+    }
+
+    this.modal.modal();
+};
+
+EmoteList.prototype.loadPage = function (page) {
+    var tbody = this.table.children[0];
+    tbody.innerHTML = "";
+
+    var row;
+    var start = page * this.itemsPerPage;
+    if (start >= this.emotes.length) return;
+    var end = Math.min(start + this.itemsPerPage, this.emotes.length - 1);
+    var _this = this;
+
+    for (var i = start; i < end; i++) {
+        if ((i - start) % this.cols === 0) {
+            row = document.createElement("tr");
+            tbody.appendChild(row);
+        }
+
+        (function (emote) {
+            var td = document.createElement("td");
+            td.className = "emote-preview-container";
+
+            // Trick element to vertically align the emote within the container
+            var hax = document.createElement("span");
+            hax.className = "emote-preview-hax";
+            td.appendChild(hax);
+
+            var img = document.createElement("img");
+            img.src = emote.image;
+            img.className = "emote-preview";
+            img.title = emote.name;
+            img.onclick = function () {
+                var val = chatline.value;
+                if (!val || val.charAt(val.length - 1).match(/\s/)) {
+                    chatline.value = emote.name;
+                } else {
+                    chatline.value += " " + emote.name;
+                }
+
+                _this.modal.modal("hide");
+                chatline.focus();
+            };
+
+            td.appendChild(img);
+            row.appendChild(td);
+        })(this.emotes[i]);
+    }
+
+    this.page = page;
+};
+
+window.EMOTELIST = new EmoteList();