leftypol
/
leftypol
4
5
Fork 2
Code Issues 57 Pull Requests 1 Projects Releases Wiki Activity
Browse Source

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

pull/40/head
czaks 10 years ago
parent
ceaaae824a
commit
f7a015e7fe
5 changed files with 261 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      js/expand-video.js
  2. 126
      js/options.js
  3. 44
      js/options/general.js
  4. 22
      js/webm-settings.js
  5. 73
      stylesheets/style.css

3
js/expand-video.js
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
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
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);
});
}();

22
js/webm-settings.js
View File

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

73
stylesheets/style.css
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;
}

Write Preview
Loading…
Cancel
Save