Initial emote list implementation

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();