moon
/
sync
mirror of https://github.com/calzoneman/sync.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Start refactoring clientside

This commit is contained in:
calzoneman 2013-12-14 21:59:47 -06:00
parent 47af1d4892
commit 5c40a72d47
5 changed files with 74 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
www/assets/js/callbacks.js
View File

@ -17,7 +17,7 @@ Callbacks = {
if(reason && reason.returnValue === true) if(reason && reason.returnValue === true)
return; return;
var d = $("<div/>").addClass("alert alert-error span12") var d = $("<div/>").addClass("alert alert-danger col-lg-12 col-md-12")
.appendTo($("#announcements")); .appendTo($("#announcements"));
$("<h3/>").text("Uh-oh!").appendTo(d); $("<h3/>").text("Uh-oh!").appendTo(d);
$("<p/>").html("The socket.io connection failed."+ $("<p/>").html("The socket.io connection failed."+
@ -66,7 +66,7 @@ Callbacks = {
$("<div/>").addClass("server-msg-reconnect") $("<div/>").addClass("server-msg-reconnect")
.text("Connected") .text("Connected")
.appendTo($("#messagebuffer")); .appendTo($("#messagebuffer"));
$("#messagebuffer").scrollTop($("#messagebuffer").prop("scrollHeight")); scrollChat();
}, },
disconnect: function() { disconnect: function() {
@ -86,27 +86,17 @@ Callbacks = {
costanza: function (data) { costanza: function (data) {
hidePlayer(); hidePlayer();
$("#costanza-modal").modal("hide"); $("#costanza-modal").modal("hide");
var modal = $("<div/>").addClass("modal hide fade") var modal = makeModal();
.attr("id", "costanza-modal") modal.attr("id", "costanza-modal")
.appendTo($("body")); .appendTo($("body"));
var body = $("<div/>").addClass("modal-body")
var body = $("<div/>").addClass("modal-body").appendTo(modal); .appendTo(modal.find(".modal-content"));
$("<button/>").addClass("close")
.attr("data-dismiss", "modal")
.attr("data-hidden", "true")
.html("&times;")
.appendTo(body);
$("<img/>").attr("src", "http://i0.kym-cdn.com/entries/icons/original/000/005/498/1300044776986.jpg") $("<img/>").attr("src", "http://i0.kym-cdn.com/entries/icons/original/000/005/498/1300044776986.jpg")
.appendTo(body); .appendTo(body);
$("<strong/>").text(data.msg).appendTo(body); $("<strong/>").text(data.msg).appendTo(body);
hidePlayer();
modal.on("hidden", function () {
modal.remove();
unhidePlayer();
});
modal.modal(); modal.modal();
}, },
@ -143,10 +133,11 @@ Callbacks = {
.appendTo(div); .appendTo(div);
} }
var pwbox = $("<input/>").addClass("input-block-level") var pwbox = $("<input/>").addClass("form-control")
.attr("type", "password") .attr("type", "password")
.appendTo(div); .appendTo(div);
var submit = $("<button/>").addClass("btn btn-mini btn-block") var submit = $("<button/>").addClass("btn btn-xs btn-default btn-block")
.css("margin-top", "5px")
.text("Submit") .text("Submit")
.appendTo(div); .appendTo(div);
var parent = chatDialog(div); var parent = chatDialog(div);
@ -208,7 +199,7 @@ Callbacks = {
$("#chregnotice").remove(); $("#chregnotice").remove();
} }
else { else {
makeAlert("Error", data.error, "alert-error") makeAlert("Error", data.error, "alert-danger")
.insertAfter($("#chregnotice")); .insertAfter($("#chregnotice"));
} }
}, },
@ -234,9 +225,9 @@ Callbacks = {
if(data.motd != "") { if(data.motd != "") {
$("#motdwrap").show(); $("#motdwrap").show();
$("#motd").show(); $("#motd").show();
$("#togglemotd").find(".icon-plus") $("#togglemotd").find(".glyphicon-plus")
.removeClass("icon-plus") .removeClass("glyphicon-plus")
.addClass("icon-minus"); .addClass("glyphicon-minus");
} }
else else
$("#motdwrap").hide(); $("#motdwrap").hide();
@ -254,9 +245,9 @@ Callbacks = {
for(var i = 0; i < entries.length; i++) { for(var i = 0; i < entries.length; i++) {
var f = entries[i]; var f = entries[i];
var tr = $("<tr/>").appendTo(tbl).addClass("filter-row"); var tr = $("<tr/>").appendTo(tbl).addClass("filter-row");
var remove = $("<button/>").addClass("btn btn-mini btn-danger") var remove = $("<button/>").addClass("btn btn-xs btn-danger")
.appendTo($("<td/>").appendTo(tr)); .appendTo($("<td/>").appendTo(tr));
$("<i/>").addClass("icon-trash").appendTo(remove); $("<span/>").addClass("glyphicon glyphicon-trash").appendTo(remove);
var name = $("<code/>").text(f.name) var name = $("<code/>").text(f.name)
.appendTo($("<td/>").appendTo(tr)); .appendTo($("<td/>").appendTo(tr));
var regex = $("<code/>").text(f.source) var regex = $("<code/>").text(f.source)
@ -277,11 +268,11 @@ Callbacks = {
return; return;
var r = this.text(); var r = this.text();
this.text(""); this.text("");
var edit = $("<input/>").attr("type", "text") var edit = $("<input/>").addClass("form-control filter-regex-edit")
.attr("type", "text")
.css("font-family", "Monospace") .css("font-family", "Monospace")
.attr("placeholder", r) .attr("placeholder", r)
.val(r) .val(r)
.addClass("filter-regex-edit")
.appendTo(this) .appendTo(this)
.focus(); .focus();
@ -309,7 +300,7 @@ Callbacks = {
.css("font-family", "Monospace") .css("font-family", "Monospace")
.attr("placeholder", r) .attr("placeholder", r)
.val(r) .val(r)
.addClass("filter-flags-edit") .addClass("form-control filter-flags-edit")
.appendTo(this) .appendTo(this)
.focus(); .focus();
@ -337,7 +328,7 @@ Callbacks = {
.css("font-family", "Monospace") .css("font-family", "Monospace")
.attr("placeholder", r) .attr("placeholder", r)
.val(r) .val(r)
.addClass("filter-replace-edit") .addClass("form-control filter-replace-edit")
.appendTo(this) .appendTo(this)
.focus(); .focus();
@ -465,9 +456,9 @@ Callbacks = {
} }
for(var i = 0; i < entries.length; i++) { for(var i = 0; i < entries.length; i++) {
var tr = document.createElement("tr"); var tr = document.createElement("tr");
var remove = $("<button/>").addClass("btn btn-mini btn-danger") var remove = $("<button/>").addClass("btn btn-xs btn-danger")
.appendTo($("<td/>").appendTo(tr)); .appendTo($("<td/>").appendTo(tr));
$("<i/>").addClass("icon-remove-circle").appendTo(remove); $("<span/>").addClass("glyphicon glyphicon-remove-circle").appendTo(remove);
var ip = $("<td/>").text(entries[i].ip_displayed).appendTo(tr); var ip = $("<td/>").text(entries[i].ip_displayed).appendTo(tr);
var name = $("<td/>").text(entries[i].name).appendTo(tr); var name = $("<td/>").text(entries[i].name).appendTo(tr);
var aliases = $("<td/>").text(entries[i].aliases.join(", ")).appendTo(tr); var aliases = $("<td/>").text(entries[i].aliases.join(", ")).appendTo(tr);

2
www/assets/js/data.js
View File

@ -61,7 +61,7 @@ var LASTCHATTIME = 0;
var FOCUSED = true; var FOCUSED = true;
var PAGETITLE = "CyTube"; var PAGETITLE = "CyTube";
var TITLE_BLINK; var TITLE_BLINK;
var CHATSOUND = new Audio("assets/sounds/boop.wav"); var CHATSOUND = new Audio("/assets/sounds/boop.wav");
var KICKED = false; var KICKED = false;
var NAME = readCookie("cytube_uname"); var NAME = readCookie("cytube_uname");
var SESSION = readCookie("cytube_session"); var SESSION = readCookie("cytube_session");

101
www/assets/js/ui.js
View File

@ -19,32 +19,6 @@ $(window).focus(function() {
FOCUSED = false; FOCUSED = false;
}); });
/* Generalized show/hide function */
function generateToggle(chevron, div) {
$(chevron).click(function() {
if($(div).css("display") == "none") {
$(chevron).html($(chevron).html().replace(/Show/, "Hide"));
$(div).show();
$(chevron+" i").removeClass("icon-plus")
.addClass("icon-minus");
}
else {
$(chevron).html($(chevron).html().replace(/Hide/, "Show"));
$(div).hide();
$(chevron+" i").removeClass("icon-minus")
.addClass("icon-plus");
}
});
}
/* setup show/hide toggles */
generateToggle("#usercount", "#userlist");
generateToggle("#userlisttoggle", "#userlist");
$("#usercountwrap").click(scrollChat);
generateToggle("#librarytoggle", "#librarywrap");
generateToggle("#userpltoggle", "#userplaylistwrap");
generateToggle("#playlisttoggle", "#playlist_controls");
$("#editmotd").click(showMOTDEditor); $("#editmotd").click(showMOTDEditor);
$("#togglemotd").click(function () { $("#togglemotd").click(function () {
@ -61,29 +35,6 @@ $("#togglemotd").click(function () {
} }
}); });
/* navbar stuff */
$("#optlink").click(showOptionsMenu);
$("#chatonly").click(chatOnly);
function guestLogin() {
socket.emit("login", {
name: $("#guestname").val(),
});
}
$("#guestlogin").click(guestLogin);
$("#guestname").keydown(function(ev) {
if(ev.keyCode == 13) {
guestLogin();
}
});
$("#login").click(showLoginMenu);
$("#logout").click(function() {
eraseCookie("cytube_name");
eraseCookie("cytube_session");
document.location.reload(true);
});
/* chatbox */ /* chatbox */
$("#modflair").click(function () { $("#modflair").click(function () {
@ -147,6 +98,7 @@ $("#messagebuffer").mouseenter(function() { SCROLLCHAT = false; });
$("#messagebuffer").mouseleave(function() { SCROLLCHAT = true; }); $("#messagebuffer").mouseleave(function() { SCROLLCHAT = true; });
$("#chatline").keydown(function(ev) { $("#chatline").keydown(function(ev) {
// Enter/return
if(ev.keyCode == 13) { if(ev.keyCode == 13) {
if (CHATTHROTTLE) { if (CHATTHROTTLE) {
return; return;
@ -159,6 +111,8 @@ $("#chatline").keydown(function(ev) {
} else if (USEROPTS.modhat && CLIENT.rank >= Rank.Moderator) { } else if (USEROPTS.modhat && CLIENT.rank >= Rank.Moderator) {
meta.modflair = CLIENT.rank; meta.modflair = CLIENT.rank;
} }
// The /m command no longer exists, so emulate it clientside
if (CLIENT.rank >= 2 && msg.indexOf("/m ") === 0) { if (CLIENT.rank >= 2 && msg.indexOf("/m ") === 0) {
meta.modflair = CLIENT.rank; meta.modflair = CLIENT.rank;
msg = msg.substring(3); msg = msg.substring(3);
@ -174,16 +128,19 @@ $("#chatline").keydown(function(ev) {
} }
return; return;
} }
else if(ev.keyCode == 9) { else if(ev.keyCode == 9) { // Tab completion
var words = $("#chatline").val().split(" "); var words = $("#chatline").val().split(" ");
var current = words[words.length - 1].toLowerCase(); var current = words[words.length - 1].toLowerCase();
var users = $("#userlist").children(); var users = $("#userlist").children();
var match = null; var match = null;
for(var i = 0; i < users.length; i++) { for(var i = 0; i < users.length; i++) {
var name = users[i].children[1].innerHTML.toLowerCase(); var name = users[i].children[1].innerHTML.toLowerCase();
// Last word is a unique match for a userlist name
if(name.indexOf(current) == 0 && match == null) { if(name.indexOf(current) == 0 && match == null) {
match = users[i].children[1].innerHTML; match = users[i].children[1].innerHTML;
} }
// Last word is NOT a unique match- a match has already
// been found. Bail because no unique completion is possible.
else if(name.indexOf(current) == 0) { else if(name.indexOf(current) == 0) {
match = null; match = null;
break; break;
@ -200,7 +157,7 @@ $("#chatline").keydown(function(ev) {
ev.preventDefault(); ev.preventDefault();
return false; return false;
} }
else if(ev.keyCode == 38) { else if(ev.keyCode == 38) { // Up arrow (input history)
if(CHATHISTIDX == CHATHIST.length) { if(CHATHISTIDX == CHATHIST.length) {
CHATHIST.push($("#chatline").val()); CHATHIST.push($("#chatline").val());
} }
@ -212,7 +169,7 @@ $("#chatline").keydown(function(ev) {
ev.preventDefault(); ev.preventDefault();
return false; return false;
} }
else if(ev.keyCode == 40) { else if(ev.keyCode == 40) { // Down arrow (input history)
if(CHATHISTIDX < CHATHIST.length - 1) { if(CHATHISTIDX < CHATHIST.length - 1) {
CHATHISTIDX++; CHATHISTIDX++;
$("#chatline").val(CHATHIST[CHATHISTIDX]); $("#chatline").val(CHATHIST[CHATHISTIDX]);
@ -249,8 +206,7 @@ $("#youtube_search").click(function () {
makeAlert("Media Link", "If you already have the link, paste it " + makeAlert("Media Link", "If you already have the link, paste it " +
"in the 'Media URL' box under Playlist Controls. This "+ "in the 'Media URL' box under Playlist Controls. This "+
"searchbar works like YouTube's search function.", "searchbar works like YouTube's search function.",
"alert-error") "alert-danger")
.addClass("span12")
.insertBefore($("#library")); .insertBefore($("#library"));
} }
@ -262,14 +218,13 @@ $("#youtube_search").click(function () {
/* user playlists */ /* user playlists */
$("#userpltoggle").click(function() { $("#showplaylistmanager").click(function() {
socket.emit("listPlaylists"); socket.emit("listPlaylists");
}); });
$("#userpl_save").click(function() { $("#userpl_save").click(function() {
if($("#userpl_name").val().trim() == "") { if($("#userpl_name").val().trim() == "") {
makeAlert("Invalid Name", "Playlist name cannot be empty", "alert-error") makeAlert("Invalid Name", "Playlist name cannot be empty", "alert-danger")
.addClass("span12")
.insertAfter($("#userpl_save").parent()); .insertAfter($("#userpl_save").parent());
return; return;
} }
@ -279,16 +234,14 @@ $("#userpl_save").click(function() {
}); });
/* video controls */ /* video controls */
function selectQuality(select, preset) { // TODO this is ugly, change it?
}
(function() { (function() {
function qualHandler(select, preset) { function qualHandler(select, preset) {
$(select).click(function() { $(select).click(function() {
VIDEOQUALITY = preset; VIDEOQUALITY = preset;
USEROPTS.default_quality = select; USEROPTS.default_quality = select;
saveOpts(); saveOpts();
var btn = $("#qualitywrap .btn.dropdown-toggle"); var btn = $("#qdrop");
var caret = btn.find(".caret").detach(); var caret = btn.find(".caret").detach();
btn.text($(select).text()); btn.text($(select).text());
caret.appendTo(btn); caret.appendTo(btn);
@ -309,6 +262,8 @@ function selectQuality(select, preset) {
$("#mediarefresh").click(function() { $("#mediarefresh").click(function() {
PLAYER.type = ""; PLAYER.type = "";
PLAYER.id = ""; PLAYER.id = "";
// playerReady triggers the server to send a changeMedia.
// the changeMedia handler then reloads the player
socket.emit("playerReady"); socket.emit("playerReady");
}); });
@ -333,6 +288,7 @@ $("#queue").sortable({
}); });
$("#queue").disableSelection(); $("#queue").disableSelection();
// TODO no more comma separated queueing.
function queue(pos) { function queue(pos) {
if($("#customembed_code").val()) { if($("#customembed_code").val()) {
var title = false; var title = false;
@ -354,8 +310,7 @@ function queue(pos) {
links.forEach(function(link) { links.forEach(function(link) {
var data = parseMediaLink(link); var data = parseMediaLink(link);
if(data.id === null || data.type === null) { if(data.id === null || data.type === null) {
makeAlert("Error", "Invalid link. Please double check it and remove extraneous information", "alert-error") makeAlert("Error", "Invalid link. Please double check it and remove extraneous information", "alert-danger")
.addClass("span12")
.insertBefore($("#extended_controls")); .insertBefore($("#extended_controls"));
} }
else { else {
@ -424,8 +379,10 @@ $("#getplaylist").click(function() {
} }
var urls = list.join(","); var urls = list.join(",");
var modal = $("<div/>").addClass("modal hide fade") var outer = $("<div/>").addClass("modal fade")
.appendTo($("body")); .appendTo($("body"));
modal = $("<div/>").addClass("modal-dialog").appendTo(outer);
modal = $("<div/>").addClass("modal-content").appendTo(modal);
var head = $("<div/>").addClass("modal-header") var head = $("<div/>").addClass("modal-header")
.appendTo(modal); .appendTo(modal);
$("<button/>").addClass("close") $("<button/>").addClass("close")
@ -435,16 +392,16 @@ $("#getplaylist").click(function() {
.appendTo(head); .appendTo(head);
$("<h3/>").text("Playlist URLs").appendTo(head); $("<h3/>").text("Playlist URLs").appendTo(head);
var body = $("<div/>").addClass("modal-body").appendTo(modal); var body = $("<div/>").addClass("modal-body").appendTo(modal);
$("<input/>").attr("type", "text") $("<input/>").addClass("form-control").attr("type", "text")
.val(urls) .val(urls)
.appendTo(body); .appendTo(body);
$("<div/>").addClass("modal-footer").appendTo(modal); $("<div/>").addClass("modal-footer").appendTo(modal);
modal.on("hidden", function() { outer.on("hidden", function() {
modal.remove(); outer.remove();
unhidePlayer(); unhidePlayer();
}); });
modal.modal(); outer.modal();
} };
socket.on("playlist", callback); socket.on("playlist", callback);
socket.emit("requestPlaylist"); socket.emit("requestPlaylist");
}); });
@ -464,6 +421,7 @@ $("#shuffleplaylist").click(function() {
}); });
/* layout stuff */ /* layout stuff */
/*
$(window).resize(function() { $(window).resize(function() {
VWIDTH = $("#videowidth").css("width").replace("px", ""); VWIDTH = $("#videowidth").css("width").replace("px", "");
VHEIGHT = ""+parseInt(parseInt(VWIDTH) * 9 / 16); VHEIGHT = ""+parseInt(parseInt(VWIDTH) * 9 / 16);
@ -474,6 +432,7 @@ $(window).resize(function() {
$("#ytapiplayer").attr("height", VHEIGHT); $("#ytapiplayer").attr("height", VHEIGHT);
} }
}); });
*/
/* load channel */ /* load channel */
@ -482,11 +441,12 @@ var m = loc.match(/\/r\/([a-zA-Z0-9-_]+)$/);
if(m) { if(m) {
CHANNEL.name = m[1]; CHANNEL.name = m[1];
} }
/*
else { else {
var main = $("#main"); var main = $("#main");
var container = $("<div/>").addClass("container").insertBefore(main); var container = $("<div/>").addClass("container").insertBefore(main);
var row = $("<div/>").addClass("row").appendTo(container); var row = $("<div/>").addClass("row").appendTo(container);
var div = $("<div/>").addClass("span6").appendTo(row); var div = $("<div/>").addClass("col-lg-6 col-md-6").appendTo(row);
main.css("display", "none"); main.css("display", "none");
var label = $("<label/>").text("Enter Channel:").appendTo(div); var label = $("<label/>").text("Enter Channel:").appendTo(div);
var entry = $("<input/>").attr("type", "text").appendTo(div); var entry = $("<input/>").attr("type", "text").appendTo(div);
@ -499,6 +459,7 @@ else {
} }
}); });
} }
*/
/* custom footer */ /* custom footer */
$("#sitefooter").load("footer.html"); $("#sitefooter").load("footer.html");

19
www/assets/js/util.js
View File

@ -1964,3 +1964,22 @@ function filterChannelLog() {
$("#chanlog_contents").text(include.join("\n")); $("#chanlog_contents").text(include.join("\n"));
} }
function makeModal() {
var wrap = $("<div/>").addClass("modal fade");
var dialog = $("<div/>").addClass("modal-dialog").appendTo(wrap);
var content = $("<div/>").addClass("modal-content").appendTo(dialog);
var head = $("<div/>").addClass("modal-header").appendTo(content);
$("<button/>").addClass("close")
.attr("data-dismiss", "modal")
.attr("data-hidden", "true")
.html("&times;")
.appendTo(head);
wrap.on("hidden", function () {
unhidePlayer();
wrap.remove();
});
return wrap;
}

2
www/css/cytube.css
View File

@ -402,7 +402,7 @@
.profile-box { .profile-box {
z-index: 9999; z-index: 9999;
position: absolute; position: fixed;
border: 1px solid #aaaaaa; border: 1px solid #aaaaaa;
border-radius: 5px; border-radius: 5px;
background-color: #ffffff; background-color: #ffffff;