mirror of https://github.com/calzoneman/sync.git
Merge pull request #274 from calzoneman/optionsmenu
Redesign user settings menu
This commit is contained in:
Calvin Montgomery
commit
0d3d3b4d7d
|
|
@ -497,198 +497,220 @@ function rebuildPlaylist() {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* menus */
|
/* menus */
|
||||||
|
|
||||||
|
/* user settings menu */
|
||||||
function showOptionsMenu() {
|
function showOptionsMenu() {
|
||||||
hidePlayer();
|
hidePlayer();
|
||||||
var modal = $("<div/>").addClass("modal hide fade")
|
var modal = $("<div/>").addClass("modal hide fade")
|
||||||
.appendTo($("body"));
|
.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) {
|
modal.load("useroptions.html", function () {
|
||||||
|
if (CLIENT.rank < 2) {
|
||||||
|
$("#uopt-btn-mod").remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
var tabHandler = function (btnid, panelid) {
|
||||||
|
$(btnid).click(function () {
|
||||||
|
modal.find(".btn.btn-small").attr("disabled", false);
|
||||||
|
modal.find(".uopt-panel").hide();
|
||||||
|
$(btnid).attr("disabled", true);
|
||||||
|
$(panelid).show();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
tabHandler("#uopt-btn-general", "#uopt-panel-general");
|
||||||
|
tabHandler("#uopt-btn-playback", "#uopt-panel-playback");
|
||||||
|
tabHandler("#uopt-btn-chat", "#uopt-panel-chat");
|
||||||
|
tabHandler("#uopt-btn-mod", "#uopt-panel-mod");
|
||||||
|
|
||||||
|
var initForm = function (id) {
|
||||||
|
var f = $("<form/>").appendTo($(id))
|
||||||
|
.addClass("form-horizontal")
|
||||||
|
.attr("action", "javascript:void(0)");
|
||||||
|
return $("<fieldset/>").appendTo(f);
|
||||||
|
};
|
||||||
|
|
||||||
|
var addOption = function (form, lbl, thing) {
|
||||||
var g = $("<div/>").addClass("control-group").appendTo(form);
|
var g = $("<div/>").addClass("control-group").appendTo(form);
|
||||||
$("<label/>").addClass("control-label").text(lbl).appendTo(g);
|
$("<label/>").addClass("control-label").text(lbl).appendTo(g);
|
||||||
var c = $("<div/>").addClass("controls").appendTo(g);
|
var c = $("<div/>").addClass("controls").appendTo(g);
|
||||||
thing.appendTo(c);
|
thing.appendTo(c);
|
||||||
}
|
};
|
||||||
|
|
||||||
var themeselect = $("<select/>");
|
var addCheckbox = function (form, opt, lbl) {
|
||||||
$("<option/>").attr("value", "default").text("Default").appendTo(themeselect);
|
var c = $("<label/>").addClass("checkbox")
|
||||||
$("<option/>").attr("value", "assets/css/darkstrap.css").text("Dark").appendTo(themeselect);
|
.text(lbl);
|
||||||
$("<option/>").attr("value", "assets/css/semidark.css").text("Semidark").appendTo(themeselect);
|
var box = $("<input/>").attr("type", "checkbox")
|
||||||
themeselect.val(USEROPTS.theme);
|
.appendTo(c);
|
||||||
addOption("Theme", themeselect);
|
addOption(form, opt, c);
|
||||||
|
return box;
|
||||||
|
};
|
||||||
|
|
||||||
var usercss = $("<input/>").attr("type", "text")
|
// general options
|
||||||
|
var general = initForm("#uopt-panel-general");
|
||||||
|
|
||||||
|
var gen_theme = $("<select/>");
|
||||||
|
$("<option/>").attr("value", "default")
|
||||||
|
.text("Default")
|
||||||
|
.appendTo(gen_theme);
|
||||||
|
$("<option/>").attr("value", "assets/css/darkstrap.css")
|
||||||
|
.text("Dark")
|
||||||
|
.appendTo(gen_theme);
|
||||||
|
gen_theme.val(USEROPTS.theme);
|
||||||
|
addOption(general, "Theme", gen_theme);
|
||||||
|
|
||||||
|
var gen_layout = $("<select/>");
|
||||||
|
$("<option/>").attr("value", "default")
|
||||||
|
.text("Compact")
|
||||||
|
.appendTo(gen_layout);
|
||||||
|
$("<option/>").attr("value", "synchtube")
|
||||||
|
.text("Synchtube")
|
||||||
|
.appendTo(gen_layout);
|
||||||
|
$("<option/>").attr("value", "fluid")
|
||||||
|
.text("Fluid")
|
||||||
|
.appendTo(gen_layout);
|
||||||
|
gen_layout.val(USEROPTS.layout);
|
||||||
|
addOption(general, "Layout", gen_layout);
|
||||||
|
|
||||||
|
var gen_layoutwarn = $("<p/>").addClass("text-error")
|
||||||
|
.text("Changing layouts may require a refresh");
|
||||||
|
addOption(general, "", gen_layoutwarn);
|
||||||
|
|
||||||
|
var gen_css = $("<input/>").attr("type", "text")
|
||||||
.attr("placeholder", "Stylesheet URL");
|
.attr("placeholder", "Stylesheet URL");
|
||||||
usercss.val(USEROPTS.css);
|
gen_css.val(USEROPTS.css);
|
||||||
addOption("User CSS", usercss);
|
addOption(general, "User CSS", gen_css);
|
||||||
|
|
||||||
var layoutselect = $("<select/>");
|
var gen_nocss = addCheckbox(general, "Channel CSS",
|
||||||
$("<option/>").attr("value", "default").text("Compact")
|
"Ignore channel CSS");
|
||||||
.appendTo(layoutselect);
|
gen_nocss.prop("checked", USEROPTS.ignore_channelcss);
|
||||||
$("<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")
|
var gen_nojs = addCheckbox(general, "Channel JS",
|
||||||
.text("Hide playlist buttons by default");
|
"Ignore channel JS");
|
||||||
var hqbtn = $("<input/>").attr("type", "checkbox").appendTo(hqbtncontainer);
|
gen_nojs.prop("checked", USEROPTS.ignore_channeljs);
|
||||||
hqbtn.prop("checked", USEROPTS.qbtn_hide);
|
|
||||||
addOption("Playlist Buttons", hqbtncontainer);
|
|
||||||
|
|
||||||
var oqbtncontainer = $("<label/>").addClass("checkbox")
|
var gen_altsocket = addCheckbox(general, "Alternate Socket",
|
||||||
.text("Old style playlist buttons");
|
"Use alternate socket connection");
|
||||||
var oqbtn = $("<input/>").attr("type", "checkbox").appendTo(oqbtncontainer);
|
gen_altsocket.prop("checked", USEROPTS.altsocket);
|
||||||
oqbtn.prop("checked", USEROPTS.qbtn_idontlikechange);
|
|
||||||
addOption("Playlist Buttons (Old)", oqbtncontainer);
|
|
||||||
|
|
||||||
var synchcontainer = $("<label/>").addClass("checkbox")
|
var gen_altsocketinfo = $("<p/>")
|
||||||
.text("Synchronize Media");
|
.addClass("text-error")
|
||||||
var synch = $("<input/>").attr("type", "checkbox").appendTo(synchcontainer);
|
.text("Alternate socket requires a refresh after changing. "+
|
||||||
synch.prop("checked", USEROPTS.synch);
|
"It should only be used if the default (unchecked) "+
|
||||||
addOption("Synch", synchcontainer);
|
"does not work.");
|
||||||
|
addOption(general, "", gen_altsocketinfo);
|
||||||
|
|
||||||
var syncacc = $("<input/>").attr("type", "text")
|
// playback options
|
||||||
.attr("placeholder", "Seconds");
|
var playback = initForm("#uopt-panel-playback");
|
||||||
syncacc.val(USEROPTS.sync_accuracy);
|
|
||||||
addOption("Synch Accuracy", syncacc);
|
|
||||||
|
|
||||||
var wmcontainer = $("<label/>").addClass("checkbox")
|
var pl_synch = addCheckbox(playback, "Synchronize",
|
||||||
.text("Allow transparency over video");
|
"Synchronize media playback");
|
||||||
var wmodetrans = $("<input/>").attr("type", "checkbox")
|
pl_synch.prop("checked", USEROPTS.synch);
|
||||||
.appendTo(wmcontainer);
|
|
||||||
wmodetrans.prop("checked", USEROPTS.wmode_transparent);
|
|
||||||
addOption("Transparent wmode", wmcontainer);
|
|
||||||
|
|
||||||
var vidcontainer = $("<label/>").addClass("checkbox")
|
var pl_synchacc = $("<input/>").attr("type", "text")
|
||||||
.text("Hide Video");
|
.attr("placeholder", "Accuracy in seconds");
|
||||||
var hidevid = $("<input/>").attr("type", "checkbox").appendTo(vidcontainer);
|
pl_synchacc.val(USEROPTS.sync_accuracy);
|
||||||
hidevid.prop("checked", USEROPTS.hidevid);
|
addOption(playback, "Synch Accuracy (seconds)", pl_synchacc);
|
||||||
addOption("Hide Video", vidcontainer);
|
|
||||||
$("<hr>").appendTo(form);
|
|
||||||
|
|
||||||
var tscontainer = $("<label/>").addClass("checkbox")
|
var pl_wmode = addCheckbox(playback, "Transparent wmode",
|
||||||
.text("Show timestamps in chat");
|
"Allow transparency over video player");
|
||||||
var showts = $("<input/>").attr("type", "checkbox").appendTo(tscontainer);
|
pl_wmode.prop("checked", USEROPTS.wmode_transparent);
|
||||||
showts.prop("checked", USEROPTS.show_timestamps);
|
|
||||||
addOption("Show timestamps", tscontainer);
|
|
||||||
|
|
||||||
var srcontainer = $("<label/>").addClass("checkbox")
|
var pl_wmodewarn = $("<p/>").addClass("text-error")
|
||||||
.text("Sort userlist by rank");
|
.text("Enabling transparent wmode may cause performance "+
|
||||||
var sr = $("<input/>").attr("type", "checkbox").appendTo(srcontainer);
|
"issues on some systems");
|
||||||
sr.prop("checked", USEROPTS.sort_rank);
|
addOption(playback, "", pl_wmodewarn);
|
||||||
addOption("Userlist sort", srcontainer);
|
|
||||||
|
|
||||||
var sacontainer = $("<label/>").addClass("checkbox")
|
var pl_hide = addCheckbox(playback, "Hide Video",
|
||||||
.text("AFKers at bottom of userlist");
|
"Remove the video player");
|
||||||
var sa = $("<input/>").attr("type", "checkbox").appendTo(sacontainer);
|
pl_hide.prop("checked", USEROPTS.hidevid);
|
||||||
sa.prop("checked", USEROPTS.sort_afk);
|
|
||||||
addOption("Userlist sort", sacontainer);
|
|
||||||
|
|
||||||
var blinkcontainer = $("<label/>").addClass("checkbox")
|
var pl_hidebtn = addCheckbox(playback, "Playlist Buttons",
|
||||||
.text("Flash title on every incoming message");
|
"Hide playlist buttons by default");
|
||||||
var blink = $("<input/>").attr("type", "checkbox").appendTo(blinkcontainer);
|
pl_hidebtn.prop("checked", USEROPTS.qbtn_hide);
|
||||||
blink.prop("checked", USEROPTS.blink_title);
|
|
||||||
addOption("Chat Notice", blinkcontainer);
|
|
||||||
|
|
||||||
var boopcontainer = $("<label/>").addClass("checkbox")
|
var pl_oldbtn = addCheckbox(playback, "Playlist Buttons (old)",
|
||||||
.text("Play a sound in addition to flashing the title");
|
"Old style playlist buttons");
|
||||||
var boop = $("<input/>").attr("type", "checkbox").appendTo(boopcontainer);
|
pl_oldbtn.prop("checked", USEROPTS.qbtn_idontlikechange);
|
||||||
boop.prop("checked", USEROPTS.boop);
|
|
||||||
addOption("Chat Sound", boopcontainer);
|
|
||||||
|
|
||||||
var sendbtncontainer = $("<label/>").addClass("checkbox")
|
// chat options
|
||||||
.text("Add a send button to the chatbox");
|
var chat = initForm("#uopt-panel-chat");
|
||||||
var sendbtn = $("<input/>").attr("type", "checkbox").appendTo(sendbtncontainer);
|
|
||||||
sendbtn.prop("checked", USEROPTS.chatbtn);
|
|
||||||
addOption("Send Button", sendbtncontainer);
|
|
||||||
|
|
||||||
var altsocketcontainer = $("<label/>").addClass("checkbox")
|
var chat_time = addCheckbox(chat, "Timestamps",
|
||||||
.text("Use alternative socket connection (requires refresh)");
|
"Show timestamps in chat");
|
||||||
var altsocket = $("<input/>").attr("type", "checkbox")
|
chat_time.prop("checked", USEROPTS.show_timestamps);
|
||||||
.appendTo(altsocketcontainer);
|
|
||||||
altsocket.prop("checked", USEROPTS.altsocket);
|
|
||||||
addOption("Alternate Socket", altsocketcontainer);
|
|
||||||
|
|
||||||
if(CLIENT.rank >= Rank.Moderator) {
|
var chat_sort_rank = addCheckbox(chat, "Userlist sort",
|
||||||
$("<hr>").appendTo(form);
|
"Sort userlist by rank");
|
||||||
var modhatcontainer = $("<label/>").addClass("checkbox")
|
chat_sort_rank.prop("checked", USEROPTS.sort_rank);
|
||||||
.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")
|
var chat_sort_afk = addCheckbox(chat, "Userlist sort",
|
||||||
.text("Show join messages");
|
"Sort AFKers to bottom");
|
||||||
var join = $("<input/>").attr("type", "checkbox").appendTo(joincontainer);
|
chat_sort_afk.prop("checked", USEROPTS.sort_afk);
|
||||||
join.prop("checked", USEROPTS.joinmessage);
|
|
||||||
addOption("Join Messages", joincontainer);
|
|
||||||
}
|
|
||||||
|
|
||||||
var footer = $("<div/>").addClass("modal-footer").appendTo(modal);
|
var chat_all = addCheckbox(chat, "Chat Notice",
|
||||||
var submit = $("<button/>").addClass("btn btn-primary pull-right")
|
"Notify on all messages");
|
||||||
.text("Save")
|
chat_all.prop("checked", USEROPTS.blink_title);
|
||||||
.appendTo(footer);
|
|
||||||
|
|
||||||
submit.click(function() {
|
var chat_allinfo = $("<p/>")
|
||||||
USEROPTS.theme = themeselect.val();
|
.text("When disabled, you will only be notified if your "+
|
||||||
USEROPTS.css = usercss.val();
|
"name is mentioned");
|
||||||
USEROPTS.layout = layoutselect.val();
|
addOption(chat, "", chat_allinfo);
|
||||||
USEROPTS.synch = synch.prop("checked");
|
|
||||||
USEROPTS.sync_accuracy = parseFloat(syncacc.val()) || 2;
|
var chat_boop = addCheckbox(chat, "Chat Sound",
|
||||||
USEROPTS.wmode_transparent = wmodetrans.prop("checked");
|
"Play a sound for notifications");
|
||||||
USEROPTS.hidevid = hidevid.prop("checked");
|
chat_boop.prop("checked", USEROPTS.boop);
|
||||||
USEROPTS.show_timestamps = showts.prop("checked");
|
|
||||||
USEROPTS.blink_title = blink.prop("checked");
|
var chat_sendbtn = addCheckbox(chat, "Send Button",
|
||||||
USEROPTS.chatbtn = sendbtn.prop("checked");
|
"Add a send button to chat");
|
||||||
USEROPTS.altsocket = altsocket.prop("checked");
|
chat_sendbtn.prop("checked", USEROPTS.chatbtn);
|
||||||
USEROPTS.qbtn_hide = hqbtn.prop("checked");
|
|
||||||
USEROPTS.qbtn_idontlikechange = oqbtn.prop("checked");
|
// mod options
|
||||||
USEROPTS.ignore_channelcss = nocss.prop("checked");
|
var mod = initForm("#uopt-panel-mod");
|
||||||
USEROPTS.ignore_channeljs = nojs.prop("checked");
|
|
||||||
USEROPTS.sort_rank = sr.prop("checked");
|
var mod_flair = addCheckbox(mod, "Modflair", "Show name color");
|
||||||
USEROPTS.sort_afk = sa.prop("checked");
|
mod_flair.prop("checked", USEROPTS.modhat);
|
||||||
USEROPTS.boop = boop.prop("checked");
|
|
||||||
sortUserlist();
|
var mod_joinmsg = addCheckbox(mod, "Join Messages",
|
||||||
if(CLIENT.rank >= Rank.Moderator) {
|
"Show join messages");
|
||||||
USEROPTS.modhat = modhat.prop("checked");
|
mod_joinmsg.prop("checked", USEROPTS.joinmessage);
|
||||||
USEROPTS.joinmessage = join.prop("checked");
|
|
||||||
|
|
||||||
|
$("#uopt-btn-general").click();
|
||||||
|
$("#uopt-btn-save").click(function () {
|
||||||
|
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();
|
saveOpts();
|
||||||
modal.modal("hide");
|
modal.modal("hide");
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
modal.on("hidden", function () {
|
modal.on("hidden", function () {
|
||||||
unhidePlayer();
|
unhidePlayer();
|
||||||
applyOpts();
|
applyOpts();
|
||||||
modal.remove();
|
modal.remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
modal.modal();
|
modal.modal();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<div class="modal-header">
|
||||||
|
<button class="close" data-dismiss="modal" aria-hidden="true">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
<h3>User Options</h3>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-small" id="uopt-btn-general">General</button>
|
||||||
|
<button class="btn btn-small" id="uopt-btn-playback">Playback</button>
|
||||||
|
<button class="btn btn-small" id="uopt-btn-chat">Chat</button>
|
||||||
|
<button class="btn btn-small" id="uopt-btn-mod">Moderator</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="uopt-panel" id="uopt-panel-general">
|
||||||
|
<h4>General Options</h4>
|
||||||
|
</div>
|
||||||
|
<div class="uopt-panel" id="uopt-panel-playback">
|
||||||
|
<h4>Playback Options</h4>
|
||||||
|
</div>
|
||||||
|
<div class="uopt-panel" id="uopt-panel-chat">
|
||||||
|
<h4>Chat Options</h4>
|
||||||
|
</div>
|
||||||
|
<div class="uopt-panel" id="uopt-panel-mod">
|
||||||
|
<h4>Moderator Options</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-primary pull-right" id="uopt-btn-save">Save</button>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue