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:
parent
ceaaae824a
commit
f7a015e7fe
@ -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
126
js/options.js
Normal 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
44
js/options/general.js
Normal 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);
|
||||
});
|
||||
|
||||
}();
|
@ -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";
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user