Initial emote list implementation

This commit is contained in:
calzoneman 2015-05-12 13:50:59 -05:00
parent 73fc5dd724
commit 389dd0d5ab
11 changed files with 256 additions and 10 deletions

View file

@ -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

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
@ -176,4 +176,4 @@ input.form-control[type="email"], textarea.form-control {
margin-bottom: 9px;
min-height: 20px;
padding: 10px 19px !important;
}
}

View file

@ -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;
}

View file

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

View file

@ -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);
}
};

View file

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

View file

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