Finish refactoring options menu
This commit is contained in:
calzoneman
parent
7ae76bbe31
commit
3b5f6c64ef
|
|
@ -497,7 +497,9 @@ function rebuildPlaylist() {
|
|||
}
|
||||
|
||||
/* menus */
|
||||
function showOpts() {
|
||||
|
||||
/* user settings menu */
|
||||
function showOptionsMenu() {
|
||||
hidePlayer();
|
||||
var modal = $("<div/>").addClass("modal hide fade")
|
||||
.appendTo($("body"));
|
||||
|
|
@ -676,209 +678,39 @@ function showOpts() {
|
|||
|
||||
$("#uopt-btn-general").click();
|
||||
$("#uopt-btn-save").click(function () {
|
||||
});
|
||||
});
|
||||
|
||||
modal.on("hidden", function () {
|
||||
unhidePlayer();
|
||||
modal.remove();
|
||||
});
|
||||
|
||||
modal.modal();
|
||||
}
|
||||
|
||||
function showOptionsMenu() {
|
||||
hidePlayer();
|
||||
var modal = $("<div/>").addClass("modal hide fade")
|
||||
.appendTo($("body"));
|
||||
var head = $("<div/>").addClass("modal-header")
|
||||
.appendTo(modal);
|
||||
$("<button/>").addClass("close")
|
||||
.attr("data-dismiss", "modal")
|
||||
.attr("aria-hidden", "true")
|
||||
.appendTo(head)[0].innerHTML = "×";
|
||||
$("<h3/>").text("User Options").appendTo(head);
|
||||
var body = $("<div/>").addClass("modal-body").appendTo(modal);
|
||||
var form = $("<form/>").addClass("form-horizontal")
|
||||
.appendTo(body);
|
||||
|
||||
function addOption(lbl, thing) {
|
||||
var g = $("<div/>").addClass("control-group").appendTo(form);
|
||||
$("<label/>").addClass("control-label").text(lbl).appendTo(g);
|
||||
var c = $("<div/>").addClass("controls").appendTo(g);
|
||||
thing.appendTo(c);
|
||||
}
|
||||
|
||||
var themeselect = $("<select/>");
|
||||
$("<option/>").attr("value", "default").text("Default").appendTo(themeselect);
|
||||
$("<option/>").attr("value", "assets/css/darkstrap.css").text("Dark").appendTo(themeselect);
|
||||
$("<option/>").attr("value", "assets/css/semidark.css").text("Semidark").appendTo(themeselect);
|
||||
themeselect.val(USEROPTS.theme);
|
||||
addOption("Theme", themeselect);
|
||||
|
||||
var usercss = $("<input/>").attr("type", "text")
|
||||
.attr("placeholder", "Stylesheet URL");
|
||||
usercss.val(USEROPTS.css);
|
||||
addOption("User CSS", usercss);
|
||||
|
||||
var layoutselect = $("<select/>");
|
||||
$("<option/>").attr("value", "default").text("Compact")
|
||||
.appendTo(layoutselect);
|
||||
$("<option/>").attr("value", "synchtube").text("Synchtube")
|
||||
.appendTo(layoutselect);
|
||||
$("<option/>").attr("value", "fluid").text("Fluid")
|
||||
.appendTo(layoutselect);
|
||||
layoutselect.val(USEROPTS.layout);
|
||||
addOption("Layout", layoutselect);
|
||||
var warn = $("<p/>").addClass("text-error")
|
||||
.text("Changing layouts may require a refresh")
|
||||
addOption("", warn);
|
||||
$("<hr>").appendTo(form);
|
||||
var nocsscontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Ignore channel CSS");
|
||||
var nocss = $("<input/>").attr("type", "checkbox").appendTo(nocsscontainer);
|
||||
nocss.prop("checked", USEROPTS.ignore_channelcss);
|
||||
addOption("Channel CSS", nocsscontainer);
|
||||
var nojscontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Ignore channel JS");
|
||||
var nojs = $("<input/>").attr("type", "checkbox").appendTo(nojscontainer);
|
||||
nojs.prop("checked", USEROPTS.ignore_channeljs);
|
||||
addOption("Channel JS", nojscontainer);
|
||||
$("<hr>").appendTo(form);
|
||||
|
||||
var hqbtncontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Hide playlist buttons by default");
|
||||
var hqbtn = $("<input/>").attr("type", "checkbox").appendTo(hqbtncontainer);
|
||||
hqbtn.prop("checked", USEROPTS.qbtn_hide);
|
||||
addOption("Playlist Buttons", hqbtncontainer);
|
||||
|
||||
var oqbtncontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Old style playlist buttons");
|
||||
var oqbtn = $("<input/>").attr("type", "checkbox").appendTo(oqbtncontainer);
|
||||
oqbtn.prop("checked", USEROPTS.qbtn_idontlikechange);
|
||||
addOption("Playlist Buttons (Old)", oqbtncontainer);
|
||||
|
||||
var synchcontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Synchronize Media");
|
||||
var synch = $("<input/>").attr("type", "checkbox").appendTo(synchcontainer);
|
||||
synch.prop("checked", USEROPTS.synch);
|
||||
addOption("Synch", synchcontainer);
|
||||
|
||||
var syncacc = $("<input/>").attr("type", "text")
|
||||
.attr("placeholder", "Seconds");
|
||||
syncacc.val(USEROPTS.sync_accuracy);
|
||||
addOption("Synch Accuracy", syncacc);
|
||||
|
||||
var wmcontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Allow transparency over video");
|
||||
var wmodetrans = $("<input/>").attr("type", "checkbox")
|
||||
.appendTo(wmcontainer);
|
||||
wmodetrans.prop("checked", USEROPTS.wmode_transparent);
|
||||
addOption("Transparent wmode", wmcontainer);
|
||||
|
||||
var vidcontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Hide Video");
|
||||
var hidevid = $("<input/>").attr("type", "checkbox").appendTo(vidcontainer);
|
||||
hidevid.prop("checked", USEROPTS.hidevid);
|
||||
addOption("Hide Video", vidcontainer);
|
||||
$("<hr>").appendTo(form);
|
||||
|
||||
var tscontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Show timestamps in chat");
|
||||
var showts = $("<input/>").attr("type", "checkbox").appendTo(tscontainer);
|
||||
showts.prop("checked", USEROPTS.show_timestamps);
|
||||
addOption("Show timestamps", tscontainer);
|
||||
|
||||
var srcontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Sort userlist by rank");
|
||||
var sr = $("<input/>").attr("type", "checkbox").appendTo(srcontainer);
|
||||
sr.prop("checked", USEROPTS.sort_rank);
|
||||
addOption("Userlist sort", srcontainer);
|
||||
|
||||
var sacontainer = $("<label/>").addClass("checkbox")
|
||||
.text("AFKers at bottom of userlist");
|
||||
var sa = $("<input/>").attr("type", "checkbox").appendTo(sacontainer);
|
||||
sa.prop("checked", USEROPTS.sort_afk);
|
||||
addOption("Userlist sort", sacontainer);
|
||||
|
||||
var blinkcontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Flash title on every incoming message");
|
||||
var blink = $("<input/>").attr("type", "checkbox").appendTo(blinkcontainer);
|
||||
blink.prop("checked", USEROPTS.blink_title);
|
||||
addOption("Chat Notice", blinkcontainer);
|
||||
|
||||
var boopcontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Play a sound in addition to flashing the title");
|
||||
var boop = $("<input/>").attr("type", "checkbox").appendTo(boopcontainer);
|
||||
boop.prop("checked", USEROPTS.boop);
|
||||
addOption("Chat Sound", boopcontainer);
|
||||
|
||||
var sendbtncontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Add a send button to the chatbox");
|
||||
var sendbtn = $("<input/>").attr("type", "checkbox").appendTo(sendbtncontainer);
|
||||
sendbtn.prop("checked", USEROPTS.chatbtn);
|
||||
addOption("Send Button", sendbtncontainer);
|
||||
|
||||
var altsocketcontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Use alternative socket connection (requires refresh)");
|
||||
var altsocket = $("<input/>").attr("type", "checkbox")
|
||||
.appendTo(altsocketcontainer);
|
||||
altsocket.prop("checked", USEROPTS.altsocket);
|
||||
addOption("Alternate Socket", altsocketcontainer);
|
||||
|
||||
if(CLIENT.rank >= Rank.Moderator) {
|
||||
$("<hr>").appendTo(form);
|
||||
var modhatcontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Show name color");
|
||||
var modhat = $("<input/>").attr("type", "checkbox").appendTo(modhatcontainer);
|
||||
modhat.prop("checked", USEROPTS.modhat);
|
||||
addOption("Modflair", modhatcontainer);
|
||||
|
||||
var joincontainer = $("<label/>").addClass("checkbox")
|
||||
.text("Show join messages");
|
||||
var join = $("<input/>").attr("type", "checkbox").appendTo(joincontainer);
|
||||
join.prop("checked", USEROPTS.joinmessage);
|
||||
addOption("Join Messages", joincontainer);
|
||||
}
|
||||
|
||||
var footer = $("<div/>").addClass("modal-footer").appendTo(modal);
|
||||
var submit = $("<button/>").addClass("btn btn-primary pull-right")
|
||||
.text("Save")
|
||||
.appendTo(footer);
|
||||
|
||||
submit.click(function() {
|
||||
USEROPTS.theme = themeselect.val();
|
||||
USEROPTS.css = usercss.val();
|
||||
USEROPTS.layout = layoutselect.val();
|
||||
USEROPTS.synch = synch.prop("checked");
|
||||
USEROPTS.sync_accuracy = parseFloat(syncacc.val()) || 2;
|
||||
USEROPTS.wmode_transparent = wmodetrans.prop("checked");
|
||||
USEROPTS.hidevid = hidevid.prop("checked");
|
||||
USEROPTS.show_timestamps = showts.prop("checked");
|
||||
USEROPTS.blink_title = blink.prop("checked");
|
||||
USEROPTS.chatbtn = sendbtn.prop("checked");
|
||||
USEROPTS.altsocket = altsocket.prop("checked");
|
||||
USEROPTS.qbtn_hide = hqbtn.prop("checked");
|
||||
USEROPTS.qbtn_idontlikechange = oqbtn.prop("checked");
|
||||
USEROPTS.ignore_channelcss = nocss.prop("checked");
|
||||
USEROPTS.ignore_channeljs = nojs.prop("checked");
|
||||
USEROPTS.sort_rank = sr.prop("checked");
|
||||
USEROPTS.sort_afk = sa.prop("checked");
|
||||
USEROPTS.boop = boop.prop("checked");
|
||||
sortUserlist();
|
||||
if(CLIENT.rank >= Rank.Moderator) {
|
||||
USEROPTS.modhat = modhat.prop("checked");
|
||||
USEROPTS.joinmessage = join.prop("checked");
|
||||
USEROPTS.theme = gen_theme.val();
|
||||
USEROPTS.layout = gen_layout.val();
|
||||
USEROPTS.css = gen_css.val();
|
||||
USEROPTS.ignore_channelcss = gen_nocss.prop("checked");
|
||||
USEROPTS.ignore_channeljs = gen_nojs.prop("checked");
|
||||
USEROPTS.altsocket = gen_altsocket.prop("checked");
|
||||
USEROPTS.synch = pl_synch.prop("checked");
|
||||
USEROPTS.sync_accuracy = parseFloat(pl_synchacc.val())||2;
|
||||
USEROPTS.wmode_transparent = pl_wmode.prop("checked");
|
||||
USEROPTS.hidevid = pl_hide.prop("checked");
|
||||
USEROPTS.qbtn_hide = pl_hidebtn.prop("checked");
|
||||
USEROPTS.qbtn_idontlikechange = pl_oldbtn.prop("checked");
|
||||
USEROPTS.show_timestamps = chat_time.prop("checked");
|
||||
USEROPTS.sort_rank = chat_sort_rank.prop("checked");
|
||||
USEROPTS.sort_afk = chat_sort_afk.prop("checked");
|
||||
USEROPTS.blink_title = chat_all.prop("checked");
|
||||
USEROPTS.boop = chat_boop.prop("checked");
|
||||
USEROPTS.chatbtn = chat_sendbtn.prop("checked");
|
||||
if (CLIENT.rank >= 2) {
|
||||
USEROPTS.modhat = mod_flair.prop("checked");
|
||||
USEROPTS.joinmessage = mod_joinmsg.prop("checked");
|
||||
}
|
||||
saveOpts();
|
||||
modal.modal("hide");
|
||||
});
|
||||
});
|
||||
|
||||
modal.on("hidden", function () {
|
||||
unhidePlayer();
|
||||
applyOpts();
|
||||
modal.remove();
|
||||
});
|
||||
|
||||
modal.modal();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue