From d59daab2ae33fd8d4771556b05d3e029f4469a10 Mon Sep 17 00:00:00 2001 From: calzoneman Date: Tue, 29 Mar 2016 23:31:02 -0700 Subject: [PATCH] Make EmoteList self-contained instead of referencing globals --- templates/channel.jade | 8 ++-- www/css/cytube.css | 4 +- www/css/themes/bootstrap-theme.min.css | 2 +- www/css/themes/cyborg.css | 2 +- www/css/themes/light.css | 2 +- www/css/themes/modern.css | 4 +- www/css/themes/slate.css | 2 +- www/js/callbacks.js | 2 +- www/js/ui.js | 23 +++------- www/js/util.js | 60 ++++++++++++++++++-------- 10 files changed, 59 insertions(+), 50 deletions(-) diff --git a/templates/channel.jade b/templates/channel.jade index 3315e9a8..e2e4f15c 100644 --- a/templates/channel.jade +++ b/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 - table + .emotelist-paginator-container + table.emotelist-table tbody .modal-footer #channeloptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true") diff --git a/www/css/cytube.css b/www/css/cytube.css index b719430f..5292128d 100644 --- a/www/css/cytube.css +++ b/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; } diff --git a/www/css/themes/bootstrap-theme.min.css b/www/css/themes/bootstrap-theme.min.css index 3699d283..b9bb2375 100644 --- a/www/css/themes/bootstrap-theme.min.css +++ b/www/css/themes/bootstrap-theme.min.css @@ -32,7 +32,7 @@ footer { background-color: #ffffff; } -#emotelist td { +.emotelist-table td { background-color: #f0f0f0; } diff --git a/www/css/themes/cyborg.css b/www/css/themes/cyborg.css index ca26b689..cfaee1fb 100644 --- a/www/css/themes/cyborg.css +++ b/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; } diff --git a/www/css/themes/light.css b/www/css/themes/light.css index 25cb67a3..c3f70a4e 100644 --- a/www/css/themes/light.css +++ b/www/css/themes/light.css @@ -26,7 +26,7 @@ footer { background-color: #ffffff; } -#emotelist td { +.emotelist-table td { background-color: #f0f0f0; } diff --git a/www/css/themes/modern.css b/www/css/themes/modern.css index 2668dea5..b1523314 100644 --- a/www/css/themes/modern.css +++ b/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; } diff --git a/www/css/themes/slate.css b/www/css/themes/slate.css index 4a7a5757..d48d0e5b 100644 --- a/www/css/themes/slate.css +++ b/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; } diff --git a/www/js/callbacks.js b/www/js/callbacks.js index aee55e5e..fd6b47ec 100644 --- a/www/js/callbacks.js +++ b/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) { diff --git a/www/js/ui.js b/www/js/ui.js index c17fa099..513429fc 100644 --- a/www/js/ui.js +++ b/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 () { - 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 () { +EMOTELISTMODAL.find(".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"); diff --git a/www/js/util.js b/www/js/util.js index bbd72ae7..9b93c64d 100644 --- a/www/js/util.js +++ b/www/js/util.js @@ -2901,20 +2901,51 @@ function googlePlusSimulator2014(data) { return data; } -function EmoteList() { - this.modal = $("#emotelist"); - this.modal.on("hidden.bs.modal", unhidePlayer); - this.table = document.querySelector("#emotelist table"); +function EmoteList(selector) { + this.elem = $(selector); + this.initSearch(); + 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"); - container.innerHTML = ""; - container.appendChild(this.paginator.elem); + this.paginatorContainer.html(""); + this.paginatorContainer.append(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();