Initial emote list implementation

templates/channel.jade

@@ -55,6 +55,7 @@ html(lang="en")
           #controlsrow.row
             #leftcontrols.col-lg-5.col-md-5
               button#newpollbtn.btn.btn-sm.btn-default New Poll
+              button#emotelistbtn.btn.btn-sm.btn-default Emote List
             #rightcontrols.col-lg-7.col-md-7
               #plcontrol.btn-group.pull-left
                 button#showsearch.btn.btn-sm.btn-default(title="Search for a video", data-toggle="collapse", data-target="#searchcontrol")
@@ -172,6 +173,17 @@ html(lang="en")
           .modal-footer
             button.btn.btn-primary(type="button", data-dismiss="modal", onclick="javascript:saveUserOptions()") Save
             button.btn.btn-default(type="button", data-dismiss="modal") Close
+    #emotelist.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
+      .modal-dialog.modal-dialog-nonfluid
+        .modal-content
+          .modal-header
+            button.close(data-dismiss="modal", aria-hidden="true") ×
+            h4 Emote List
+          .modal-body
+            #emotelist-paginator-container
+            table
+              tbody
+          .modal-footer
     #channeloptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
       .modal-dialog
         .modal-content

www/css/cytube.css

@@ -557,15 +557,15 @@ body.chatOnly .pm-panel, body.chatOnly .pm-panel-placeholder {
 }
 
 @media screen and (min-width: 768px) {
-    .modal {
-        padding: 30px;
-    }
-
     .modal-dialog {
         min-width: 600px!important;
         max-width: 1200px!important;
         width: auto!important;
     }
+
+    .modal-dialog-nonfluid.modal-dialog {
+        max-width: 600px!important;
+    }
 }
 
 table td {
@@ -592,3 +592,32 @@ table td {
     border: 1px solid;
     border-top-width: 0;
 }
+
+#emotelist table {
+    margin: auto;
+}
+
+.emote-preview-container {
+    width: 100px;
+    height: 100px;
+    float: left;
+    text-align: center;
+    white-space: nowrap;
+    margin: 5px;
+}
+
+.emote-preview-hax {
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+}
+
+.emote-preview {
+    max-width: 100px;
+    max-height: 100px;
+    cursor: pointer;
+}
+
+#emotelist-paginator-container {
+    text-align: center;
+}

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

@@ -28,10 +28,14 @@ footer {
     background-color: #eeeeee !important;
 }
 
-.profile-box, .user-dropdown {
+.profile-box, .user-dropdown, #emotelist td {
     background-color: #ffffff;
 }
 
+#emotelist td {
+    border: 1px solid #cccccc;
+}
+
 .chat-shadow {
     color: #aaaaaa;
 }

www/css/themes/cyborg.css

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

www/css/themes/light.css

@@ -22,10 +22,14 @@ footer {
     background-color: #eeeeee !important;
 }
 
-.profile-box, .user-dropdown {
+.profile-box, .user-dropdown, #emotelist td {
     background-color: #ffffff;
 }
 
+#emotelist td {
+    border: 1px solid #cccccc;
+}
+
 .chat-shadow {
     color: #aaaaaa;
 }

www/css/themes/modern.css

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

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 {
+.profile-box, .user-dropdown, #emotelist td {
   color: #c8c8c8;
   background-color: #161a20;
 }

www/js/callbacks.js

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

www/js/paginator.js

@@ -103,3 +103,107 @@
        return p;
     };
 })();
+
+function NewPaginator(numItems, itemsPerPage, pageLoader) {
+    this.numItems = numItems;
+    this.itemsPerPage = itemsPerPage;
+    this.elem = document.createElement("ul");
+    this.elem.className = "pagination";
+    this.btnBefore = 3;
+    this.btnAfter = 3;
+    this.pageLoader = pageLoader;
+}
+
+NewPaginator.prototype.makeButton = function (target, text) {
+    var li = document.createElement("li");
+    var btn = document.createElement("a");
+    btn.href = "javascript:void(0)";
+    btn.innerHTML = text;
+    var _this = this;
+    if (target !== null) {
+        btn.onclick = function (event) {
+            if (this.parentNode.className === "disabled") {
+                event.preventDefault();
+                return false;
+            }
+            _this.loadPage(target);
+        };
+    }
+
+    li.appendChild(btn);
+    return li;
+};
+
+NewPaginator.prototype.makeBreak = function () {
+    var btn = this.makeButton(null, "…");
+    btn.className = "disabled";
+    return btn;
+};
+
+NewPaginator.prototype.loadButtons = function (page) {
+    this.elem.innerHTML = "";
+
+    var first = this.makeButton(0, "First");
+    this.elem.appendChild(first);
+    if (page === 0) {
+        first.className = "disabled";
+    }
+
+    var prev = this.makeButton(page - 1, "«");
+    this.elem.appendChild(prev);
+    if (page === 0) {
+        prev.className = "disabled";
+    }
+
+    if (page > this.btnBefore) {
+        var sep = this.makeBreak();
+        this.elem.appendChild(sep);
+    }
+
+    var numPages = Math.ceil(this.numItems / this.itemsPerPage);
+    var numBtns = Math.min(this.btnBefore + this.btnAfter + 1, numPages);
+    var start;
+    if (page < this.btnBefore) {
+        start = 0;
+    } else if (page > numPages - this.btnAfter - 1) {
+        start = numPages - numBtns;
+    } else {
+        start = page - this.btnBefore;
+    }
+    var end = start + numBtns;
+
+    var _this = this;
+    for (var i = start; i < end; i++) {
+        (function (i) {
+            var btn = _this.makeButton(i, String(i + 1));
+            _this.elem.appendChild(btn);
+            if (i === page) {
+                btn.className = "disabled";
+            }
+        })(i);
+    }
+
+    if (page < numPages - this.btnAfter - 1) {
+        var sep = this.makeBreak();
+        this.elem.appendChild(sep);
+    }
+
+    var next = this.makeButton(page + 1, "&raquo;");
+    this.elem.appendChild(next);
+    if (page === numPages - 1) {
+        next.className = "disabled";
+    }
+
+    var last = this.makeButton(numPages - 1, "Last");
+    this.elem.appendChild(last);
+    if (page === numPages - 1) {
+        last.className = "disabled";
+    }
+};
+
+NewPaginator.prototype.loadPage = function (page) {
+    this.loadButtons(page);
+    if (this.pageLoader) {
+        this.pageLoader(page);
+    }
+};

www/js/ui.js

@@ -762,3 +762,7 @@ applyOpts();
         });
     }
 })();
+
+$("#emotelistbtn").click(function () {
+    EMOTELIST.show();
+});

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