1
0
mirror of https://github.com/vichan-devel/vichan.git synced 2024-11-12 01:50:48 +01:00

add user-options dialog functionality; port webm-settings to it; make a basic general settings applet; make it work on mobiles

This commit is contained in:
czaks 2014-09-20 06:18:37 +02:00
parent ceaaae824a
commit f7a015e7fe
5 changed files with 261 additions and 7 deletions

View File

@ -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);

126
js/options.js Normal file
View File

@ -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));
});
}();

44
js/options/general.js Normal file
View File

@ -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);
});
}();

View File

@ -36,15 +36,25 @@ function changeSetting(name, value) {
// Create settings menu
var settingsMenu = document.createElement("div");
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";

View File

@ -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;
}