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

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

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

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

@ -1964,3 +1964,22 @@ function filterChannelLog() {
$("#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 {
z-index: 9999;
position: absolute;
position: fixed;
border: 1px solid #aaaaaa;
border-radius: 5px;
background-color: #ffffff;