Add emote search, sort toggle

templates/channel.jade

@@ -180,6 +180,13 @@ html(lang="en")
             button.close(data-dismiss="modal", aria-hidden="true") ×
             h4 Emote List
           .modal-body
+            form.form-inline(action="javascript:void(0)")
+              .form-group
+                input#emotelist-search.form-control(type="text", placeholder="Search")
+              .checkbox
+                label
+                  input#emotelist-alphabetical(type="checkbox")
+                  | Sort alphabetically
             #emotelist-paginator-container
             table
               tbody

www/css/themes/modern.css

@@ -39,13 +39,22 @@ input.form-control[type="email"], textarea.form-control {
     background-color: rgba(65, 69, 74, 0.7) !important;
 }
 
-.profile-box, .user-dropdown, #emotelist td {
+.profile-box, .user-dropdown {
     color: #c8c8c8;
     background-color: rgba(28, 30, 34, 0.95);
     border: 1px solid #000000 !important;
     border-radius: 0px !important;
 }
 
+#emotelist table {
+    background-color: #2a2d30;
+}
+
+#emotelist td {
+    background-color: rgba(28, 30, 34, 0.95);
+    border: none;
+}
+
 .profile-image {
     border-radius: 0px;
     border: solid 1px #000000 !important;

www/js/data.js

@@ -114,7 +114,8 @@ var USEROPTS = {
     default_quality      : getOrDefault("default_quality", ""),
     boop                 : getOrDefault("boop", "never"),
     secure_connection    : getOrDefault("secure_connection", false),
-    show_shadowchat      : getOrDefault("show_shadowchat", false)
+    show_shadowchat      : getOrDefault("show_shadowchat", false),
+    emotelist_sort       : getOrDefault("emotelist_sort", true)
 };
 
 /* Backwards compatibility check */

www/js/paginator.js

@@ -161,6 +161,7 @@ NewPaginator.prototype.loadButtons = function (page) {
     }
 
     var numPages = Math.ceil(this.numItems / this.itemsPerPage);
+    numPages = Math.max(numPages, 1);
     var numBtns = Math.min(this.btnBefore + this.btnAfter + 1, numPages);
     var start;
     if (page < this.btnBefore) {

www/js/ui.js

@@ -766,3 +766,24 @@ applyOpts();
 $("#emotelistbtn").click(function () {
     EMOTELIST.show();
 });
+
+$("#emotelist-search").keyup(function () {
+    var value = this.value.toLowerCase();
+    if (value) {
+        EMOTELIST.filter = function (emote) {
+            return emote.name.toLowerCase().indexOf(value) >= 0;
+        };
+    } else {
+        EMOTELIST.filter = null;
+    }
+    EMOTELIST.handleChange();
+    EMOTELIST.loadPage(0);
+});
+
+$("#emotelist-alphabetical").prop("checked", USEROPTS.emotelist_sort);
+$("#emotelist-alphabetical").change(function () {
+    USEROPTS.emotelist_sort = this.checked;
+    setOpt("emotelist_sort", USEROPTS.emotelist_sort);
+    EMOTELIST.handleChange();
+    EMOTELIST.loadPage(0);
+});

www/js/util.js

@@ -2858,9 +2858,10 @@ function EmoteList() {
     this.page = 0;
 }
 
-EmoteList.prototype.show = function () {
+EmoteList.prototype.handleChange = function () {
-    if (this.emoteListChanged) {
+    this.emotes = CHANNEL.emotes.slice();
-        this.emotes = CHANNEL.emotes.slice().sort(function (a, b) {
+    if (USEROPTS.emotelist_sort) {
+        this.emotes.sort(function (a, b) {
             var x = a.name.toLowerCase();
             var y = b.name.toLowerCase();
 
@@ -2872,13 +2873,24 @@ EmoteList.prototype.show = function () {
                 return 0;
             }
         });
-        this.paginator = new NewPaginator(this.emotes.length, this.itemsPerPage,
+    }
-                this.loadPage.bind(this));
+
-        var container = document.getElementById("emotelist-paginator-container");
+    if (this.filter) {
-        container.innerHTML = "";
+        this.emotes = this.emotes.filter(this.filter);
-        container.appendChild(this.paginator.elem);
+    }
-        this.paginator.loadPage(this.page);
+
-        this.emoteListChanged = false;
+    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;
+};
+
+EmoteList.prototype.show = function () {
+    if (this.emoteListChanged) {
+        this.handleChange();
     }
 
     this.modal.modal();
@@ -2891,7 +2903,7 @@ EmoteList.prototype.loadPage = function (page) {
     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 end = Math.min(start + this.itemsPerPage, this.emotes.length);
     var _this = this;
 
     for (var i = start; i < end; i++) {