diff --git a/templates/channel.jade b/templates/channel.jade index f5eb1968..305d162f 100644 --- a/templates/channel.jade +++ b/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 diff --git a/www/css/themes/modern.css b/www/css/themes/modern.css index 119a018f..035cef9d 100644 --- a/www/css/themes/modern.css +++ b/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; diff --git a/www/js/data.js b/www/js/data.js index 7f29ddd0..9076a31b 100644 --- a/www/js/data.js +++ b/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 */ diff --git a/www/js/paginator.js b/www/js/paginator.js index 99a71baf..720f7708 100644 --- a/www/js/paginator.js +++ b/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) { diff --git a/www/js/ui.js b/www/js/ui.js index c0f8d68a..f830fd46 100644 --- a/www/js/ui.js +++ b/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); +}); diff --git a/www/js/util.js b/www/js/util.js index 391d6d2f..5478dfa1 100644 --- a/www/js/util.js +++ b/www/js/util.js @@ -2858,9 +2858,10 @@ function EmoteList() { this.page = 0; } -EmoteList.prototype.show = function () { - if (this.emoteListChanged) { - this.emotes = CHANNEL.emotes.slice().sort(function (a, b) { +EmoteList.prototype.handleChange = function () { + this.emotes = CHANNEL.emotes.slice(); + 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"); - container.innerHTML = ""; - container.appendChild(this.paginator.elem); - this.paginator.loadPage(this.page); - this.emoteListChanged = false; + } + + if (this.filter) { + this.emotes = this.emotes.filter(this.filter); + } + + 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++) {