Make EmoteList self-contained instead of referencing globals

templates/channel.jade

@@ -184,14 +184,14 @@ html(lang="en")
             h4 Emote List
           .modal-body
             .pull-left
-              input#emotelist-search.form-control(type="text", placeholder="Search")
+              input.emotelist-search.form-control(type="text", placeholder="Search")
             .pull-right
               .checkbox
                 label
-                  input#emotelist-alphabetical(type="checkbox")
+                  input.emotelist-alphabetical(type="checkbox")
                   | Sort alphabetically
-            #emotelist-paginator-container
+            .emotelist-paginator-container
-            table
+            table.emotelist-table
               tbody
           .modal-footer
     #channeloptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")

www/css/cytube.css

@@ -593,7 +593,7 @@ table td {
     border-top-width: 0;
 }
 
-#emotelist table {
+.emotelist-table {
     margin: auto;
 }
 
@@ -618,7 +618,7 @@ table td {
     cursor: pointer;
 }
 
-#emotelist-paginator-container {
+.emotelist-paginator-container {
     text-align: center;
 }
 

www/css/themes/bootstrap-theme.min.css

@@ -32,7 +32,7 @@ footer {
     background-color: #ffffff;
 }
 
-#emotelist td {
+.emotelist-table td {
     background-color: #f0f0f0;
 }
 

www/css/themes/cyborg.css

@@ -39,7 +39,7 @@ input.form-control[type="email"], textarea.form-control {
     color: #c8c8c8;
 }
 
-.profile-box, .user-dropdown, #emotelist td {
+.profile-box, .user-dropdown, .emotelist-table td {
     color: #c8c8c8;
     background-color: #2d2d2d;
 }

www/css/themes/light.css

@@ -26,7 +26,7 @@ footer {
     background-color: #ffffff;
 }
 
-#emotelist td {
+.emotelist-table td {
     background-color: #f0f0f0;
 }
 

www/css/themes/modern.css

@@ -46,11 +46,11 @@ input.form-control[type="email"], textarea.form-control {
     border-radius: 0px !important;
 }
 
-#emotelist table {
+.emotelist-table {
     background-color: #2a2d30;
 }
 
-#emotelist td {
+.emotelist-table td {
     background-color: rgba(28, 30, 34, 0.95);
     border: none;
 }

www/css/themes/slate.css

@@ -51,7 +51,7 @@ input.form-control[type="email"], textarea.form-control {
   background-image: linear-gradient(#484e55, #3a3f44 60%, #313539) !important;
 }
 
-.profile-box, .user-dropdown, #emotelist td {
+.profile-box, .user-dropdown, .emotelist-table td {
   color: #c8c8c8;
   background-color: #161a20;
 }

www/js/callbacks.js

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

www/js/ui.js

@@ -828,30 +828,17 @@ applyOpts();
     }
 })();
 
+var EMOTELISTMODAL = $("#emotelist");
+EMOTELISTMODAL.on("hidden.bs.modal", unhidePlayer);
 $("#emotelistbtn").click(function () {
-    EMOTELIST.show();
+    EMOTELISTMODAL.modal();
 });
 
-$("#emotelist-search").keyup(function () {
+EMOTELISTMODAL.find(".emotelist-alphabetical").change(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);
 });
+EMOTELISTMODAL.find(".emotelist-alphabetical").prop("checked", USEROPTS.emotelist_sort);
 
 $("#fullscreenbtn").click(function () {
     var elem = document.querySelector("#videowrap .embed-responsive");

www/js/util.js

@@ -2901,20 +2901,51 @@ function googlePlusSimulator2014(data) {
     return data;
 }
 
-function EmoteList() {
+function EmoteList(selector) {
-    this.modal = $("#emotelist");
+    this.elem = $(selector);
-    this.modal.on("hidden.bs.modal", unhidePlayer);
+    this.initSearch();
-    this.table = document.querySelector("#emotelist table");
+    this.initSortOption();
+    this.table = this.elem.find(".emotelist-table")[0];
+    this.paginatorContainer = this.elem.find(".emotelist-paginator-container");
     this.cols = 5;
     this.itemsPerPage = 25;
     this.emotes = [];
-    this.emoteListChanged = true;
     this.page = 0;
 }
 
+EmoteList.prototype.initSearch = function () {
+    this.searchbar = this.elem.find(".emotelist-search");
+    var self = this;
+
+    this.searchbar.keyup(function () {
+        var value = this.value.toLowerCase();
+        if (value) {
+            self.filter = function (emote) {
+                return emote.name.toLowerCase().indexOf(value) >= 0;
+            };
+        } else {
+            self.filter = null;
+        }
+        self.handleChange();
+        self.loadPage(0);
+    });
+};
+
+EmoteList.prototype.initSortOption = function () {
+    this.sortOption = this.elem.find(".emotelist-alphabetical");
+    this.sortAlphabetical = false;
+    var self = this;
+
+    this.sortOption.change(function () {
+        self.sortAlphabetical = this.checked;
+        self.handleChange();
+        self.loadPage(0);
+    });
+};
+
 EmoteList.prototype.handleChange = function () {
     this.emotes = CHANNEL.emotes.slice();
-    if (USEROPTS.emotelist_sort) {
+    if (this.sortAlphabetical) {
         this.emotes.sort(function (a, b) {
             var x = a.name.toLowerCase();
             var y = b.name.toLowerCase();
@@ -2935,19 +2966,9 @@ EmoteList.prototype.handleChange = function () {
 
     this.paginator = new NewPaginator(this.emotes.length, this.itemsPerPage,
             this.loadPage.bind(this));
-    var container = document.getElementById("emotelist-paginator-container");
+    this.paginatorContainer.html("");
-    container.innerHTML = "";
+    this.paginatorContainer.append(this.paginator.elem);
-    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();
 };
 
 EmoteList.prototype.loadPage = function (page) {
@@ -3002,7 +3023,8 @@ EmoteList.prototype.loadPage = function (page) {
     this.page = page;
 };
 
-window.EMOTELIST = new EmoteList();
+window.EMOTELIST = new EmoteList("#emotelist");
+window.EMOTELIST.sortAlphabetical = USEROPTS.emotelist_sort;
 
 function showChannelSettings() {
     hidePlayer();