@@ -218,7 +218,8 @@ function setupVideosIn(element) { | |||
onready(function(){ | |||
// Insert menu from settings.js | |||
if (typeof settingsMenu != "undefined") document.body.insertBefore(settingsMenu, document.getElementsByTagName("hr")[0]); | |||
if (typeof settingsMenu != "undefined" && typeof Options == "undefined") | |||
document.body.insertBefore(settingsMenu, document.getElementsByTagName("hr")[0]); | |||
// Setup Javascript events for videos in document now | |||
setupVideosIn(document); | |||
@@ -0,0 +1,126 @@ | |||
/* | |||
* options.js - allow users choose board options as they wish | |||
* | |||
* Copyright (c) 2014 Marcin Łabanowski <marcin@6irc.net> | |||
* | |||
* Usage: | |||
* $config['additional_javascript'][] = 'js/jquery.min.js'; | |||
* $config['additional_javascript'][] = 'js/options.js'; | |||
*/ | |||
+function(){ | |||
var options_button, options_handler, options_background, options_div | |||
, options_close, options_tablist, options_tabs, options_current_tab; | |||
var Options = {}; | |||
window.Options = Options; | |||
var first_tab = function() { | |||
for (var i in options_tabs) { | |||
return i; | |||
} | |||
return false; | |||
}; | |||
Options.show = function() { | |||
if (!options_current_tab) { | |||
Options.select_tab(first_tab(), true); | |||
} | |||
options_handler.fadeIn(); | |||
}; | |||
Options.hide = function() { | |||
options_handler.fadeOut(); | |||
}; | |||
options_tabs = {}; | |||
Options.add_tab = function(id, icon, name, content) { | |||
var tab = {}; | |||
if (typeof content == "string") { | |||
content = $("<div>"+content+"</div>"); | |||
} | |||
tab.id = id; | |||
tab.name = name; | |||
tab.icon = $("<div class='options_tab_icon'><i class='fa fa-"+icon+"'></i><div>"+name+"</div></div>"); | |||
tab.content = $("<div class='options_tab'></div>").css("display", "none"); | |||
tab.content.appendTo(options_div); | |||
tab.icon.on("click", function() { | |||
Options.select_tab(id); | |||
}).appendTo(options_tablist); | |||
$("<h2>"+name+"</h2>").appendTo(tab.content); | |||
if (content) { | |||
content.appendTo(tab.content); | |||
} | |||
options_tabs[id] = tab; | |||
return tab; | |||
}; | |||
Options.get_tab = function(id) { | |||
return options_tabs[id]; | |||
}; | |||
Options.extend_tab = function(id, content) { | |||
if (typeof content == "string") { | |||
content = $("<div>"+content+"</div>"); | |||
} | |||
content.appendTo(options_tabs[id].content); | |||
return options_tabs[id]; | |||
}; | |||
Options.select_tab = function(id, quick) { | |||
if (options_current_tab) { | |||
if (options_current_tab.id == id) { | |||
return false; | |||
} | |||
options_current_tab.content.fadeOut(); | |||
options_current_tab.icon.removeClass("active"); | |||
} | |||
var tab = options_tabs[id]; | |||
options_current_tab = tab; | |||
options_current_tab.icon.addClass("active"); | |||
tab.content[quick? "show" : "fadeIn"](); | |||
return tab; | |||
}; | |||
options_handler = $("<div id='options_handler'></div>").css("display", "none"); | |||
options_background = $("<div id='options_background'></div>").on("click", Options.hide).appendTo(options_handler); | |||
options_div = $("<div id='options_div'></div>").appendTo(options_handler); | |||
options_close = $("<a id='options_close' href='javascript:void(0)'><i class='fa fa-times'></i></div>") | |||
.on("click", Options.hide).appendTo(options_div); | |||
options_tablist = $("<div id='options_tablist'></div>").appendTo(options_div); | |||
$(function(){ | |||
options_button = $("<a href='javascript:void(0)' title='"+_("Options")+"'>["+_("Options")+"]</a>").css("float", "right"); | |||
if ($(".boardlist.compact-boardlist").length) { | |||
options_button.addClass("cb-item cb-fa").html("<i class='fa fa-gear'></i>"); | |||
} | |||
if ($(".boardlist:first").length) { | |||
options_button.appendTo($(".boardlist:first")); | |||
} | |||
else { | |||
options_button.prependTo($(document.body)); | |||
} | |||
options_button.on("click", Options.show); | |||
options_handler.appendTo($(document.body)); | |||
}); | |||
}(); |
@@ -0,0 +1,44 @@ | |||
/* | |||
* options/general.js - general settings tab for options panel | |||
* | |||
* Copyright (c) 2014 Marcin Łabanowski <marcin@6irc.net> | |||
* | |||
* Usage: | |||
* $config['additional_javascript'][] = 'js/jquery.min.js'; | |||
* $config['additional_javascript'][] = 'js/options.js'; | |||
* $config['additional_javascript'][] = 'js/style-select.js'; | |||
* $config['additional_javascript'][] = 'js/options/general.js'; | |||
*/ | |||
+function(){ | |||
var tab = Options.add_tab("general", "home", _("General")); | |||
$(function(){ | |||
var stor = $("<div>"+_("Storage: ")+"</div>"); | |||
stor.appendTo(tab.content); | |||
$("<button>"+_("Export")+"</button>").appendTo(stor).on("click", function() { | |||
var str = JSON.stringify(localStorage); | |||
$(".output").remove(); | |||
$("<input type='text' class='output'>").appendTo(stor).val(str); | |||
}); | |||
$("<button>"+_("Import")+"</button>").appendTo(stor).on("click", function() { | |||
var str = prompt(_("Paste your storage data")); | |||
if (!str) return false; | |||
var obj = JSON.parse(str); | |||
if (!obj) return false; | |||
localStorage.clear(); | |||
for (var i in obj) { | |||
localStorage[i] = obj[i]; | |||
} | |||
document.location.reload(); | |||
}); | |||
$("#style-select").detach().css({float:"none","margin-bottom":0}).appendTo(tab.content); | |||
}); | |||
}(); |
@@ -36,15 +36,25 @@ function changeSetting(name, value) { | |||
// Create settings menu | |||
var settingsMenu = document.createElement("div"); | |||
settingsMenu.style.textAlign = "right"; | |||
settingsMenu.style.background = "inherit"; | |||
var prefix = "", suffix = "", style = ""; | |||
if (window.Options) { | |||
var tab = Options.add_tab("webm", "video-camera", _("WebM")); | |||
$(settingsMenu).appendTo(tab.content); | |||
} | |||
else { | |||
prefix = '<a class="unimportant" href="javascript:void(0)">'+_('WebM Settings')+'</a>'; | |||
settingsMenu.style.textAlign = "right"; | |||
settingsMenu.style.background = "inherit"; | |||
suffix = '</div>'; | |||
style = 'display: none; text-align: left; position: absolute; right: 1em; margin-left: -999em; margin-top: -1px; padding-top: 1px; background: inherit;'; | |||
} | |||
settingsMenu.innerHTML = '<a class="unimportant" href="javascript:void(0)">'+_('WebM Settings')+'</a>' | |||
+ '<div style="display: none; text-align: left; position: absolute; right: 1em; margin-left: -999em; margin-top: -1px; padding-top: 1px; background: inherit;">' | |||
settingsMenu.innerHTML = prefix | |||
+ '<div style="'+style+'">' | |||
+ '<label><input type="checkbox" name="videoexpand">'+_('Expand videos inline')+'</label><br>' | |||
+ '<label><input type="checkbox" name="videohover">'+_('Play videos on hover')+'</label><br>' | |||
+ '<label><input type="range" name="videovolume" min="0" max="1" step="0.01" style="width: 4em; height: 1ex; vertical-align: middle; margin: 0px;">'+_('Default volume')+'</label><br>' | |||
+ '</div>'; | |||
+ suffix; | |||
function refreshSettings() { | |||
var settingsItems = settingsMenu.getElementsByTagName("input"); | |||
@@ -74,7 +84,7 @@ for (var i = 0; i < settingsItems.length; i++) { | |||
setupControl(settingsItems[i]); | |||
} | |||
if (settingsMenu.addEventListener) { | |||
if (settingsMenu.addEventListener && !window.Options) { | |||
settingsMenu.addEventListener("mouseover", function(e) { | |||
refreshSettings(); | |||
settingsMenu.getElementsByTagName("a")[0].style.fontWeight = "bold"; | |||
@@ -636,3 +636,76 @@ form.ban-appeal textarea { | |||
.new-threads { | |||
text-align: center; | |||
} | |||
/* options.js */ | |||
#options_handler { | |||
position: fixed; | |||
top: 0px; left: 0px; right: 0px; bottom: 0px; | |||
width: 100%; height: 100%; | |||
text-align: center; | |||
z-index: 9900; | |||
} | |||
#options_background { | |||
background: black; | |||
opacity: 0.5; | |||
position: absolute; | |||
top: 0px; left: 0px; right: 0px; bottom: 0px; | |||
width: 100%; height: 100%; | |||
z-index: -1; | |||
} | |||
#options_div { | |||
background-color: #d6daf0; | |||
border: 1px solid black; | |||
display: inline-block; | |||
position: relative; | |||
margin-top: 20px; | |||
width: 600px; | |||
height: 300px; | |||
} | |||
#options_close { | |||
top: 0px; right: 0px; | |||
position: absolute; | |||
margin-right: 3px; | |||
font-size: 20px; z-index: 100; | |||
} | |||
#options_tablist { | |||
padding: 0px 5px; | |||
left: 0px; | |||
width: 70px; | |||
top: 0px; | |||
bottom: 0px; | |||
height: 100%; | |||
border-right: 1px solid black; | |||
} | |||
.options_tab_icon { | |||
padding: 5px; | |||
color: black; | |||
} | |||
.options_tab_icon.active { | |||
color: red; | |||
} | |||
.options_tab_icon i { | |||
font-size: 20px; | |||
} | |||
.options_tab_icon div { | |||
font-size: 11px; | |||
} | |||
.options_tab { | |||
padding: 10px; | |||
position: absolute; | |||
top: 0px; bottom: 0px; | |||
left: 81px; right: 0px; | |||
text-align: left; | |||
font-size: 12px; | |||
} | |||
.options_tab h2 { | |||
text-align: center; | |||
margin-bottom: 5px; | |||
} | |||
.mobile-style #options_div { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
margin-top: 0px; | |||
} |